HTML常见标签及分类

HTML常见标签

1.HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：
①.在没有CSS的情况下，页面也能呈现出很好的内容结构
②.有利于SEO，让搜索引擎爬虫更好的理解网页
③.方便其他设备解析（如屏幕阅读器、盲人阅读器等）
④.便于团队开发与维护

2.标题与段落
标题：<h1></h1> <h2></h2>..........<h6></h6>
h1是网页中最重要（最大）的标题标签，每一个网页、每一个html文件中只能有一个h1。 h5、h6不经常用
段落：<p></p>

3.文本修饰标签
<strong></strong>：强调标签，可以给文本加粗

<strong>需要强调的文本</strong>

<em></em>：强调标签，可以给文本加斜体（没有strong强调的那么强烈）

<em>需要强调的文本</em>

<sup></sup>上标文本 <sub></sub>下标文本
a²+b²=c² ： a ² + b² = c²
H2O： H₂O
<del></del>:删除文本 <ins></ins>添加文本
扩展<b></b> <i></i>

4.br和hr
br ：单标签，让文本换行
hr : 单标签，水平线

5.图片标签与图片属性
<img> ：单标签
src=“” ：图片的链接地址
alt=“” ：当图片出现问题的时候，会产生提示文字（提升用户体验）
width=“400” height=“100” ：单位是像素（px）
6.链接
<a></a> ：双标签
href=“” ：网址链接地址
target=“”：跳转的方式，默认：当前窗口中 _self 新窗口打开 _blank
<base> ：单标签 可以改变a标签的默认行为

7.锚点
<a></a>链接，可以在当前页面进行跳转，不去跳转新页面。

8.特殊符号
&起是，解决一下三个问题
①.空格 &nbps;
②.html标签的问题 <：< >：>
③.特殊符号的问题 ®：® ©：©

9.列表标签
三大类：
①.无序列表
<ul></ul>：双标签 --> 列表最外层容器
<li></li> ：双标签–> 列表的子项

<ul>
<li></li>
<li></li>
<li></li>
</ul>

注意（重点）：ul和li之间不能添加其他标签
快捷创建：ul>li
②.有序列表
列表的最外层容器、列表项
有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表
<ol></ol> ：双标签
<li></li> ： 双标签
③.定义列表
带有描述性标题的列表

<dl>
<dt></dt>：描述标题
<dd></dd>：描述内容
</dl>

标签分类

按类型分
block : 块
div ul ol li dl dd dt p h1 h2 …h6
特点：
①.上下排列 独占一行
②.块支持CSS中的所有样式
③当块不写宽度的时候，默认的宽度是父容器的宽
④.块永远都是一个矩形区域

inline : 内联
span a strong em img（支持宽高，因为他还是一个替换元素）
特点：
①.内联是左右排列的，内联必须在一起
②.有些样式是不支持的 width height margin（一部分） padding（一部分）
③.内联元素的宽度是由内容决定的
④.不一定总是矩形区域
⑤两个内联元素之间会有一定的空隙
一般情况下要不要解决空隙问题。 一般情况下是不需要的，因为一般我们
都是用块来做布局的，用内联元素来做文本修饰的
解决：①.让内联元素写到一行
②.给父容器设置font-size:0

inline-block : 内联块
input select
按显示分
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
img input
非替换元素：将内容直接告诉浏览器，将其显示出来

<div>aaaaa</div>

显示框类型
display
block
inline
inline-block
none 不显示标签 类似于 border-right:none text-decoration:none
注：display:none 与 visibility:hidden 区别 :后者是占位的