title: "HTML常用标签"
date: 2019-09-08T14:36:57+08:00

draft: false

HTML 常用标签

html 标签又叫做 html 元素，它分为块级元素和内联元素（也可以叫做行内元素）

块级元素(行元素)：块级元素是指本身属性为 display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局的搭建。

特点：

1. 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
   
2. 可以直接控制宽度、高度以及盒子模型的相关 css 属性
   
3. 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
   
4. 在不设置高度的情况下，块级元素的高度是它本身内容的高度
   

标签：

1. div：常用块级容器，也是 css layout 的主要标签
   
2. p：段落、放一段文字
   
3. h1~h6：标题（h1，网页中最重要的内容：logo 网站的标题；网页中普通的标题 一般用 h3 或者 h4、h5）
   
4. ul li： 每一项前面都有一个点（无序列表）
   
5. ol li：每一项前面都有对应的数字（有序列表）
   
6. dl：定义列表
   
7. dt：列表项目
   
8. dd：项目描述
   
9. table:表格
   
10. caption:caption
    
11. thead:表格的头部
    
12. tbody:表格的主体
    
13. tr:行
    
14. td:列 （普通的列，可以放在 tbody 下面）
    
15. th:列 （只放在 thead 的里面，文字默认加粗）
    
16. hr:分割线
    
17. form:表单
    

内联元素(行内元素):内联元素是指本身属性为 display:inline;的元素。因为它自身的特点，我们通常使用内联元素来进行文字、小图标（小结构）的搭建。

特点：

1. 和其他内联元素从左到右在一行显示
   
2. 不能直接控制宽度、高度以及盒子模型的相关 css 属性，但是直接设置内外边距的左右值是可以的
   
3. 内联元素的宽高是由本身内容的大小决定（文字、图片等）
   
4. 内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
   

标签:

1. span:通常放几个文字，或者小图标
   
2. a:超链接 自带下划线
   
3. b:加粗
   
4. strong:加粗强调
   
5. i:斜体
   
6. em:斜体强调
   
7. del:文档中已被删除的文本
   
8. br:强制换行
   
9. u:下划线
   
10. textarea:多行文本输入框
    
11. input:输入框
    
12. select:下拉列表
    
13. label:input 元素定义标注（标记）
    
14. img:图片
    
15. sub:下标
    
16. sup:上标
    
17. big:大字体文本
    
18. small:小字体文本
    

嵌套规则

• 块级元素 div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul ...
  
• 行内元素 span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var ...
  
  1. 块级元素与块级元素平级、内嵌元素与内嵌元素平级。
     
  2. 块级元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素。
     
  3. 有几个特殊的块级元素只能包含内联元素，不能再包含块级元素。如:h1~h6、p、dt
     
  4. 块级元素不能放在 p 标签里面。
     
  5. li 标签可以包含 div 标签，因为 li 和 div 标签都是装载内容的容器。
     

a 标签的用法

属性：

<a href="//google.com">google</a>
<a href="//google.com" target="_blank">google</a>

1. _blank:空白页面打开
   
2. _top:顶级窗口打开（所有的 iframe 是最上面那个页面打开）
   
3. _parent:当前链接所在的 iframe 上一层打开
   
4. _self:在自己这个地点打开默认值
   

• download 用法：下载那个网页，但很多浏览器不支持使用这个功能
  
• rel=noopener:防止一个 bug
  

路径：

• /a/b/c(绝对路径) 以及 a/b/c(相对路径)
  
• index.html 以及 ./index.html (文件名)
  

伪协议

• javascript:代码
  

<a href="javascript:alert(1);">javascript 伪协议</a>

• mailto:邮箱
  

<a href="mailto:xxxx@foxmail.com">发邮件给 xxx</a>

• tel:手机号
  

<a href="tel:xxxxxxxx">打电话给我</a>

img 标签的用法

标签用于插入图片

• alt 属性用来设定图片的文字说明
  

<img src="1.png" alt="图片说明" />

(图片下载失败时，浏览器会在图片位置，显示文字“示例图片”。)

• width 属性，height 属性:图片默认以原始大小插入网页，width 属性和 height 属性可以指定图片显示时的宽度和高度，单位是像素或百分比
  

图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。

<img src="1.png" width="400" height="300" />

• 可以放在 a 标签内部，使得图片变成一个可以点击的链接
  

<a href="index.html">
  <img src="1.png" />
</a>

table 标签的用法

• table:定义表格
  
• th:定义表格中的表头单元格
  
• tr:定义表格中的行
  
• td:定义表格中的单元
  

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th></th>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

其他感想

• input 标签
  

<input type="text" />
<input type="color" />
<input type="password" />
<input name="radio" />
<input name="gender" type="radio" />男 <input type="gender" type="radio" />女 >
<input type="checkbox" />唱 <input type="checkbox" />跳
<input type="checkbox" />舞 <input type="checkbox" />rap
<input type="file" multiple />
<input type="hidden" />

• textarea 标签
  

<textarea></textarea> <textarea style="resize:none;"></textarea>

• select 标签
  

<option value="">--请选择--</option>
<option value="1">星期一</option>
<option value="2">星期二</option>

作者：xiaoyy > 链接：https://juejin.im/post/5ac1f6ddf265da2373149dfd >
来源：掘金 >
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。