一、 常见标签
1. 标题标签: <h1~h6>，主要设置标题，字体依次由大到小。
标题标签<h1~h6>
2. 列表标签
-
<ol>+<li>(ordered list+list item):有序列表
有序列表<ol>+<li>
-
<ul>+<li>(unordered list +list +item):无序列表
无序列表<ul>+<li>
-
<dl>+<dt>+<dd>(description list + term +data):自定义列表
自定义列表<dl>+<dt>+<dd>
3. 段落标签
<p>:包裹文段
段落<p>
4. 行标签
<span>：用于组合行内元素，方便定位设置样式
行标签<span>
5. 块标签
<div>:用于划分一个区块，常用于页面布局
块标签div
6. 格式标签
-
<pre>(preview):展示有格式的内容，在html里面多个空白字符也会只合并成一个，可以和code一起使用，
//<是HTML实体，表示小于号，>也是html实体，表示大于号
<pre>
<code>
<div>
<div> hello </div>
</div>
</code>
</pre>
格式内容
-
<hr>：表示分割线，是自闭合标签
分割线<hr>
-
<br>(break):表示换行
换行<br>
7. 字体突出标签
-
<mark>:标记文段，标明该文段出错或者做标记。
标记mark
-
<em>(emphasis): 选择一部分的文字表示强调，语气比较轻，标记的文字会变成斜体，后面也可以用css选中em来单独设置样式。
强调em
-
<strong>:强调性更强,有很多表现形式可以表示强调，语气比<em>强，字体加粗。
强调strong
-
<b>(bold):只是表示粗体
粗体<b>
注意：
-
Bold和Strong有什么区别：
Bold是一个物理状态，只是表示一个粗体，没有其他的意思。
Strong是一个逻辑状态，可以用很多形式来表示强调，比如说改变文字的颜色或者字体的大小，或者加下划线或者表达其他样式，不仅限加粗。
-
Emphasis和Strong区别：
不同点：Strong比Emphasisi强调性更强,Strong更多的是表示警告，非常重要，而Emphasis只是改变一句话的意思，语气比较弱。
相同点：Strong和Emphasis都可以分别通过嵌套来增加相对重要性或强调重点。
8. 引用标签
blockquote:表示引用
//引用
<blockquote>"求知若饥 虚心似谷"</blockquote>
引用blockquote
二、 重点标签
1. iframe
- `<iframe>作用：能够将另一个HTML页面嵌入到当前页面中。
<iframe width="200" height="100" src="//baidu/com" referrepolicy="no-referrer" sandbox="allow-scripts">
- iframe属性
① width: 高度
② height: 高度
③ src：嵌套页面的地址
④referrepolicy：向服务器发送嵌套的请求注明嵌套地址来源
<body>
<h1>百度</h1>
<iframe src="http://baidu.com" frameborder="0"></iframe>
</body>
页面嵌入
2. 超链接：
<a>主要格式：<a href="链接地址" target="以什么方式打开">可以点击的文字</a>
- 超链接作用：跳转外部页面、跳转内部锚点、跳转到邮箱或电话
-
超链接属性：href、target、download、rel=noopener
a链接
2.1 href的取值
-
网址
https://baidu.com
http://baidu.com
//jirengu.com(错误写法） -
路径
/a/b/c以及a/b/c
a.png或者./a.png -
伪协议
javascript: void 0:没有跳转效果；
mailto: hunger@jirengu.com：点击就会调取系统邮箱发送邮件；
tel:1234567890：在手机就会自动打开拨号盘，写入号码，直接点拨号即可。 -
锚点，指定跳转，直接定位到指定位置
①href="#xxx" :跳转到xxx
锚点
锚点
②href="#" ：跳转到页面开头
image.png
2.2 target属性：主要是指定和何处显示链接的 资源
- _blank:新窗口加载
- _self:在当前页面加载，默认属性
- _parent:在当前页面框架的父级框架加载，如果父级不存在就在当前页面加载
- top:在当前页面框架的最顶级框架加载，如果最顶级框架不存在就在当前页面加载。
2.3 dowmload属性
作用：下载url而不是打开页面
注意：
- 此属性适用于同源URL，会提示用户保存为本地文件；
- 如果此属性有值，用值作为下载文件名。
//直接跳转到下载
<a href="http://js.jirengu.com/wocugafomo/1/edit" download>下载</a>
下载
3. table
3.1相关标签
- table：表格
- thead：表格头部
- tbody: 表格中部
- tfoot: 表格尾部
- tr: 行
- td: 列
- colgroup: 归类
- caption：标题
3.2 属性
colspan:合并表格
3.3 边框合并样式
border-collapse:collapse
表格<table>
4. 图片标签
<img>:可以插入图片
-
用法：
<img src="图片地址" alt="加载失败提示"> -
属性：alt/width/height/src
①src:图片地址
②width和height：可以设置图片的宽高,一般在css设置。
③alt有2个作用：当图片加载失败的时候，会有提示作用；让读屏器可以识别图片内容。 -
特性：是可替换元素
图片img
PS：可替换元素
- 可替换元素展现效果不是由css控制，是一种外部对象，对于外观的渲染独立于css。
- 典型的可替换元素
<iframe>
<video>
<embed>
<img>
三、全局属性 ：
所有标签都共有的属性
1. class
标记标签，表示定位不同元素可以拥有相同的class,一个元素可以拥有多个class（一般情况下都是可以使用）
2. id
标记标签，表示定位，表示独一无二的身份，（页面大区块建议使用）
3. style:可以设置行内样式，
//设置css样式
<p style="color: blue; font-size: 40px">hello</p>
设置css样式
4. title:鼠标放在所选区域就会有提示效果，一般是a链接使用，一般是单行，
p title="hello world" style="color: blue; font-size: 40px">hello</p>
提示效果
5. contenteditable:可以编辑效果，在展示情况下可以同时编辑。
//可以一边展示，一边编辑
<p title="hello world" style="color: blue; font-size: 40px;" contenteditable>hello</p>
编辑效果
6. tabindex：+table键可以切换,切换的时候是按照序号高-低切换，-1不切换，0是最后
//+tab键可以切换输入框，切换序号高-低，-1不切换，0是最后
<input type="text" tabindex=1>
<input type="text" tabindex=3>
<input type="text" tabindex=2>
<input type="text"tabindex=-1>
切换顺序：1-2-3
7. hidden:让元素隐藏，后面不需要等于任何值都会生效
//在后面直接添加hidden即可隐藏，不需要等于值
<input type="text" tabindex=1 hidden>
8. data-属性: 自定义属性，可以暂存一些数据在标签上
参考：
饥人谷课件
https://www.jianshu.com/p/590e095700ac
网友评论