HTML语义化的应用

标签： 程序开发 HTML | 发表时间：2018-01-05 12:06 | 作者：标点符
出处：https://www.biaodianfu.com

什么是HTML语义化

HTML语义化就是根据具体内容，选择合适的HTML标签进行代码的编写。用合理HTML标记以及其特有的属性去格式化文档内容。便于开发者阅读和写出更优雅的代码，同时让搜索引擎的爬虫能更好的识别。

为什么要语义化

相比先前网页开发过程中仅关注布局和功能，在开发过程中使用表格布局或DIV+CSS布局，越来越多的人关注HTML语义化，核心是语义化可以带来显而易见的好处：

  • 清晰的页面结构。去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
  • 支持更多的设备。屏幕阅读器会完全根据你的标记来“读”你的网页。更好的支持浏览器的阅读模式等。
  • 有利于SEO。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
  • 便于团队开发和维护。在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

如何正确的使用语义化

阶段一：正确的使用HTML标签（包括HTML5新增的语义化标签）

想要用对标签，先要理解各个常用HTML标签的使用场景：

文本内容

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。

标签名 英文全拼 中文翻译
<p> paragraph 段落
<blockquote> block quotation 块级引用
<hr> horizontal rule 水平分割线
<ul> unordered list 无序列表
<ol> ordered list 有序列表
<li> list item 列表项目
<dl> definition list 定义列表
<dt> definition term 定义术语
<dd> definition description 定义描述
<div> devision 分区
<figure> figure 独立单元
<figcaption> figure caption 单元名称
<main> main 主要内容
<pre> preformatted 预格式

内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。

标签名 英文全拼 中文翻译
<q> quotation 引用
<cite> citation 引自
<code> code 代码
<a> abchor 锚
<br> break 换行
<span> span 范围
<b> bold 粗体
<strong> strong 加重
<i> italic 斜体
<em> emphasized 加重
<u> underlined 下划线
<s> strikethrough 删除线
<mark> marked 标记
<sub> subscripted 上标
<sup> superscripted 下标
<abbr> abbreviation 缩写
<dfn> definition 定义

编辑标识

这些元素能标示出某个文本被更改过的部分。

标签名 英文全拼 中文翻译
<del> delete 删除
<ins> insert 插入

理解上容易产生误用的标签：

blockquote、q和cite的区别

  • blockquote：引用长文本，包含换行。
  • q：引用短文本，不包含换行。
  • cite：注明引用出处

参考资料： http://html5doctor.com/blockquote-q-cite/

figure和figcaption标签的作用

figure用于对元素进行组合，行程单元，figcaption对组合内容进行标识，如设定单元名称，具体应用场景

  • 文章中的附加图片，添加图片及图片名称描述
  • 文章中的代码示例，添加代码示例和代码示例的名称

参考资料： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure

main标签的作用

main标签主要是用来标识出文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框等。

pre与code标签之间的区别和联系

  • <code>标签， 用于表示计算机源代码。code标签内的文本将用等宽字体显示出来。
  • <pre>标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。

通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示所必须的样式。基于这样的特性如果是单行代码，则使用<code>标签即可，如果是多行代码，则可以使用<pre>内再嵌套<code>的方式。

<b>、<strong>、<i>、<em>的区别

<b>、<i> 是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在HTML4.01中并不被推荐使用。

<em>、<strong>是表达要素(phrase elements)。<em> （emphasized text）表示一般的强调文本，而 <strong> （strong emphasized text）表示比< em > 语义更强的的强调文本。

在新的HTML5工作草案中：<em>和<strong>仍旧是表达要素(phrase elements)。但这时的<strong>表示html页面上的强调（emphasized text），<em> 表示句子中的强调（即强调语义）。

<s>与<del>、<u>与<ins>的区别

  • <s>元素 使用删除线来渲染文本。使用<s>元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用<s>，提倡使用<del>和<ins>元素。
  • <del>表示已经从文档中删除的文本范围。此元素通常是（但不必）呈现删除线的文本。
  • <u> 元素使文本在其内容的基线下的一行呈现下划线。<u> 在 HTML 4 和 XHTML 1 中废弃，但是在 HTML 5 中使用其它语义引入。如果你想要使用非语义的方式，给文本添加下划线，你应该使用 <span> 元素，或者其它语义适当的元素，并且使用 CSS text-decoration 属性和 underline 值为其排版。
  • <ins>元素定义已经被插入文档中的文本。此元素通常是（但不必）呈现下划线的文本。

<mark>的使用场景是什么？

<mark> 标签代表突出显示的文字。举个例子，它可以用来显示搜索引擎搜索后关键词。

<dfn>和<abbr>标签

<dfn> 元素标记了被定义的术语；术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出。被定义术语的值由下列规则确定：

  • 如果 <dfn> 元素有一个 title 属性，那么该术语的值就是该属性的值。
  • 否则，如果它仅包含一个 <abbr> 元素，该元素拥有 title 属性，那么该术语的值就是该属性的值。
  • 否则，<dfn> 元素的文本内容就是该术语的值。

abbr标签用于标记缩略语，其title属性则表示该缩略语相应的全称。标准规定，在HTML文档中所有的abbr标签都是独立的，也即如果文档中存在两个文本内容一致的abbr标签(标记的缩略语相同)，则一个abbr标签的title属性值不会对另一个abbr标签产生任何影响 — 这一点很好理解，因为在现实生活中，同样的缩略语可以表达多个不同的意思。

参考资料： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

元素 描述
<address> <address>可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下，它应用于整个文档。
<article> <article>表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<aside> <aside>表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。
<footer> <footer>表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header> <header>表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。
<h1>~<h6> 标题(Heading)元素拥有六个不同的级别，<h1>是最高级的，而<h6>则是最低的级别。一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用，例如，自动构造某个文档中的内容表（就像本文档右边浮动栏一样）。
<hgroup> <hgroup>代表一个段的标题。它规定了在文档轮廓里（the outline of the document ）的单一标题是它所属的隐式或显式部分的标题。
<nav> <nav>描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。
<section> <section>表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6>) 作为子节点 来辨识每一个<section>。

hgroup的作用是什么？

<hgroup> 标签被用来对标题元素进行分组。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> – <h6> 元素进行分组。应用场景，比如一篇文章有主标题和副标题，则可以将主标题和副标题分在一个组。

<hgroup>
    <h1>标题</h1>
    <h2>副标题</h2>
</hgroup>

hgroup使用注意：

  • 如果只需要一个h1-h6标签就不用hgroup
  • 如果有连续多个h1-h6标签就用hgroup
  • 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

图片和多媒体

HTML 支持各种多媒体资源，例如图像，音频和视频。

元素 描述
<img> <img>代表文档中的一个图像。
<audio> <audio>用于在文档中表示音频内容。
<video> <video>用于在HTML或者XHTML文档中嵌入视频内容。
<track> <track>被当作媒体元素<audio>和<video>的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕。
<area> <area>在图片上定义一个热点区域
<map> <map>属性与<area>属性一起使用来定义一个图像映射(一个可点击的链接区域).

表格内容

这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。

标签名 英文全拼 中文翻译
<table> table 表格
<caption> caption 表格标题
<tr> table row 表格行
<th> table heading 表头
<td> table data 表值
<thead> table header 表头
<tbody> table body 表内容
<tfoot> table footer 表尾

<thead>、<tbody>、<tfoot>如何使用？

案例：

<table>
    <caption></caption>
    <thead>
        <tr><th></th><th></th></tr>
</thead>
    <tbody>
        <tr><td></td><td></td></tr>
		<tr><td></td><td></td></tr>
    </tbody>
    <tfoot>
        <tr><td></td></tr>
    </tfoot>
</table>

表单

标签名 英文全拼 中文翻译
<form> form 表单
<fieldset> field set 分类
<legend> legend 分类标题
<label> label 标签
<select> select 选项
<option> option 选项分组
<optgroup> option group 选项清单
<datalist> data list 选项数据
<input> input 输入框
<output> output 输出内容
<textarea> text area 文本域
<button> button 提交按钮

<optgroup>和<datalist>如何使用？

<optgroup> 会创建包含在一个 <select> 元素中的一组选项。label为选项组的名字，案例：

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

<datalist> 包含了一组<option>元素,这些元素表示其它表单控件可选值。案例：

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

如果需要对选项内容分级，则使用<optgroup>，否则可使用<datalist>。

output有什么如何使用？

<output> 标签表示计算或用户操作的结果。案例：

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

总结：

  • 尽可能少的使用无语义的标签div和span。
  • 不要使用纯样式标签，如：b、u等，改用css设置。

更多参考：

阶段二：CSS命名规范（id和class的命名）

如果页面中的标签完全使用语义化标签，或许就用不到特别针对CSS进行id和class命令了。相关的样式可以参考：

https://github.com/igoradamenko/awsm.css

更多的情况下推荐按照选择器命名的惯例进行设置，无论是 ID 还是 class，对任何东西最好总是根据 它是什么而不是 它看上去是什么样子来命名。 常见命名惯例：

  • 头：header
  • 内容：content .container
  • 尾：footer
  • 导航：nav
  • 侧栏：sidebar
  • 栏目：column
  • 页面外围布局：wrapper
  • 左右中：left right center
  • 登录条：loginbar
  • 标志：logo
  • 广告：banner
  • 页面主体：main
  • 热点：hot
  • 新闻：news
  • 下载：download
  • 子导航：subnav
  • 菜单：menu
  • 子菜单：submenu
  • 搜索：search
  • 友情链接：friendlink
  • 页脚：footer
  • 版权：copyright
  • 滚动：scroll
  • 内容：content
  • 标签页：tab
  • 文章列表：list
  • 提示信息：msg
  • 小技巧：tips
  • 栏目标题：title
  • 加入：joinus
  • 指南：guild
  • 服务：service
  • 注册：regsiter
  • 状态：status
  • 投票：vote
  • 合作伙伴：partner

更多参考：

阶段三：使用微格式标记数据

RDFa

语义网里面描述数据的方式之一是RDF。RDF基于XML，而HTML中的XHTML是一种XML。 通过HTML的attribute储存语义网数据叫RDFa（Resource Description Framework – in – attributes），这就把HTML/XHTML和语义网技术拉到了一起。

优点：是一个稳定不变的标准。

缺点：

  • RDFa最初是为XHTML设计的而不是HTML5，所以在严格的RDFa和松散的HTML5之间存在着争议。
  • RDFa很复杂，网页嵌入RDFa之后会显得笨重。

参考资料：

微格式（Microformat）

Microformat，有人翻译成“微格式”，是一种对Web网页进行语义注解的方法，这种方法依托于标准的Web页面写作技术，这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的Web页面，在HTML文档中给一些标签（Tag）增加一些属性（attribute），这些属性对信息的语义结构进行注解，处理HTML文档的软件，例如，浏览器等，如果不认识这些属性可以跳过，并不造成任何不良影响。

微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其它的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其它形式重复使用或组合。

微格式通常附加在用于添加样式的class属性上。你可以根据数据的类型，使用某些标准的样式名来标注数据。然后，其他程序可以读取你的标记，提取数据并通过检查class属性来确定数据的含义。目前比较流行的微格式应该是：hCard。

HTML文档中的Microformat代码可以有两类：compound microformat和elemental microformat.

Compound microformat

Compound microformat是一段语义相关的HTML文档内容，例如以下文档片段：

<div class="vcard">
    <a class="url fn" href="http://www.usweb.com">Shaun Shull</a>
    <div class="org">USWeb</div>
    <div class="adr">
        <div class="street-address">1060 Timberline Terrace</div>
        <span class="locality">Ashland</span>,
        <span class="region”">OR</span>
        <span class="postal-code">97520</span>
    </div>
    <div class="tel">1-866-273-1869</div>
</div>

这是一个标准的HTML文档片段，所有浏览器都能够正确显示，同时，每个标签都增加了一个class属性，属性值是符合某个标准的语义注解，上例是符合vCard标准的语义注解。

Elemental microformat

Elemental microformat不是对一段XHTML页面做语义相关的注解，而是针对某个标签个别进行注解，当然，注解时要采用某个公认的标准，否则，别人无法正确理解你的注解。还有一个示例就是XFN微格式。XFN表示的是“XHTML Friends Network”，它使用超链接中的rel属性来描述你与所链接到的那个人之间的关系，可以根据该信息来建立自动生成社会网络（automatically generated social network）。

下面是一个使用 XFN标准的microformat:

<a href="http://www.edshull.com/" rel="kin met">Ed Shull</a>

这行代码一般用在包含某个人的信息的页面上，表示指向的页面上的Ed Shull与本页面的人存在亲戚关系，而且碰过面。

三种微格式的实现：

  • 使用rel来定义基于链接的关系
  • 使用XFN微格式为链接增加人际关系的描述
  • 使用hCard微格式来描述人、公司和地点
  • 使用hCalendar微格式为那些关于事件和基于时间或地点的活动提供语义和结构化信息。

参考资料：

微数据（Microdata）

微数据是尝试解决语义标记问题的另一种选择。它最早是HTML5规范的一部分，后来分离出来成为一个独立的标准。它采用的方法与RDFa相似，但简化了一些。Microdata 是用来对 Web 页面上已经存在的数据提供附加的语义，它并不是被设计用来作为独立的数据格式，它是对 HTML 的一种补充。

另外，它使用自己的属性，因而不存在与样式表规则冲突的风险。但是，采用微数据的网页依然比使用微格式的网页大很多。

HTML5 微数据规范是一种标记内容以描述特定类型的信息，例如评论、人物信息或事件。每种信息都描述特定类型的项，例如人物、事件或评论。例如，事件可以包含 venue、starting time、name 和 category 属性。微数据使用 HTML 标记（常为 <span> 或 <div>）中的简单属性为项和属性指定简要的描述性名称。

上面的释义过于学术化，我们可以将其搁置一边，先看个简单的关于微数据的例子。平时，我们要在页面上显示对一个人的描述，HTML代码可能如下：

<div>
  我的名字是王富强，但大家叫我小强。我的个人首页是：
  <a href="http://www.example.com">www.example.com</a>
  我住在上海市富贵新村。我是工程师，目前在财富科技公司上班。
</div>
而如果使用针对人物的微数据标记，则HTML会如下：

<div itemscope itemtype="http://schema.org/Person">
  我的名字是<span itemprop="name">王富强</span>，
  但大家叫我<span itemprop="nickname">小强</span>。
  我的个人首页是：
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  我住在上海市富贵新村。我是<span itemprop="title">工程师</span>，
  目前在<span itemprop="affiliation">财富科技公司</span>上班。
</div>

您会发现，HTML代码量多了不少，还出现了很多自定义的属性，如itemscope, itemtype, itemprop等。这些属性就是方面机器识别的特定的标记。其含义等依次如下：

itemscope 定义一组名值对，称为项。

itemprop=” 属性名”

添加一个数据项属性。这个属性名可以是个单词或是个URL，与元素包含的文本值相关：

  • 对于大部分元素，属性名值就是元素标签里面的文本值（不是所有标签）。
  • 对于有URL属性的元素，该值就是URL（如<img src=””>, <a href=””>, <object data=””>等）。
  • 对于<time>元素，该值就是datetime=””属性。
  • 对于<meta itemprop=”” content=””>， 该值就是content=””属性。

itemref=””

允许微数据项通过指向特定ID（含有需要属性的元素）包含非后代属性。

itemtype=””

微数据定义的类型。其值为URL，扮演词汇表名称的作用。

itemid=””

允许词汇表给微数据项定义一个全局标识符，例如书的ISBN数值，在同样元素上使用itemid作为数据项的itemscope和itemtype属性。

Microdata 的优势

Microformats 在 HTML4.01/XHTML1.0 中本身就是可用的，这也是为什么 class 属性在这里以一种新的方式使用。虽然在 HTML4.01 规范中提到 class 可以有更广泛的应用，但它只是被 CSS 用作风格样式选择器。这意味着我们工作在单一的一个全局命名空间中，而这个命名空间已经被 CSS 类名所污染。

Microformats 和随机的 CSS 类名唯一不同的就在于树结构。这种树结构也有局限性，这意味着你需要为所有的元素找到一个公共祖先。Microformat 的存在似乎是在加重系统化技术的负债。

RDF 模型使用主语 — 谓语 — 宾语的三元组结构。如下面的例子：

<p xmlns:foaf="http://xmlns.com/foaf/0.1/" about="#me"> 
I'm <span property="foaf:name">Philip Jägenstedt</span> at
  <a rel="foaf:homepage" href="http://foolip.org/">foolip.org</a>. 
</p>

这里 XML 命名空间的使用有些奇怪。在 XML 中前缀是被用于元素和属性名，而这里却被用于属性值。

相比之下，Microdata 基于 HTML 现有的元素添加语义，不久的将来可以使用 DOM API 来获取这些语义，能够被搜索引擎用来组合更加结构化的搜索结果，并且 Google 已经致力于测试 Microdata 语法，Google 搜索结果已经支持 Microdata。

Google推出的测试工具： https://search.google.com/structured-data/testing-tool

参考链接：

其他参考：

The post HTML语义化的应用 appeared first on 标点符.

相关 [html 语义化 应用] 推荐：

HTML语义化的应用

- - 标点符
HTML语义化就是根据具体内容，选择合适的HTML标签进行代码的编写. 用合理HTML标记以及其特有的属性去格式化文档内容. 便于开发者阅读和写出更优雅的代码，同时让搜索引擎的爬虫能更好的识别. 相比先前网页开发过程中仅关注布局和功能，在开发过程中使用表格布局或DIV+CSS布局，越来越多的人关注HTML语义化，核心是语义化可以带来显而易见的好处：.

代码重构：HTML与语义化

- - 标点符
在前端开发过程中，很多人谈到“模块化”，很少人特别关注“语义化”，简单的说大多数人更关注功能的实现，而忽视了实现的细节. 所谓HTML语义化，就是尽可能的理解要表达的内容，选择适合的HTML标签，将内容转换成浏览器认识的语言，通过浏览器传达信息给用户. 目前很多的前端书籍取名就叫精通DIV+CSS，让人感觉DIV可以搞定一切，但是DIV标签仅代表一个块状标记，HTML的每个标签都有它特定的意义，而语义化就是让我们在适当的位置用适当的标签，以更好的让人和机器（机器可理解为浏览器可理解为搜索引擎）都一目了然.

原生应用 vs HTML 5

- - keakon的涂鸦馆
这几个月都在开发 知乎日报的后端，让我对移动应用的开发有了更多的认识. 简单来说，我以前一直都认为原生应用才是王道，现在则觉得 HTML 5 才是未来. 不可否认的是，原生应用更快，能使用更完整的 API，但它有个致命的缺点——升级太麻烦. 举例来说，我们筛选出下个版本需要实现的功能，很快就能做出其中的一部分让内测人员体验.

HTML 5应用开发商Sencha融资1500万美元，基于HTML 5的云服务应用Sencha.io进入公测阶段

- blueslan - 36氪
HTML 5应用开发商刚刚宣布，公司的基于HTML 5的云服务应用Sencha.io已经进入公测阶段. 这个云服务应用包括4部分，Sencha.io Data、Sencha.io Messages、Sencha.io Login和Sencha.io Development，有了这个服务，应用开发者只需几行Javascript代码就可以实现云储存数据、发送消息、收听留言和部署应用程序功能.

在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

- BeerBubble - 走走停停看看
HTML 5中的 canvas 元素是相当强大的，利用他的 getImageData 方法可以对载入的图像直接进行位图操作. 但是直接对位图进行操作比较麻烦，如果利用卷积矩阵这个工具的话，可以通过几个简单的参数实现复杂的效果. 所谓的矩阵的卷积，就是如下图显示的那样，当计算红色框中的数值的时候，分别先提取周围绿框中8个数字，然后与施加的那个矩阵中对应位置相乘，然后把各个乘积加在一起，就得到了最终的值了.

Opera TV Store正式开放，从此HTML 5 Web应用无处不在

- - 雷锋网
在2011IFA大会上，雷锋网之前介绍过的 Opera展示了 Opera TV Store，本周在 CES上，公司宣布TV Store正式对外开放. Opera TV Store的建立就是为了以一种直观的，屏幕友好的方式让用户享受Web内容及应用，在当中你可以同时打开好几个应用，并将之最小化，就算进行应用外的操作，也能收到应用内消息提醒等.

Google 推出 Web Designer，帮助你做 HTML 5 设计的免费本地应用，支持 Windows 和 OS X

- - 谷奥——探寻谷歌的奥秘
感谢读者 SamRaper 的提醒. Google发布 Web Designer beta，这个Windows和OS X下的免费应用可帮助你制作互动广告和其它HTML 5内容，很显然基于HTML 5的广告将在数年后代替现在满天飞的Flash. Google Web Designer主要特性：.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了，几乎所有的关于HTML 5 在各种主流浏览器上的安全问题，这些安全问题很有可能将会是黑客攻击你的网上的敲门砖，他们几乎都和Javascript都有关系，你就要好好注意了. IE6，7，8，9，和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中，可以让用户进行XSS（跨站脚本）攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言（ 英文：HyperText Markup Language，HTML）是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全，超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素（inline）. 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：. 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：.