360奇舞特训营（一）：HTML

昨天去上了第一节360奇舞前端培训的第一节课，见着了仰慕已久的月影大大，心里超级超级激动。昨天上课的老师是超厉害的赵文博老师，主要内容是HTML相关。以前一直觉得HTML自己学得还好，昨天上完课后就感觉自己还有很多地方不足，特别是很多细节方面的把控，以及很多经验层面上技术的缺失。下面是对昨天课程的总结：

12-03 HTML 赵文博老师

什么是Web前端开发

• 使用web标准技术

• 开发网页或web应用

• 通常运行在浏览器

• 可交互

• 根据设计图还原成页面，参考产品经理的需求，再做成页面。交互：使用HTTP接口。

• 前端：功能、设计（界面）、兼容性、安全性、性能（打开的快不快）、用户体验（做一个前端就是做一个用户体验）、可用性（无障碍性，做出来的产品对于所有的人都能很顺利的访问到，包括有疾病的人，比如色盲、盲人、手脚不便的人。设备性：可能在电脑上访问正常，手机上访问不正常，比如国内浏览器省流量的模式，很多图片不能下载）

属性和API一定要背会

浏览器：chrome,firefox,safari,opera,ie

基本的浏览器结构：

UI Backend：和操作器系统相关的如何绘制页面
浏览器引擎：

壳浏览器（没有做自己的渲染引擎和JavaScript引擎，IE内核）
：360浏览器（急速模式：webkit,其他模式:lE引擎），UC浏览器，QQ浏览器，搜狗浏览器，一般都是双内核
URL：结构：

编辑器：Atom,Visual studio code,vim,sublime text

HTML:简介和文本

HTML：使用标签来描述页面的内容和结构。HyperText Markup Language。

Doctype:1.指定HTML页面使用的标准和版本，2、浏览器根据 doctype 来决定使用哪一种渲染模式。渲染模式：怪异模式Quirks Mode，准标准模式Almost Standard Mode（比较严苛？当时每太听清，也没找到相应的资料，找到了再补充），标准模式Standard Mode。不写doctype就到怪异模式。

XHTML 1.0,2000：用XML语法重新定义HTML，语法严格要求。

XHTML 2.0：不兼容历史（旧的页面在浏览器中完全不能用），去除样式类标签。去除img、a，彻底修改Form，开发者不欢迎，浏览器不支持。

HTML5：

HTML5设计思想：1、兼容已有内容，2、避免不必要的复杂性，3、解决现实的问题（支持实现复杂的交互，比如定位，locals），4、优雅降级（比如，可以在canvas中写html，如果浏览器中不支持canvas，就执行canvas中的html代码，支持就忽略继续执行。），5、尊重事实标准，6、用户》开发者》浏览器厂商》标准制定者》理论完美。

HTML5中的变化：doctype、meta，新增语义化标签和属性，去掉纯展示性标签，canvas、video、audio、离线、本地存储、拖拽等

HTML5中的语法：标签不区分大小写，推荐小写；空标签可以不闭合，比如input、meta；属性可以不用引号，推荐双引号

标签分类：流式元素、可交互内容、段落内容、标题内容、章节内容

HTML中的文本标签：

• p、h1~h6（读附加的文章，会影响SEO）、hr段落级别的话题切换（在一个section中讲一个时期，前面几段是一个主题，后面是一个主题，在两个主题中间加一个<hr>语义，展示出来是一个横线）;

• 列表：有序列表（ol,ol中有一个start属性，从几开始）、无序列表（ul）、列表嵌套（默认的一级、二级前面的图标不一样）、定义列表（dl，用来描述键值对，dt,dd，一个dt可以对应多个dd，多个dt可以对应一个dd）;嵌套规则。

• 引用：<blockquote cite=”http://....”></blockquote>长段落引用；<cite></cite>短引用，比较短，只提到书名、电影名之类的；<q></q>;
  cite和q的区别：cite表示这块东西的来源、标题，书名，第一章之类。q引用一句话，包括的一句内容。

• 预格式化文本：pre（p中的标签会把多个空格、换行合为一个空格）：保留代码中的原格式，包括换行，空格

• 代码：code .短代码…，长代码<pre>…</pre>
  figure：可以用来表示图表，也可以做其他用途。<figure><figcaption>对figure的标题</figcaption></figure>

• 网页总体结构：
  

• 内容划分：header、nav、main、article、aside（附加的内容，去掉能看懂，如果看不懂应该放入main中）、footer

• 我因为用什么标签？
  

• 强调：strong: 重要性、严重性和紧急性（比如医院中是否要找一个医生吗？是，立即，马上。）；em：从一句话中突出某个词语（比如是否需要找一个医生？不，要一个护士。护士用em，强调一个词）；b：将词语从视觉上和其他部分区别，比如一篇论文摘要中的关键词；i：换一种语调去说一句话时，比如其他语言翻译，对话中的旁白

• 定义与缩写：dfn 定义；abbr 缩写，title属性做进一步的解释。比如：

<p><dfn>HTML是HyperText Markup Language的简称，一种用户创建网页的标记语言</dfn></p>

<p><abbr title="HyperText Markup Language">HTML</abbr>
标准由<abbr title="World Wide Web Consortium">W3C</abbr>
制定和修改。</p>

• 代码：code；var 描述变量；需要kbd 用户操作键盘时可以用；samp 用例的输出。

• 上标和小标：sup；sub

• mark：和用户当前行为相关的突出，比如在所示结果中匹配到的词，或者在一部分内容需要在后面引用时。

• 插入和删除：ins 插入；del 删除

• 换行控制（尽量避免）：br 手动控制内容换行；wbr 在展示的时候，需要换行时，会在wbr出现的地方做一个换行的处理

• div和span：找不到其他标签用的时候

• 实体（Entity）字符：& <&gt:©¥

HTML：链接

• 省略协议： 现在是什么协议就会跳转成什么协议，比如当前现在是http，跳转后是http。可以节省一点字节，如果在https中引用了http的资源，浏览器时不会让引用的，但是如果省略协议，浏览器就可以跳转成HTTPS，就可以用了。
  省略协议和host： 会自动补齐协议和host.

• $0 当前选中的东西。 Chrome控制器中的

• 相对路径和绝对路径：

    <a href=”/a/b/c.html”>绝对路径</a>  host省略，从跟目录写起，这个用的比较多。
  
    <a href=”a/b/c.html”>相对路径</a>
    <a href=”../../c.html”>相对路径</a>

• 页面内链接（锚点）：

       <a href=#test>到test</a>
  

• 链接目标：

       <a href=”..”  target=”_self”>当前窗口打开</a>
       <a href=”..”  target=”_blank”>新窗口打开</a>
       <a href=”..”  target=”abc”>自定义abc方式</a>
  

HTML：图片

• <img src=”/path/to/img.jpg” alt=”替代文字” width=”300” height=”200”> alt必须写，比如盲人在用读屏设备，就读alt中的文字。图片未加载，可以通过alt来表明图片内容。width和height建议在html中写。Html中的width和height不能写单位，默认为px

• 指定图片宽高：
  不指定高宽：原图大小显示；指定宽度：按比缩放到指定宽度；指定高度：按比例缩放到指定高度；指定宽高

• 常用图片格式：
  1、Jpg：照片，颜色种类比较多；2、Png：色彩较少时使用，png24可以办透明；3、Gif:：适合色彩较少时，无法半透明，可以多帧做动画；4、Webp：google新出的，照片和色彩较少的都可以使用，而且大小会比jgp和png小一些，但是有部分浏览器不支持，所以有兼容性问题。

HTML：表格

• table, 只要被认为是表头都可以用th

<table border=”1”>
<caption>表格标题，caption 必须是table的第一个元素，对盲人读屏软件来说要先知道这个表格做什么的</caption>
列组（colgroup）可以一列一列的来定义样式
<colgroup>
    <col class=”browser”>
    <col class=”..”  span=2>  <!—两列-->
</colgroup>
<thead>
    <tr>
        <th></th>
        <td></td>
</tr>
</thead>
</table>

可以用css来绘制表格，有什么区别呢？1、用css描写，会把表格给固定了，要调整位置很麻烦，会要把html重写2、性能问题，如果用css，要把html加载后，再加载样式3、语义化

HTML：表单

• 使用form获取让用户提供数据
  <form action=”/echo” method=”POST”> action：在用户提交数据后，希望提交到哪个URL。

• GET vs. POST
  1、get从服务器获取，get是一个比较安全的操作，不会对服务器的数据有改动；post向服务器提交数据，会对服务器的数据有一些改动；2、缓存上，get有可能是缓存的，post永远不会缓存；3、数据传输的方式，get请求会把每一个字段都放在url中，可以一次性把请求都发给服务器，POST不会把数据放在url中，而是会进行编码，然后把编码后的数据存在http的body中，再发送给服务器。数据发送时分两拨，先发送head，服务器同意后再发送body。

• URL encode（编码）

• HTTP method:
  GET、POST、HEAD：不会返回http内容，只返回http head、PUT、DELETE、OPTIONS：用来返回HTTP有哪些head选择，常用在跨域中

• 单行文本框：<input name=”username” value=”zhaowenbo”>

• placeholder：

• autofocus：焦点focus到要输入的地方

• 密码：

• 多行文本框：

• 输入验证：required：必填的；想要更好的提示语句在js中写，原生的验证及时性不是很好.

<form action=”/echo”>
  <p><input  required  minlength=”2”  maxlength=10”  placeholder=”2-10位”></p>
  <p><input  pattern=”1\d{10}”  placeholder=”输入手机号”></p>
</form>

• type：
  search,email,url，在可用性上做一些辅助，对读屏软件来说有区别，在手机上有区别，键盘的布局会不一样，在手机上如果是search，go会变成搜索。而且有输入验证，比如email，会验证邮箱格式。

• novalidate：
  不实现验证，在。如果要自己实现验证，不用默认的就写这个：<form action=”/echo” novalidate>

• radio：单选框

• checkbox:复选框

• laber：
  关联文字，使点击文字也可以点击到。以及读屏软件可以同label知道输入的是什么。两种方式：

<p><label for=”name”>请输入你的名字：</label></p>
  <p><input id=”name” type=”” name=””>

• select：
  实现多选：加一个 multiple 属性；size属性，决定露出来几个选项，默认1个

• 分组： optgroup

• hidden：
  不在界面上展示出来，隐藏。type=”hidden”

• 文件选择：multipart/form-data：把提交的file分为几段
  同时选择多个文件：<input type=”file” name=”resume” multiple>;对选择的文件进行一个筛选： <input type=”file” name=”resume” multiple accept=”image/*”> // 只能选择图片;可以不用原生的上传，使用js

<form action=”/echo” method=”post” enctype=”multipart/form-data”>
<input type=”file” name=”resume”>

date & time：
<input type=”date”>
datetime-local
month
week
number &range：
input type=”number” min=”0.5” max=”2.5” step=”0.01” name=”height” value=””
input type=”rage”
<output>元素：对用户输入的输出结果 output for=”weight”
color:
<input type=”color”>
button：
type属性：submit,button（没有默认行为，要用js来实现）,reset。默认值是submit
回车提交：？？？
只要有input，按下回车后就会提交，浏览器自动触发？？
<button onclick=”alert(1)”>不指定type</button>
触发控件：
disabled, readonly：对readonly来说会提交到服务器，但是只读。disabled不能提交到服务器
表单设计：
帮助用户不出错（能让选的就不让填，对填的可以进行一些辅助，比如输入邮箱的时候提示补全）
尽早提示错误
扩大选择/点击区域
空间较多时要分组
分清主要动作和次要动作
传统上，用p把input包裹起来比较多。

HTML：扩展知识
全局属性：（几乎所有的元素都可以拥有的属性）
1、accesskey & tabindex
accesskey 可以给每个元素指定一个key，当用户在键盘上按下ctrl+alt+这个key，就相当于点击了这个元素。如何告诉给用户可以这样按呢？有的插件当按下Ctrl时，会在旁边显示。
tabindex 通过table键可以控制页面元素。如果做得不是很好，会出什么问题呢？
2、id,class,style
3、contenteditable & spellcheck
contenteditable : 页面是可以被修改的，而是是html的，是富文本的，不是text的。
spellcheck：拼写检查，不是布尔值。这样写spellcheck=””
4、语言lang & dir
lang：在大网站有多语言版本时，很有用。
dir：文字书写方向，默认是从左到右的书写顺序。从右到坐时：dir=”rtl”
5、title
鼠标放上去，可以看见解释或者完全的文字。体验不是很好，因为有延迟。所以一般自己做
6、hidden
<p hidden>你看不见我</p> 一般用于暂时隐藏，等待一个时机显示出来。和display:none类似，但是在恢复元素的时候，要考虑是block，还是inline-block。使用hidden属性还有一个是有利于读屏软件。
7、无障碍性
8、web开发者应该做的事情
WCAG（比较老，更多的关注的是内容上的规范）
ARIA（Accessible Rich Internet Applications）对Web的富应用做了一个可用性的规范，不管用什么标签来实现这个功能，可以加上aria属性，来告诉辅助性软件这个标签是做什么的
9、ARIA
指定role
<ul role=”menubar”>
<li role=”menulist”>
10、提升无障碍性
为img提供alt属性
noscript：HTML标签，对于不支持JavaScript的浏览器，给予一个替代性的方案或者一个提示
input和label对应
图形验证码与语音验证码
文字和背景有足够对比度
键盘可操作
11、语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
12、为什么语义化很重要？
提升代码可读性、可维护性
搜索引擎优化
提升无障碍性
13、扩展HTML
meta标签：对整个页面相关的一般都写在meta中
data-*属性：来存储自定义的属性， $0.dataset可以用语获取自定义属性的值
<li data-id=”1”>apple</p>
<li data-id=”2”>banana</p>
microdata：告诉浏览器，这个实体是一个什么东西。Itemscope itemtype itemprop，一个实体
HTML5中的一个规范
在HTML中通过属性嵌入格式化数据
提供给搜索引擎、浏览器（插件）使用。比如在搜索引擎中搜索一个饭馆，可以在搜索页面中，看见提取出来的信息：

JSON-LD：
  把上面的代码结合到js中

HTML编码规范：html valid..
推荐两个工具：emmet,markdown
caniuse.com