HTML5 放松了某些规则,HTML5 的制定者想让这门语言更紧密地反映浏览器的现实。

放松的规则

  • 不要求包含 <html>、<head> 和 <body> 元素。
  • 不区分大小写。
  • 允许省略关闭空元素,例如 <img>、<br> 或者 <hr>。
  • 属性值可以不加引号,只有属性名没有属性值也可以。

如果能做到以下几点,就算是良好的 HTML5 风格了。

  • 包含可选的<html>、<head> 和 <body>元素,有助于内容和信息头的区分。
  • 标签全部小写,至少不需要按 Shift 键。
  • 为属性值加引号,防止不经意间的犯错。

HTML5 验证

Dreamweaver 等 Web 设计共计自带验证器。如果嫌麻烦,可以使用在线验证工具。W3C 标准组织提供了流行的验证器,地址为:

https://validator.w3.org/nu/

XHTML 的回归

如果想把 HTML5 文档转化为 XHTML5 文档,需要在 <html> 元素中指明 XHTML 命名空间、关闭每一个元素,所有标签都要小写…

下面这个就是上面例子的 XHTML5 文档,如下:

<!doctype html>
<htmllang="zh-CN"xmlns="http://www.w3.org/1999/xhtml">
<head><metacharset="utf-8"><!--saved from url=(0014)about:internet--><title>A Tiny HTML Document</title><linkrel="stylesheet"href="TinyHTML5.css"><scriptsrc="TinyHTML5.js"></script>
</head><body><p>Let's rock the browser, HTML5 style.</p>
</body>
</html>

到底啥时候使用 XHTML5 呢?

那些以 XML 作为开发目标的程序员,例如想要用 XQuery 和 XPath 等 XML 相关的标准来操作页面内容的开发人员。

新增的元素

  • 用于构建页面的语义元素,<article>,<aside>,<figcaption>,<figure>,<footer>,<header>,<nav>,<section>,<details>,<summary>
  • 用于标识文本语义的元素,<mark>,<time>,<wbr>
  • Web 表单及交互,<input>,<datalist>,keygen>,<meter>,<progress>,<command>,<menu>,output>
  • 音频、视频及插件,<audio>,<video>,<source>,<embed>
  • Canvas,<canvas>
  • 非英语支持,<bdo>,<rp>,<rt>,<ruby>

删除的元素

  • <big>、<center>、<font>、<tt>、<strike>,都是可以用 CSS 替代的。
  • HTML 框架,但 <iframe> 元素得到保留。
  • <acronym>(<abbr> 代替)、<applet>(<object> 代替)。

改变的元素

  • <small> 元素的用户不是减少文本字体大小,表示 附属细则(small print),比如页面底部没人想看到的法律条款。
  • <hr> ( horizontal rule,水平线),用于在两个区块间画一线,现在表示主题的转换。
  • <s> (struck text,删除的文本),不仅仅是给文本加一条删除线,现在还表示不再准确或不再相关的内容。
  • <strong> 表示重要的文本内容,那些需要在周围文本中突出出来的文本。
  • <b> 使用粗体表示的文本,但该文本并不比其他文本重要。例如,关键字、产品名称等。
  • <em> 表示重读的文本,也就是在朗读的时候要大声读出来。
  • <i> 用斜体表示的文本,但该文本并不比其他文本更重要。例如,外文单词、技术术语等。

示例中,使用了 <strong>、<b>、<em>、<i> 4个标签,代码如下:

<body><p> <strong>Breaking news!</strong> There's a sale on <i>leche quemada</i> candy at the <b>El Azul</b> restaurant. Don't delay, because when the last candy is gone, it's <em>gone</em>.</p>
</body>

在浏览器中效果如下:

调整的元素

<address> 元素不适合标注邮政地址,实际上该元素只有一个目的,就是提供 HTML 文档作者的联系信息,比如电子邮件地址或者网站链接等,如下代码:

<address><ahref="mailto:jsolo@mysite.com">John Solo</a>,<ahref="mailto:lcheng@mysite.com">Lisa Cheng</a>, and<ahref="mailto:rpavane@mysite.com">Ryan Pavane</a>.</address>

在浏览器中效果如下:

<cite> 元素,但是像下面的引用某些作品(新闻、文章、电视节目)还是可以的,如下:

<p>Charles Dickens wrote <cite>A Tale of Two Cities</cite>.</p>

在浏览器中效果如下:

<a> 创建链接的元素调整相对更大一些,在 HTML5 中,可以在 <a> 元素中放置任何东西。

标准化的元素

HTML5 还把一些浏览器支持,但没有得到之前的 HTML 或 XHTML 规范承认的元素加入标准。

<embed> 向页面加入插件的通用方法。

<wbr> 表示可以在某处断行,换句话说,如果某个词太长了,一行放不下,那浏览器就会在 <wbr> 标注的地方断开,例如:

<p>Many linguists remain unconvinced that<b>supercali<wbr>fragilistic<wbr>expialidocious</b> is indeed a word.</p>

在浏览器中可能会看到以下三种情况:

<nobr> 元素,用于阻止文本换行,可用空间再小也不行。但在 HTML5 中不再使用,可通过 CSS 中的 white-space 属性设置为 nowrap

努力学习 HTML5 (2)—— 元素的增和删相关推荐

  1. mysql没法修改数据_MySQL学习笔记之数据的增、删、改实现方法

    本文实例讲述了MySQL学习笔记之数据的增.删.改实现方法.分享给大家供大家参考,具体如下: 一.增加数据 插入代码格式: insert into 表明 [列名-] values (值-) creat ...

  2. JS中对数组元素进行增、删、改、查的方法,以及其他方法

    总结一下 JS中提供的方法可以对数组元素进行增.删.改.查以及其他方法 一.增加元素 1.push() push可接收任意数量的参数,把它们逐个添加至数组末尾,并且可以返回修改后数组的长度. 例子: ...

  3. Dapper学习笔记(3)-增、删、改、查

    一.建表 在数据库中建立如下三张表: 1 CREATE TABLE [dbo].[T_User] 2 ( 3 [UserId] [int] IDENTITY(1, 1) PRIMARY KEY NOT ...

  4. 努力学习 HTML5 (3)—— 改造传统的 HTML 页面

    要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. Apo ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  6. 《HTML5多媒体应用开发》——第2章 HTML5多媒体元素2.1 Web多媒体历史

    本节书摘来自异步社区<HTML5多媒体应用开发>一书中的第2章,第2.1节,作者: [爱]Ian Devlin 更多章节内容可以访问云栖社区"异步社区"公众号查看. 第 ...

  7. html5代码_干货篇!零基础学习HTML5要用到的6款开发工具

    HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...

  8. 三天学会HTML5 ——多媒体元素的使用

    文件夹 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部 ...

  9. 大熊君学习html5系列之------Online Offline(在线状态检测)

    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻--,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...

最新文章

  1. 程序员也可以很浪漫!
  2. java注释风格 与javadoc
  3. python 异常处理中try else语句的使用
  4. 十三、手把手带你搭建Clouders Manager
  5. OpenCV提供的各种阈值选项的实例(附完整代码)
  6. 49session的生命周期实例
  7. android 常用注解,Android 开发小工具之:注解 Annotation
  8. 使用一下SQL Server 2008中的新日期函数
  9. 24点游戏python编程代码和运行结果_编程实现24点游戏,我发现自己总是输是有原因的...
  10. 数据结构与算法分析(一)——C++文件读写+py文件读写
  11. 求职必备素材:个人简历Word模板
  12. TokenGazer《一问到底》| 第55期:研究员 VS Dimension
  13. 智能|跟着美的集团学习VMI正确的打开方式
  14. 命名转小驼峰大驼峰中划线
  15. base64加密--excel--pdf--img 上传
  16. 计算机的硬件组成(详)
  17. 取得地址栏地址(转)
  18. 编译原理-16-语法分析概述
  19. 开源的主机管理系统/虚拟主机控制面板
  20. 阿里云实践 - iTerm2登录服务器脚本(ssh)

热门文章

  1. 如何删除oracle用户数据库用户,oracle删除指定用户的原数据库,建立该用户的新数据库...
  2. Oracle10g补丁怎么安装,在CentOS6.4上安装oracle10g需要的补丁
  3. 范德蒙德矩阵在MATLAB中怎么表示,Python 之 Python与MATLAB 矩阵操作总结
  4. 智能车竞赛技术报告 | 智能车视觉 - 中南林业科技大学 - 弃车人队
  5. 第十六届智能车竞赛 | 单车拉力组浅析
  6. 2021年春季学期-信号与系统-第六次作业参考答案-第九小题
  7. 基于AD5272多组变阻器电路设计
  8. 学习的本质在于触发了你的思考
  9. 学python最重要的是_为什么越来越多的人选择学Python?
  10. python汇编指令_Python基础语法