首页手记奇舞团前端特训第一次课程笔记—&mdash...

奇舞团前端特训第一次课程笔记——HTML

标签：

Html/CSS Html5 前端工具

1. 前端考虑因素

功能，兼容性，安全性，设计，可用性，性能，用户体验
2. 浏览器结构

3. 浏览器内核

浏览器	渲染引擎	js引擎
IE	Trident ([‘traɪd(ə)nt])	Chakra
IE Edge	EdgeHTML	Chakra
chrome	Bink	V8
opera	Bink	V8
Firefox	Gecko ([‘gekəʊ])	Spidermonkey
Safari	Webkit	JavaScriptCore

4. html标签

5.链接

省略协议：会根据当前页面的协议自己补充
省略协议和host：会根据当前页面的协议和host自己补充
锚点：#后面没有任何东西就会到页面顶部
target : target="abc",给一个名字，在相同名字打开的窗口会在同一个窗口打开

6.图片

alt:替代文字。<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="x/x.jpg" alt="替代文字" width="300" heigth="300"> 读屏软件能读，还有省流量模式下显示文字，还有seo友好。
withd,heith:建议写上，在图片还没加载完，它会占据空间，避免闪动。不指定宽高，原图大小显示；指定宽度，按比例缩放到指定宽度；指定高度，按比例缩放到指定高度。
常用格式
- JPG 照片
- png 色值较少的情况；半透明
- gif 无法半透明；可以实现多帧动画
- webp 大小更小；兼容性不好

7. table

<table>  <caption>浏览器引擎</caption> <colgroup> <col calss="first"> <col calss="second-third" span="2">  <colgroup> <thead> <tr> <th>浏览器</th> </tr> </thead> <tbody> <tr> <th>chrome</th> </tr> <tbody> </table>

8. form

GET:浏览器一般会缓存；数据第一次就会随http header发送到服务器；一般只为获取数据，不修改服务器数据
POST：一般不缓存；数据第二次就随http body发送到服务器；对服务器数据有修改时使用
输入验证
- required
- minlength="2" maxlength="10"
- pattern="1\d{2}"
type: search(对于读屏软件友好，手机上键盘上会有搜索按钮),text，email，url
novalidate：在form上添加该字段，浏览器禁用默认的验证
label：关联checkbox和文字联动，增加易用性；<lable for="name"></lable><input id="name">或<lable><input/></lable>,两种方式关联，对读屏软件友好
select: 、
- multiple 多选
- size 多选时显示几个
- optgroup 分组
文件选择
- enctype:multipart/form-data,用一个boundary分隔符去分割每个字段，
  
  ----webkitboundarydsadsadsd
  Content-Disposition: form-data; name="name"
  
  John
  ----webkitboundarydsadsadsd
date & time:
- date
- month
- week
- time
number & range: min,max,step
output: for属性，来自于谁的输出（填input的name），但还是需要js来辅助输出
button：type
- submit，默认的type值，注意;如果绑定了click事件，回车提交前浏览器会触发click事件再提交（button在form里）
- button
- reset
readonly & disabled:用户都不可操作；区别在于，readonly的字段还是会提交到服务器的，但disabled的不会被提交到服务器
表单设计
- 帮助用户不出错
- 尽早提示错误
- 扩大选择、点击区域
- 控件多时分组
- 区分主要操作和次要操作
回车提交：光标在input里的时候，默认回车提交，不论是否有提交按钮

html补充

accesskey & tabindex:
- accesskey="i",按下ctrl+alt+i,相当于点击;方便键盘操作
- tabindex="-1",按tab键将根据tab键的index升序切换，指定了该属性的元素就不要禁用outline，不然focus后元素没有变换，不友好
id,class & style
contenteditable & spellcheck
- contenteditable 将元素内容变成可编辑状态
- spellcheck 拼写检查
lang & dir
- lang="zh-CN",页面或元素的语言，任何标签都可使用
- dir="rtl",文字的抒写方向，如阿拉伯语，从右到左
title：大部分元素可以设置，当文字过长，省略一部分后，可以把全文显示在title里，hover的时候显示
hidden：<p hidden>你看不见我</p>
无障碍性： WCAG、ARIA
提升无障碍性
- 为img添加alt
- noscript
- input和lable对应
- 图形和语音验证码
- 文字和背景有足够的对比度
- 键盘可操作
语义化
- 提升可读性、可维护性
- seo优化
- 提升无障碍性
  9. 扩展html
meta
- charset 编码
- http-equiv 指定http header
- keyword description seo优化
- viewport 移动端viewport
- renderer 360浏览器指定内核
data-*:dataset 获取数据
microdata
- 语义关系网
JSON-LD:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "John Doe",
"jobTitle": "Graduate research assistant",
"affiliation": "University of Dreams",
"additionalName": "Johnny",
"url": "http://www.example.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "1234 Peach Drive",
"addressLocality": "Wonderland",
"addressRegion": "Georgia"
}
}
</script>
工具
- emmet
- markdown