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

HTML

1. 前端考虑因素

• 功能，兼容性，安全性，设计，可用性，性能，用户体验

2. 浏览器结构

3. 浏览器内核

4. html标签

5.链接

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

6.图片

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

7. table

<table>
<!--必须是table第一个子元素-->
<caption>浏览器引擎</caption>
<colgroup>
<col calss="first">
<col calss="second-third" span="2">
<!--批量为每列添加样式，span是跨越几列-->
<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:

  
  {
  "@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"
  }
  }
  

• 工具
  
  • emmet
  • markdown

10. 作业

1. 找茬：任意一个线上页面（各大公司），支出html代码中的不合理之处
2. 简历：制作个人简历
3. 表单设计：找一个比较长的表单尝试优化
4. 课程表：把自己课程表做成一个页面