免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

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

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

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

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

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

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

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

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

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

HTML5之前的語義元素


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

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

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

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

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

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

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

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

但是，如果您仍然對
-s和
-s 依附，不要驚慌，因為您不必完全拋棄它們。它們?nèi)匀皇莾H出于樣式目的以及在其他不得已的情況下對內(nèi)容進行分組的選擇。

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

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

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

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

在HTML5中，概述算法已通過新的sectioning元素得到增強，即：

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

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

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

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

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

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

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

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

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

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

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

1個
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
  
 

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

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

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

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

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

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

當(dāng)前題目：成都建設(shè)企業(yè)網(wǎng)站
文章轉(zhuǎn)載：http://m.newbst.com/news40/174140.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、域名注冊、企業(yè)建站、手機網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)頁設(shè)計公司

廣告

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

成都定制網(wǎng)站網(wǎng)頁設(shè)計