HTML常用标签
HTML常用标签:
1. h系列 : 标题标签 h1~h6 双标签 无默认属性 块级 默认margin属性
一级标题
我是h1
二级标题
我是h2
三级标题
我是h3
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/190b2535eb6b31d3891457dfd30e1ecf.webp?x-image-process=image/format,png)
2. hr 分割线 块级 单标签 默认margin,border属性
3. p标签 : 段落 双标签 块级p标签内不能嵌套块级标签,p标签会分开并且自动补全 默认margin属性
123123
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/53d5e380d24e3762875c5df4ab61b881.webp?x-image-process=image/format,png)
4.列表标签 : 双标签 组合标签 块级
4.1 有序列表 : ol (默认:margin属性list-style-type: decimal;-webkit-padding-start: 40px; )
有序列表区域 : li 列表项 (默认:display: list-item;text-align: -webkit-match-parent;)
ol 与 li不能单独使用,ol与li之间不可以出现其他标签
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/afc60b7cb60feb15946168ba23a05cd8.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/3451795e328547e169bd9d2198444fbb.webp?x-image-process=image/format,png)
4.2 无序列表:ul (默认:marginlist-style-type: disc; -webkit-padding-start: 40px;)
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/1bf091ebf988fb92b8a4ac2b6addf6a1.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/381a6da4bbadaa4f578389e23966dda4.webp?x-image-process=image/format,png)
4.3字典列表:dl (默认:margin)
dd:-webkit-padding-start: 40px;
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/925372c34a0500244e9ae560e6ce3cfc.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/e778aa3c60c75ff16b35ceb242d48f6f.webp?x-image-process=image/format,png)
5. a : 超链接 双标签 行级 (默认:color: -webkit-link; cursor: auto; text-decoration: underline;)
href="" 跳转地址 必须的 而且不能为空
title="" 提示信息
target="" 跳转方式 _blank 新窗口打开
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/e9c827be7ec54614985216e83efc8d0e.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/f38bbbfd784442f5ae50272655a52080.webp?x-image-process=image/format,png)
超链接标签的四种状态:伪类设置
link状态:链接未浏览状态
visited状态 : 链接已被访问过
hover状态 : 鼠标悬浮在链接上时的状态
active状态 : 鼠标点击未松开时的状态
hash 哈希 : #会回到顶部 | ### 不会回到顶部
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/303bfa06f2fa8c1250810cc8ed9f09f8.webp?x-image-process=image/format,png)
6. 图片 img 单标签 比如特殊,虽然为行级,但是可以设置尺寸
支持宽高属性 不需要加单位 一般宽高只设置一个
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/a45d7fb81a04ce25be7b081368ed1b36.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/45a011c8963e7256ef340a82ecff6929.webp?x-image-process=image/format,png)
7.粗体加重,作用于内容强调 strong 双标签 行级 b标签(默认:font-weight: bold;)
![](https://i-blog.csdnimg.cn/blog_migrate/3e4a45f989c46d1c2cd49a9b59cf11a0.webp?x-image-process=image/format,png)
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/8677b8867e8585d3477bbe3b8dbdd348.webp?x-image-process=image/format,png)
8. 斜体,作用于内容强调 em 双标签 行级 i (默认:font-style: italic;)
![](https://i-blog.csdnimg.cn/blog_migrate/83bc3fc519eedb9f37064429a88e2661.webp?x-image-process=image/format,png)
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/c6396f26609cb29ba0595b5ed37c51b9.webp?x-image-process=image/format,png)
9. big 大字号 small标签 小字号 双标签 行级(相对于)(默认:font-size:larger / font-size:smaller)
![](https://i-blog.csdnimg.cn/blog_migrate/7f8a83d528f0b7dcc5e0653eb68f9358.webp?x-image-process=image/format,png)
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/edbdf800aff50f3340d1f17a743762e7.webp?x-image-process=image/format,png)
10.sub(偏下) sup(偏上) del(删除横线)
sub:(默认:vertical-align: sub;font-size: smaller;)
sup:(默认:vertical-align: super;font-size: smaller;)
del: (默认:text-decoration: line-through;)
![](https://i-blog.csdnimg.cn/blog_migrate/3ab76e910456228df835da64b0739214.webp?x-image-process=image/format,png)
实现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/79e77995c6d732f7fcd4948ecf675d99.webp?x-image-process=image/format,png)