search

YvetteLau / Step-By-Step

不积跬步,无以至千里；
705 stars 66 forks source link

说一说你对HTML5语义化的理解 #8

Open YvetteLau opened 5 years ago

YvetteLau commented 5 years ago

写下你的理解~

tpxiang commented 5 years ago

语义化就是让文本内容来结构化，选择与语义相符合的标签，使代码语义化，这样不仅便于开发者进行阅读，同时也能维护和写出更优雅的代码，还能够让搜索引擎和浏览器等工具更好的解析。

taoyaoyaoa commented 5 years ago

### 语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。

为社么语义化 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

shenanheng commented 5 years ago

对seo搜索引擎的更好支持,以及对爬虫的更好支持

zyq503454535 commented 5 years ago

1语义化指的是机器在更少人干预下能够搜集信息，让网页能够被机器理解 2目的：①在去掉或样式丢失时让页面呈现清晰的结构②对搜索引擎友好③便于团队开发与维护

CCZX commented 5 years ago

HTML5新增了许多语义化标签和一些新的API，废除了一些旧的标签，语义化标签的出现使得代码更具有可读性，对搜索引擎更加的友好，废除的一些旧的标签更加体现了结构样式分离的的思想，比如center标签。

chang229 commented 5 years ago

1,有利于SEO；2，便于维护和理解；3，方便在其他设备如盲人屏幕阅读器上解析；4，有利于浏览器的解析；5，给用户更好的浏览体验。

yuzhang9804 commented 5 years ago
dashengzi66 commented 5 years ago

1.让页面的内容结构化 2.利于浏览器解析和SEO搜索引擎优化。 3.提高代码的可维护和可重用性。

clairing commented 5 years ago

HTML5新增的语义化标签有header footer nav section article aside 等等很多 语义化便于开发者阅读，代码更好看，也便于网络爬虫，SEO 优化。 语义化在没有css 情况下，也能很好的展现内容结构，裸奔也好看。 增强用户体验，也便于其他设备解析（屏幕阅读器，移动设备等）

jizx commented 5 years ago

1、更好的见名知意，有利于快速理解开发者意图，少写css。 2、有利于SEO。 3、增强用户体验，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。

freeshineit commented 5 years ago
lqzo commented 5 years ago

什么是语义化？

语义化是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化优点：

KRISACHAN commented 5 years ago

标签分类

  • 在一个 html 文档中，标签大致可以分为以下两个大类：
    1. <!DOCTYPE>：声明文档类型；
    1. <html></html>：限定文档区域；

<html></html> 内又有以下几类：

1. head

<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。 head内可存放标签有：

  1. <base>：为页面上的所有链接规定默认地址或默认目标。
  2. <link>：主要用于style文件引入
  3. <style>：样式表区域
  4. <title>：可定义文档的标题。<title> 标签是 <head> 标签中唯一要求包含的东西。
  5. <meta>：提供了有关当前HTML元素的元信息 (meta-information)

2. body

<body>标签内存放文档的内容。 <body>内标签分类有以下11类：

  1. 内容分区
  2. 文本内容
  3. 内联文本语义
  4. 图片和多媒体
  5. 内嵌内容
  6. 脚本
  7. 编辑标识
  8. 表格内容
  9. 表单
  10. 交互元素
  11. Web组件

HTML 标签语义化

语义化到底重不重要？

我们知道，在HTML中，每个标题是通过标题标签来定义的，标题标签一共有6个，分别是：h1~6。例子如下：

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

如果是连续的标题，则可以用 <hgroup> 来连接：

<hgroup>
  <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</hgroup>

如果是段落内容，则用 <p>：

<p>我是段落内容</p>

如果我们要列一个列表则可以用 <ol></ol> 或 <li></li> 。如果只是要标记项目，我们可以用 <li></li> ，例子如下：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>奥特曼</li>
  <li>橙子</li>
</ul>

若是标记顺序，则用 <ol></ol> ，例子如下：

<ol>
  <li>向前走300米</li>
  <li>右转</li>
  <li>向前走300米</li>
  <li>右转</li>
  <li>向前走300米</li>
</ol>

当然我们也可以按需嵌套。

<ol>
<li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
  <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
  <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
  <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。</li>
  <ul>
    <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
    <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
  </ul>
</ol>

在我们平常说话的时候，为了突出重点，我们往往会强调某些词，就如如下的例子：

<p>我<em>非常</em>喜欢加班</p>

如果是重音强调，则：

<p>鱼头，明天<strong>别迟到</strong>了</p>

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

  1. 更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。

  2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。

  3. 更便于SEO优化 — 比起使用非语义化的

    标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。（虽然在9012年的今天，SEO并没太大软用）

无障碍设计

在Web开发无障碍性意味着使尽可能多的人能够使用Web站点,即使这些人的能力是有限的。这里我们提供关于开发易访问的内容的信息。

“无障碍性是最常用于描述设施或设施,帮助残疾人,如“轮椅”。这可以扩展到盲文标识、轮椅坡道,音频信号在人行横道,轮廓人行道,网站设计,等等。"

WAI-ARIA

WAI-ARIA 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。

WAI-ARIA 是W3C编写的规范，定义了一组可用于其他元素的HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：

  1. 角色（role）：这定义了元素是干什么的；

  2. 属性： 通过定义一些属性给元素，让他们具备更多的语义；

  3. 状态：用于表达元素当前的条件的特殊属性。

后记

HTML语义化非常地重要，虽然在组件化开发的今天，利益没那么明显，但是对于后期维护，用户访问以及用户友好度来说都是非常重要的，在某些国家，语义化跟无障碍标准化甚至是衡量一个线上产品能否上线的标准。

AILINGANGEL commented 5 years ago

语义化就是赋予html文档结构一定的语义，可以从阅读html代码就能理解整个文档的内容和结构

语义化有下面几个优点:

html5新增的语义化标签有: nav, time, article, section, aside, video, footer

tianyuandsb commented 5 years ago
  1. 对于开发者角度来说语义话标签更有利于以后的维护,看到语义话标签布局结构清晰
  2. 便于SEO搜索，提高排名
  3. 常用的 title， header footer nav 。。。。。。。。。
luohong123 commented 5 years ago

我对HTML5语义化的理解

一、概念

HTML5是定义 HTML 标准的最新版本，它是新版本的HTML 语言，具有新的元素，属性和行为，有更大的技术集，允许构建更多样化和更强大的网站和应用程序。语义化能让你更恰当的描述你的内容是什么。

（一）HTML5 中的区块和段落元素

HTML5 中新的区块和段落元素一览: 

<section></section> 
<article></article>
<nav></nav>
<header></header>
<footer></footer>
<aside></aside>
<hgroup></hgroup>

HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。

（二）音频和视频

<audio></audio>
<video></video>

audio和video元素嵌入和允许操作新的多媒体内容 HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。

（三）表单的改进

强制校验API，一些新的属性，一些新的<input> 元素type 属性值 ，新的 <output>元素。

（四）新的语义元素

除了节段，媒体和表单元素之外，还有众多的新元素，例如 

<mark></mark>
<figure></figure>
<figcaption></figcaption>
<data></data>
<time></time>
<output></output>
<progress></progress>
<meter></meter>
<main></main>

这增加了有效的 HTML5 元素的数量。

（五）<iframe> 的改进

使用 sandbox， seamless， 和 srcdoc 属性，作者们现在可以精确控制 <iframe> 元素的安全级别以及期望的渲染。

tianyuandsb commented 5 years ago

谢谢哥～～～～～

------------------ 原始邮件 ------------------ 发件人: "青成"notifications@github.com; 发送时间: 2019年5月22日(星期三) 中午11:16 收件人: "YvetteLau/Step-By-Step"Step-By-Step@noreply.github.com; 抄送: "`~~"597037008@qq.com;"Comment"comment@noreply.github.com; 主题: Re: [YvetteLau/Step-By-Step] 说一说你对HTML5语义化的理解 (#8)

我对HTML5语义化的理解

一、概念

HTML5是定义 HTML 标准的最新版本，它是新版本的HTML 语言，具有新的元素，属性和行为，有更大的技术集，允许构建更多样化和更强大的网站和应用程序。语义化能让你更恰当的描述你的内容是什么。

（一）HTML5 中的区块和段落元素

HTML5 中新的区块和段落元素一览:

HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。 （二）音频和视频 audio和video元素嵌入和允许操作新的多媒体内容 HTML5 通过HTML标签“audio”和“video”来支持嵌入式的媒体，使开发者能够方便地将媒体嵌入到HTML文档中。 （三）表单的改进 强制校验API，一些新的属性，一些新的 元素type 属性值 ，新的 元素。 （四）新的语义元素 除了节段，媒体和表单元素之外，还有众多的新元素，例如
这增加了有效的 HTML5 元素的数量。 （五）