HTML5新特性之语义化标签


Posted in HTML / CSS onOctober 31, 2017

HTML5新特性

简洁的DOCTYPE:

HTML5 只有一个简单的文档类型:<!DOCTYPE html>,表示浏览器会按照标准模式解析。

简单易记的编码类型

你现在可以在meta 标签中使用”charset”:<meta charset=”utf-8″ />

脚本和链接无需type

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

更加语义化的新增标签

比如说:<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>等

视频和音频

<video width="640" height="320" preload="auto" poster="0.jpg" controls>
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

表单增强

新的input类型:color, email, date, month, week, time, datetime, datetime-local, number,range,search, tel, 和url

新属性:required, autofocus, pattern, list, autocomplete 和placeholder

新元素:<keygen>, <datalist>, <output>, <meter> 和<progress>

canvas标签绘制2D图形。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100,100);
context.lineTo(300,300);
context.lineTo(100,500);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

地理位置获取

HTML语义化

1.什么是HTML语义化?

通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据<p>判断内容是段落、<input>标签是输入框等。

2.为什么要语义化?

1).去掉或样式丢失的时候能让页面呈现清晰的结构
2).方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
3).有利于SEO
4).便于团队开发和维护,遵循W3C标准,可以减少差异化

3.如何确定你的标签是否语义良好?

去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。

4.常见的语义化标签模块

表单

<form action="" method="">
    <fieldset style="border: none">
        <legend style="display: none">登录表单</legend>
        <p><label for="name">账号:</label><input type="text" id="name"></p>
        <p><label for="pw">密码:</label><input type="password" id="pw"></p>
        <input type="submit" name="登录" class="subBtn">
    </fieldset>
</form>

表单域要用fieldset标签包起来,并用legend标签说明表单的用途;每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

5.语义化标签应注意的一些问题

尽可能少的使用无语义的标签div和span;
在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
不要使用纯样式标签,如:b、font、u等,改用css设置。
需要强调的文本,可以包含在strong或者em标签中,strong默认样式是加粗(不要用b),em是斜体(不用i)

总结

以上所述是小编给大家介绍的HTML5新特性之语义化标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 #HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 #HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 #HTML / CSS
html5清空画布方法(三种)
Oct 16 #HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 #HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 #HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 #HTML / CSS
You might like
php split汉字
2009/06/05 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python连接phoenix的方法示例
2017/09/29 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
主持人演讲稿范文
2013/12/28 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
机关作风建设自查报告
2014/10/22 职场文书
博士给导师的自荐信
2015/03/06 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB