摘要：可見對一個頁面正確渲染很重要。和標簽對用于標識頁面的頭部區(qū)域，和之間的內(nèi)容都屬于頭部區(qū)域中的內(nèi)容。是一個輔助性標簽，對頁面可以進行很多方面的特性的設(shè)置。當頁面沒有設(shè)置字符集時，瀏覽器會使用默認的字符編碼顯示。
往期回顧
在 1.2 節(jié)介紹 HTML 語言時講到：
HTML 是一種“超文本標記語言”
它由許多 HTML 標簽組成
注意：HTML 標簽也稱為元素
HTML 頁面
一個頁面的創(chuàng)建離不開 HTML 語言，每個頁面都是從搭建結(jié)構(gòu)開始的，盡管頁面變得越來越復雜，但是其底層結(jié)構(gòu)依然會比較簡單。本節(jié)將通過示例 1-1 所示的簡單 HTML 頁面來詳細講解 HTML 頁面的基本結(jié)構(gòu)。
【示例 1-1】HTML 頁面基本結(jié)構(gòu)
上述代碼體現(xiàn)了 HTML 頁面的基本結(jié)構(gòu)，每個頁面都是由示例 1-1 所示的結(jié)構(gòu)開始構(gòu)建的。
根據(jù)功能的不同，整個 HTML 頁面在結(jié)構(gòu)上可以分成兩層：
一層是外層，由 和 標簽對來標識；
一層是內(nèi)層，用于實現(xiàn) HTML 頁面的各項功能；
根據(jù)實現(xiàn)功能的不同，又可以將內(nèi)層細分為兩個區(qū)域：即頭部區(qū)域和主體區(qū)域
頭部區(qū)域由
和 標簽對標識；
要在瀏覽器窗口顯示的內(nèi)容需要放在主體區(qū)域；
主體區(qū)域的標識標簽是
和
打開任意一款編輯器，新建一個 HTML 頁面，書寫以上的 HTML 結(jié)構(gòu)代碼之后，以后綴名”.html”保存。然后用 Chorme 瀏覽器打開該頁面，會發(fā)現(xiàn)頁面上一片空白，沒有任何內(nèi)容。這是因為我們還沒有在代碼的
標簽中添加內(nèi)容。
在添加內(nèi)容之前先介紹一下結(jié)構(gòu)中所用到的各個標簽的作用。
基本標記標簽
一 文檔類型聲明
下面分別講解示例 1-1 中每一行代碼的含義及使用方法。
DOCTYPE 是 Document Type 的簡寫，用來告訴瀏覽器使用什么樣的 HTML 或 XHTML 規(guī)范來解析網(wǎng)
頁。解析規(guī)范由 DOCTYPE 定義的 DTD（文檔類型定義）來指定，DTD 規(guī)定了使用通用標簽語言的網(wǎng)頁語法。
需要注意的是：在 HTML 文檔中，DOCTYPE 應(yīng)該位于頁面的第一行。在 HTML5 以前，必須指定 DTD，例如下例代碼是 XTHML 的過渡類型的文檔聲明：
在 HTML5 中，遵循“存在即合理”的原則，對規(guī)則的要求比較寬松，沒有指定 HTML 標簽必須遵循的 DTD，因而簡寫成以下形式：
DOCTYPE 是不區(qū)分大小寫的，所以也可以寫成 ：
目前，瀏覽器對頁面的渲染有兩種模式：
怪異模式（瀏覽器使用自己的模式解析渲染頁面）
標準模式（瀏覽器使用 W3C 官方標準解析渲染頁面）
不同的渲染模式會影響到瀏覽器對 CSS 代碼甚至 JavaScript 腳本的解析。
如果使用 DOCTYPE，瀏覽器將按標準模式解析渲染頁面，否則將按怪異模式解析渲染頁面。
使用怪異模式對運行在 IE 低版本瀏覽器下的頁面影響很大?？梢?DOCTYPE 對一個頁面正確渲染很重要。
二 開始文檔實際 HTML 部分
標簽是 HTML 頁面中所有標簽的頂層標簽，頁面中的所有標簽必須放在 標簽對之間
三 設(shè)置網(wǎng)頁文檔頭部信息
通常跟在 后面。
和 標簽對用于標識 HTML 頁面的頭部區(qū)域， 和 之間的內(nèi)容都屬于頭部區(qū)域中的內(nèi)容。
這個區(qū)域主要用來設(shè)置一些與網(wǎng)頁相關(guān)的信息，如網(wǎng)頁標題、字符集、網(wǎng)頁描述的信息等，設(shè)置的信息內(nèi)容一般不會顯示在瀏覽器窗口中。
四 網(wǎng)頁文檔的標題
標簽的作用有兩個：</p>
<p>一是設(shè)置網(wǎng)頁的標題，以告訴訪客網(wǎng)頁的主題是什么，設(shè)置的標題將出現(xiàn)在瀏覽器中的標簽欄中，如圖 1-22 所示；</p>
<p>二是用于搜索引擎索引，作為搜索關(guān)鍵字以及搜索結(jié)果的標題使用。</p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbjNmW?w=901&h=536");</script></p>
<p>需要注意的是：搜索引擎會根據(jù) <title> 標簽設(shè)置的內(nèi)容將網(wǎng)站或文章合理歸類。所以標題對一個網(wǎng)站或文章來說特別重要。</p>
<p>此外，到目前為止，標題標簽是 SEO 中最為關(guān)鍵的優(yōu)化項目之一，一個合適的標題可以使網(wǎng)站獲得更好的排名。</p>
<p>實踐證明，對標題同時設(shè)置關(guān)鍵字時可以使網(wǎng)站獲得更靠前的排名。有關(guān) title 標題對搜索影響的示例請參見示例 1-3。</p>
<p>為了讓訪客更好地了解網(wǎng)頁內(nèi)容以及使網(wǎng)站獲得更好的排名，每個頁面都應(yīng)該有一個簡短的、描述性的、最好能帶上關(guān)鍵字的標題，而且這個標題在每個頁面應(yīng)該是唯一的。<br>標題設(shè)置語法如下：</p>
<pre><title> 標題內(nèi)容
示例代碼如下：
妙味課堂 -www.miaov.com
知識點拓展：什么是搜索引擎？
搜索引擎（Search Engine，SE）
是指根據(jù)一定的策略，運用特定的計算機程序從互聯(lián)網(wǎng)上搜集信息，在對信息進行組織和處理后，為用戶提供檢索服務(wù)，將用戶檢索相關(guān)的信息展示給用戶的系統(tǒng)。
通俗解釋：
常用的百度搜索就是一種搜索引擎，它通過一些關(guān)鍵字迅速地找到用戶需要的資料。在搜索引擎中，用戶搜索的就是標題，所以一個切合內(nèi)容的標題是至關(guān)重要的。
為了界面的統(tǒng)一性，全文中的示例運行結(jié)果截圖統(tǒng)一套用了妙味官方的網(wǎng)址：
www.miaov.com
各位讀者在各自的電腦中進行這些示例文件時，在 Chrome 瀏覽器的地址欄中看到的 URL 將會是這樣的格式：
file:/// 文件保存路徑 /html 文件名
如將 html 文件 ex1-1.html 保存在 d:Weblesson1 路徑中；則訪問 ex1-1.html 時瀏覽器中顯示的 URL 將是：
file:///D:/Web/lesson1/ex1-1.html
五 定義文檔元數(shù)據(jù)
標簽位于文檔的頭部，不包含任何文字內(nèi)容。 用來定義文檔的元數(shù)據(jù)，使用 “名稱 = 值”的形式來表示。
一般使用它來描述當前頁面的特性，比如：文檔字符集、關(guān)鍵字、網(wǎng)頁描述信息、作者等內(nèi)容。
是一個輔助性標簽，對 HTML 頁面可以進行很多方面的特性的設(shè)置。下面，主要介紹如何使用 來設(shè)置頁面字符集、關(guān)鍵字和描述信息。
①使用 設(shè)置頁面字符集
標簽可以設(shè)置頁面內(nèi)容所使用的字符編碼，瀏覽器會據(jù)此來調(diào)用相應(yīng)的字符編碼顯示頁面內(nèi)容和標題。當頁面沒有設(shè)置字符集時，瀏覽器會使用默認的字符編碼顯示。
簡體中文操作系統(tǒng)下，IE 瀏覽器的默認字符編碼是 GB2312，Chrome 瀏覽器默認字符編碼是 GBK。所以當頁面字符集設(shè)置不正確或沒有設(shè)置時，文檔的編碼和頁面內(nèi)容的編碼有可能不一致，此時將導致頁面內(nèi)容和標題顯示亂碼。
在 HTML 頁面中，常用的字符編碼是“utf-8” “utf-8”又叫“萬國碼”
它涵蓋了地球上幾乎所有地區(qū)的文字。我們也可以把它看成是一個世界語言的“翻譯官”。有了“utf-8”，你可以在 HTML
頁面上寫中文、英文、韓文等語言的內(nèi)容。默認情況下，HTML
文檔的編碼也是“utf-8”。這就使文檔編碼和頁面內(nèi)容的編碼保持了一致，這樣的頁面在世界上幾乎所有地區(qū)都能正常顯示。
標簽設(shè)置字符集有兩種格式，一種是 HTML5 版本的格式，一種是 HTML5 以下版本的格式，基本語法如下。
HTML4/XHTML 設(shè)置格式：
HTML5 對字符集的設(shè)置作了簡化，格式如下：
使用 設(shè)置頁面字符集的示例如下
【示例 1-2】HTML 頁面字符集設(shè)置
網(wǎng)頁字符集設(shè)置
妙味課堂－ www.miaov.com
上述代碼在 HTML 頁面的頭部區(qū)域使用 設(shè)置頁面的字符編碼為“utf-8”，在 Chrome 瀏覽器中運行的結(jié)果如圖 1-23 所示。
將示例 1-2 中的 標簽去掉后，再在 Chrome 瀏覽器中運行，結(jié)果如圖 1-24 所示。
對比圖 1-23 和圖 1-24，可見頁面字符集設(shè)置的重要性。
②使用 設(shè)置關(guān)鍵字
關(guān)鍵字是為了便于搜索引擎搜索而設(shè)置的，用戶在網(wǎng)頁中是看不到關(guān)鍵字的。
它的作用主要體現(xiàn)在搜索引擎優(yōu)化。對于 SEO 優(yōu)化而言，關(guān)鍵字起到畫龍點睛的作用。
為提高網(wǎng)頁在搜索引擎中被搜索到的概率，可以設(shè)定多個與網(wǎng)頁主題相關(guān)的關(guān)鍵字。需注意的是，雖然設(shè)定多個關(guān)鍵字可提高被搜索到的幾率，但目前大多數(shù)的搜索引擎在檢索時都會限制關(guān)鍵字的數(shù)量，一般 10 個以內(nèi)關(guān)鍵字比較合理，關(guān)鍵字多了會分散關(guān)鍵字優(yōu)化，反倒影響排名。
關(guān)鍵字設(shè)置語法如下：
語法說明：關(guān)鍵字之間可以使用逗號，也可以使用空格等符號。示例代碼如下：
③使用 設(shè)置網(wǎng)頁描述信息
網(wǎng)頁的描述信息主要用于概述性地描述頁面的主要內(nèi)容，是對關(guān)鍵詞的補充性描述，當描述信息包含部分關(guān)鍵字時，會作為搜索結(jié)果返回給用戶。
像關(guān)鍵字一樣，搜索引擎對描述信息的字數(shù)也有限制，一般允許 70~100 字，所以描述信息的內(nèi)容應(yīng)盡量簡明扼要。
描述信息設(shè)置語法如下：
示例代碼如下：
從
和 <meta> 兩個標簽的介紹中，可以看到，標題、網(wǎng)頁描述信息以及關(guān)鍵詞對 SEO 有著很大的作用，搜索引擎之所以能搜到網(wǎng)站，全都是標題、網(wǎng)頁描述信息和關(guān)鍵詞的功勞，所以我們必須做好標題、描述標簽、關(guān)鍵詞的設(shè)置與優(yōu)化。下面的示例演示了如何使用標題、網(wǎng)頁描述信息和關(guān)鍵詞進行網(wǎng)頁搜索。</p>
<p>【示例 1-3】使用標題和網(wǎng)頁描述信息實現(xiàn)網(wǎng)頁的搜索。</p>
<pre><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content=" 妙味課堂是北京最資深的前端開發(fā)培訓機構(gòu)，妙味課堂擁有系統(tǒng)的 JavaScript、HTML5、CSS3、移動開發(fā)、遠程培訓等課程，并錄制成最系統(tǒng)的前端開發(fā)視頻教程，妙味課堂推出的 VIP 前端學習平臺已經(jīng)成為學習氛圍最濃郁的前端學習圈 ">
<meta name="keywords" content="JavaScript 遠程培訓 ,JS 遠程培訓 ,JavaScript 培訓 ,JS 培訓 ,JavaScript
教程 ,HTML5 培訓 ,CSS3 培訓 , 北京前端培訓 , 移動端培訓 , 北京移動端培訓 , 北京 JS 培訓 , 北京 JavaScript 培訓 ,北京 HTML5 培訓 ">
<title> 首頁－妙味課堂 www.miaov.com
……
上述代碼中的標題中帶有了關(guān)鍵字“妙味課堂”，所以當用戶在百度搜索框中輸入“妙味課堂”時會搜索到妙味課堂頁面，同時在返回的搜索結(jié)果中，會以“首頁－妙味課堂 www.miaov.com”作為搜索結(jié)果的標題，而返回的搜索結(jié)果描述信息則是上述代碼中設(shè)置的網(wǎng)頁描述信息，如圖 1-25 所示。
圖 1-25 是使用關(guān)鍵詞搜索信息，同樣可以搜索到圖 1-26 的結(jié)果，但排名沒有使用標題中的關(guān)鍵字進行搜索時靠前。
六 頁面主體內(nèi)容
body（身體，主體）代表了頁面的主體部分，它是放置頁面內(nèi)容的地方，所有需要在瀏覽器窗口中顯示的內(nèi)容都需要放置在
標簽對之間。用戶可以通過瀏覽器看到寫在 標簽中的內(nèi)容。
【示例 1-4】
標簽的使用
主體標簽的使用示例
吼吼，好厲害，這是我們第一個 HTML 頁面
當打開瀏覽器運行上述代碼時就會發(fā)現(xiàn)，瀏覽器上會顯示書寫的文本，如圖 1-27 所示。
以上就是 HTML 基本結(jié)構(gòu)中標簽的含義及使用介紹，通過觀察這些基本的標簽，可以總結(jié)出標簽的一些特點，如下所述。
① 標簽是由尖括號包圍的關(guān)鍵詞，比如 。
② 標簽通常是成對出現(xiàn)的（稱為雙標簽），有開始標簽和結(jié)束標簽。開始標簽使用 < 標簽名 > 表示，結(jié)束標簽使用 表示，比如 。
③ 也有多帶帶呈現(xiàn)的標簽（稱為單標簽），比如 。
④ 在開始標簽中可以包含若干個屬性。每個屬性使用：屬性名 =“屬性值”的格式進行設(shè)置，結(jié)束標簽不包含任何屬性。HTML 屬性表示標簽所具有的一些特性。比如標簽的形狀、顏色、用途等特性。比如 標簽中的 charset="utf-8" “charset”就是標簽的一個屬性，而“utf-8 ”則是它的值。
⑤ 如果是雙標簽的話，內(nèi)容出現(xiàn)在兩個標簽之間，比如
內(nèi)容 。
⑥ 如果是單標簽的話，內(nèi)容在標簽屬性中賦值，比如后面將學到的 img 圖片標簽，圖片地址就出現(xiàn)在 src 屬性中：。
⑦ 標簽不區(qū)分大小寫，但是為了建立一個良好的編碼習慣，標簽請使用小寫。
根據(jù)上面總結(jié)的標簽特點，可得到如下所示的標簽設(shè)置格式：
雙標簽：< 標簽名稱 屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …> …
單標簽：< 標簽名稱 屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …/>
標簽嵌套關(guān)系
在 HTML 結(jié)構(gòu)中，標簽與標簽之間只存在兩種關(guān)系：嵌套關(guān)系和并列關(guān)系。
01嵌套關(guān)系
嵌套關(guān)系又稱為包含關(guān)系，可以通俗記憶為“父子級關(guān)系”。
在 1.4.1 小節(jié)中，我們發(fā)現(xiàn) 標簽和
標簽都存在 <head> 標簽中，此時 <head> 標簽與 <meta><br>標簽的關(guān)系以及 <head> 標簽和 <title> 標簽的關(guān)系，體現(xiàn)的就是嵌套關(guān)系也是父子級關(guān)系，如圖 1-28 所示。</p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbjNut?w=600&h=464");</script></p>
<p><strong>02并列關(guān)系</strong></p>
<pre>并列關(guān)系也就是常說的同級關(guān)系，也可以通俗記憶為“兄弟關(guān)系”。
</pre>
<p><meta> 標簽和 <title> 標簽都有一個共同的“父級”—— <head> 標簽。所以 <meta> 標簽和 <title> 標簽的并列關(guān)系也叫作“兄弟關(guān)系”，如圖 1-29 所示。</p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbjNuY?w=600&h=478");</script></p>
<p>這兩種關(guān)系在以后的示例中會經(jīng)常用到，大家一定要對這兩種關(guān)系有所了解。</p>
<p><strong>思考：</strong></p>
<p>在 HTML 基本結(jié)構(gòu)中還有哪些父子級關(guān)系和兄弟關(guān)系？</p>
</div>
<div id="qoyqs8suu2u" class="mt-64 tags-seach" >
<div id="qoyqs8suu2u" class="tags-info">
<a style="width:120px;" title="GPU云服務(wù)器" href="http://systransis.cn/site/product/gpu.html">GPU云服務(wù)器</a>
<a style="width:120px;" title="云服務(wù)器" href="http://systransis.cn/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a>
<a style="width:120px;" title="html提交一個頁面" href="http://systransis.cn/yun/tag/htmltijiaoyigeyemian/">html提交一個頁面</a>
<a style="width:120px;" title="第一個數(shù)據(jù)" href="http://systransis.cn/yun/tag/diyigeshuju/">第一個數(shù)據(jù)</a>
<a style="width:120px;" title="第一個頂級域名" href="http://systransis.cn/yun/tag/diyigedingjiyuming/">第一個頂級域名</a>
<a style="width:120px;" title="php第一個字符" href="http://systransis.cn/yun/tag/phpdiyigezifu/">php第一個字符</a>
</div>
</div>
<div id="qoyqs8suu2u" class="entry-copyright mb-30">
<p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p>
<p>轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108738.html</p>
</div>
<ul class="pre-next-page">
<li id="qoyqs8suu2u" class="ellipsis"><a class="hpf" href="http://systransis.cn/yun/108737.html">上一篇：原生js實現(xiàn)手機端導航滑動效果</a></li>
<li id="qoyqs8suu2u" class="ellipsis"><a class="hpf" href="http://systransis.cn/yun/108739.html">下一篇：Wuss Weapp 微信小程序 UI 組件庫</a></li>
</ul>
</div>
<div id="qoyqs8suu2u" class="about_topicone-mid">
<h3 class="top-com-title mb-0"><span data-id="0">相關(guān)文章</span></h3>
<ul class="com_white-left-mid atricle-list-box">
<li>
<div id="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/99449.html"><b><em>前端</em><em>修煉</em><em>の道</em> | <div> 標簽簡介</b></a></h2>
<p class="ellipsis2 good">摘要：標簽是最基本的，同時也是最常用的標簽。該標簽是一個雙標簽，出現(xiàn)在主體區(qū)域中，主要作為一個容器標簽來使用，在標簽中可以包含除之外的所有主體標簽。因此，的主要作用就是用來對結(jié)構(gòu)進行布局。示例標簽的使用上述代碼中，分別創(chuàng)建了兩個塊級元素。
showImg(https://segmentfault.com/img/bVbj9Kn?w=900&h=383);
標簽是最基本的，同時也是最常用的標...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-795.html"><img src="http://systransis.cn/yun/data/avatar/000/00/07/small_000000795.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">vvpale</span></a>
<time datetime="">2019-08-23 13:43</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/99037.html"><b><em>前端</em><em>修煉</em><em>の道</em> | 如何成為一名合格<em>前端</em>開發(fā)工程師？</b></a></h2>
<p class="ellipsis2 good">摘要：上期回顧在上一節(jié)我們已了解前端開發(fā)是做什么的，現(xiàn)在的問題是，如何才能成為一名合格的前端開發(fā)工程師相信這個問題是大家比較關(guān)心的。
showImg(https://segmentfault.com/img/bVbi9ks?w=900&h=383);上期回顧
在上一節(jié)我們已了解前端開發(fā)是做什么的，現(xiàn)在的問題是，如何才能成為一名合格的前端開發(fā)工程師？ 相信這個問題是大家比較關(guān)心的。
前端開發(fā)工...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-500.html"><img src="http://systransis.cn/yun/data/avatar/000/00/05/small_000000500.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">Jackwoo</span></a>
<time datetime="">2019-08-23 12:50</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/99868.html"><b><em>前端</em><em>修煉</em> <em>の道</em> | 帶你走進迷人的 CSS 世界</b></a></h2>
<p class="ellipsis2 good">摘要：每條屬性聲明實現(xiàn)對網(wǎng)頁元素進行某種特定格式的設(shè)置，由一個屬性和一個值組成，屬性和值之間使用冒號連接，不同聲明之間用分號分隔，所有屬性聲明放到一對大括號中。
showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383);
showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-1684.html"><img src="http://systransis.cn/yun/data/avatar/000/00/16/small_000001684.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">shiweifu</span></a>
<time datetime="">2019-08-23 13:58</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/100457.html"><b><em>前端</em><em>修煉</em><em>の道</em> | 你知道哪些復合選擇器？</b></a></h2>
<p class="ellipsis2 good">摘要：后代選擇器后代選擇器又稱包含選擇器，用于選擇指定元素的后代元素。這些選擇器既可以是基本選擇器，也可以是一個復合選擇器。注意元素選擇器及和屬性選擇器之間沒有空格。
showImg(https://segmentfault.com/img/bVblJEJ?w=900&h=383);
復合選擇器是通過基本選擇器進行組合后構(gòu)成的，常用的復合選擇器有：
交集選擇器
并集選持器
后代選擇器
子元...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-168.html"><img src="http://systransis.cn/yun/data/avatar/000/00/01/small_000000168.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">Java_oldboy</span></a>
<time datetime="">2019-08-23 14:20</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/75342.html"><b>2019 Java 全棧工程師進階路線圖，一定要收藏</b></a></h2>
<p class="ellipsis2 good">摘要：結(jié)合我自己的經(jīng)驗，我整理了一份全棧工程師進階路線圖，給大家參考。乾坤大挪移第一層第一層心法，主要都是基本語法，程序設(shè)計入門，悟性高者十天半月可成，差一點的到個月也說不準。
技術(shù)更新日新月異，對于初入職場的同學來說，經(jīng)常會困惑該往那個方向發(fā)展，這一點松哥是深有體會的。
我剛開始學習 Java 那會，最大的問題就是不知道該學什么，以及學習的順序，我相信這也是很多初學者經(jīng)常面臨的問題。?我...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-328.html"><img src="http://systransis.cn/yun/data/avatar/000/00/03/small_000000328.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">wangdai</span></a>
<time datetime="">2019-08-16 18:34</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="qoyqs8suu2u" class="topicone-box-wangeditor">
<h3 class="top-com-title mb-64"><span>發(fā)表評論</span></h3>
<div id="qoyqs8suu2u" class="xcp-publish-main flex_box_zd">
<div id="qoyqs8suu2u" class="unlogin-pinglun-box">
<a href="javascript:login()" class="grad">登陸后可評論</a>
</div> </div>
</div>
<div id="qoyqs8suu2u" class="site-box-content">
<div id="qoyqs8suu2u" class="site-content-title">
<h3 class="top-com-title mb-64"><span>0條評論</span></h3>
</div>
<div id="qoyqs8suu2u" class="pages"></ul></div>
</div>
</div>
<div id="qoyqs8suu2u" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
<div id="qoyqs8suu2u" class="">
<div id="qoyqs8suu2u" class="com_layuiright-box user-msgbox">
<a href="http://systransis.cn/yun/u-869.html"><img src="http://systransis.cn/yun/data/avatar/000/00/08/small_000000869.jpg" alt=""></a>
<h3><a href="http://systransis.cn/yun/u-869.html" rel="nofollow">JasonZhang</a></h3>
<h6>男<span>|</span>高級講師</h6>
<div id="qoyqs8suu2u" class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(869)" id="attenttouser_869" class="grad follow-btn notfollow attention">我要關(guān)注</a>
<a href="javascript:login()" title="發(fā)私信" >我要私信</a>
</div>
<div id="qoyqs8suu2u" class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="http://systransis.cn/yun/ut-869.html" class="box_hxjz">閱讀更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/123200.html">字節(jié)跳動Python后端開發(fā)崗，已拿offer</a></h3>
<p>閱讀 2037<span>·</span>2021-11-12 10:36</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/122930.html">UCloud雙11期間推薦新用戶達標免費送1年香港快杰型云服務(wù)器（2核4G2M）-老劉博客</a></h3>
<p>閱讀 1904<span>·</span>2021-11-09 09:49</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/122848.html">DogYun雙十一：動態(tài)云主機6折,獨立服務(wù)器優(yōu)惠100元/月,充110送10元</a></h3>
<p>閱讀 2610<span>·</span>2021-11-04 16:12</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/122064.html">Namecheap：com/net注冊優(yōu)惠21%，多款域名年付0.99美元</a></h3>
<p>閱讀 1157<span>·</span>2021-10-09 09:57</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/114303.html">根據(jù)瀏覽器的工作原理整理前端知識體系</a></h3>
<p>閱讀 3251<span>·</span>2019-08-29 17:24</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/113167.html">webApp 頁面布局</a></h3>
<p>閱讀 1923<span>·</span>2019-08-29 15:12</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/112930.html">一個前端工作者的，這一年 ！</a></h3>
<p>閱讀 1284<span>·</span>2019-08-29 14:07</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/112218.html">手機端單行文字兩端對齊：用css偽類實現(xiàn)</a></h3>
<p>閱讀 1297<span>·</span>2019-08-29 12:53</p></li>
</ul>
</div>
<!-- 文章詳情右側(cè)廣告-->
<div id="qoyqs8suu2u" class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活動</span></h6>
<div id="qoyqs8suu2u" class="com_adbox">
<div id="qoyqs8suu2u" class="layui-carousel" id="right-item">
<div carousel-item>
<div>
<a href="http://systransis.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow">
<img src="http://systransis.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器">
</a>
</div>
<div>
<a href="http://systransis.cn/site/product/gpu.html" rel="nofollow">
<img src="http://systransis.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器">
</a>
</div>
</div>
</div>
</div> <!-- banner結(jié)束 -->
<div id="qoyqs8suu2u" class="adhtml">
</div>
<script>
$(function(){
$.ajax({
type: "GET",
url:"http://systransis.cn/yun/ad/getad/1.html",
cache: false,
success: function(text){
$(".adhtml").html(text);
}
});
})
</script> </div> </div>
</div>
</div>
</div>
</section>
<!-- wap拉出按鈕 -->
<div id="qoyqs8suu2u" class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<!-- wap遮罩層 -->
<div id="qoyqs8suu2u" class="site-mobile-shade"></div>
<!--付費閱讀 -->
<div class="qoyqs8suu2u" id="payread">
<div id="qoyqs8suu2u" class="layui-form-item">閱讀需要支付1元查看</div>
<div id="qoyqs8suu2u" class="layui-form-item"><button class="btn-right">支付并查看</button></div>
</div>
<script>
var prei=0;
$(".site-seo-depict pre").each(function(){
var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
$(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
$(this).html("").append("<code>"+html+"</code>");
prei++;
})
$(".site-seo-depict img").each(function(){
if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
$(this).remove();
}
})
$("LINK[href*='style-49037e4d27.css']").remove();
$("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
$("pre").attr("class","layui-code");
$("pre").attr("lay-title","");
$("pre").attr("lay-skin","");
layui.code();
$(".layui-code-h3 a").attr("class","copycode").html("復制代碼 ").attr("onclick","copycode(this)");
});
function copycode(target){
var id=$(target).parent().parent().attr("id");
var clipboard = new ClipboardJS("#"+id);
clipboard.on('success', function(e) {
e.clearSelection();
alert("復制成功")
});
clipboard.on('error', function(e) {
alert("復制失敗")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
<link rel="stylesheet" type="text/css" href="http://systransis.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
<script src="http://systransis.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
<script src="http://systransis.cn/yun/static/js/clipboard.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
function setcode(){
var _html='';
document.querySelectorAll('pre code').forEach((block) => {
var _tmptext=$.trim($(block).text());
if(_tmptext!=''){
_html=_html+_tmptext;
console.log(_html);
}
});
}
</script>
<script>
function payread(){
layer.open({
type: 1,
title:"付費閱讀",
shadeClose: true,
content: $('#payread')
});
}
// 舉報
function jupao_tip(){
layer.open({
type: 1,
title:false,
shadeClose: true,
content: $('#jubao')
});
}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加載評論
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);
})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("評論內(nèi)容不能為空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
$(".button_agree").click(function(){
var supportobj = $(this);
var tid = $(this).attr("id");
$.ajax({
type: "GET",
url:"http://systransis.cn/yun/index.php?topic/ajaxhassupport/" + tid,
cache: false,
success: function(hassupport){
if (hassupport != '1'){
$.ajax({
type: "GET",
cache:false,
url: "http://systransis.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
success: function(comments) {
supportobj.find("span").html(comments+"人贊");
}
});
}else{
alert("您已經(jīng)贊過");
}
}
});
});
function attenquestion(_tid,_rs){
$.ajax({
//提交數(shù)據(jù)的類型 POST GET
type:"POST",
//提交的網(wǎng)址
url:"http://systransis.cn/yun/favorite/topicadd.html",
//提交的數(shù)據(jù)
data:{tid:_tid,rs:_rs},
//返回數(shù)據(jù)的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在請求之前調(diào)用的函數(shù)
beforeSend:function(){},
//成功返回之后調(diào)用的函數(shù)
success:function(data){
var data=eval("("+data+")");
console.log(data)
if(data.code==2000){
layer.msg(data.msg,function(){
if(data.rs==1){
//取消收藏
$(".layui-layer-tips").attr("data-tips","收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
}
if(data.rs==0){
//收藏成功
$(".layui-layer-tips").attr("data-tips","已收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
}
})
}else{
layer.msg(data.msg)
}
} ,
//調(diào)用執(zhí)行后調(diào)用的函數(shù)
complete: function(XMLHttpRequest, textStatus){
postadopt=true;
},
//調(diào)用出錯執(zhí)行的函數(shù)
error: function(){
//請求出錯處理
postadopt=false;
}
});
}
</script>
<footer>
<div id="qoyqs8suu2u" class="layui-container">
<div id="qoyqs8suu2u" class="flex_box_zd">
<div id="qoyqs8suu2u" class="left-footer">
<h6><a href="http://systransis.cn/"><img src="http://systransis.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6>
<p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計算服務(wù)平臺，堅持中立，不涉足客戶業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺、AI服務(wù)平臺等一系列云計算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專有云在內(nèi)的綜合性行業(yè)解決方案。</p>
</div>
<div id="qoyqs8suu2u" class="right-footer layui-hidemd">
<ul class="flex_box_zd">
<li>
<h6>UCloud與云服務(wù)</h6>
<p><a href="http://systransis.cn/site/about/intro/">公司介紹</a></p>
<p><a >加入我們</a></p>
<p><a href="http://systransis.cn/site/ucan/onlineclass/">UCan線上公開課</a></p>
<p><a href="http://systransis.cn/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://systransis.cn/site/pro-notice/">產(chǎn)品動態(tài)</a></p>
</li>
<li>
<h6>友情鏈接</h6> <p><a >GPU算力平臺</a></p> <p><a >UCloud私有云</a></p>
<p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >Pinex</a></p> <p><a >AI繪畫</a></p>
</li>
<li>
<h6>社區(qū)欄目</h6>
<p><a href="http://systransis.cn/yun/column/index.html">專欄文章</a></p>
<p><a href="http://systransis.cn/yun/udata/">專題地圖</a></p> </li>
<li>
<h6>常見問題</h6>
<p><a href="http://systransis.cn/site/ucsafe/notice.html" >安全中心</a></p>
<p><a href="http://systransis.cn/site/about/news/recent/" >新聞動態(tài)</a></p>
<p><a href="http://systransis.cn/site/about/news/report/">媒體動態(tài)</a></p> <p><a href="http://systransis.cn/site/cases.html">客戶案例</a></p>
<p><a href="http://systransis.cn/site/notice/">公告</a></p>
</li>
<li>
<span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優(yōu)刻得"></span>
<p>掃掃了解更多</p></div>
</div>
<div id="qoyqs8suu2u" class="copyright">Copyright ? 2012-2023 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 31011002000058號</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://#/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div>
</div>
</footer>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://systransis.cn/" title="成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费">成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="pb5xt" class="pl_css_ganrao" style="display: none;"><legend id="pb5xt"><dfn id="pb5xt"><dfn id="pb5xt"><mark id="pb5xt"></mark></dfn></dfn></legend><nobr id="pb5xt"><small id="pb5xt"></small></nobr><dl id="pb5xt"><i id="pb5xt"><listing id="pb5xt"><tt id="pb5xt"></tt></listing></i></dl><ins id="pb5xt"><address id="pb5xt"></address></ins><i id="pb5xt"><listing id="pb5xt"></listing></i><mark id="pb5xt"></mark><thead id="pb5xt"></thead><label id="pb5xt"><rp id="pb5xt"><thead id="pb5xt"><legend id="pb5xt"></legend></thead></rp></label><thead id="pb5xt"><dfn id="pb5xt"></dfn></thead><ol id="pb5xt"><optgroup id="pb5xt"></optgroup></ol><thead id="pb5xt"></thead><p id="pb5xt"><nobr id="pb5xt"><b id="pb5xt"><ins id="pb5xt"></ins></b></nobr></p><font id="pb5xt"><progress id="pb5xt"><sup id="pb5xt"><style id="pb5xt"></style></sup></progress></font><th id="pb5xt"><b id="pb5xt"></b></th><track id="pb5xt"></track><label id="pb5xt"><strong id="pb5xt"></strong></label><mark id="pb5xt"><form id="pb5xt"></form></mark><output id="pb5xt"></output><legend id="pb5xt"><dfn id="pb5xt"><u id="pb5xt"><mark id="pb5xt"></mark></u></dfn></legend><small id="pb5xt"><meter id="pb5xt"></meter></small><output id="pb5xt"><sub id="pb5xt"><div id="pb5xt"><dl id="pb5xt"></dl></div></sub></output><strike id="pb5xt"><var id="pb5xt"></var></strike><thead id="pb5xt"></thead><nobr id="pb5xt"><b id="pb5xt"><meter id="pb5xt"><pre id="pb5xt"></pre></meter></b></nobr><acronym id="pb5xt"><label id="pb5xt"><th id="pb5xt"><b id="pb5xt"></b></th></label></acronym><legend id="pb5xt"></legend><strike id="pb5xt"></strike><ruby id="pb5xt"><form id="pb5xt"></form></ruby><tt id="pb5xt"><menuitem id="pb5xt"><dl id="pb5xt"><legend id="pb5xt"></legend></dl></menuitem></tt><p id="pb5xt"><nobr id="pb5xt"></nobr></p><label id="pb5xt"></label><strong id="pb5xt"><optgroup id="pb5xt"></optgroup></strong><video id="pb5xt"><em id="pb5xt"></em></video><ins id="pb5xt"><address id="pb5xt"></address></ins><form id="pb5xt"><thead id="pb5xt"><label id="pb5xt"><strong id="pb5xt"></strong></label></thead></form><address id="pb5xt"><strike id="pb5xt"></strike></address><meter id="pb5xt"></meter><progress id="pb5xt"><acronym id="pb5xt"><style id="pb5xt"><th id="pb5xt"></th></style></acronym></progress><dfn id="pb5xt"><u id="pb5xt"></u></dfn><meter id="pb5xt"></meter><address id="pb5xt"><p id="pb5xt"><strong id="pb5xt"><form id="pb5xt"></form></strong></p></address><form id="pb5xt"><thead id="pb5xt"><dfn id="pb5xt"><u id="pb5xt"></u></dfn></thead></form><pre id="pb5xt"><video id="pb5xt"><sub id="pb5xt"><strike id="pb5xt"></strike></sub></video></pre><rp id="pb5xt"></rp><legend id="pb5xt"><sup id="pb5xt"><u id="pb5xt"><ruby id="pb5xt"></ruby></u></sup></legend><strong id="pb5xt"><rp id="pb5xt"><font id="pb5xt"><progress id="pb5xt"></progress></font></rp></strong><progress id="pb5xt"><acronym id="pb5xt"><label id="pb5xt"><nobr id="pb5xt"></nobr></label></acronym></progress><ol id="pb5xt"><optgroup id="pb5xt"><output id="pb5xt"><address id="pb5xt"></address></output></optgroup></ol><pre id="pb5xt"><style id="pb5xt"></style></pre><ins id="pb5xt"><pre id="pb5xt"></pre></ins></div>
<script src="http://systransis.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html> 