常见标签(一)

body标签

• 网页身体标签，所有网页内容都在里面，存放各种标签

div盒子标签

• 一般划分一个区域，构建骨架思路会用到；用于存放文字、图片、内容等

p文字段落标签

• 为文本段落标签，可存放大段落文字

h1~h6标题标签

• h1到h6文字逐渐减小
• 书写规范，一个页面只允许出现一个h1，若重复出现网页会分不清主次内容，就像一篇作文只能有一个题目

b标签和strong标签

• 都是用于加粗文字的，二者区别是：strong标签是为了突出终重点

span文字包裹标签

• 包裹文字的标签
• p标签和span标签区别是：p标签会自动换行，span不会

br换行标签和hr分隔符标签

• br标签和hr标签都是单标签
• br标签是换行标签
• hr标签是分隔符标签

i标签和em标签

• 二者都是斜体标签，使文字呈现倾斜效果
• 区别：em标签更容易被浏览器识别

del删除标签

• 一般用于价格删除线

center居中标签

• 使文本居中

pre预格式化标签

• 被包围在pre标签中的文本通常会保留空格和换行符，而文本也会呈现出等宽字体

sup上标和sub下标

• 标签的内容将会在当前字符高度的一半为基准线的下、上方，字体会小一些

举例

我是段落p标签

我是h1标签

我是h3标签

我是h4标签

我是h5标签

我是span标签 我是span2标签
我是span3，被br强制换行了

---

我是正常的p标签

我被i标签改变

我被em标签改变，浏览器更容易识别

---

现价￥99 原价￥399，我是del 我是center居中对齐 H₂O CO²

---

你好 我是前端小白 我爱学习 我的空格和换行没有被p保留

你好   我是前端小白
      我爱学习
      我的空格和换行被pre保留
  

常见标签(二)

a标签(链接、超链接、锚点标签)

超链接标签

<a href="http:baidu.com/" name="baidu" target="_blank" title="首页" accessKey="s">百度一下</a>

• a标签（超链接标签）
• href：超链接需要来跳转的地址路径
• name：链接名称（一般用于锚点链接捆绑跳转的链接）
• title：链接的提示文字（鼠标悬停时的）
• target：链接目标窗口，链接在什么地方打开，网页位置。 _self:默认值，当前页面打开；_blank:在新窗口打开（点几下开几个页面）；_new:在新窗口打开（点几下都只开一个页面）
• accessKey：链接热键(accessKey的属性值设置哪个字母，用Alt+字母就可以自动跳转链接)

锚点链接

• 创建偶锚点链接，基本格式： <a name="锚点名称">链接对象名称</a>
• 建立链接，基本格式： <a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a>
• 锚点链接不仅可以在同一个页面中互跳，也可以跨页面互跳

空链接

• 空链接就是目标链接为空，用”#“表示，点击空链接后，页面仍然会停留在当前页面，格式：<a href="#">空链接</a>

图片标签

• 格式<img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">
• img 图片标签
• src图片地址属性：用于放图片地址
• alt：当图片路径出错时，alt文字提示就会显现出来
• title：图片的描述，鼠标放在图片上描述图片的文字就会显现出来
• width、height宽度和高度属性，属性值是数字，单位一般用px像素。（可在img图片标签中控制图片大小）

列表标签

无序列表标签<ul>

• 无序列表标签用<ul>标记，子元素是<li>标签列表项
• 可用快捷方式生成多个<li>子元素列表标签。如：ul>li3；li6。等就会生成几个li子列表项。
• 在<ul>标签里面，可用type属性修改子列表项<li>前面的黑点类型
• <ul type="disC"> 默认值：disc（实心圆）,空心点：circle ,实心方块 ：square ,不显示符号none
  代码演示
  <ul> <li>实心圆</li> <li>111</li> <li>222</li> </ul>
<ul type="circle"> <li>空心圆</li> <li>111</li> <li>222</li> </ul>

有序列表标签<ol>

• 有序列表标签用<ol>标记，子元素是<li>标签列表项
• 通过type属性修改排序类型：默认是阿拉伯数字1开始排序
  代码演示
  
  1. 000
  2. 111
  3. 222
  
  
  1. 000
  2. 111
  3. 222
  
  
  1. 000
  2. 111
  3. 222
  
  <ol> <li>000</li> <li>111</li> <li>222</li> </ol>
<ol type="a"> <li>000</li> <li>111</li> <li>222</li> </ol>
<ol type="A"> <li>000</li> <li>111</li> <li>222</li> </ol>

使有序列表前面无符号显示

• 有序列表顾名思义就是要有顺序，如果非要有序列表没有顺序的话，它是不支持type属性的值为none的。那么如果硬要让有序列表前面不显示符号，可以给它加一个list-style的样式，属性值为noe