HTML复习

第一章：简介

HTML 发展得很好

第二章：标签

1. div：表示区块，对页面整体进行分区与section不同 span：对行内元素进行分组 过度使用div容易造成结构复杂化
2. 属性：id 和 class 尽量避免class的广泛使用
3. article 定义文章块 用来标识页面中一块完整的，独立的，可以被转发的内容。article可以嵌套使用比如文章和评论 强调独立性
4. section 表示区块 在页面中 多对内容进行区分 例如章节 页眉 页脚 文档中的其他部分 强调相关性
5. nav 表示导航条 用来表示页面导航的链接组 主菜单，侧边栏等
6. aside 表示侧边栏 或者作为主体内容的附属信息部分（用在article元素内）
7. main 定义主要区域 标识网页中的主要内容 是相对独立的
8. header 表示页眉 表示页面标题栏放在整个页面前面 或者内容块的标题 一个页面可以多次使用header元素
9. footer表示脚注 用来标识文档或节的页脚 一个页面中可以包含多个页脚元素

第三章：文本和版式

结构化文本

1. 标题文本 h1 h2 h3
2. 段落文本 p 在段落文本前浏览器会自动创建一定距离的空白，可用css 重置这些样式。
3. 引用文本 q 和 blockquote

q定义短的引用 自动添加 “ ” 号 blockquote定义块引用 左右两侧缩进显示，一段文本不能直接放在blockquote元素中 应当包含在一个块元素 如 p 中
q元素 含cite属性 定义引用的出处和来源 blockquote也有cite 定义了引用的来源URL 通常与a配合用。

描述性文本

对于极个别过时的纯样式标签不再建议使用 如 basefont font center s strike u

1. 强调文本 em 默认为斜体 strong 默认为粗体 用户可根据css样式改变 尽量少用em strong
2. 格式文本 b：粗体 i：斜体 big：大号字体 small：小号字体 sup：上标 当前文字的一半高度显示，大小不变，可以作为脚注 sub：下标
3. 输出文本 code：代码字体 pre：保留源代码中的空格大小 tt：打印机字体 kbd：键盘字体 dfn：定义的术语 var：变量字体 samp：代码范例
4. 缩写文本 abbr title全局属性 鼠标移上去显示完整版本
5. 插入和删除文本 ins：插入 del：删除 属性有：cite datetime
6. 文本方向 bdo：包含dir属性（rtl右到左 / ltr左到右） 和 bdi用于内容的方向未知的情况不逼包含dir

功能性文本

1. 标记文本 mark 表示页面中需要突出显示或高亮显示的信息
2. 进度信息 progress 两个属性 max：定义任务一个需要多少工作量 value：定义已经完成了多少任务 progress元素不适合用来表示度量衡 如需，请使用meter元素
3. 刻度信息 meter 定义已知范围或分数值内的标量，进度。例如磁盘用量，查询结果的相关性等。

meter包含7个属性 value：在元素中特别标识出来的实际值，默认值为0。 min max：为规定范围 hight low：为范围的上下限。optimum:设置最佳值。form：设置meter所属的一个或者多个表单。

4. 时间信息 time datetime：定义日期和时间，否则有元素的内容给定时间和日期 pubdate定义文章或者整个页面发布的时间
5. 联系文本 address 位于body元素中表示文档联系信息 位于article元素中表示文章联系信息
6. 换行断点 wbr 当窗口变化时 浏览器会根据断点确定换行位置。
7. 文本注释 ruby 配合元素：rt（定义字符的解释或发音） rp当浏览器不支持rt时显示的内容

第四章：图像和多媒体信息

使用图像

1. 插入图像 img标签 属性：src alt width height ismap：服务器映射 usemap：客户端映射 longdesc：指向包含长的图像描述文档的URL；
2. 图文混排 用到CSS

使用多媒体插件

1. embed标签 属性 src type：类型 height width hidden：隐藏插件（bool） autostart自动播放（bool） loop：循环 infinite
2. object标签 属性很多 data：对象数据的URL name：对象定义的唯一名字 type：规定data对象属性中指定的文件中出现的数据的MIME类型 param必须包含在object标签内 name为配置项目 value为项目值

使用HTML5 音频和视频

1. 使用audio audio可以包裹source 用来导入不同格式的文件

source 可以包含与audio 和 video 用来确定播放的格式

2. 使用video

第五章：设计列表和超链接

无序列表

1. ul 无序列表是一种不分排序的列表结构
2. ol 有序列表 是一种在意排序的列表结构 属性：reversd=“reversd” 顺序为将次 start“2” 列表的初始值 type=“标记类型（a，A，i，I，1）”
3. dl dt dd 描述列表 包括词条和解释两部分
4. menu 标签 可以包含标签 command和munuitem 也包含了两个专用属性：label（定义菜单的可见标签）；type（定义要显示哪种菜单类型）
5. 快捷菜单 menuitem 定义菜单项目 仅用作弹出菜单的命令 menu和menuitem一起用，将把新的菜单合并到本地的上下文菜单中

目前仅有Firefox浏览器支持此标签

定义超链接

1. 超链接大致分三种 内部链接（相对路径/绝对路径） 锚点链接（跳到# 标记的位置） 外部链接（外部网站）
2. 使用 a 标签 属性 download（规定被下载的目标） rel（规定当前文档与被链接文档之间的关系） target（在何处打开） type（归档被链接文档的MIME类型）
3. 定义锚点链接：指定向同一页面或者其他页面中的特定位置的链接，任何被定义了ID名的元素都可以作为锚点标记。然后使用a元素 herf=“#+锚点标记元素的ID”
4. 定义目标链接 链接可以指向各种类型的文件 ，如果是浏览器不能识别的类型，则会弹出文件下载的对话框。定义e-mail链接时 mailto：=地址+？+subject= 文字
5. 定义下载链接 download可以强制浏览器执行下载操作
6. 定义图像热点 图像热点就是为图像的局部区域定义超链接，当单机改热点区域时会触发超链接，并条状到其他网页或者网页的某个位置 常用来在图像中设置导航 map 和 area 标签配合使用 usemap属性可以应用map中的id或name属性 根据浏览器不同 所以两个都添加
7. 定义框架链接 iframe 浮动框架 属性：frameborder（1，0）：是否像是框架边框 name: 规定框架名字 scrolling（yes no auto）：是否在框架中显示滚动条 seamless：规定框架看上去像文档的一部分 srcdoc：规定框架中显示HTML内容

第六章：设计表格

表格结构

1. 行 列
2. 标签 table caption（表格标题） th（表头单元格） tr（行） td（单元格，默认为左对齐） thead tbody tfoot col(用在table或者colgroup标签中) colgroup（用在table标签中）

新建表格

1. 定义普通表格 table tr td
2. 定义列标题（表头单元格） 每列可以定义一个列标题 th 默认文本为居中 加粗 可以放在行首 或者 列首
3. 表格标题 caption 每个表格只能有一个标题
4. 表格行分组 thead tbody tfoot 使用这三个元素时要全部使用 且排列顺序为head foot body 这样浏览器在接受完全部数据之前就会先呈现页脚。colspan属性可以横向合并单元格 colspan=“2” 合并两个单元格为一个单元格
5. 表格列分组 col（align（left/center/right/justify两端对齐/char对准指定字符）） colgroup（span属性 表示列组应该横跨的列数） 可以对表格中的列进行分组 由于浏览器不统一 不建议使用align 可以把col嵌入到colgroup元素中

table 属性 border width frame（外边框线显示） rules（内边线显示） summary（表格摘要）

1. 定义单线表格 rules和frame 用于定义表格内外边框是否显示 使用css可以实现相同的功能。所以不建议使用这两个属性
2. 定义分离表格 cellpadding（定义单元格与其内容之间的空白） cellspacing（定义单元格之间的距离） 这些都可以使用CSS属性替换 ，所以不建议使用属性 而用css属性代替
3. 定义细线边框 border配合rules 实现
4. 添加表格说明 summary 该属性值不会显示 但屏幕阅读器可以利用该属性，也方便机器进行表格内容的检索

设置td th属性

1. 包含的属性 abbr（定义单元格的缩写版本） align（内容水平对齐方式）char（根据哪一个字符来进行内容的对齐） colspan（单元格可横跨的列数 ）headers（定义与单元格相关的表头） rowspan（定义单元格可横跨的行数 ） valign（定义单元格内容垂直排列方式）scope（表头数据和单元格数据相关联的方式）axis（为单元格分类，取值为一个类名）
2. 定义跨单元格显示 colspan（行） rowspan（列）
3. 定义表头单元格 scope属性 row（行的单元格和表头单元格绑定起来） col（列的单元格和表头单元格绑定起来）
4. 为单元格指定表头 headers 与表头ID对应 headers=“表头ID名称”
5. 定义信息缩写 abbr属性不会再浏览器中产生任何视觉效果方面的影响，主要时为了机器检索
6. 单元格分类 axis 目前还没有浏览器支持这个属性

第七章：设计表单

新建表单

1. 使用form标签 用于为用户输入创建HTML表单，包括各种输入控件，如文本框，复选框，单选按钮 提交按钮 它能向服务器传输数据 form包含的属性有：action (规定当提交表单时向何处发送表单数据) autocomplete（on/off ：是否启用表单的自动完成功能） method（get/post ： 发送的http方式）
2. input 标签 用于搜集用户信息。根据不同的type值，输入字段拥有多种形式，如文本框，复选框 单选按钮 图像域 文件域 提交按钮等 没有设置type 默认为单行文本框； type取值：button（按钮） checkbox（复选框）file（文件域 将本文件以二进制数据的形式上传至服务器）hidden（隐藏域 提交的内容会被提交服务器 但不会被页面所显示 只包含一个value属性 该属性会被提交服务器）image（图像域） password（密码框）radio（单选按钮） reset（重置按钮） submit（提交按钮） text（文本框） input常用属性：maxlength（输入字符最大长度 数值为数字） value（设置默认值 ）size（设置输入框宽度，建议用CSS 的width属性设置）readonly（只读文本框 布尔值） disabled（表单对象不可用状态 布尔值）textarea（文本区域 可以允许用户输入大容量信息 属性：cols（宽度）rows（可见行数/高）建议i用CSS属性 width和height设置 wrap）
3. 使用选项控件 radio单选按钮（只能选择一个）使用checked设置为默认值 radio 的name属性相同时为一组，只能选择一个 如果name不相同则可以选择多个 checkbox复选按钮 使用select属性可以设计选择框 select标签可以包含一个或者多个option标签 使它可以定义选择项目 optgroup可以对选择项目进行分类 可以包含多个option标签 然后使用 label属性设置分类标题（分类标题是一个不可选的伪标题） select包含两个专属标签 size（定义列表框可以显示的项目数 包含optgroup） 和 multiple（定义选择框可以多选）
4. 使用辅助控件 fieldset（为表单元素进行分组）legend（定义每组的标题）label（定义表单对象的提示信息）

设置新型输入框

1. 定义Email框 type属性 email
2. 定义URL框 type属性 url
3. 定义数字框 type属性 number max min 允许的最大最小值 step合法的数字间隔（ step=2 则1.3.5.7） value默认值
4. 定义范围框 type属性 range 以滑块形式显示 max min 允许的最大最小值 step合法的数字间隔（ step=2 则1.3.5.7） value默认值
5. 定义日期选择框 type属性 date month week time datetime(UTC时间比北京时间晚8小时。谷歌不支持) datetime-local（本地时间/北京时间）
6. 定义搜索框 type属性 search
7. 定义电话号码框 type tel
8. 定义拾色器 type属性 color

设置输入框属性

1. 定义自动完成 input/form的属性 autocomplete（on/off） 输入首字母自动给出选择项
2. 定义自动获取焦点 input属性 autofocus 如果浏览器不支持 则可以用js实现这个功能
3. 定义所属表单 input属性 form form值为form的ID
4. 定义表单重写 form+（需要重写的属性标签）
5. 定义高和宽 width 和 height 仅适用于 type=image 的标签
6. 定义列表选项 list
7. 定义最小值，最大值和步长 min max step
8. 定义多选 multiple 可以设置输入域一次选择多个值 适用于email和file类型的input标签。
9. 定义匹配模式 input属性：pattern 用于验证input域的模式（pattern） 模式就是javascript正则表达式
10. 定义替换文本 input属性：placeholder 点击后输入框获得焦点 框内placeholder的值消失
11. 定义必填 input属性：require 定义输入框内容不能为空 否则不允许提交表单

使用新表单对象

1. 定义数据列表 datalist元素用于为输入框提供一个可选的列表，供用户输入匹配或直接选择，如果不想选择，也可以自行输入内容
2. 定义密钥对生成器 keygen 目前浏览器对该元素支持不理想
3. 定义输出结果 output

设置表单属性

1. 定义自动完成 autoconplete 应用在整个form时 整个form都具备自动完成功能 如果要取消 只需在单个标签中设置autocomplete为off即可
2. 定义禁止验证 novalidate 应用在form中 相反有checkValidity（） 方法进行验证 返回布尔值 提示是否通过验证

原文地址：https://www.qianqianhaiou.cn/index.php/archives/3/