努力学习 HTML5 (1)—— 元素的增和删

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>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <!-- saved from url=(0014)about:internet -->
  <title>A Tiny HTML Document</title>
  <link rel="stylesheet" href="TinyHTML5.css">
  <script src="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>
    <a href="mailto:[email protected]">John Solo</a>,
    <a href="mailto:[email protected]">Lisa Cheng</a>, and
    <a href="mailto:[email protected]">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

时间: 2024-10-17 16:39:19

努力学习 HTML5 (1)—— 元素的增和删的相关文章

努力学习 HTML5 (4)&mdash;&mdash; 浏览器对语义元素的支持情况

经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> 元素就行了.为此我们要做的就是为它们添加点样式规则.之后就可以得到超级可靠的语义元素了,即使使用10年前的浏览器也可以正常浏览. 为语义元素添加样式 浏览器遇到不认识的元素时,会把它们当做内联(inline)元素.大多数 HTML5 语义元素都是块级元素. 因此我们添加一条超级规则,为9个 HTML5 元素

Hibernate学习---第二节:hibernate 增、删、改、查

1.增,向数据库中写入数据,代码如下: /** * 数据保存 * 1.save() * 2.persist() */ @Test private void testSave(){ Configuration config = new Configuration().configure(); /** * 获取连接工程场 * 通常对应一个数据库,通常一个应用程序只有一个,再启动的时候创建 * 线程安全 */ /** * buildSessionFactory() 属于 hibernate3 中的方法

努力学习 HTML5 (3)&mdash;&mdash; 改造传统的 HTML 页面

要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. ApocalypsePage_Original.html,这是一个格式非常规范的页面,所有的样式均来自于外部样式表. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8

努力学习 HTML5 (1)&mdash;&mdash; 初体验

HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 <!doctype html> <title>A Tiny HTML Document</title> <p>Let's rock the browser, HTML5 style.</p> 只包含一行文本的超简单的 HTML5 文档,它在浏览器中效果

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

HTML5学习:语义元素section

HTML5学习:语义元素section一.定义<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 二.用法section标签下一般有一个标题<h1></h1>.还有一个内容<p></p>.示例代码如下: <!DOCTYPE html> <html>   <head>     <meta name="content-type" con

HTML5学习:语义元素article

HTML5学习:语义元素article 一.定义<article> 标签定义外部的内容.外部内容可以是来自一篇文章,或者来自博客 的博文,或者是来自论坛的文章. 二.用法格式和上篇的section元素一样:<h1></h1><p></p>,示例代码如下: <!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type"

HTML5学习:语义元素nav

HTML5学习:语义元素nav 一.定义标签<nav>定义导航链接的部分,用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好. 二.用法格式:<nav><a href="#">test</a></nav>,示例代码如下: < !DOCTYPE html> <html>   <head>     <meta http-equiv=&q

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

一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, online,offline 事件用来监测浏览器处于在线或离线状态.HTML5提出的离线存储,web应用程序可以在不连接互联网的情况下满足用户的部分需求,