Rumah >hujung hadapan web >Tutorial H5 >H5的语义化标签
H5的语义化标签
- php中世界最好的语言asal
- 2018-03-27 14:01:572730semak imbas
这次给大家带来H5的语义化标签，使用H5语义化标签的注意事项有哪些，下面就是实战案例，一起来看一下。
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>
更加语义化的新增标签
比如说：
视频和音频
<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
新元素：
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标签判断出内容是标题，根据
判断内容是段落、标签是输入框等。
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.语义化标签应注意的一些问题
尽可能少的使用无语义的标签p和span；
在语义不明显时，既可以使用p或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中，strong默认样式是加粗（不要用b），em是斜体（不用i）
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci H5的语义化标签. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：H5手机端页面缩放Artikel seterusnya：Canvas如何做出3D动态的Chart图表