HTML

文档声明

相关面试题：

什么是DocType作用?
严格模式与混杂模式如何区分？
列举几条怪异模式中的怪癖行为

HTML文档通常以文档声明开始，帮助浏览器确定其解析和显示HTML的版本

文档声明必须在HTML文档的第一行，顶格显示，对大小写不敏感。
文档声明不是一个标签，而是一种“信息”

HTML5的文档声明写法

html

<!Doctype html></Doctype>

为什么HTML5的文档声明相比之前的很简洁？

因为HTML5不需要引入DTD(Document Type Definition，包含了语法标签的定义), 而之前的版本基于SGML需要引入

渲染模式

如果文档包含严格的DOCTYPE ，那么它一般以标准模式呈现，指浏览器按照W3C标准解析渲染页面，所有浏览器下的显示效果会保持一致。
如果不写，或在浏览器会以怪异模式、兼容模式(quirks模式)渲染，是指浏览器用自己的方式解析代码，不同浏览器下显示效果会不一致。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；
严格模式和怪异模式的部分区别：
- 盒模型：在w3c标准中，设置一个元素的宽高就是指元素内容的宽高，而在怪异模式下还包含padding和border
- 在 standards 模式下，给 span 等行内元素设置 wdith 和 height 都不会生效，而在 Quirks 模式下，则会生效
- 使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 Quirks 模式下却会失效，Quirks 模式下的解决办法，用 text-align 属性：body{text-align:center};#content
- Quirks 模式下设置图片的 padding 会失效
- Quirks 模式下 Table 中的字体属性不能继承上层的设置
- Quirks 模式下 white-space:pre 会失效
- https://hsivonen.fi/doctype/

meta和viewport

viewport

<meta name="viewport" content="width=device-witdh, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

width：设置viewport宽度，为一个正整数或字符串device-witdh表示设备宽度
height：一般设置宽度后高度会自动解析，不用设置
initial-scale：默认缩放比例，为一个数字可以带小数
minimum-scale：允许用户最小缩放比例
maximum-scale：允许用户最大缩放比例
user-scalable：是否允许手动缩放

** 延伸问题 **

怎么处理移动端1px被渲染成2px的问题？

局部处理：
- meta标签中的viewport属性里的initial-scale设置为1.0
- rem按照设计稿标准走，外加利用transform的scale(0.5)缩小一倍即可
全局处理：
- meta标签中的viewport属性里的initial-scale设置为0.5
- rem按照设计稿标准走即可

其它meta

html

<!DOCTYPE html>   H5声明
<head lang="en" />  语言
<meta charset='utf-8' />  声明文档字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/> 优先使用IE最新版和chrome
<meta http-equiv=”pragma” content=”no-cache”> <!--设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出-->
<meta http-equiv=”cache-control” content=”no-cache”> <!--设置页面不缓存,清除缓存-->
<meta http-equiv=”expires” content=”0″>  <!--设定网页的到期时间 -->
<meta name="desciption" content="不超过150个字符"/>  页面描述
<meta name="keywords" content="xx xx"/>  页面关键词
<meta name="author" content="name, emial@gmail.com"/>   网页作者
<meta name='robots' content="index, follow"/>  告诉搜索引擎机器人哪些页面需要索引抓取

content的内容：
- all文件将被检索，且页面上的链接可以被跟踪
- none文件：文件将不被检索，且页面上的链接不可以被跟踪；(和 “noindex, no follow”起相同作用)
- index：文件将被检索；（让robot/spider登录）
- follow：页面上的链接可以被查询；
- noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
- nofollow：文件可以被检索，页面上的链接不可以被查询。(不让robot/spider顺着此页的连接往下抓取)
产生如下写法：

html

  <meta name=”robots” content=”index, follow” /> <!--表示此页面允许索引并跟踪此页面上的链接-->
  <meta name=”robots” content=”noindex, nofollow” /> <!--此页面允许索引并跟踪此页面上的链接--> 
  <meta name=”robots” content=”index, nofollow” /> <!--此页面允许索引并跟踪此页面上的链接-->
  <meta name=”robots” content=”noindex, follow” /> <!--允许索引并跟踪此页面上的链接-->
<meta name=”apple-mobile-web-app-title” content=”标题”/> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”/> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> 设置苹果工具栏颜色
<meta name=”format-detection” content=”telphone=no, email=no”/> 格式检测，用来检测html里的一些格式
<meta name=”renderer” content=”webkit”>   启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”/> 避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />  不让百度转码

<meta name=”HandheldFriendly” content=”true”>     <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name=”MobileOptimized” content=”320″>   <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”>   <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”>    <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”>              <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”>       <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”>   <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”>   <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”>    <!--windows phone 点击无高亮-->

HTML5新特性

参考

HTML5有哪些新特性、移除了哪些元素？

html5新特性中移除的元素：basefont、big、center、font、s、strike、tt、u、frame、frameset、noframes、acronym、applet等等。

`<img>`的`title`和`alt`有什么区别

title通常当鼠标滑动到元素上的时候显示
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

可替换元素的绘制是分成两块的：元素本身的绘制（边框、padding）和元素的内容的绘制（图片的实际内容）。浏览器在绘制时也是分别绘制的，可能会导致元素的内容和本身之间出现其他元素的绘制。

堆叠上下文（stack context）: 页面的层次 position,z-index或transform让元素产生独立的层

行内元素有哪些？块级元素？空（void）元素？行内元素和块级元素的区别？

行内元素有：a span img input button label textarea select strong b等
- img是行内元素但是却可以设置宽高，这是因为其是可替换元素
- 可替换元素（replaced element） ：内容不受 CSS 视觉格式化模型控制，CSS 渲染模型不考虑对此内容的渲染，且元素本身一般y拥有固有尺寸(宽度，高度，宽高比)，CSS 可以影响到可元素的位置，但是不会影响到元素自身的内容
- iframe，video,embed,img
块级元素有：div ul ol li dl dt dd table h* p header footer section等
空元素：<br> 换行 <hr> 分隔线 <img> <input> <link> <meta>
行内元素特点：
- 不可以设置宽高，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效（空有现象）
- 不独占一行，宽度只与内容有关
- 行内元素只能容纳文本或者其他行内元素
块级元素特点：
- 可以设置宽高
- 独占一行始终是与浏览器宽度一样，与内容无关
- 可以容纳内联元素和其他块元素

`src`和`href`的区别

src是source的缩写，指向外部资源
- 在请求资源时会将指向的资源下载并嵌入到当前文档中当前标签的位置，例如js脚本、img和iframe
- <script src='demo.js'></script>当浏览器解析到该标签，会暂停其它资源的下载和处理，直到该资源加载、编译、执行完毕，图片和框架等元素也如此。这也是为什么js脚本放在底部而不是头部
href是Hypertext Reference的缩写，指向网络资源所在位置
- 建立和当前元素（锚点）或当前文档（链接）之间的链接
- <link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式

解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script的加载或者执行都会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。

媒体标签video和audio

video基础

html

<video src="./test.mp4" controls="controls" width="700px" height="400px">
  浏览器不支持video
</video>

有些比较老的浏览器可能不支持 <video> 标签，放置文本内容，这样当某个浏览器不支持此标签时，就可以显示提示内容

src 将要播放的视频的 URL

controls 如果设置该属性，则向用户显示控件，例如播放按钮，音量按钮等

autoplay 如果设置该属性，则视频在就绪后马上播放，设置了 autoplay 后会忽略属性 preload

width 设置视频播放器的宽度

height 设置视频播放器的高度

loop 如果设置该属性，则当媒介文件完成播放后再次开始播放

muted 设置视频的音频输出应该被静音

poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

preload 如果设置该属性，则视频在页面加载时进行加载，并预备播放

视频格式

视频格式	描述
Ogg	带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG	4（MP4）带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM	带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

这三种视频格式，在不同的浏览器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 浏览器，Ogg 格式不支持IE、Safari 浏览器，WebM 格式不支持IE、Safari 浏览器等。所以我们可能需要在不同的浏览器中使用不同的视频格式，这需要用到标签。

html

<video controls="controls" width="700px" height="400px">
  <source src="./test.mp4" type="video/mp4">
  <source src="./test.ogg" type="video/ogg">
  您的浏览器不支持 video 标签
</video>

audio基础

html

<audio controls="controls">
  <source src="./test.mp4" type="audio/mpeg">
  <source src="./test.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签
</audio>

属性	描述
src	要播放的音频的 URL
controls	如果设置该属性，则向用户显示控件，例如播放按钮
autoplay	如果设置该属性，则音频在就绪后马上播放
loop	如果设置该属性，则每当音频结束时重新开始播放
muted	规定音频输出应该被静音
preload	如果设置该属性，则音频在页面加载时进行加载，并预备播放

音频格式	MIME类型
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

a标签的target

_blank：在新浏览器窗口(新标签)中打开链接文件；

_parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象

_self：在同一框架（iframe）或窗口中打开所链接的文档。此参数为默认值，通常不用指定。

_top：**在当前的整个浏览器窗口（此标签）**中打开所链接的文档，因而会删除所有框架；

a 标签上四个伪类的执行顺序是怎么样的

link > visited > hover > active L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

网站图片文件，如何点击下载？而非点击预览

html

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>
<a href="logo.jpg" download>下载</a> 
<a href="logo.jpg" download="网站LOGO">下载</a>

`link`和`@import`的区别

HTML方式link：
- 最大限度支持并行下载
- 可以通过rel="alternate stylesheet"指定候选样式
- 浏览器支持更好
CSS方式@ import：
- 过多嵌套导致串行下载，出现FOUC（文档样式短暂失效）
- 必须在样式规则之前，可以在 css 文件中引用其他文件

`src`和`href`的区别

src是source的缩写，指向外部资源
- 在请求资源时会将指向的资源下载并嵌入到当前文档中当前标签的位置，例如js脚本、img和iframe
- <script src='demo.js'></script>当浏览器解析到该标签，会暂停其它资源的下载和处理，直到该资源加载、编译、执行完毕，图片和框架等元素也如此。这也是为什么js脚本放在底部而不是头部
href是Hypertext Reference的缩写，指向网络资源所在位置
- 建立和当前元素（锚点）或当前文档（链接）之间的链接
- <link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式

如何美化`checkbox`

<label> 属性 for 和 id
隐藏原生的 <input>
:checked + <label>

语义化

更好的代码结构，没有css也能呈现很好的内容结构
更好的可读性
有利于SEO: 方便搜索引擎能识别页面结构
提升用户体验：方便其他设备、插件解析（如移动设备、盲人阅读器等）
- 无障碍网页：无障碍属性 role角色 aria-required表单必填元素 aria-disabled="true" 表单禁用元素等

HTML常用的语义元素

H5提供新的语义元素来定义网页的不同部分，称为“切片元素”

html

header 与hgroup 放在页面或布局的顶部，一般放置导航栏或标题
nav： 导航连接部分区域
main: 文档主要内容
aside
footer
article
section
time
mark 高亮
address

srcset和sizes

给img设置多个图片源，在不同DPI时使用不同的图片，防止因为缩放导致模糊

html

<img srcset="
https://picsum.pthotos/id/164/150,
https://picsum.pthotos/id/164/300 2x,
https://picsum.pthotos/id/164/600 4x,
https://picsum.pthotos/id/164/900 8x,
" />

图片宽高不是固定的，DPI没变，大小变化

html

<img srcset="
https://picsum.pthotos/id/164/150 150w ,
https://picsum.pthotos/id/164/300 300w,
https://picsum.pthotos/id/164/600 600w,
https://picsum.pthotos/id/164/900 900w,
" 
     
sizes="
{max-width: 300 } 50vw
{max-width: 600 } 50vw
{max-width: 900 } 50vw
{max-width: 1200 } 50vw
"/>

HTML ​

文档声明 ​

meta和viewport ​

HTML5新特性 ​

<img>的title和alt有什么区别 ​

行内元素有哪些？块级元素？空（void）元素？行内元素和块级元素的区别？ ​

src和href的区别 ​

媒体标签video和audio ​

a标签的target ​

a 标签上四个伪类的执行顺序是怎么样的 ​

网站图片文件，如何点击下载？而非点击预览 ​

link和@import的区别 ​

src和href的区别 ​

如何美化checkbox ​

语义化 ​

srcset和sizes ​

HTML

文档声明

meta和viewport

HTML5新特性

`<img>`的`title`和`alt`有什么区别

行内元素有哪些？块级元素？空（void）元素？行内元素和块级元素的区别？

`src`和`href`的区别

媒体标签video和audio

a标签的target

a 标签上四个伪类的执行顺序是怎么样的

网站图片文件，如何点击下载？而非点击预览

`link`和`@import`的区别

`src`和`href`的区别

如何美化`checkbox`

语义化

srcset和sizes