HTML5-页面元素

发表于

组织内容

问题 使用元素
表示段落 p
将全局属性应用到一片内容上，但不表示任何其他内容分组 div
保留 HMTL 文档中的布局 pre
表示引自他处的内容 blockquote
表示因段落级别的主题转变 hr
生成有序列表 ol、li
生成无序列表 ul、li
生成项目编号不连续的有序列表 ol、li，并设置 li 元素的 value 属性
生成术语及其定义的列表 dl、dt、dd
生成带自定义项目编号的列表 ul，配合使用 CSS 的 :before 选择器和 counter特性
表示插图 figure、figucaption

文档分节

问题 使用元素
表示标题 h1~h3
表示一组标题，其中只有第一个可出现在文档大纲中 hgroup
表示一个重要的主题或概念 section
表示首部和尾部 header、footer
表示导航元素集合 nav
表示可以独立发布的重要主题或概念 article
表示周边内容的一些沾边话题 aside
表示文档或文章的联系信息 address
生成一个区域，用户可将其展开以了解更多细节 details、sumary

表格元素

问题 使用元素
生成基本的表格 table、tr、td
为表格添加表头单元格 th
区分行表头和列表头 thead、tbody
为表格添加表脚 tfoot
生成不规则表格单元格 th、td 定义的 colspan、rowspan
将单元格与表头相关联一满足残障辅助技术的需要 th、td 定义的 headers 属性
为表格添加标题 caption
为表格按列处理 colgroup、col
表示表格不是用来控制页面布局的 table 元素定义的 border 属性

表单

问题 使用元素
制作基本的表单 form、input、button
指定表单数据发送到的 URL form 元素的 action 属性（或者 button 元素的 formaction 属性）
指定传送给服务器的表单数据采用的编码方式 form 元素的 entype 属性（或者 button 元素的 formenctype 属性）
控制自动完成功能 form 元素或 input 元素的 autocomplete 属性
为服务器的反馈信息指定显示位置 form 元素的 target 属性（或者 button 元素的 formtarget 属性）
指定表单的名字 form 元素的 name 属性
为 input 元素添加数名标签 label
载入表单后自动聚焦于某个 input 元素 input 元素的 autofocus 属性
禁用单个 input 元素 input 元素的 disabled 属性
对 input 元素编组 fieldset
为 fieldset 元素添加说明标签 legend
禁用一组 input 元素 fieldset 元素的 disabled 属性
用 button 元素提交表单 button 元素的 type 属性设置为 submit
用 button 元素重置表单 button 元素的 type 属性设置为 reset
用 button 元素表示一般的按钮控件 button 元素的 type 属性设置为 button
将表单相关的元素与并非其祖先元素的 form 元素挂钩 使用 form 属性

定制 input 元素

1
2
3
4
5
<div class="wrap">
    <label for"password">
        password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/>
    </lebel>
</div>
问题 使用属性
设置 input 元素的大小和容量 size、maxlength
为 input 元素设置初始值或关于所需数据类型的提示 value、placeholder
提供一批建议值供用户选择 list、datalist
生成只读或被禁用的 input 元素 readonly、disabled
隐藏用户输入的字符 password 型 input 元素
用 input 元素生成按钮 submit、reset 或 button 型 input 元素
将输入内容限制为数值 number 型 input 元素
将输入内容限制在一个数值范围 range 型 input 元素
限制用户只能选择是或否 checkbox 型 input 元素
限制用户在有限几个选项中进行选择 radio 型 input 元素
将输入内容限制为特定格式的字符串 email、tel 或 url 型 input 元素
将输入内容限制为时间或日期 datetime、datetime-local、date、month、time 或 week 型 input 元素
让用户选择一种颜色 color 型 input 元素
让用户输入一个搜索词 search 型 input 元素

其他表单元素

Price Calculator * = 
1
2
3
4
5
6
7
8
<form onsubmit="return false" oninput="res.value=quant.valueAsNumber * price.valueAsNumber">
    <fieldset>
        <legend>Price Calculator</legend>
        <input type="number" placeholder="Quanrity" id="quant" name="quant"/> *
        <input type="number" placeholder="Price" id="price" name="price"/> =
        <output for="quan name" name="res">
    </fidldset>
</form>
问题 使用元素
生成一系列选项供用户选择 select
对 select 元素中的选项编组 optgroup
获取用户输入的多行文字 textarea
表示计算结果 output
生成公开／私有密钥对 keygen
确保用户为表单元素提供了一个值 required 属性
确保输入值处于一个范围内 min、max 属性
确保输入值匹配一个正则表达式 pattern 属性
禁用输入验证 novalidate 或 formnovalidate 属性

嵌入内容

问题 使用元素
在 HTML 文档里潜入图像 img 或 object
创建基于图像的超链接 在 a 元素李使用 img 元素
创建客户端分区响应图 将 img 元素或 object 元素与map 和 area 元素结合使用
嵌入另一张 HTML 文档 iframe
通过插件嵌入内容 embed 或 object
创建浏览上下文 object，用它的name属性定义浏览上下文的名称
不通过插件嵌入音频和视频 audio、video、source、track
在 HTML 文档里嵌入图形 canvas