HTML常用标签
一、标题标签: h1-h6(只到h6)
代码:
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
<h7>h7标签</h7>
<h8>h8标签</h8>
运行结果：
h1标签
h2标签
h3标签
h4标签
h5标签
h6标签
h7标签 h8标签
二、段落标签：p
代码:
<body>
<p>这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个
是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签
是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签
是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签
是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签;</p>
<p>这个是段落标签</p>
<p>这个是段落标签</p>
</body>
运行结果
这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签;
这个是段落标签
这个是段落标签
三、文档的横线标签：hr
代码
<p>这个是段落标签</p>
<hr>
<p>这个是段落标签</p>
运行结果
这个是段落标签
这个是段落标签
四、文本修饰
1标签
- 斜体：em
- 上标文本：sub
- 下标文本：sup
2、代码
<p>
文本内容
<strong>文本内容</strong>
<em>文本内容</em>
文本内容
<sub>文本内容</sub>
文本内容
sup>文本内容</sup>
<del>文本内容</del>
<ins>文本内容</ins>
</p>
3、运行结果
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容 sup>文本内容
文本内容
文本内容
4、文本+css
五、超链接标签：a
1、属性href:跳转到URL（web地址）界面/标签位置
(1)绝对路径：
一个点：./ 当前路径
两个点：…/ 上一级路径
(2)
相对路径：从盘符开始查找
2、target:目标窗口打开方式
- _self:(默认)：当前页显示
- _blank:新页面显示
- _top:
- _parent:
- List item
4、a+CSS
(1)a标签去除下划线：在css-style中加入：【text-decoration: none;】语句；
（2）状态
a:link超链接的默认样式（蓝色）
a:visited:已经访问过的样式（紫色）
a:hover鼠标悬停的样式
a:active:鼠标左键激活样式（红色）
5、案例 ：
a标签应用
（1）点击标签跳转界面
（2）瞄点链接：跳到指定标签位置（回到顶部按钮）
六、图像标签：img
(1)绝对路径：
一个点：./ 当前路径
两个点：…/ 上一级路径
(2)
相对路径：从盘符开始查找
七、列表标签：(可以无限嵌套)
1、有序列表
- 容器:ul
- 具体项:li
2、无序列表
- 容器：ol
- 具体项:li
3、问题：如何去除列表装饰
4、案例
八、表格标签：
1、表格的容器 table
属性
- border:表格边框
- cellpadding:单元格内空间
- cellspacing:单元格与单元格空间
2、表格标题 caption
3、表头 th
4、行 tr
5、单元格 td
属性：
- rowspan:合并行
- colspan:合并列
6、案例
<table border="1" cellpadding="10px" cellspacing="20px">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>出生日期</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>12</td>
<td>xxx</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>12</td>
<td rowspan="2">xxx</td>
</tr>
<tr>
<td>张三</td>
<td colspan="2">女</td>
</tr>
</table>
九、表单标签
1、表单容器 form
- name:表单名称
- method:提交方式【post/get】
- action:提交地址
-
target:打开方式
补充：
post：把表单数据发送给服务器，主要 用于提交敏感数据，如用户名与密码等。
get：【默认】表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。
2、文本输入控件
(1)单行文本输入框input type=text
(2)密码文本输入框 input type=password
属性：
value:默认值
size:文本框长度
maxlength:最多输入字符数
（3）多行文本框 textarea
属性：
rows:行数
cols:列数
value取值
3、 单选按钮 、复选框
（1）单选按钮：input type=radio
属性
name:组名(组名相同的才同一批)
value:值
checked:被选中
disabled：禁止使用
<form action="">
<p>name:组名相同实现单选</p>
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex">女
<p>name:组名不相同实现单选</p>
<input type="radio" value="1" name="sex1">男
<input type="radio" value="2" name="sex2">女
<p>checked默认选中</p>
<input type="radio" value="1" name="sex3" checked>男
<input type="radio" value="2" name="sex3">女
<p>disabled禁止选中</p>
<input type="radio" value="1" name="sex4" disabled>男
<input type="radio" value="2" name="sex4" disabled>女
</form>
（2）多选框：input type=checkbox
属性
naem:组名
value:值
checked:被选中
disabled：禁止使用
<form action="">
爱好：
<input type="checkbox" value="1">绘画
<input type="checkbox" value="2">书法
<input type="checkbox" value="3">运动
<input type="checkbox" value="4">阅读
<input type="checkbox" value="5" checked>阅读（默认选中）
<input type="checkbox" value="6" disabled>阅读（禁止选中）
</form>
4、下拉选择框和文件选择框
(1)下拉选择框
select标签的属性
multiple:设置可以多选
size:显示几个列表项
option标签属性
selected:是否被选中
value:选项值
<p>只能单选</p>
<select name="" id="">
<option value="1">内容1</option>
<option value="2">内容2</option>
<option value="3">内容3</option>
<option value="4">内容4</option>
<option value="5">内容5</option>
</select>
<p>select标签里添加multiple属性实现展示多个option内容</p>
<select name="" id="" multiple>
<option value="1">内容1</option>
<option value="2">内容2</option>
<option value="3">内容3</option>
<option value="4">内容4</option>
<option value="5">内容5</option>
</select>
<p>select标签里添加multiple属性实现展示多个option内容加size实现option展示个数</p>
<select name="" id="" multiple size="2">
<option value="1">内容1</option>
<option value="2">内容2</option>
<option value="3">内容3</option>
<option value="4">内容4</option>
<option value="5">内容5</option>
</select>
<p>option标签加selected则这一项默认被选中</p>
<select name="" id="" multiple >
<option value="1">内容1</option>
<option value="2" selected>内容2</option>
<option value="3">内容3</option>
<option value="4" >内容4</option>
<option value="5">内容5</option>
</select>
(2)文件选择框(文件上传)
input type=file
<form action="">
上传文件：
<input type="file">
</form>
5、按钮
（1）普通按钮 input type=button value=”指定按钮上的文字” （一般与JavaScript配合使用）
（2）提交按钮 input type=submit value=”指定按钮上的文字”（把数据提交到服务器）
（3）重置按钮 input type=reset （清除用户在表单区域内的内容）
<form action="">
<input type="button" value="普通按钮">
<br>
<input type="submit" value="提交按钮">
<br>
<input type="text" value="">
<br>
<input type="reset">
</form>
（4）button标签
<button>按钮</button>
6、数字框
input type=”number”属性
（1）Max=“number”:允许最大数值
（2）Min=“numer”:允许最小数值
（3）Step=“numer”:数字间隔
（4）valur=“numer”:默认值
<form action="">
<input type="number" max="10" min="1" step="2" value="0">
</form>
7、日期选择器
<form action="">
<!-- 选取日、月、年 -->
<input type="date">
<br>
<!-- 选取月、年 -->
<input type="month">
<br>
<!-- 选取周、年 -->
<input type="week">
<br>
<!-- 选取时间（小时、分钟） -->
<input type="time">
<br>
<!-- 选取时间、日、月、年（UTC时间） -->
<input type="datatime">
<br>
<!-- 选取时间、日、月、年本地时间 -->
<input type="Datatime-local">
</form>
10、电话号码框
<input type="tel" name="" id="">
11、拾色器
<input type="color" name="" id="">
9、补充（不常用）
（1）数据列表 –datalist元素
<!-- datalist标签的id名要和绑定的input的list属性命名一致 input的type="url" -->
请输入网址：<input type="url" list="url_list">
<datalist id="url_list">
<option value="https://www.iqiyi.com/?vfm=f_479_dbm&fv=82351df7556c4185">爱奇艺</option>
<option value="https://ai.taobao.com/?pid=mm_119961239_82150369_109217850080">淘宝</option>
</datalist>
（2）密钥生产器–keygen元素
<请选择加密强度</p>
<keygen name="security" />
（3）输出结果–output元素：用于不同类型的输出
（4）输入Email:
十、div和span标签