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将不同浏览器的默认样式设置为一致
