HTML常见标签，可替换元素，全局属性

一、常见标签

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一起使用，

//&lt是HTML实体，表示小于号，&gt也是html实体，表示大于号
<pre>
    <code>
      &lt;div&gt;
        &lt;div&gt;  hello &lt;/div&gt;
      &lt;/div&gt;
    </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