HTML常用标签
回复数(0) 浏览数(20)
{{topic.upvote_count || 0}} 编辑 回复

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 >
来源:掘金 >
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

{{topic.upvote_count || 0}}

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 >
来源:掘金 >
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

20
回复 编辑