web技术夯实基础篇（二） —— HTML

概念

HTML：标记语言。
超文本：网站内或网站间网页彼此连接的链接。
字符引用：将特殊字符加入文本中，<,>,“”,‘’,&——&lt,&gt,&quot,&apos,&amp。空格有&#x3000,&nbsp。（其实也可用转义字符解决）。

元数据标签

// 描述数据的数据
<meta charset="utf-8"> // 指定字符编码，utf-8：通用字符集，可以显示所有语言。
<meta name="author" content="xxx"> // 作者
<meta name="description" content="xxx."> // 网站内容描述（SEO优化，keyword已被忽略）
<meta name="viewport" content="width=device-width"> // 强制让手机浏览器采用它们真实视图的宽度来加载网页

网站图标

// 适配各种设备（高分屏）,格式长为.ico，移动端也可考虑png。
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="">
<!-- basic favicon -->
<link rel="shortcut icon" href="">

超链接

<a href="mailto:link"></a> // 链接到邮件
<a href="" download=""></a> // 下载链接download属性提供默认保存的文件名

冷门标签

// 很多语义化标签，还有些有利于计算机识别，便于抓取，爬虫之类的
<dl>
    <dt>描述列表</dt>
    <dd></dd>
</dl>
<blockquote cite="https://...">缩进并有间距<cite>斜体</cite></blockquote>
<q>引号文</q>
<abbr>缩略语</abbr>
<address>联系方式</address>
<sup>上标></sup>
<sub>下标</sub>
<pre><code>代码，字体略小</code><var>大斜体</var><kbd>代码</kbd><samp>代码</samp></pre>
<time datetime="2016-01-20">时间</time>
<header><nav><main><article><section><footer><aside> // 其实这些都不实用，一个是IE7-9不一定支持，另外现在基本都组件化了。
<figure><img><figcaption>图片标题，音视频说明等</figcaption></figure>
<video controls>
    不同浏览器解码器不同，支持的视频格式也不同
    <source src=".mp4" type="video/mp4">
    <source src=".webm" type="video/webm">
    <p>你的浏览器不支持H5，在这访问 <a href=".mp4">跳转</a></p> 
    <track kind="subtitles" src=".vtt" srclang="en"> // 添加副本字幕之类的，SEO
</video>  // 为提高性能，可以在文档加载完后用js加载src
<fieldset>
    <legeng>字段集标签</legend>
</fieldset>

初识矢量图

svg：述矢量图的XML语言。
优点：

• 体积小：存的是图形路劲的算法，像素图（jpg,png…）逐个存每个像素的信息。
• 放大后不失真：只是调整了算法中的值，像素图是像素被放大已填充更多像素。

// canvas好像已经开始取代svg了，还不清楚原理方面的区别
// 也可用img src引入.svg的文件
// 内联svg
<svg>
  <rect width="100%" height="100%" fill="black" /> // 画个矩形
  <circle cx="150" cy="100" r="90" fill="blue" /> // 画个圆
</svg>

自适应图片

// 浏览器根据自身识别选择显示的图片
<img src=".png" srcset=".svg"> 
<img srcset="a-320w.jpg 320w,
             a-480w.jpg 480w,
             a-800w.jpg 800w" // 备选图像 浏览器可选择的图像集和大小，320w像素的意思（真实大小）
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px" // 选择条件 媒体条件下图像容器宽（不就是标签的宽吗？）
     src="a-800w.jpg" alt="">
<img srcset="b-320w.jpg,
             b-480w.jpg 1.5x,
             b-640w.jpg 2x" // 浏览器根据屏幕分辨率选择图片
     src="b-640w.jpg" alt="">
<picture> // 类似video
  <source media="(max-width: 799px)" srcset="c-480w.jpg">
  <source media="(min-width: 800px)" srcset="c-800w.jpg">
  <img src="c-800w.jpg" alt="">
</picture>

表单

1、好用的属性：
size：控制输入框长度
maxlength：控制输入字符数
accept：约束file文件类型
2、不常用标签

// 自动补全标签
<input type="text" id="" name="" list="alist">
<datalist id="alist">
    <option>1</option>
    <option>2</option>
</datalist>
// 图像按钮，行为类似提交
<input type="image" alt="Click me!" src="" />
// 米尺，仪表尺。可以指示当前值的状态（绿，黄，红）
<meter min="0" max="100" value="75" low="33" high="66" optimum="10"></meter>

3、表单数据的发送

// 使用<form>
<form method="post" enctype="multipart/form-data">enctype：指定Content-Type</from>
// 使用XHR
var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var FD  = new FormData(); // FD只写
for(name in data) {
    FD.append(name, data[name]);
}
XHR.addEventListener('load', function(event) {
    alert('监听请求成功');
});
XHR.addEventListener('error', function(event) {
    alert('监听报错');
});

XHR.open('POST', 'https:');
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //       设置请求头
XHR.send(urlEncodedData);
XHR.send(FD);

4、表单验证
伪类:valid，:invalid自定义验证通过样式

<form novalidate>关闭自带的验证</form>
// 自定义验证消息
email.setCustomValidity("");

此外有许多用于验证的API，此处不做详细介绍。

5、请求
请求头：全局元数据集
GET：浏览器发送空的主体。

有许多伪类css用于定制表单样式，此处不做详细介绍。

杂项

1. lang=”en-US”：该属性利于SEO优化。
2. sandbox =”“：允许嵌入的iframe做一些操作。
3. <colgroup>
<col style="background-color: yellow" span="2"> // 表格第二列样式
</colgroup>