--- 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 标签的用法 ### 属性： ```html google google ``` 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:代码 ```javascript javascript 伪协议 ``` - mailto:邮箱 ```html 发邮件给 xxx ``` - tel:手机号 ```html 打电话给我 ``` ## img 标签的用法 ### 标签用于插入图片 - alt 属性用来设定图片的文字说明 ```html 图片说明

``` (图片下载失败时，浏览器会在图片位置，显示文字“示例图片”。) - width 属性，height 属性:图片默认以原始大小插入网页，width 属性和 height 属性可以指定图片显示时的宽度和高度，单位是像素或百分比图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。 ```html

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

``` ## table 标签的用法 - table:定义表格 - th:定义表格中的表头单元格 - tr:定义表格中的行 - td:定义表格中的单元 ```html

``` ## 其他感想 - input 标签 ```html 男女 > 唱跳舞 rap ``` - textarea 标签 ```html ``` - select 标签 ```html ``` > 作者：xiaoyy > 链接：https://juejin.im/post/5ac1f6ddf265da2373149dfd > > 来源：掘金 > > 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。