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 object-fit属性
Jul 27 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php单例模式实现方法分析
2015/03/14 PHP
php强制下载文件函数
2016/08/24 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
HTML5进度条特效
2014/12/18 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
致全体运动员广播稿
2014/02/01 职场文书
高中毕业自我评价
2014/02/08 职场文书
英语教研活动总结
2014/07/02 职场文书
法定授权委托证明书
2015/06/18 职场文书
如何撰写创业策划书
2019/06/27 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python