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页面使用的标准和版本，二、浏览器根据 doctype 来决定使用哪种渲染模式。渲染模式：怪异模式Quirks Mode，准标准模式Almost Standard Mode（比较严苛？当时每太听清，也没找到相应的资料，找到了再补充），标准模式Standard Mode。不写doctype就到怪异模式。

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

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

HTML5：

HTML5设计思想：一、兼容已有内容，二、避免没必要要的复杂性，三、解决现实的问题（支持实现复杂的交互，好比定位，locals），四、优雅降级（好比，能够在canvas中写html，若是浏览器中不支持canvas，就执行canvas中的html代码，支持就忽略继续执行。），五、尊重事实标准，六、用户》开发者》浏览器厂商》标准制定者》理论完美。

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

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

• 经常使用图片格式：
  一、Jpg：照片，颜色种类比较多；二、Png：色彩较少时使用，png24能够办透明；三、Gif:：适合色彩较少时，没法半透明，能够多帧作动画；四、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来绘制表格，有什么区别呢？一、用css描写，会把表格给固定了，要调整位置很麻烦，会要把html重写二、性能问题，若是用css，要把html加载后，再加载样式三、语义化

HTML：表单

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

• GET vs. POST
  一、get从服务器获取，get是一个比较安全的操做，不会对服务器的数据有改动；post向服务器提交数据，会对服务器的数据有一些改动；二、缓存上，get有多是缓存的，post永远不会缓存；三、数据传输的方式，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：扩展知识
全局属性：（几乎全部的元素均可以拥有的属性）
一、accesskey & tabindex
accesskey 能够给每一个元素指定一个key，当用户在键盘上按下ctrl+alt+这个key，就至关于点击了这个元素。如何告诉给用户能够这样按呢？有的插件当按下Ctrl时，会在旁边显示。
tabindex 经过table键能够控制页面元素。若是作得不是很好，会出什么问题呢？
二、id,class,style
三、contenteditable & spellcheck
contenteditable : 页面是能够被修改的，而是是html的，是富文本的，不是text的。
spellcheck：拼写检查，不是布尔值。这样写spellcheck=””
四、语言lang & dir
lang：在大网站有多语言版本时，颇有用。
dir：文字书写方向，默认是从左到右的书写顺序。从右到坐时：dir=”rtl”
五、title
鼠标放上去，能够看看法释或者彻底的文字。体验不是很好，由于有延迟。因此通常本身作
六、hidden
<p hidden>你看不见我</p> 通常用于暂时隐藏，等待一个时机显示出来。和display:none相似，可是在恢复元素的时候，要考虑是block，仍是inline-block。使用hidden属性还有一个是有利于读屏软件。
七、无障碍性
八、web开发者应该作的事情
WCAG（比较老，更多的关注的是内容上的规范）
ARIA（Accessible Rich Internet Applications）对Web的富应用作了一个可用性的规范，无论用什么标签来实现这个功能，能够加上aria属性，来告诉辅助性软件这个标签是作什么的
九、ARIA
指定role
<ul role=”menubar”>
<li role=”menulist”>
十、提高无障碍性
为img提供alt属性
noscript：HTML标签，对于不支持JavaScript的浏览器，给予一个替代性的方案或者一个提示
input和label对应
图形验证码与语音验证码
文字和背景有足够对比度
键盘可操做
十一、语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
十二、为何语义化很重要？
提高代码可读性、可维护性
搜索引擎优化
提高无障碍性
1三、扩展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,markdowncaniuse.com