每天10个前端知识点:HTML5(新增元素及属性)

个人博客已上线,欢迎前去访问评论!
无媛无故 - wangchloe的个人博客


以下内容若有问题烦请即时告知我予以修改,以免误导更多人。


  • HTML5语法概要
  • H5新增元素
    • (1) 结构元素
    • (2) 其他元素
    • (3) input元素类型
    • (4) *废除的元素
  • H5新增属性
    • (1) 表单相关属性
    • (2) 链接相关属性
    • (3) 其他属性
    • (4) *废除属性
    • (5) 全局属性

翻译-你必须知道的28个HTML5特征、窍门和技术

html5shiv项目让IE6-IE9浏览器都支持HTML5中的元素

HTML5语法概要

  1. 内容类型
  2. DOCTYPE声明
  3. 指定字符编码
  4. 可以省略标记的元素
  5. 具有boolean值的元素
  6. 省略行内属性赋值的引号

1. H5新增元素

每天10个前端知识点:HTML5(新增元素及属性)_第1张图片
H5标签集合
每天10个前端知识点:HTML5(新增元素及属性)_第2张图片
H5页面常用结构

(1) 结构元素

section

对网站内容分块、分段
当容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section

结构(标题+内容)

article

代表文档内容 独立性 可嵌套使用
可看作特殊的section元素

常见结构

aside

用来表示当前页面或文章的附属信息(相关引用、侧边栏、广告、导航条)

常见结构

nav

常见应用:导航条、侧边栏导航、页内导航、翻页操作
不能用menu元素代替nav元素

常见结构



figure

time

用来区分各时区或编码

常见结构

    
    

pubdate

指明发布时间

常见结构

    

header

header可出现多次

常见结构

footer

footer可出现多次
常见应用:脚注(相关链接、版权信息)

常见结构


hgroup

将标题及其子标题进行分组

常见结构

主标题

子标题

address

在文档中呈现联系信息(作者名字、网站连接、电子邮箱、地址、手机号)

常见结构

整体应用

xxx

主标题

子标题

正文

评论标题

评论正文

版权***

(2) 其他元素

video

不同浏览器支持的格式不同,可能需要转码,在source标签里引入多种格式

FF不支持mp4,支持ogg

controls属性显示自带控制进度条

常见结构


    
    


audio

controls属性显示自带控制进度条

常见结构


      
    

canvas

...

(3) input元素类型

  • email

  • url

  • number

  • range

  • date

  • time

  • Date Pickers

(4) *废除的元素

  • 能用CSS替代的元素:basefont、big、center、font、s、tt、u等
  • frame框架
  • 只有部分浏览器支持的元素

2. H5新增属性

(1) 表单相关属性

form

form的元素可写在form外,只要指向相同id

常见结构

formaction

不同表单元素不同action路径

常见结构

formmethod

不同表单元素不同提交方法

常见结构

formenctype

不同表单元素不同编码方式

常见结构

formtarget

不同表单元素不同提交后在何处打开加载页面

常见结构

autofocus

表单元素自动获得焦点

常见结构

require

提交时内容为空不允许提交,并显示提示

常见结构

labels

验证提示信息

常见结构


placeholder

输入提示信息

常见结构

datalist

可输入的下拉框

常见结构

autocomplete

输入自动填充

pattern

表单元素正则验证,输入错误时不跳转

常见结构

selectionDirection

*Chrome不支持

indeterminate

复选框checkbox 的第三种状态 “尚未明确是否选取”状态

image按钮的width/height

(2) 链接相关属性

(3) 其他属性

(4) *废除属性

(5) 全局属性

contentEditable
designMode
hidden
spellcheck 拼写检查
tabindex 设置tab键焦点的顺序


更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!

公众号是坚持日更的,不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案,也更便于大家交流,就酱。

每天10个前端知识点:HTML5(新增元素及属性)_第3张图片
微信公众号:无媛无故

你可能感兴趣的:(每天10个前端知识点:HTML5(新增元素及属性))