HTML

前端三大件

• HTML 结构
• CSS 样式
• JavaScript 行为

HTML

常见元素

header 区元素

• meta:

  <meta charset="utf-8">
  charset:字符集
  utf-8包括中文英文几乎包含所有语言字符集
  
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  viewport: 手机屏幕代表的视图入口有多大。为了适配各种屏幕宽度。
  

• title

• style

• link

• script

• base

  <base href="/">
  会出现在一些 router 框架中，他会指定一个基础的路径
  

body 区元素

• div(万能元素，语义不清楚：层区域容器？)/section/article/aside/header/footer（区域）
• p（段落）
• span/em/strong（行内）
• table/thead/tbody/tr/td（表格）
• ul（无序）/ol（有序）/li（列表里的 item）/dl（定义的列表）/dt（定义标题）/dd（定义的内容）（列表）
• a（链接）[href-链接地址,target-在哪里打开链接，默认 self，_blank(新窗口)]
• from（表单）/input（输入框）/select（下拉框）/textarea（输入区）/button（按钮）
• img[src-资源,alt-替换资源]
• table td[colspan,rowspan]（表格）
• from[target-提交给谁,method-get，post,enctype-encodetype]
• input[type,value，name-name 相同表示一组，同时只能一个被选中，type-submit 只有在表单中（from 标签）才有意义]
• button[type-button普通按钮，submit-只有出现在表单中才有意义，reset 也只有在表单中]
• select>option（具体下拉框的选项）[value，selected-option 的属性表示默认选中]
• label[for-参数是具体标签，例如 id]（在用户选择一些东西的时候，只能点击按钮，后面的文字不能点击，这个可以帮忙解决）

理解 HTML

• 是一份文档
• 描述文档的结构
• 有区域-section，aside，footer和大纲
• 查看一个网站的结构：h5o.github.io
• 良好的结构可以被人与机器更好的识别

版本

• html4/4.01基于 sgml,语法随意
• xhtml 语法要求严格：标签必须小写，属性必须小写，bool 属性必须有值（checked=false），标签必须结束，属性必须带引号
• html5

h5新增内容

1. 区块类

   • section
   • article
   • nav
   • aside(不太重要的区块，放置一些广告)

2. 表单增强

   • input 的 type 新增了一些日期时间等
   • 表单验证，一些正则
   • placeholder，自动聚焦

3. 语义的新增

   • header/footer 头尾
   • section/article 区域
   • nav
   • aside
   • em(斜体)/strong（粗体）语义强调标签
   • i-icon

元素分类

分类角度很多，从样式，功能

默认样式分类

• block 块，占据整行,例如 div，p
• inline 行内，文本居多，span，em，strong,没有规则形状，在显示位置不够时会换行，不能一直表现成一种规则方形区域，设置宽度无效
• inline-block,select，对内（对在一个行内）可以与其他内联标签在同一行，但是在空间不足时，还是会继续保持规则方形，有自己的长宽

内容分类

• flow可见元素
• heading
• sectioning
• metadata
• embedded 嵌入元素：audio，canvas
• phrasing em，strong
• interactive 交互元素
• 参考链接：

嵌套关系

• 块包含行内
• 块不一定包含块：p 不能包含 div，section 可以包括 div
• 行内元素一般不能包括块级元素，a>div
• h5以前分类是按 inline，与 block 分类，a 包含 div 不合法，但是主流浏览器却都支持，因为现实中点击图片问题跳转到其他链接很多
• h5合法化， 包含关系通过，content model决定，a 的 content model 是 tranaparent(透明），在计算嵌套合法性的时候相当于不存在

默认样式和定制化

• 优缺点具在
• 解决方法 cssreset

疑惑解答

• doctype：浏览器兼容标准模型渲染，元素合法，width=实际宽度+margin+padding
• html，xhtml，html5：html 属于 sgml，xhtml 利用 xml严格化的 html，html5属于自己的规范相比 xhtml 宽松
• html5变化：新的语义化元素，表单增强，新的 api-离线音视频，图形，时事通行，本地储存，设备能力-定位，陀螺仪，新的嵌套规则
• em 和 i： em 语义化的标签，表强调，i 纯样式的标签，表示斜体
• 语义化的意义：开发者容易理解，机器（搜索，读屏）容易理解，有助于 seo
• 自闭和：input，img，br，hr，meta link
• html 和 dom：html 是死的字符，dom 是 html 解析而来的 dom 树，是有层级结构的。js 操纵的是 dom 树
• property 和 attribute：attribute 是死的在 html 文档中，不能通过 js 操纵，只能通过间接方法（$0.setAttribute('value','3'）property 是 dom 树中的，$0是选中元素。
• from,表单提交，用于浏览器保存表单