HTML赋值文档内容的结构和含义, 内容呈现由css样式控制
少亦可为多
标记只应该应内容对语义的需要使用. 有条经验法则是: 问问自己打算如何发挥一个元素的语义作用, 如果不能马上答出就不用这个元素
别误用元素
对内容进行标记时, 只宜将元素用于他们原定的用途, 不要创造自有的语义. 如果找不到适合自己所要含义的元素, 可以考虑使用通用元素( 如span或div ), 并且用全局属性class表明其含义. css样式不是类属性的唯一用途.
具体为佳
用来标记内容的元素应该选择最为具体的那个. 如果已有元素能恰当表明内容的类型, 就不要使用通用元素. html4中存在依赖div构建页面结构的倾向, 不好维护.
对用户不要想当然
呈现与语义分离原则的目的完全是为了让HTML文档更易于程序化处理, 所以随着HTML5的采用和实现愈加广泛, HTML内容的这种使用会日益增多. 如果不关心标记的准确性和一致性, 这样的HTML文档处理起来更为困难, 用户能为其找到的用户也很有限.
用途: 创建HTML文档的上层建筑, 向浏览器说明文档的情况, 定义脚本程序和css样式, 提供浏览器禁用脚本时要显示的内容
元素
说明
类型
h5新增或变化
base
设置相对URL的基础
元数据
无变化
body
表示HTML文档的内容
无
有变化
DOCTYPE
表示HTML文档的开始
head
包含文档的元数据
html
表示文档中HTML部分的开始
link
定义与外部资源(通常是样式表或网站图标)的关系
meta
提供关于文档的信息
noscript
包含浏览器禁用脚本或不支持脚本时显示的内容
元数据, 短语
script
定义脚本语言, 可以是文档内嵌的也可以是外部文件中的
style
定义css样式
title
设置文档标题
用途: 为内容提供基本的结构和含义
a
生成超链接
短语, 流
abbr
缩略语
短语
b
不带强调或着重意味地标记一段文字
br
表示换行
cite
表示其他作品的标题
code
表示计算机代码片段
del
表示从文档中删除的文字
新增
dfn
表示术语定义
em
表示着重强调的一段文字
i
表示与周边内容秉性不同的一段文字, 比如来自另一种语言的词语
ins
表示加入文档的文字
kbd
表示用户输入内容
mark
表示一段因为与上下文中另一词语相关而被突出显示的内容
q
表示引自他处的内容
rp
与ruby元素结合使用, 标记括号
rt
与ruby元素结合使用, 标记注音符号
ruby
表示位于表意文件上方或右方的注音符号
s
表示文字已不再准确
samp
表示计算机程序的输出内容
small
表示小号字体内容
span
一个没有自己语义的通用元素
strong
表示重要内容
sub
表示下标文字
sup
表示上标文字
time
表示时间或者日期
u
var
表示程序或计算机系统中的变量
wbr
表示可安全换行的地方
用途: 将相关内容分组
blockquote
表示引自他处的大段内容
流
dd
用在dl元素之中, 表示定义
div
一个没有任何既定语义的通用元素, 与span类似
dl
表示包含一系列术语和定义的说明列表
dt
用在dl元素之中, 表示术语
figcaption
发送figure元素的标题
figure
表示图片
hr
表示段落级别的主题转换
li
用在ul, ol和menu元素中, 表示列表项
ol
表示有序列表
p
表示段落
pre
表示其格式应被保留的内容, 如code
ul
表示无序列表
用途: 划分内容, 让每个概念, 观点或主题彼此分隔开. 它们中有许多是新增的. 这些元素为分离元素的含义和外观做了大量基础性工作
address
表示文档或article的联系信息
article
表示一段独立的内容
aside
表示与周边内容稍有牵涉的内容
details
生成一个区域, 用户将其展开可以获得更多细节知识
footer
表示尾部
h1-h6
表示标题
header
表示首部
hgroup
将一组标题组织在一起, 以便文档大纲只显示其中第一个标题
nav
表示有意集中在一起的导航元素
section
表示一个重要的概念或主题
summary
用在details元素中, 表示该元素内容的标题或说明
用途: 制作显示数据的表格. 表格在html5中的主要变化时不能再用来控制页面布局, 这项工作转交给了css
caption
表示表格标题
col
表示一列
colgroup
表示一组列
table
表示表格
tbody
表示表格主体
td
表示单元格
tfoot
表示表脚
th
表示标题行单元格
thead
表示标题行
tr
表示一行单元格
用途: 创建html表单, 以便获取用户的输入数据
button
表示可用来提交或重置表单的按钮(或一般按钮)
datalist
定义一组提供给用户的建议值
fieldset
表示一组表单元素
form
表示html表单
input
表示用来收集用户输入数据的控件
keygen
生成一对公钥和私钥
label
表示表单元素的说明标签
legend
表示fieldset元素的说明性标签
optgroup
表示一组相关的option元素
option
表示供用户选择的一个选项
output
表示计算结果
select
给用户提供一组固定的选项
textarea
用户可以用它输入多行文字
用途: 在html文档中嵌入内容
area
表示一个用于客户端分区响应图的区域
audio
表示一个音频资源
canvas
生成一个动态的图形画布
embed
用插件在html文档中嵌入内容
iframe
通过创建一个浏览上下文在一个文档中嵌入另一个文档
img
嵌入图像
map
定义客户端分区响应图
meter
嵌入数值在许可值范围内的图形表示
object
在html文档中嵌入内容. 也可用于生成浏览器上下文
和生成客户端分区响应图
param
表示将通过object元素传递给插件的参数
progress
嵌入目标进展或任务完成情况的图形表示
source
表示媒体资源
svg
表示结构化矢量内容
track
表示媒体的附加轨道
video
表示视频资源
全局属性( global attribute ), 用来配置所有元素共有的行为
设定选择元素的快捷键
按下 alt+t, 焦点便转移到name输入框上
这个是html5中新增的属性, 设置后用户能修改内容
效果如下
规定元素中文字的方向, 有效值有 ltr(从左到右), rtl(从右到左)
spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查, 用于用户编辑文字时有帮助
属性cite: 指定原因文档的url, datetime: 设置修改时间
rt: 用来标记注音符号, rp: 用来标记供不支持注音符号特性的浏览器显示在注音符号前后的括号
属性 datetime: 以RFC3339指明日期
属性 pudate: 如果是true, 表明time表示整个html或离该元素最近的article的发布日期
表示超过当前浏览器窗口的内容适合再此换行, 换不换行还是由浏览器决定
基本都是h5新增元素, 除了 summary 都是块元素, 按实际用途使用标签
这个特性还未得到很好的支持, 暂不建议使用
type指定内容的mime类型
这个涉及的知识点较多, 就不在这演示
希望读者在看完后能提出意见, 点个赞, 鼓励一下, 我们一起进步. 加油 !!