在HTML5之前采用HTML+CSS文档结构写法
【ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)】
【class选择器说明 class类选择器——可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目】
(上图展示典型的两列布局标记使用div的id和class类属型.它包含一个页眉,页脚,横向的导航栏.主要内容包含一篇文章和右边的侧边栏 )
缺点 :
1.不利于SEO搜索引擎对页面内容的抓取
2.文档结构定义不明确
于是HTML5出现,解决上述问题,专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签
(div元素被替换成新的元素:header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , and footer 页脚.)
HTML5结构代码
...
...
对HTML5语义化标签解释
页眉主标题
页眉副标题
这是一篇介绍HTML 5结构标签的文章
HTML 5的革新
文章内容详情
一般通过是否包含一个标题** (-
element)** 作为子节点 来 辨识每一个
这里是section标题...
这里是section标题对于内内容...
标签用于对网页或区段(section)的标题(h1-h6)进行组合。使用新的HTML5元素hgroup,可以为header元素添加更多的信息。(头部主标题/副标题)
Main title
Secondary title
段落
段落.....
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
:定义带有记号的文本。请在需要突出显示文本时使用 标签。
< summary> details 元素的标题
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
Open 属性默认展开
状态交互元素
progress元素 :标签定义运行中的进度(进程)
meter元素 :标签定义度量衡。仅用于已知最大和最小值的度量。
Forms
email : 电子邮箱文本框,跟普通的没什么区别,当输入不是邮箱的时候,验证通不过.移动端的键盘会有变化
tel : 电话号码,移动端的键盘
url : 网页的URL
search : 搜索引擎
range : 特定范围内的数值选择器
min、max、step( 步数 )、value
用JS来显示当前数值
新的表单特性和函数
placeholder : 输入框提示信息
例子 : 密码框提示
autocomplete : 是否保存用户输入值默认为on,关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填,不能为空带有必填字段的表单
Pattern : 正则验证 pattern="\d{1,5}“
formaction 在submit里定义提交地址