- HTML5:新一代的HTML标准。 广义上指整个前端。
- H5优势:
- 针对JavaScript,新增了很多可操作的接口
- 新增了一些语义化标签、全局属性
- 新增了多媒体标签,可以很好替代flash
- 更加侧重语义化,对于SEO更友好
- 可移植性好,可以大量应用在移动设备上
- 新增的语义化标签:
- 新增的布局标签:
- header:整个页面或部分区域的头部
- footer:整个页面或部分区域的底部
- nav:导航
- article:文章、帖子、杂志、新闻、博客、评论等
- section:页面中的某段文字,或文章中的某段文字(里面文字通常会包含标题)
- aside:侧边栏
- main:文档的主要内容,几乎不用,IE不支持
- hgroup:包裹连续的标题,如文章主标题、副标题的组合,几乎不用
- 新增的状态标签:
- meter(双标签):定义已知范围内的标量测量,例如:电量、磁盘用量等。
- 属性:high(高值)/low(低值)/max(最大值)/min(最小值)/optimum(最优值)/value(当前值)
- progress(双标签):显示某个任务完成进度的指示器,一般用于表示进度条。例如:工作完成进度等。
- 属性:max(目标值)/value(当前值)
- meter(双标签):定义已知范围内的标量测量,例如:电量、磁盘用量等。
- 新增的列表标签:
- datalist:用于搜索框的关键词提示
- details:用于展示问题和答案,或对专有名词进行解释。
- summary:写在details里面,用于指定或专有名词。
- 新增文本标签:
- ruby:包裹需要注音的文字
- rt:写注音,rt标签写在ruby里面。
- mark:文本标记,可以标记搜索结果中的关键字。
- 新增表单控件属性:
- placeholder:提示文字,适用于文字输入类的表单控件。
- required:表示该输入项必填,适用于除按钮外其他表单控件。
- autofocus:自动获取焦点,适用于所有表单控件。
- autocomplete:自动完成,可以设置为on或off,适用于文字输入类的表单控件。(注意:密码输入框,多行输入框不可用)
- pattern:填写正则表达式,用于对输入框内容格式的验证,适用于文本输入类表单控件。(多行输入不可用,空输入框不会验证,通常与required配合使用)
- input新增type属性:
- type:
- email:邮箱地址
- url:网址
- number:
- max,min(数值范围),step(步长)
- search:搜索
- tel:电话
- range:范围
- color:颜色选择器
- date/month/week/time/datetime-local:年月日/ 年月/年周/时间/日期+时间选择器
- type:
- 新增多媒体标签:
- video:
- controls:让视频可操作
- muted:让视频默认静音
- autoplay:自动播放(前提静音再播放)
- loop:循环播放
- poster:封面图片
- preload:预加载
- none:不预加载
- metadata:仅预先获取视频的元数据(例如长度)
- auto:自动协调
- audio:
- controls:让音频可操作
- muted:让音频默认静音
- loop:循环播放
- preload:
- none
- metadata
- auto
- video:
- 新增全局属性:
- contenteditable:用户对网页元素的可编辑性
- true:可编辑
- false:不可编辑
- draggable:元素可拖动性
- true:
- false:
- hidden:隐藏元素(不占位)
- spellcheck:拼写检查
- contextmenu:规定右键点击元素弹出的菜单
- data-*:用于存储页面的私有定制数据
- contenteditable:用户对网页元素的可编辑性
- 新增的布局标签:
- H5兼容性处理:
- 1、添加元信息,让浏览器处于最优渲染模式:
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <meta name="renderer" content="webkit">
- 2、使用html5shiv让低版本浏览器认识H5的语义化标签:
- <!--[if lt ie 9]> <script src="./html5shiv.js"></script> <![endif]-->
- 1、添加元信息,让浏览器处于最优渲染模式:
- H5优势:
零基础前端Vue的小白学习路——HTML基础(五)HTML5新增特性
猜你喜欢
转载自blog.csdn.net/qq_36215279/article/details/132799261
今日推荐
周排行