简介

1 .一个行内元素只占据他对应标签的边框所包含的空间。
2 .一般情况，行内元素只能包含数据和其他行内元素,而块级元素可以包含行内元素和其他块级元素
3 .

行内元素列表

b

1 .提醒相关，吸引读者的注意到该元素的内容上，这元素过去被认为是粗体元素，并且大多数浏览器仍将文字显示为粗体。
2 .实际上显示粗体的正确方案是css的font-weight元素
3 .属性-只包含全局属性
4 .使用场景

1 .摘要中的关键字，评论中的产品名称或者其他典型的应该加粗显示的文字，除此之外没有其他强调
2 .不要将b与strong元素，em，mark元素混淆。
3 .strong表示某些重要性的文本，em强调文本，而mark元素表示某些相关性的文本
4 .b元素不传达这样的特殊语义信息，仅仅在没有合适的元素时使用他
5 .不要使用b来做副标题。如果要表示标题，使用h1-h6这些，此外，可以通过样式表来改变这些元素的默认样式，并不一定都是粗体
6 .之前b元素的意思就是让文本变成粗体，但是h4开始，不赞成标签表示带有样式信息的操作，于是b元素的含义发生了变化
7 .如果不是出于语义目的而使用b元素，那么让文本显示粗体最好的方式是使用css的font-weight属性设置.

big/small

1 .big会使字体加大一号，从small升级到medium，从large加到x-large，最大不会超过浏览器的字体
2 .他是纯显示的，在html5中已经被删除，不应该在使用，所有仅仅是显示的元素，全部都用css属性来实现.
3 .也就是说在理解一个html元素，不能从css样式这里了，而是要从别的方面，css方面这里要完全交给css来实现

i

1 .表现某些原因需要区分普通文本的一系列文本。例如技术术语，外文短语或者小说中任务的思想活动。他的内容通常以斜体显示
2 .有点面临和big一样的窘境.即将要消失
3 .较早的html版本中，i标签只是一个用于将文本显示为斜体的标示性元素
4 .也就是说在初期，css没有发展起来的时候，有一些html标签承担了这些功能，现在css发展起来了，这些也该消失了

abbr

1 .html缩写元素用于代表缩写，并且可以通过可选的title属性提供完成的描述

image.png

2 .指针覆盖上去就能展示出来
3 .使用场景

1 .当你相位缩写在文档流外提供一段扩展或者定义的时候，abbr设置一个合适的title
2 .在定义一个读者可能不太熟悉的缩写的时候，使用abbr和title属性或内联的文本来表现这个术语
3 .当文本中出现需要进行语义上的标注的缩写词时，abbr元素可用于一次将其作用样式和脚本

4 .这个是和def元素搭配起来使用的
5 .但是这种操作已经被组件代替了
6 .看起来这俩元素不能使用css样式，感觉很鸡肋啊

cite

1 .表示一个作品的引用，且必须包含这个作品的标题
2 .不可以出现人名
3 .使用场景

1 .表示一本书，一张纸，一篇散文，一首诗，一种音乐，一篇帖子
2 .在任何情况下，都不能使用名字
3 .这里的字体默认是斜体，可以使用css的font-style属性重新进行设置

code

1 .表示一段代码

samp

1 . 表示一段计算机的输出

var

1 .表示数学表达式或编程上下文中的变量名称.

image.png

em

1 .表示用户需要着重阅读的内容，比如游戏的规则说明。
2 .em元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读
3 .通常会被显示为斜体，但是他并不是为了这个来的,如果需要显示这样，请使用css样式
4 .也就是说html元素应该是完全为了语义化而组织起来的，要表现，去找css样式。
5 .一个 <em> 的例子可能是："Just do it already!"，或："We had to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调。
6 .这个通常会和i混淆

kdb

image.png

1 .好像只是在游戏教程，比如fps游戏里面见到过

strong

1 .表示文本十分重要，一般用粗体表示
2 .strong vs blod

1 .strong是一个逻辑状态，会分离内容和表现形式。在此基础上，你可以把文字渲染成红色，使用其他大小的字体，带有下划线的样式
2 .但是blod是一个物理态，没有区分表现形式和内容，不应该让他去做除了加粗文本以外的任何施行

3 .em标签用于加强一个句子里面的但某些单词的重要性

比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>"，分别强调喜欢和胡萝卜

4 .strong用于将强整个句子的重要性
5 .两者都可以通过嵌套来增加相对重要性或强调重点

a

1 .a聚焦的时候，按下回车键就会激活。这里应该是键盘操作的时候吧
2 .download属性(html5)

1 .这个属性可以让浏览器下载url代表的东西而不是导航到他,因此会提示用户将其保存为本地文件
2 .如果这个属性有一个值，那么这个值将在下载保存过程中作为预填充的文件名
3 .这个属性仅仅适用于同源url
4 .虽然HTTP url必须要位于同一源中，可以视同blob:URL和data:URL来方便用户下载使用js生成的内容
5 .如果http头中的content-disposition属性赋予了一个不同于此属性的文件名，那么优先使用这个属性.
var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);
//download属性将canvas保存为PNG格式

3 .href：包含超链接指向的URL或url片段

1 .url片段是哈希标志#前面的名称，哈希标志则指定了当前文档中的内部目标位置
2 .URL不限于web http的文档，也可以使用浏览器支持的任何协议,比如ftp，mail,file
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

3 .可以使用href="#top"或者href="#"链接返回到页面顶部
4 .创建电话链接帮助用户查看连接到手机的网络文档和笔记本电脑

4 .ping:包含一个空格分隔的url列表，当跟随超链接时，将由浏览器发送带有正文PING的post请求，用于跟踪
5 .rel:指定目标对象到链接对象的关系
6 .target:该属性表示了在何处显示链接的资源

1 ._self:当前页面加载
2 ._blank:新窗口打开
3 ._parent:上一级的iframe钟展示，没有就是当前页面
4 ._top:用于在最外层iframe中展示，没有就是当前页面

7 .一些废弃的属性

1 .shape:此属性用于定义一个可选的超链接相关的一个数字来创建图像映射区域，该属性的值是圆
2 .使用map属性搭配image元素来定义热点，而不是使用形状属性

8 .clicking以及focus点击一个a标签是否出现focus取决于浏览器和操作系统

image.png

bdo

1 .bdo元素一般用于把一段文本的方向规定为与周围文本的自然方向相反的方向。方向由必需属性dir指定。bdo元素很少使用，只用于某些多语言文档。在这种文档中，可能有某一段文本使用的语言的阅读方式与文档中其他部分使用的语言的阅读方式不同。
2 .dir属性规定bdo元素内的文本方向
3 .ltr:左到右
4 .rtl:右到左

image.png

img

1 .将一份图像嵌入文档
2 .alt:属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例也就是说这个如，网络错误、内容被屏蔽或链接过期时。
3 .全部的图片格式，之前好像还有点没找齐

1 .apng
2 .avif
3 .bmp
4 .gif
5 .ico
6 .jpeg
7 .jpg
8 .png
9 .svg
10 .tiff
11 .webp

4 .图像加载错误，至少要设置一个onerror事件处理器来处理error事件
···
1 .src地址错误,为空或者null
2 .图片出于某些原因损坏了，无法加载
3 .图像的元数据被破坏了，无法检索他的分辨率，宽高，而且在img元素属性中没有指定宽度和高度
4 .不支持这种格式的图片
5 .这里也就是说，并不一定是网址的问题
···
5 .decoding:为浏览器提供图像解码方式的提醒

1 .sync:同步解码图像，实现与其他内容的显示相互斥的院子显示.也就是说图像的解码将是一个原子操作，在完成解码之前，不会被其他内容的显示而打断，因此其他内容的显示会被延迟
2 .async:异步解码图像，以减少其他内容的显示延迟。
3 .auto:不指定解码方式，由浏览器选择

6 .ismap:表示图像是否是服务端map的一部分，如果是，那么点击图片的精准坐标会被发送到服务器

map

1 .map和area属性一起来创造一个图片映射。点击不同的地方，返回不同的链接区域

<map name="example-map-1">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" />
</map>

2 .name值是必须的，name不能为空或者带有空格，不能和文档中其他map元素的值相同，如果id也添加，那么id和name必须一致

Object

1 .HTML嵌入对象元素，表示引入一个外部资源，这个资源可以是一张图片，一个嵌入的浏览上下文，也可以是一个插件所使用的资源。
2 .看起来似乎是插入了块级元素，他自己也还是
3 .属性

1 .data:一个合法的URL作为资源的地址。
2 .height
3 .name
4 .type：data指定的资源的MIME类型，需要为data和type至少一个设置值

<!-- Embed a flash movie -->
<object data="move.swf" type="application/x-shockwave-flash"></object>

<!-- Embed a flash movie with parameters -->
<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

q

1 .表示一个封闭的并且是短的行内引用的文本。比如某人说的一句话
2 .q标签里面不要使用换行符
3 .长文本使用blockquote标签

image.png

//q就是一句话左右两边的双引号
4 .cite:这个属性值是URL，意在指出被引用的文本的源文档或源信息.

span

sub,sup

1 .sub元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示的更低和更小
2 .又有点html元素来当css属性使用的
3 .用法注解

1 .应该只用于排版目的，也就是改变文本的位置会改变含义，比如化学符号，数学公式
2 .不能用于样式上的目的，比如 LaTeX 的样式这种产品作用，这个时候要用vertical-align属性sub来实现

4 .sup同理,如果仅仅是表现的话，vertical-align:super属性

script

1 .这个js脚本竟然也属于内联元素
2 .<script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码
3 .这个竟然也是内联元素。而且除了支持js脚本，还支持其他语言，比如GLSL着色器语言
4 .async:

1 .普通脚本，如果存在async属性，那么普通脚本会被并行请求，并尽快解析和执行。也就是会一边渲染html文档，一边下载元素，下载完毕之后立即中断渲染，执行下载的脚本。脚本执行完毕之后在继续渲染
2 .async是乱序执行，对他来说脚本的加载和执行顺序是紧挨着的，不管声明的顺序是如何，只要加载完毕就会立即执行，
3 .async对于应用脚本的用户不大，他完全不考虑依赖，他对于那些可以不依赖任何脚本或者不被任何脚本依赖的脚本是非常合适的，比如google analytics

5 .script脚本加载，正常的时候浏览器遇到script脚本的时候，会停下当前的html渲染。然后立即加载，去目标地址下载这个文件，下载完毕后执行。然后继续渲染后面的文档元素。
6 .defer:下载脚本和渲染文档同步进行，这里和async相同，不一样的是下载完毕，defer属性的脚本会等所有元素解析完成后，DomContentLoaded事件触发之前完成

image.png

1 .有defer属性的脚本会阻止DOMContentloaded事件，直到脚本被加载并且解析完成。

7 .defer显然是最接近于于我们对于应用脚本的加载和执行要求的。defer是按照加载顺序执行脚本的
8 .type:定义script元素包含或src引用的脚本语言。属性的值为MIME类型，支持有

1 .text/javascript
2 .text/ecmascript
3 .application/javascript
4 .application/camascript
5 .module:代码被当做js模块

9 .text:和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性在节点插入到 DOM 之后，此属性被解析为可执行代码
10 .referrerpolicy:指示在获取脚本时要发送哪个来源网址

span

1 .短语内容的通用行内容器，没有任何特殊语义

button

1 .表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。
2 .按钮的显示样式接近于浏览器和系统平台
3 .属性

1 .autofocus
2 .disbaled
3 .from
4 .formaction
5 .formentype:如果button是submit类型，此属性指定提交表单到服务器的内容类型application/x-www-form-urlencoded,multipart/form-data(type属性是input的话)，text/plain
6 .formmethod:如果button是submit类型，此属性指定浏览器提交表单使用的http方法。post(数据被包含在表单里面，发送到服务器),get(来自表单的数据以？作为分隔符被附加到form的url属性中，得到的url被发送到服务器)
7 .formnovalidate:指定提交是不需要验证，如果指定了，UI重写button拥有这的novalidate属性
8 .formtarget:表示接受提交的表单后在哪里响应。如果指定了，会重写button拥有者的target属性
9 .name:button的名称，会和表单数据一起提交
10 .type:submit，reset，button,menu
11 .value:button的初始值

4 .注意事项

1 .button比input元素更加容易使用样式，可以在元素内添加html内容以及伪类来实现复杂的效果，input只支持文本内容
2 .如果你的按钮不是用来向服务端提交数据,请确保类型设置为button，否则他们被按下后将会向服务器发送数据并加载并不存在的相应内容，因而可能会破坏当前文档的状态。所以所有的button都要加默认的type为button

input

1 .所有的input都是内联元素
2 .用于为基于web的表单创建交互式控件，以便接受来自用户的数据。可以使用各种类型的输出数据和控件小部件、

3 . 自动补全这里的bug有点骚 focus的时候当元素不在当前窗口内，需要关掉补全

label

1 .表示用户界面中某个元素的说明
2 .主要用来将一个label和input相关联

1 .标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。当用户聚焦到这个表单输入元素时，屏幕阅读器可以独处标签，使用辅助技术的用户更容易理解应用输入什么数据
2 .你可以点击关联的标签来聚焦或者激活这个输入元素,就像直接点击输入元素一样。这扩大了元素的可点击范围，让包括使用触屏设备在内的用户更加容易激活这个元素
3 .一个input可以与读个标签相关联
4 .点击或者tap与表单控件相关联的label也可以触发控件的click时间
5 .可以为label设置任何css样式

select

1 .select表示一个提供选项菜单的空间

textarea

1 .表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的，不限格式的文本，例如评论反馈
2 .textarea不支持value属性
3 .属性

1 .知道的autocomplete，autofocus,disabled,form,maxlength,minlength,name,placeholder,required,readonly,rows(行数，显示的高度),cols（文本的可视宽度,必须为正数）
2 .autocapitalize:文本首字母是否大写
3 .spellcheck:设置为true的时候，该元素会做拼写和语法检查。属性值为default时，表明元素有默认行为，可能会基于父元素的spellcheck值。属性值为false，不做拼写和语法检查
4 .wrap:指定文本换行的方式。默认为soft,在达到元素最大宽度的时候，不会自动插入换行符，hard:在文本达到元素最大宽度的时候，浏览器自动插入换行符，比如指定的cols值
5 .minlength,maxlength不会阻止你输入多余的自负，但是是无效的，这个不行，还是要自己控制

time

1 .这个元素为啥没有呢
2 .没有任何默认的样式，注意是一点都没有
3 .但是display是inline
4 .表示一个特定的时间段，他可能包括将日期转换为机器可读格式的属性，以提供更高的搜索引擎结果或自定义功能，例如提醒
5 .此元素用于以机器可读格式显示日期和时间。例如，这可以帮助用户代理提议将事件添加到用户的日历中。

<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>

6 .ie不支持

总结

image.png