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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php简单获取复选框值的方法
2016/05/11 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python设计模式之抽象工厂模式
2016/08/25 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
关于Python的一些学习总结
2018/05/25 Python
HTML的form表单和django的form表单
2019/07/25 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
python time.strptime格式化实例详解
2021/02/03 Python
《巨人的花园》教学反思
2014/02/12 职场文书
战友聚会主持词
2014/04/02 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
运动会演讲稿200字
2014/08/25 职场文书
基层党员对照检查材料
2014/09/24 职场文书
琅琊山导游词
2015/02/05 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
Golang获取List列表元素的四种方式
2022/04/20 Golang