一、HTML

HTML常见元素和理解

• 在head中，资源和信息描述

  • meta

  <meta charset="utf-8"> 
  //字符集
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
  //视口,宽度等于设备宽度，初始化缩放比例为1，最大缩放为1，用户不能缩放，适配移动端的第一步
  

  • title
  • style
  • link
  • script
  • base

  <base href="...">
  //指定基础路径，所有链接都以该路径为基准
  

• 在body中主要是信息的展示

  • div/section/article/asidediv/section/article/aside/header/footer
  • p
  • span/em/strong
  • table/thead/tbody/tr/td
  • ul/ol/li/dl/dt/dd
  • a
  • form/input/select/textarea/button

HTML重要属性

• a[href,target] // 链接；在哪个窗口打开链接（_self,_blank）
• img[src,alt] // 图片地址；图片不可用时的替换资源
• table td[colspan,rowspan] // 合并单元格
• form[target,method,enctype] // 表单提交到哪；get/post方法;编码方式
• input[type,value] // 类型（password/button/text/radio(name相同表示是同一组)/checkbox/submit)；值
• button[type] // 按钮
• select>option[value] // 下拉框
• label[for] // 和表单项关联，关联input的id

Tips:Ajax还需要使用form吗？

建议使用form，因为：1.form可以利用submit、reset 2.可以对表单批量操作 3.可以和组件结合，做表单验证 4.可以记住用户名密码

如何理解HTML

• HTML是一种“文档”
• 描述文档的“结构”

HTML版本

• HTML4/4.01(SGML 标记语言)
• XHTML(XML)
• HTML5

HTML新增了内容

• 新区块标签
  • section // 区块
  • article // 区块
  • nav // 导航
  • aside // 不太重要的区块（如广告）
• 表单增强
  • 新增类型：日期、时间、搜索
  • 表单验证
  • placeholder 自动聚焦
• 新增语义
  • header/footer 头部、尾部
  • section/article 区域、正文区
  • nav 导航
  • aside 侧边栏
  • em/strong 强调代替i/bold
  • i icon
• 新的API（离线、音视频、图形、实时通信、本地存储、设备能力（获取定位、陀螺仪等））

HTML元素分类

• 按默认样式分

  • 块级元素block：可定义宽高，默认占据一整行
  • 行内元素（内联元素）inline：不可定义宽高，和其他元素在一行
  • inline-block：对外inline,对内block(和其他元素在一行，但是可定义宽高),input,select等

• 按内容分

  
  
  • Flow: 文档流元素（大部分可见元素）
  • Heading: h1~h6,hgroup
  • Sectioning: 区块元素，article，nav，aside
  • Phrasing:短语元素，strong,em
  • Embedded:嵌入资源，audio,video,img
  • Interactive: 有交互的元素，a,input
  • Metadata: title,base,script等

HTML嵌套关系

• 块级元素可以包含行内元素
• 块级元素不一定可以包含块级元素（p不能包含div）
• "行内"元素一般不能包含块级元素，但是a元素可以包含块级元素
  为什么a包含div是合法的

不一定合法，取决于外面是什么元素，嵌套关系见https://www.w3.org/TR/html5/grouping-content.html#grouping-content
合法的如下：
<div>
    <a href='#'>
    <div>
        <img src="...">
        <p>广告文案</p>
    </div>
</a>
</div>

HTML默认样式和重置

• 不同浏览器有差异
• 简单方法

*{
    margin:0;
    padding:0
}

• YUI提供的的cssreset
• Normalize.css将不同浏览器的默认样式设置为一致