成都建設(shè)企業(yè)網(wǎng)站

2022-07-03    分類： 網(wǎng)站建設(shè)

成都建設(shè)企業(yè)網(wǎng)站正確的HTML5語(yǔ)義探究 如果您仔細(xì)計(jì)劃HTML文檔的結(jié)構(gòu)，則可以幫助計(jì)算機(jī)理解內(nèi)容的含義。正確的語(yǔ)法肯定很重要，但是它基本上只是為解析器，搜索引擎和輔助技術(shù)提供了毫無(wú)意義的數(shù)據(jù)。

如果您通過(guò)關(guān)注語(yǔ)義來(lái)改進(jìn)前端工作流，則可以創(chuàng)建吸引更多訪問(wèn)者的更高質(zhì)量的內(nèi)容。語(yǔ)義學(xué)是對(duì)意義的研究，從廣義上講，它是邏輯學(xué)和語(yǔ)言學(xué)的一個(gè)分支。

在Web開(kāi)發(fā)領(lǐng)域中，當(dāng)計(jì)算機(jī)了解文檔的結(jié)構(gòu)及其內(nèi)部元素的作用時(shí)，我們談?wù)摰氖钦Z(yǔ)義內(nèi)容。如果我們要建立正確的語(yǔ)義，我們需要深刻理解結(jié)構(gòu)我們的內(nèi)容和功能的前端技術(shù)。

那么有什么實(shí)際的好處呢？正確的語(yǔ)義意味著更可搜索的內(nèi)容，從而導(dǎo)致更好的搜索引擎排名。我們還增加了可訪問(wèn)性，因?yàn)橹T如屏幕閱讀器之類的輔助技術(shù)可以更好地解釋我們內(nèi)容的含義。

有許多不同的前端開(kāi)發(fā)技術(shù)，使開(kāi)發(fā)人員可以實(shí)現(xiàn)語(yǔ)義頁(yè)面結(jié)構(gòu)。這篇文章將為您簡(jiǎn)要介紹語(yǔ)義HTML標(biāo)簽和文檔大綱的概念。

如何使用HTML插槽自動(dòng)生成目錄
如何使用HTML插槽自動(dòng)生成目錄
目錄可以極大地改善許多網(wǎng)站的用戶體驗(yàn)，例如文檔站點(diǎn)或在線...
閱讀更多

語(yǔ)義和非語(yǔ)義HTML標(biāo)簽
語(yǔ)義的概念并不像它看起來(lái)的那么新，它早在HTML5時(shí)代就已存在。術(shù)語(yǔ)語(yǔ)義網(wǎng)最早是由Tim Berners-Lee爵士在2001年提出的。在“語(yǔ)義網(wǎng)”下，他表示可以由機(jī)器處理的數(shù)據(jù)網(wǎng)。

這首先意味著單獨(dú)的HTML元素需要具有其可區(qū)分的結(jié)構(gòu)角色。根據(jù)W3C的定義， “語(yǔ)義元素向?yàn)g覽器和開(kāi)發(fā)人員都清楚地描述了其含義”。

HTML5之前的語(yǔ)義元素


成都建設(shè)企業(yè)網(wǎng)站 語(yǔ)義元素也在HTML5之前存在，只是在大多數(shù)情況下，開(kāi)發(fā)人員并不知道他們使用的某些標(biāo)記實(shí)際上是語(yǔ)義的。只需考慮或標(biāo)簽即可。

對(duì)于我們和用戶代理，他們的角色都很清楚：只包含一個(gè)表單，就像包含一個(gè)圖像一樣。沒(méi)有人會(huì)在里面放置桌子或標(biāo)題并標(biāo)記（或至少希望如此）。

的元素，和其相關(guān)的標(biāo)記，如表中的行，表格單元格等也都是HTML5之前存在的語(yǔ)義標(biāo)簽，但是由于這是大量使用了很多年的基于表的布局，大部分開(kāi)發(fā)商并沒(méi)有利用他們?cè)谡Z(yǔ)義方式。這導(dǎo)致網(wǎng)絡(luò)犧牲了布局的邏輯結(jié)構(gòu)。

有序列表和無(wú)序列表，段落，h1-h6標(biāo)題標(biāo)記都是HTML5之前的所有語(yǔ)義元素。

非語(yǔ)義元素
非語(yǔ)義元素沒(méi)有任何特殊含義，它們之間的層次關(guān)系只是虛幻的。非語(yǔ)義HTML標(biāo)簽最廣泛使用的示例是和標(biāo)簽。

如果您的網(wǎng)站曾經(jīng)感染過(guò)可怕的神經(jīng)病，您就會(huì)知道我在說(shuō)什么。是的 Divs不一定是錯(cuò)誤的，但是如果我們想編寫(xiě)可維護(hù)的，模塊化的和有意義的HTML代碼，就必須格外注意。

對(duì)抗神itis
Smashing Magazine精美地解釋了標(biāo)簽過(guò)度和不合理使用的真正問(wèn)題是什么
。要點(diǎn)是，如果我們?cè)赿iv內(nèi)包含div，則似乎外部div將是內(nèi)部div的父元素，而實(shí)際上并非如此。

成都建設(shè)企業(yè)網(wǎng)站兩者之間沒(méi)有關(guān)系，就像代碼在內(nèi)聯(lián)級(jí)別上以相同方式工作一樣。

但是，如果您仍然對(duì)
-s和
-s 依附，不要驚慌，因?yàn)槟槐赝耆珤仐壦鼈?。它們?nèi)匀皇莾H出于樣式目的以及在其他不得已的情況下對(duì)內(nèi)容進(jìn)行分組的選擇。

HTML5中的文本語(yǔ)義
HTML5引入了許多新的語(yǔ)義元素，使內(nèi)容的組織變得容易。它們不僅幫助您在整個(gè)文檔級(jí)別上組織內(nèi)容（請(qǐng)參閱下一節(jié)中的詳細(xì)信息），而且還可以在文本塊內(nèi)將它們作為內(nèi)聯(lián)標(biāo)簽。

可能最流行的文本級(jí)語(yǔ)義標(biāo)記是和，但它們也早于HTML5才存在。在新的內(nèi)聯(lián)語(yǔ)義元素，我們可以找到例如,用于標(biāo)記人類可讀的日期時(shí)間，并為突出顯示的文本。

請(qǐng)參閱此列表以獲取當(dāng)前正在使用的所有文本級(jí)語(yǔ)義元素。

HTML5中的文檔大綱
文檔大綱是HTML文檔的結(jié)構(gòu)。它顯示了元素如何相互關(guān)聯(lián)。僅通過(guò)映射元素（例如標(biāo)題，表標(biāo)題，表單標(biāo)題以及早期版本的HTML（例如HTML4.01和XHTML）中的其他元素）生成文檔大綱。

在HTML5中，概述算法已通過(guò)新的sectioning元素得到增強(qiáng)，即：

對(duì)于圍繞特定主題分組的部分
用于完整或獨(dú)立的作品，例如博客文章或小部件
用于導(dǎo)航塊
用于補(bǔ)充內(nèi)容，例如側(cè)邊欄。
HTML5中有第五個(gè)sectioning元素，但這不是新的，而是標(biāo)簽。在和標(biāo)簽也是新的，但他們沒(méi)有在文檔中產(chǎn)生新的章節(jié)，他們瓜分了里面部分的內(nèi)容。這意味著每個(gè)sectioning元素（body，article，section，nav和aside）都可以具有自己的header和footer。

成都建設(shè)企業(yè)網(wǎng)站語(yǔ)義結(jié)構(gòu)化內(nèi)容的提示
如果要?jiǎng)?chuàng)建結(jié)構(gòu)合理的文檔大綱，則需要注意以下規(guī)則：

1.最外面的section元素始終是標(biāo)簽。

2. HTML5中的部分可以嵌套。

3.每個(gè)部分都有自己的標(biāo)題層次結(jié)構(gòu)。他們每個(gè)人（甚至是最里面的嵌套部分）都可以有一個(gè)h1標(biāo)簽。

4.雖然文檔大綱主要由5個(gè)分節(jié)元素定義，但每個(gè)節(jié)也需要適當(dāng)?shù)臉?biāo)題。

5.始終是定義給定節(jié)標(biāo)題的第一個(gè)標(biāo)題元素（讓它為h1或較低等級(jí)的標(biāo)題標(biāo)簽）。同一部分中的以下標(biāo)題標(biāo)記需要與此相關(guān)。（如果第一個(gè)標(biāo)題是sectioning元素內(nèi)的h4，則不要在其后放置h4。）

6.用和定義的部分不屬于HTML文檔的主要輪廓，通常它們最初并不是由輔助技術(shù)來(lái)呈現(xiàn)的。

7.每個(gè)部分（正文，部分，文章，旁邊，導(dǎo)航）可以有自己的和標(biāo)簽，用于定義頁(yè)眉（例如徽標(biāo)，作者的姓名，日期，元信息等）和頁(yè)腳（版權(quán)，注釋，鏈接等）。

示例：語(yǔ)義大綱
讓我們看一個(gè)語(yǔ)義文檔大綱的示例，以更清楚地了解其工作方式。我們的示例代碼將導(dǎo)致以下文檔結(jié)構(gòu)：

文檔大綱示例
這是帶有適當(dāng)語(yǔ)義部分的代碼：

1個(gè)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

 
  Welcome On Our Website!
  

Here is our logo and slogan.

 
  
 
  
   Choose Your Interest
  
  
   Menu 1
   Menu 2
   Menu 3
  
 
  
 
  
   Title of Article
   Subtitle of Article
  
   
  
   First Logical Part (e.g. "Theory")
   

Paragraph 1 in first section

    
   Some Other Subheading in First Section
   

Paragraph 2 in first section

  
   
  
   Second Logical Part (e.g. "Practice")
   

Paragraph 1 in second section

   

Paragraph 2 in second section

  
  
  
   Author Bio
   

Paragraph in Article's Footer

  
  
 
  
 
   
  Get To Know Us Better
   
  
   Popular Posts
   ...
  
   
  
   Partners
   ...
  
   
  
   Testimonials
   ...
  
  
 
  
 
  
   Copyright
   Social Media Links
  
 

如果您看一下上面的代碼片段，您會(huì)發(fā)現(xiàn)頁(yè)眉和頁(yè)腳是可選的，我們可以自由選擇是否要使用它們，但是強(qiáng)烈建議始終為每個(gè)部分包括一個(gè)標(biāo)題，否則文檔大綱中的“無(wú)標(biāo)題”部分。

幸運(yùn)的是，互聯(lián)網(wǎng)上有很多很棒的工具可以讓我們檢查文檔的大綱，這一次我們將使用html5.org 的Outliner工具。

如果我們將代碼段插入到大綱顯示器提供的表單中，然后單擊“概述此！”。按鈕，我們將看到以下結(jié)果：

示例代碼大綱
這是我們的示例代碼的文檔大綱，這是搜索引擎看到它的方式，屏幕閱讀器將它們提供給視障用戶。它是語(yǔ)義性的，結(jié)構(gòu)良好的，并且其中沒(méi)有討厭的“無(wú)標(biāo)題”部分。

如果要查看“大綱視圖”中“無(wú)標(biāo)題”部分的外觀，只需刪除示例代碼中的某些標(biāo)題標(biāo)簽即可。

網(wǎng)絡(luò)語(yǔ)義學(xué)的其他方面
語(yǔ)義HTML標(biāo)簽和文檔大綱只是Web語(yǔ)義的一小部分。借助WAI-ARIA可訪問(wèn)性協(xié)議以及可與RDFa協(xié)議，微數(shù)據(jù)或JSON-LD標(biāo)記一起使用的結(jié)構(gòu)化數(shù)據(jù)，可以使網(wǎng)頁(yè)的內(nèi)容變得更加有意義。

標(biāo)題名稱：成都建設(shè)企業(yè)網(wǎng)站
分享路徑：http://www.muchs.cn/news/174140.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、Google、搜索引擎優(yōu)化、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名