声明:本文是我学习B站“狂神说java”所做的笔记,上传至此只是为了方便,要想学习,请去关注这个宝藏男孩吧
HTML(Hyper Text Markup Language):超文本标记语言
超文本包括:文字、图片、音频、视频、动画等。
单独呈现的标签(空元素),如
DOCTYPE声明:告诉浏览器我们使用什么规范
title标签
meta标签
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="第一次写HTML">
<meta name="description" content="学习">
<title>我的第一个HTMLtitle>
head>
<body>
我的第一个网页
body>
html>
<h1>一级标签h1>
<h2>二级标签h2>
<h3>三级标签h3>
<h4>四级标签h4>
<h5>五级标签h5>
<h6>六级标签h6>
<p>两只老虎,两只老虎,p>
<p>跑得快,跑得快,p>
<p>一只没有眼睛,p>
<p>一只没有尾巴,p>
<p>真奇怪!真奇怪!。p>
两只老虎,两只老虎,<br/>
跑得快,跑得快,<br/>
一只没有眼睛,<br/>
一只没有尾巴,<br/>
真奇怪!真奇怪!。<br/>
<hr/>
<h1>字体标签h1>
粗体:<strong>I Love Youstrong>
斜体:<em>I Love Youem>
空格: <br/>
大于:><br/>
小于:<<br/>
版权:©<br/>
src:图片地址(必填)
相对路径:…/表示上一级目录
绝对路径
alt:图片加载失败时显示的文字(必填)
title:鼠标悬停文字
width=“1920” height=“1024”:图片的大小
<img src="../resources/img/1.jpg" alt="背景" title="悬停文字" width="1920" height="1024">
href:连接地址,跳转的地址(必填)
target:表示窗口在哪打开
_blank:在新标签中打开网页
_self:在自己的网页中打开
<a href="我的第一个网页.html" target="_blank">点击我跳转到我的第一个网页a>
<a href="http://www.baidu.com/" target="_parent">点击我跳转到百度a>
<br/>
<p><a href="我的第一个网页.html">
<img src="../resources/img/1.jpg" alt="点击我跳转到我的第一个网页" title="点击我跳转到我的第一个网页" width="500" height="300">
a>p>
锚链接
1.需要一个锚标记
2.跳转到标记
<a name="top">顶部a>
<a href="#down">回到顶部a>
···
···
···
<a href="#top">回到顶部a>
<a name="down">底部a>
功能性链接
邮件链接:mailto:邮箱
QQ链接:百度QQ推广获取
<a href="mailto:[email protected]">点击a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=935074243&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:935074243:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
a>
**块元素:**无论内容多少,该元素独占一行,如:p、h1-h6
**行内元素:**内容撑开度,左右都是行内元素的可以排在一行,如:a.strong.em
运用范围:考试、应答
<ol>
<li>Javali>
<li>Pythonli>
<li>C++li>
<li>运维li>
ol>
运用范围:导航、侧边栏
<ul>
<li>Javali>
<li>Pythonli>
<li>C++li>
<li>运维li>
ul>
dl:标签
dt:列表名称
dd:列表内容
运用范围:网站底部
<dl>
<dt>科目dt>
<dd>Javadd>
<dd>Pythondd>
<dd>C++dd>
<dd>运维dd>
<dt>位置dt>
<dd>西安dd>
<dd>甘肃dd>
<dd>新疆dd>
<dd>宁夏dd>
dl>
行:tr
列:td
border:分割线
<table border="1px">
<tr>
<td colspan="4">1-1td>
tr>
<tr>
<td rowspan="2">2-1td>
<td>2-2td>
<td>2-3td>
<td>2-4td>
tr>
<tr>
<td>3-1td>
<td>3-2td>
<td>3-3td>
tr>
table>
src:资源路径
controls:控制器,有它才能看到
autoplay:自动播放
<video src="../resources/video/【狂神说Java】HTML09:媒体元素.mp4" controls autoplay>video>
<audio src="../resources/audio/HTML09:媒体元素.m4a" controls autoplay>audio>
<header>
<h2>网页头部h2>
header>
<section>
<h2>网页主体h2>
section>
<footer>
<h2>网页脚部h2>
footer>
src:地址
width、height:宽度高度
name:框架标示名
<iframe src="" name="hello" width="1000px" height="500px">iframe>
<a href="https://space.bilibili.com/95256449/" target="hello">点击跳转a>
action:表单提交的位置,可以是网站,可以是一个请求处理地址
method:post,get 提交方式
get方式提交可以在URL中看到我们提交的信息,不安全,但高效
post方式提交,比较安全,传输大文件
<h1>注册h1>
<form action="我的第一个网页.html" method="get">
<p>名字:<input type="text" name="username">p>
<p>密码:<input type="password" name="password">p>
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
p>
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
p>
<input type="button" name="btn1" value="点击边长">
<p>国家:
<select name="列表名称">
<option value="china">中国option>
<option value="us">美国option>
<option value="yd">印度option>
<option value="rd" selected>瑞士option>
select>
p>
<p>
<input type="file" name="files">
<input type="button" value="upload">
p>
<p>
<textarea name="textarea" id="" cols="50" rows="10">文本内容textarea>
p>
<p>邮箱:
<input type="email" name="email">
p>
<p>url:
<input type="url" name="url">
p>
<p>number:
<input type="number" name="number" max="9" min="0" step="2">
p>
<p>音量:
<input type="range" min="0" max="100" step="2" name="voice">
p>
<p>搜索:
<input type="search" name="search">
p>
<p>
<input type="submit">
<input type="reset">
p>
form>
隐藏域:hidden
只读:readonly
禁用:disable
placeholder:提示信息
required:非空判断
pattern:正则表达式
正则表达式速查表:https://www.jb51.net/tools/regexsc.htm
<p>自定义邮箱:
<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
p>