HTML5训练营,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中讲一个时期，前面几段是一个主题，后面是一个主题，在两个主题中间加一个

---

语义，展示出来是一个横线);

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

引用：

长段落引用； 短引用，比较短，只提到书名、电影名之类的； ;

cite和q的区别：cite表示这块东西的来源、标题，书名，第一章之类。q引用一句话，包括的一句内容。

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

代码：code .短代码…，长代码

…

figure：可以用来表示图表，也可以做其他用途。

对figure的标题

网页总体结构：

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

我因为用什么标签？

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

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

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

HTML

标准由W3C

制定和修改。

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

上标和小标：sup；sub

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

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

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

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

实体(Entity)字符：& 

HTML：链接

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

省略协议和host： 会自动补齐协议和host.

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

相对路径和绝对路径：

绝对路径 host省略，从跟目录写起，这个用的比较多。

相对路径

相对路径

页面内链接(锚点)：

到test

链接目标：

当前窗口打开

新窗口打开

自定义abc方式

HTML：图片

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

列组(colgroup)可以一列一列的来定义样式

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

HTML：表单

使用form获取让用户提供数据

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选择，常用在跨域中

单行文本框：

placeholder：

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

密码：

多行文本框：

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

type：

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

novalidate：

不实现验证，在。如果要自己实现验证，不用默认的就写这个：

radio：单选框

checkbox:复选框

laber：

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

请输入你的名字：

select：

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

分组： optgroup

hidden：

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

文件选择：multipart/form-data：把提交的file分为几段

同时选择多个文件：;对选择的文件进行一个筛选： // 只能选择图片;可以不用原生的上传，使用js

date & time：

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 for=”weight”

color:

button：

type属性：submit,button(没有默认行为，要用js来实现),reset。默认值是submit

回车提交：？？？

只要有input，按下回车后就会提交，浏览器自动触发？？

不指定type

触发控件：

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

你看不见我

一般用于暂时隐藏，等待一个时机显示出来。和display:none类似，但是在恢复元素的时候，要考虑是block，还是inline-block。使用hidden属性还有一个是有利于读屏软件。

7、无障碍性

8、web开发者应该做的事情

WCAG(比较老，更多的关注的是内容上的规范)

ARIA(Accessible Rich Internet Applications)对Web的富应用做了一个可用性的规范，不管用什么标签来实现这个功能，可以加上aria属性，来告诉辅助性软件这个标签是做什么的

9、ARIA

指定role

• 10、提升无障碍性

  为img提供alt属性

  noscript：HTML标签，对于不支持JavaScript的浏览器，给予一个替代性的方案或者一个提示

  input和label对应

  图形验证码与语音验证码

  文字和背景有足够对比度

  键盘可操作

  11、语义化

  HTML中的元素、属性及属性值都拥有某些含义

  开发者应该遵循语义来编写HTML

  12、为什么语义化很重要？

  提升代码可读性、可维护性

  搜索引擎优化

  提升无障碍性

  13、扩展HTML

  meta标签：对整个页面相关的一般都写在meta中

  data-*属性：来存储自定义的属性， $0.dataset可以用语获取自定义属性的值

• apple
• banana

  microdata：告诉浏览器，这个实体是一个什么东西。Itemscope itemtype itemprop，一个实体

  HTML5中的一个规范

  在HTML中通过属性嵌入格式化数据

  提供给搜索引擎、浏览器(插件)使用。比如在搜索引擎中搜索一个饭馆，可以在搜索页面中，看见提取出来的信息：

  JSON-LD：

  把上面的代码结合到js中

  HTML编码规范：html valid..

  推荐两个工具：emmet,markdown

  caniuse.com