头部元素

<head>标签中包括了哪些内容？

`<title>`

与h1的区别在于<title>是为整个HTML文档添加标题，会在添加书签的时候建议用做书签名。h1主要是为<body>添加标题的。

`<meta>`

元数据就是描述数据的数据。

charset属性规定了文档中的字符编码。

name指定了meta元素类型，可以取author description viewport 等值； content属性指定了实际的元数据内容。

`<link>`

rel href属性，用于添加页面自定义图标或样式表

`script`

专门用于在HTML页面中应用JavaScript。

文字处理

p段落
h1标题
有序列表<ol>/无序列表 <ul>/ 列表元素<li> /嵌套列表/描述列表(description list)<dl> — 描述术语 <dt> — 描述列表的描述部分 <dd> 会产生缩进。
<em>表示强调/<strong>表示非常重要/可以被嵌套在其他标签中
<b> <i> <u>仅仅影响表现且没有语义，是表象元素(presentational element)。

二者区别在于语义。<em> <strong>会表现出斜体/加粗是因为这是浏览器默认行为，是可以被更改的，用这个标签不是为了获得斜体风格。<b> <i> <u>就是纯粹为了表现出特定的风格。

引用块引用<blockquote cite=""></blockquote> — 行内引用<q cite=""></q>。注意cite属性不会被显示，如果需要显示该引用来源，直接用<cite>标签包裹住内容，并在外层嵌套一个<a href>超链接。
<address>标记联系方式。
<sup> <sub>标记上下标。
<time datetime=""></time>提供机器可识别的时间和日期。

布局元素

有语义

<main>一个页面上用一次，直接位于<body>中。
<article> 存放与页面其他布局元素无关的文章。
<section> 适用于组织页面使其按功能分块。
<aside>侧边栏，补充信息。
<header> 作body的子元素就是网站的全局页眉；如果是<article>或者<section>的子元素就是这部分特有的页眉。注意和<head>标题区分。
<nav>页面主导航功能。
<footer>包含了页面的页脚。

无语义

应用场景

之前有语义的元素无法对应
只想将一组元素作为一个单独的实体来修饰响应单一的CSS和JavaScript。

分类

内联无语义元素<span>

块级无语义元素<div>

多媒体元素

有时被称为替换元素，因为这个元素的内容和尺寸由外部资源所定义，而不是元素自身。

元素自身属于空元素，没有闭合标签，标签内容为空。

图片

位图用像素网格定义，精确包含每个像素的位置和它的色彩信息。有.bitmap .png .jpg .gif。

矢量图用算法定义，包含图形和路径的定义，电脑根据定义计算出该如何呈现。有SVG格式，SVG是描述矢量图像的XML语言，用于标记图形。将矢量图添加到HTML的方法有三种：利用<img>，直接复制SVG代码，并内联到HTML文件中，使用<iframe>。

img标签的属性如下：

src 想要引入的图片的绝对路径或相对路径
alt 备选文本，值是对该图片的文字描述
width height 设置图片大小
title鼠标悬停在图片上会有提示信息

<figure> <figcaption>为图片提供一个语义容器，在

HTML图片是具有语义的，而用CSS构建的图片只是为了起装饰作用。

音视频

video audio标签的属性如下：

src
controls没有取值，是一个布尔变量，使其包含浏览器提供的控制界面。也可以使用JS API自定义控件界面。
video标签的内容是后备内容，当浏览器不支持<video>标签时就会显示这段内容。
在video标签内容中提供多个<source>播放源以提高兼容性。

媒体文件的内容有多种形式，类似于MP3、MP4、WebM这些属于叫做容器格式，它们定义了生成媒体文件的音频轨道/视频轨道/文本轨道的储存结构，一些描述性的元数据，和编码译码器。

因为浏览器支持的coder-decoder有所不同，为了兼容不同的浏览器，需要利用<source>标签提供不同格式的源文件。

autoplay 自动播放，不建议。
loop 循环播放，不建议。
muted播放时默认关闭声音。
poster视频封面。
preload缓冲较大文件。
<track>标签的src属性是.vtt文件，kind属性可以取值subtitles/captions/descriptions，srclang属性高速浏览器你编写文件的语言。

在当前页面嵌入外部内容

iframe能够将其他Web文档嵌入到当前文档中，适用于将第三方内容嵌入网站，存在安全隐患。

allowfullscreen 布尔变量。
frameborder=""
src=""
width="" height=""
sandbox 布尔变量，建议始终使用sandbox属性。沙盒定义：一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器。

object embed嵌入各种形式的插件。

响应式图片

一种可以在不同的屏幕尺寸和分辨率设备上良好工作的图片。涉及到美术设计问题和分辨率切换问题。

分辨率切换可以通过<img>元素的srcset和sizes两个属性来实现。

美术设计可以通过<pictures>元素来实现。

依据设备选择图片源

适用于不同图片尺寸的方案srcset+sizes:srcset定义允许选择的图像集，双引号内用逗号分隔。每一个可选项包括：文件名+空格+以w为单位的图像的固有宽度。

sizes定义一组媒体条件，双引号内用逗号分隔。每一个可选媒体条件包括：带括号的媒体条件（不要忘了冒号）+空格+媒体条件为真时图像将填充的槽的宽度。最后一个逗号后面只有槽的宽度，是默认匹配。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

浏览器行为：查看设备宽度 — 查询sizes匹配合适的媒体条件 — 找到对应的媒体条件的槽的大小 — 依据已知槽的大小去选择最接近该槽大小的srcset列表中的图像。

依据显示器分辨率选择源

适用于相同图片尺寸不同分辨率的方案srcset+x语法：srcset定义允许选择的图像集，可选项包括：文件名+空格+以x为单位的数据（代表多少倍）。

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

浏览器行为：计算出当前显示器的分辨率 — 从 srcset中找出最合适的引用图片。

依据设备大小裁剪显示图片的不同部分

<picture>：为不同的布局提供不同裁剪的图片，不同的图片突出的细节不同。可以在<picture>标签中包含<source>标签，浏览器会从上至下匹配media条件，一旦条件为真就会使用该图片。为了避免浏览器不支持该表篇，最后必须有的带有src和alt属性的<img>标签。

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

表单

HTML表单主要用于收集数据并将这些数据发送到服务器，需要有一个Web服务器来接收和处理数据。

<form>定义了表单和确定表单属性的行为。是创建一切HTML表单的开始。

action定义了提交表单的时候，这里收集到的键/值形式的数据送往那个URL，可以是一个PHP文件。

method定义发送数据的HTTP方法时get还是post，无论使用哪一种方法，服务器接收到的都是一个字符串。

enctype默认情况下该属性值为application/x-www-form-urlencoded，意思是已编码为URL参数的表单数据。如果要发送文件，需要将值设置为multipart/form-data。同时包含file picker小部件。

<fieldset>用于创建具有相同目的的小部件组的方式，相当于功能相同一起打包，方便后续一起添加样式或者语义。在其开口标签之后添加<legend></legend>来描述这个小部件组的用途。具体应用于：包裹着一组单选按钮；对长表单进行分段，使之可以放在不同的页面上，提高可用性。

一般使用<div> <fieldset> <section> h标题 <p>标签同时包装标签和对应的的小部件，可以构造更复杂的表单。例如section>h2+p的组合。

表单元素的通用属性

autofocus布尔属性，加载时自动聚焦

disabled布尔属性，表示用户不能与元素交互。继承。

name元素名称，和数据一起提交。

value元素初始值。

单行文本框

<input>

通用属性包括readonly disabled(输入值永远不会和表单数据的其余部分一起发送) size(框的物理尺寸) maxlength(可输入的最大字符数目) placeholder(文本库中出现的文本，用来粗略描述输入框目的)。
<type>是<input>最重要的属性，定义了接收数据的格式。注意<input>是一个空标签。

text是<type>的默认值和备用值，用于创建单行文本框。
password属性值用于创建密码框。
email属性值用于创建邮件地址框。
search属性值用于创建搜索框，样式上会呈现出圆角以及‘x’清除。
tel属性值用于创建电话号码栏。
可选中项的创建基于： checked布尔属性+type=???取值

发送数据时的行为与其他表单小部件不同。表单发送时，只有在选中该选项时，才会提交选中的value和name，不选择是不发送的。
- type="checkbox"属性值用于复选框
- type="radio"属性值用于创建单选按钮

value因为input是空标签，所以定义它的的初始值要用value属性来实现。
id属性是为了和<label>的for属性值匹配。
name用于告诉浏览器这个数据的名称是什么，从而通过HTTP报文发送过去后服务器端可以按照名称收集并处理数据块。
list该属性值和<datalist>元素的id值相同，绑定之后提供提供数据列表(datalist>option*n)。

多行文本框

<textarea>多行文本框，允许用户包含硬换行符(按回车)。有开始标签和结束标签，和<input>区别在于文本默认值的设定。

为输入框起名字/输入框是否必填

<label>的for属性值和<input>的id属性值相匹配。<label>的内容就是该输入框的名字。完成绑定之后，可以将该输入框名字和该输入框相匹配，点击该输入框名字可以激活后面的输入框。

required元素属性+伪类:optinal :required属于简单的客户端表单验证

下拉窗口

用于创建单选框下拉窗口，其中有一个或多个<option>元素作为子元素。多选选择框的创建就是将multiple属性添加到<select>中，直接显示的不是下拉窗口而是所有列表。

<option>元素还可以作为子元素嵌套在<optgroup>中。<option>的<value>规定了表单提交时应该发送的数据。

按钮

<button>按钮， type属性有三种取值。这三个取值也可以在<input>的type属性中设置，技术上同样可以实现按钮。

submit取值会将表单数据发送到<form>里action属性定义的网页中。
reset重置为默认值。
button不会发生任何事，可以用JavaScript构建定制按钮。

表单样式需要考虑的点

字体和文本统一

为了让表单的字体外观和其他内容保持一致使用

button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

盒子模型统一

每个小部件都有自己的边框，填充和边距的规则，如果统一所有小部件的风格，需要使用到box-sizing属性。

This is because each widget has their own rules for border, padding and margin. To give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties

input, textarea, select, button {
  width : 150px;
  margin: 0;

  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
          box-sizing: border-box;
}

把特定的内容放在特定的位置定位

<legend>元素最容易定位，总是存在于父元素fieldset的内部，默认是在上边框的最顶端。如果想要把它放在fieldset的内部其他地方，需要先对fieldset定位，在对legend定位。

<textarea>元素被浏览器默认为display: inline-block，与文本底线对齐。

appearance: controlling OS-level styling

浏览器内核引擎大致有Gecko(Firefox)、Webkit(Safari/Chrome)，每个引擎默认的网页排版与元素默认表现方式都不一样，所以需要加前缀指定特定浏览器内核下的样式。

为了使浏览器特有的样式失效，可以使用appearance和带前缀的appearance(是非标准属性)，使其值为none。

select, option {
  -webkit-appearance : none; /* To gain control over the appearance on WebKit/Chromium */
  -moz-appearance : none; /* To gain control over the appearance on Gecko */

  /* To gain control over the appearance on and Trident (IE)
     Note that it also works on Gecko and has partial effects on WebKit */  
  background : none;
}

其他表单部件

基于input元素，type属性取值+其他辅助属性。

数字 number + min + max + step
滑块 range + min + max + step
本地时间 datetime-local + min + max
月 month + min + max
时间 time + min + max
星期 week + min + max
拾色器 color
文件接收 file + accept(约束文件类型的属性) + multiple(允许接收多个文件的属性)
不可见隐藏内容 hidden + name +value
图像按钮 image (提交表单时提交的数据是相对于图像的XY坐标，形式为name.x/name.y，常用于构建热图)

进度条，基于progress元素。

仪表，基于meter元素。

使用JavaScript发送表单

HTML表单只负责收集用户输入，当用户尝试发送数据时，应用程序在后台采取控制并异步地传输数据，只更新UI中需要更改的部分。

异步地发送任何数据被称为AJAX(Asynchronous JavaScript and XML)。

AJAX就是在不刷新当前页面的情况下，使用XMLHttpRequest(XHR) DOM对象和服务器进行通信（发送HTTP请求，接收服务器数据），可以使用的数据格式有JSON、XML、HTML和text文本。

构建XMLHttpRequest发送表单数据

基本步骤

新建一个XMLHttpRequest对象
告诉XMLhttp请求对象的onreadystatechange属性命名为请求状态改变时调用的函数，这里只是一个引用赋值，并不是调用，此函数需要提前声明。或者直接使用匿名函数响应处理的操作。
声明接到响应后要做什么。发送一个实际的请求，通过调用HTTP请求对象的open()和send()方法。

1 2	httpRequest.open('GET/POST/HEAD', URL, true-by-default-for-synchroneous); httpRequest.send(what-you-want-to-send-to-the-server);

回调函数处理服务器响应的步骤：检查请求状态，即服务器是否收到了请求并且没有问题httpRequest.readyState === XMLHttpRequest.DONE；其次判断响应码范围if(request.status >= 200 && request.status < 400)；利用httpRequest.responseText/responseXML获取返回数据。

细节

对空格的处理

1
2
3

// Combine the pairs into a single string and replace all %-encoded spaces to 
// the '+' character; matches the behaviour of browser form submissions.
urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' );

服务器请求状态readyState与响应状态status作区分
对于POST方法需要设定HTTP header

1
2
3

// Add the required HTTP header for form data POST requests
  XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );

XMLHttpRequest+FormData

引入新的FormData对象，只可写(write only)can change them but not retrive their contents。

新建空的FormData对象const FD = new FormData()，后续利用append()更新。
将FormData对象与HTML表单form元素绑定const FD = new FormData(form)

二进制数据处理

哪里获得二进制数据？FileReader API、Canvas API、 WebRTC API。

直接利用formData的append()方法。

如果出现多种类型的表单数据，需要手动构建。需要定义一个分隔符来定义请求的每一个部分，该分隔符前面有其他符号，分隔符后面有换行。每一个类型的数据再放入data字符串时要有metada+data两个部分。