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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
详解React之key的使用和实践
2018/09/29 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
发布你的Python模块详解
2016/09/15 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
计算机专业大学生的自我评价
2013/11/14 职场文书
重阳节标语大全
2014/10/07 职场文书
店面出租协议书范本
2014/11/28 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
婚姻出轨保证书
2015/05/08 职场文书
入党转正申请报告
2015/05/15 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技