html相关的⼀些问题（持续更新）
秋招后的⼀些记录，看了很多东西想写下来，希望⾃⼰可以随时的查看，也希望有错误的地⽅⼤神可以指正。
1、H5新元素
新增元素：
header：定义页⾯的页眉
article：页⾯⽂章区域
aside：主题内容之外
section：定义页⾯的章节部分
footer：页⾯的页脚
audio:⾳频，src路径，controls显⽰控制⾯板，autoplay⾃动播放，loop循环
video：视频，src路径，controls显⽰控制⾯板，autoplay⾃动播放，loop循环，width宽度，height⾼度，poster当视频还未完全下载或⽤户还未点击播放前默认显⽰的封⾯，默认显⽰当前视频⽂件的第⼀帧。
source：浏览器的视频格式兼容
details：⽤于描述⽂档或⽂档某个部分区域，需要和summary结合使⽤
mark：带有记号的标签
nav：定义导航栏
progress：定义任务的进度，需要value和max值
fieldset：对表单元素进⾏分组，⼀般放在< form>标签⾥
表单的type属性（input）：
1、text:⽂本框
2、password：密码
3、email：邮件，提供电⼦邮件的完整验证 是否包含@符号，同时是否包含服务器名称。
4、tel：为了能够在移动端打开数字键盘，限制⽤户只能输⼊数字
6、number：只能输⼊数字，不能输⼊其他字符。max属性为最⼤值，min属性为最⼩值，value为默认值。
7、search：搜索框
8、range：范围，max最⼤值,min最⼩值,value默认值
9、color：拾⾊器。
input标签placeholder属性
10、time：时间
11、date:⽇期，弹出⽇历，选择⽇期。
12、datetime-local:⽇期时间
13、month：⽉份
14、week：星期
表单新增的其他属性：
1、placeholder：提⽰⽂字
2、autofocus：⾃动获取焦点
3、autocomplete:on打开，off关闭。前提是必须成功提交，必须有name属性
4、required：必须输⼊
5、pattern：正则表达式验证
6、multiple：允许多选
表单新增事件：
1、oninput：监听当前指定元素的内容，只要内容改变就触发改事件，类似onkeyup/onkeydown。不同点oninput事件不受⿏标或键盘影响，只要内容改变就触发。
2、oninvalid：当验证不通过时触发。
⾃定义属性。data-:
（1）data-开头
（2）data-后必须⾄少有⼀个字符，多个单词使⽤-连接
2、HTML5与HTML4的不同之处
1、⽂件类型声明（< !DOCTYPE>）仅有⼀型：< !DOCTYPE HTML>。
2、新的解析顺序：不再基于SGML（标准通⽤置标语⾔）
SGML语⾔特点：标准通⽤标记语⾔是⼀种描述语⾔的语⾔，定义了以电⼦形式表⽰⽂本的⽅法。它的特点有：
（1）、正式的，能允许验证⽂档的正确性。
（2）、结构化的，能够处理复杂的⽂档。
（3）、可扩充的，能够⽀持⼤型信息存储的管理。
3、新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary,
wbr。
input元素的新类型：date, email, url等等。
4、input元素的新类型：date, email, url等等。
5、新的属性：ping（⽤于a与area）, charset（⽤于meta）, async（⽤于script）。
6、全域属性：id, tabindex, repeat。
7、新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
8、移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。
3、html的语义化
1、语义化是指使⽤恰当语义的html标签，让页⾯具有良好的结构与含义。
2、⽐如 < p>标签就代表段落，< article>代表正⽂内容等等。
3、语义化的好处：
开发者友好：
（1）使⽤语义类标签增强了可读性。
（2）开发者也能够清晰地看出⽹页的结构。
（3）也更为便于团队的开发和维护。
机器友好：
（1）带有语义的⽂字表现⼒丰富。
（2）更适合搜索引擎的爬⾍爬取有效信息。
（3）语义类还可以⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录。
4、html、xhtml、xml有什么区别
1、HTML(超⽂本标记语⾔)：在html4.0之前HTML先有实现再有标准，导致HTML⾮常混乱和松散。
2、XML(可扩展标记语⾔)：主要⽤于存储数据和结构，可扩展，⼤家熟悉的JSON也是相似的作⽤，但是更加轻量⾼效，所以XML现在市场越来越⼩了。
3、XHTML(可扩展超⽂本标记语⾔)：基于上⾯两者⽽来，W3C为了解决HTML混乱问题⽽⽣，并基于此诞⽣了HTML5，开头加⼊<
!DOCTYPE html>的做法因此⽽来，如果不加就是兼容混乱的HTML，加了就是标准模式。
5、什么是data-属性
这个很少被提及，但是还是可以简单说⼀下：
HTML的数据属性，⽤于将数据储存于标准的HTML元素中作为额外信息，我们可以通过js访问并操作它，来达到操作数据的⽬的。
6、doctype的作⽤是什么
1、DOCTYPE是html5标准⽹页声明。
2、且必须声明在HTML⽂档的第⼀⾏。
3、来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档。
4、⽂档解析类型：
BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染页⾯。（如果没有声明DOCTYPE，默认就是这个模式）。
CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染页⾯。
区别：
（1）标准模式(standards mode)：页⾯按照 HTML 与 CSS 的定义渲染。
（2）怪异模式(quirks mode)模式： 会模拟更旧的浏览器的⾏为。
（3）近乎标准(almost standards)模式： 会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），除此之外符合标准定义。
7、html页⾯中meta的作⽤
1、meta是⽤来在HTML⽂档中模拟HTTP协议的响应头报⽂。
2、meta 的属性有两种：name和http-equiv。（可以见下⼀个总结：常⽤的meta标签）
name属性主要⽤于描述⽹页，对应于content（⽹页内容）。以便于搜索引擎机器⼈查、分类。
http-equiv属性
8、常⽤的meta标签
简单解释：
1、meta标签由name和content两个属性来定义，来描述⼀个HTML⽹页⽂档的元信息。
2、charset，⽤于描述HTML⽂档的编码形式。
3、http-equiv，顾名思义，相当于http的⽂件头作⽤。
4、viewport，移动前端最熟悉不过，Web开发⼈员可以控制视⼝的⼤⼩和⽐例。
5、apple-mobile-web-app-status-bar-style，开发过PWA应⽤的开发者应该很熟悉，为了⾃定义苹果⼯具栏的颜⾊。
简单解释并不够：
1、定义和⽤法：< meta> 元素可提供有关页⾯的元信息（meta-information），⽐如针对搜索引擎和更新频度的描述和关键词。
< meta>标签位于⽂档的头部，不包含任何内容。< meta>标签的属性定义了与⽂档相关联的名称/值对。
2、提⽰和注释：注释：< meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
典型的情况是，meta 元素被⽤于规定页⾯的描述、关键词、⽂档的作者、最后修改时间以及其他元数据。
3、总结：< meta> 标签提供关于 HTML ⽂档的元数据。它不会显⽰在页⾯上，但是对于机器是可读的。可⽤于浏览器（如何显⽰内容或重新加载页⾯），搜索引擎（关键词），或其他 web 服务。
相关属性详细介绍：
必须属性：
content：
（1）some_text
（2）定义与 http-equiv 或 name 属性相关的元信息
（3）meta的必需属性是content，当然并不是说meta标签⾥⼀定要有content，⽽是当有http-equiv或name属性的时候，⼀定要有content属性对其进⾏说明。例如：
< meta name="keywords" content="HTML,ASP,PHP,SQL">
//这⾥⾯content⾥的属性就是对keywords进⾏的说明，所以呢也可以理解成⼀个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可选属性：
http-equiv：值：content-type、expires、refresh、set-cookie。描述：把 content 属性关联到 HTTP 头部。
name：值：author、description、keywords、generator、revised、others。描述：把 content 属性关联到⼀个名称。
scheme：值：some_text。描述： 定义⽤于翻译 content 属性值的格式。
9、script标签中defer和async的区别
defer：
等（HTML）⽂档解析完了执⾏（defer：浏览器指⽰脚本在⽂档被解析后执⾏，script被异步加载后并不会⽴刻执⾏，⽽是等待⽂档被解析完毕后执⾏。）
async：
脚本加载完毕之后就执⾏（async：同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适⽤.）
注意：
默认同步加载完在继续往后执⾏。
10、img标签中srcset的作⽤以及picture标签
srcset：
1、srcset提供了根据屏幕条件选取图⽚的能⼒。
2、可以设计响应式图⽚：
（1）使⽤两个新的属性srcset 和 sizes来提供更多额外的资源图像和提⽰。
（2）帮助浏览器选择正确的⼀个资源。
3、srcset 定义了我们允许浏览器选择的图像集，以及每个图像的⼤⼩。
4、sizes 定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择。
5、所以，有了这些属性，浏览器会些什么呢？
（1）查看设备宽度。
（2）检查 sizes 列表中哪个媒体条件是第⼀个为真 。
（3）查看给予该媒体查询的槽⼤⼩。
（4）加载 srcset 列表中引⽤的最接近所选的槽⼤⼩的图像.
picture：
1、< picture>元素通过包含零或多个 < source> 元素和⼀个 < img>元素来为不同的显⽰/设备场景提供图像版本。
2、浏览器会选择最匹配的⼦ < source> 元素，如果没有匹配的，就选择 < img> 元素的 src 属性中的URL。然后，所选图像呈现在< img>元素占据的空间中。
3、picture同样可以通过不同设备来匹配不同的图像资源。
11、href与scr的区别
href：
1、Hypertext Reference的缩写，超⽂本引⽤。
2、它指向⼀些⽹络资源，建⽴和当前元素或者说是本⽂档的链接关系。
3、在加载它的时候，不会停⽌对当前⽂档的处理，浏览器会继续往下⾛。常⽤在a、link等标签。
src：
1、source的所写，表⽰的是对资源的引⽤。
2、它指向的内容会嵌⼊到当前标签所在的位置。
3、由于src的内容是页⾯必不可少的⼀部分，因此浏览器在解析src时会停下来对后续⽂档的处理，直到src的内容加载完毕。
4、常⽤在script、img、iframe标签中。
5、我们建议js⽂件放在HTML⽂档的最后⾯。如果js⽂件放在了head标签中，可以使⽤load实现js的最后加载。
总结：
1、href⽤于建⽴当前页⾯与引⽤资源之间的关系（链接），⽽src则会替换当前标签。
2、遇到href，页⾯会并⾏加载后续内容。
3、⽽src则不同，浏览器需要加载完毕src的内容才会继续往下⾛。
12、link标签实现预加载
preload：是告诉浏览器页⾯必定需要的资源，浏览器⼀定会加载这些资源。
prefetch：是告诉浏览器页⾯可能需要的资源，浏览器不⼀定会加载这些资源。
13、块级元素和⾏内元素以及⾏内块级元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。