• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5中新特性之语义化标签的实例分析

html5中新特性之语义化标签的实例分析

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,h5,标签等相关知识,匿名希望在学习及工作中可以帮助到您
HTML5 只有一个简单的文档类型:<!DOCTYPE html>,表示浏览器会按照标准模式解析。今天小编给大家带来了HTML5新特性之语义化标签,感兴趣的朋友一起看看吧

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.语义化标签应注意的一些问题

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

以上就是html5中新特性之语义化标签的实例分析的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5中如何显示视频呢 HTML5视频播放demo_html5教程技巧
  • 2018-12-03HTML5 Canvas实现交互式地铁线路图
  • 2017-08-06解析HTML5的存储功能和web SQL的相关操作方法
  • 2018-12-03三个不常见的 HTML5 实用新特性简介
  • 2018-12-03使用JavaScript和canvas实现图片的裁剪
  • 2018-12-03H5制作一个注册页面的代码实例
  • 2018-12-03目前流行的前端框架有哪些?
  • 2017-08-06html5 video标签屏蔽右键视频另存为的js代码
  • 2018-12-03已经编写了两个网站的前端代码,在暑假里接下来是了解些后端知识,还是重点研究下js或者框架?
  • 2017-08-06html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html结合工业互联网实现智能飞机控制(附代码)
    • html5:足以改变我们未来生活的十项提示
    • Html5新标签datalist相关用法介绍
    • IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法
    • H5 Canvas API中drawImage(图像进行缩放或裁剪)的使用实例
    • html5指南-6.如何创建离线web应用程序实现离线访问_html5教程技巧
    • HTML5本地存储应用sessionStorage和localStorage
    • html5 border属性怎么设置?html5 table中的border属性介绍
    • HTML5边玩边学(七)-动画初步之飞舞的精灵
    • 使用HTML5 Canvas为图片填充颜色和纹理的教程_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有