新手網(wǎng)站百度seo規(guī)則
文章目錄
- html基本結(jié)構(gòu)
- 屬性
- 語義化
- 為什么要語義化
- 示例
- head中屬性
- 樣式
- 一些概念
- 塊級元素與行級元素
- 空白折疊
- html編程
- 沒有css的html顯示邏輯
html基本結(jié)構(gòu)
html基本單元就是元素，每個元素有標(biāo)記和屬性，如：
<a href="...">www</a>
屬性
- 局部屬性
部分標(biāo)簽特有的屬性 - 全局屬性
每個標(biāo)簽都具備的屬性
語義化
- 每個html標(biāo)簽都具有具體的含義
- 所有標(biāo)簽與展示效果無關(guān)，由css負責(zé)顯示
為什么要語義化
- 為了搜索引擎優(yōu)化(SEO)
搜索引擎可以更好的理解網(wǎng)頁內(nèi)容 - 為了讓瀏覽器更好的理解網(wǎng)頁
如一些瀏覽器功能：閱讀模式、語音模式等；這些和顯示無關(guān)，只需要專注html標(biāo)簽即可。
示例
<!DOCTYPE HTML> <!-- HTML5標(biāo)準(zhǔn)網(wǎng)頁聲明，DOCTYPE -- 文檔類型，DocType -->
<HTML lang="zh-CN"> <!-- HTML為根標(biāo)簽，代表整個網(wǎng)頁 --><head> <!-- head為頭部標(biāo)簽，一般用來描述文檔的各種屬性和信息， 包括標(biāo)題等--><meta charset="UTF-8"> <!-- 設(shè)置字符集為utf-8 --><title>my HTML</title> <!-- 設(shè)置瀏覽器的標(biāo)題 -->
</head><!-- 網(wǎng)頁所有的內(nèi)容都寫在body標(biāo)簽內(nèi) -->
<body> 我的第一個HTML網(wǎng)頁
</body></HTML>
整體的html有兩個部分，第一個部分是包含關(guān)于HTML文檔的信息，可以包含一些輔助性標(biāo)簽。如 <title></title> ，<link />、<meta /> ，<style></style> ， <script></script> 等，但是瀏覽器除了會在標(biāo)題欄顯示 <title> 元素的內(nèi)容外，不會向用戶顯示 head 元素內(nèi)的其他任何內(nèi)容。
第二個部分就是HTML文檔的主體部分，在這個標(biāo)簽中可以包含 <p><h1><br> 等眾多標(biāo)簽，<body> 標(biāo)簽出現(xiàn)在 </head> 標(biāo)簽之后，且必須在閉標(biāo)簽 </HTML> 之前閉合。
head中屬性
<meta> 標(biāo)簽提供了 HTML 文檔的元數(shù)據(jù)，定義了與文檔相關(guān)聯(lián)的名稱/值對。位于文檔的head部分，不包含任何內(nèi)容，不會顯示在客戶端，但是會被瀏覽器解析。共有四個屬性，它們分別是scheme屬性、 http-equiv 屬性和 name 屬性，在 HTML5 中，有一個新的 charset 屬性，它使字符集的定義更加容易，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。
-
charset 指定網(wǎng)頁的編碼方式
<meta charset="UTF-8"> -
scheme 在 HTML5 不支持
-
name 屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為 content，content 中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。語法格式為
<meta name="參數(shù)" content="具體的參數(shù)值">，如：<!-- keywords，關(guān)鍵字，告訴搜索引擎該網(wǎng)頁的關(guān)鍵字。 --> <meta name="keywords" content="關(guān)鍵字，可以有多個關(guān)鍵字" /><!-- description，網(wǎng)站內(nèi)容的描述，用于告訴搜索引擎你網(wǎng)站的主要內(nèi)容，有助于 SEO 搜索引擎優(yōu)化。 --> <meta name="description" content="對網(wǎng)站內(nèi)容的描述" /><!-- viewport：窗口視圖。 --> <!-- width：設(shè)置 layout viewport 的寬度，為一個正整數(shù)，或字符串"width-device"。 --> <!-- initial-scale：設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)。 --> <!-- minimum-scale：允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)。 --> <!-- maximum-scale：允許用戶的最大縮放值，為一個數(shù)字，可以帶小數(shù)。 --> <!-- height：設(shè)置 layout viewport 的高度，這個屬性對我們并不重要，很少使用 --> <!-- user-scalable：是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes 代表允許。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- author：標(biāo)注網(wǎng)頁的作者。 --> <meta name="author" content="網(wǎng)頁的作者"><!-- generator：網(wǎng)頁制作軟件。 --> <meta name="generator" content="制作軟件"><!-- copyright：說明網(wǎng)站版權(quán)信息。 --> <meta name="copyright" content="版權(quán)"> -
http-equiv
http-equiv 相當(dāng)于 http 的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。<!-- Expires：期限，可以用于設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。 --> <meta http-equiv="expires" content="Fri,12 Jan 2022 18:18:18 GMT"><!-- Pragma：cache 模式，是用于設(shè)定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容，設(shè)定后一旦離開網(wǎng)頁就無法從 cache 中再調(diào)出。 --> <!-- cache模式：允許脫機瀏覽。 --> <!-- no-cache模式：無法脫機瀏覽。 --> <meta http-equiv="peragma" content="no-cache" /> <!-- 當(dāng)前無法脫機瀏覽 --> <!-- Refresh：刷新，自動刷新并指向新頁面。 --> <meta http-equiv="refresh" content="時間（秒為單位）;URL"><!-- Window-Target：顯示窗口的設(shè)定。 --> <!-- Window-Target 有四個屬性值： --> <!-- _top：表示頁面以當(dāng)前整個窗口顯示，可以防止自己的頁面被其他網(wǎng)頁嵌套 --> <!-- _blank： 表示頁面以新打開的窗口顯示 --> <!-- _parent：表示頁面以父容器或窗口顯示 --> <!-- _self：表示頁面以當(dāng)前容器或窗口顯示 --> <meta http-equiv="window-target" content="_top">
樣式
樣式有三種方式：
- 內(nèi)聯(lián)樣式
<p style="border: red 12px; margin-top: 20px; background-color: brown;">內(nèi)聯(lián)樣式</ p> - 內(nèi)部樣式表
<head><style>p {color : red;}</ style></ head> - 外部應(yīng)用
<link rel="stylesheet" type="text/css" href="http://192.168.232.220:8881/style.css">
一些概念
塊級元素與行級元素
- 塊級元素
在顯示時會單獨占一行的元素，如h、p - 行級元素
在顯示時不會單獨占一行的元素，如span
空白折疊
在源代碼中的連續(xù)空白字符(空格、換行、制表符)，在頁面顯示時，會被折疊為一個空格，不論標(biāo)簽內(nèi)外
html編程
html編程分為兩個層次，一個是html代碼，他表征整個html功能，顯示內(nèi)容；一個是css，他表征整個html的顯示方式。
因此，本質(zhì)上，對于一個html文件，他的本質(zhì)就是最基本的那些元素，如p、a、img...，而div、header...這些的存在有兩方面功能，一種是更好的去進行編寫css；另外一個方面是提供更好的語義。
沒有css的html顯示邏輯
沒有css顯示方式的編寫，整個html一般就是兩種，一種是塊級元素，一種是行級元素，也就是說整個html元素會從上到下一個一個的進行顯示，只不過有的元素會換行，而有的元素不會換行