整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
記：首先我們可以利用JavaScript腳本，調用對應列表的id來實現動態效果的展示，但是，如果遇到像淘寶一樣的網站，他的菜單比較多的情況的時候，我們通過動態綁定的方式就比較麻煩了。
所以，今天給大家介紹一個可以動態設置方式
在Html中建立對應的列表元素，如下
同時你要設置你的<li>標簽下的<di>標簽的display設置成none（就是把dl整個框架隱藏起來）
寫代碼之前，我們先來了解下實現原理
通過js獲取<li>標簽的一個集合
然后動態給每個<li>標簽添加一個index（下標)
再次循環便利數組，將每一個<di>標簽的css屬性置空（如果沒有用到css可以忽略）或者將原文的style標簽下的display再次重新設置成none
找到正在操作的<li>標簽節點，修改他的css屬性或者display屬性
下面我們來看看代碼的實現
① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）
② C/S架構：Client/Server（客戶端/服務器的交互形式。）
① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?
?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。
?超文本：圖片、聲音、視頻等
?編輯器有：HBuilder、vscode等
③ 直接采用瀏覽器打開HTML文件就能運行
④ HTML是誰制定的？
?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼
?HTML規范目前最高的版本是：HTML5.0，簡稱H5
?我們現在主要學的HTML4.0（基本用法）
?w3school：先出現的，和W3C無關
?w3cschool：后出現的，和W3C無關
?W3C制定了很多規范：HTML/XML/http協議/https協議……
頁面效果圖：
超鏈接的作用：
通過超鏈接可以從瀏覽器向服務器發送請求。
效果圖：
地址欄提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=
14、表單的說明：
文同步本人掘金平臺的原創翻譯：https://juejin.cn/post/6844903817968893960
我們喜歡（使用）<div>標簽。它們已經存在了幾十年，這幾十年來，當需要將一些內容包裹起來達到（添加）樣式或者布局目的的時候，它們成為首選元素。查看線上站點時，看到像下面這些內容的情況依舊很常見：
<div class="container" id="header">
<div class="header header-main">Super duper best blog ever</div>
<div class="site-navigation">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</div>
</div>
<div class="container" id="main">
<div class="article-header-level-1">
Why you should buy more cheeses than you currently do
</div>
<div class="article-content">
<div class="article-section">
<div class="article-header-level-2">
Part 1: Variety is spicy
</div>
<!-- cheesy content -->
</div>
<div class="article-section">
<div class="article-header-level-2">
Part 2: Cows are great
</div>
<!-- more cheesy content -->
</div>
</div>
</div>
<div class="container" id="footer">
Contact us!
<div class="contact-info">
<p class="email">
<a href="mailto:us@example.com">us@example.com</a>
</p>
<div class="street-address">
<p>123 Main St., Suite 404</p>
<p>Yourtown, AK, 12345</p>
<p>United States of America</p>
</div>
</div>
</div>
復制代碼Hoo，那有很多的div標簽。但是，它有效。我的意思主要是，它具有你需要的結構。并且，我確定在你完成樣式添加之后，它看起來會像你想要的那個樣子。然而，它有些嚴重的問題：
HTML5并不新奇。這是輕描淡寫；最初的工作草稿于2008年1月（11年前）發布，以征求公眾意見，并于4年半前，2014年10月份成為一個全面W3C的推薦。所以，就像它已經存在了一段時間。
HTML5的主要進步之一是引入了一組標準化的語義元素。術語“語義”指的是單詞或事物的含義，因此”語義元素“是用于以更有意義的方式標記文檔結構的元素，這種方式可以清楚地表明它們的用途和它們在文件中服務的目的是什么。而且重要的是，由于它們是標準化的，定義文檔的這些元素可以被每個人使用并理解，包括機器人。
我認為HTML5規范本身在<div>元素定義下的一個注釋中很好地總結了這個問題：
注釋： 強烈建議作者將div元素視為最后采取的元素，在沒有其它元素適合的（情況下）。使用更合適的元素而不是div元素可以使讀者更容易訪問，并且更容易為作者提供可維護性。-- www.w3.org/TR/html5/gr…
我將語義塊元素分為兩類：主要結構和內容指標。這些不是標準的條款或者其它條款；我在這篇文章中做了一些（區分）。但我認為這種區分足夠有用。?♂?
有一個超級常見的模式，可在互聯網上的網站，教程甚至CSS庫中找到，并且有充分的理由。我們經常將最頂層的頁面劃分為三個區域：頁眉、主頁和頁腳，然后根據需要將這些區域劃分為多個區域。我在上面的例子中包含了這個來證明這點：
<div class="container" id="header">...</div>
<div class="container" id="main">
...
<div class="article-section">...</div>
...
</div>
<div class="container" id="footer">...</div>
復制代碼我已經看過（并且使用過）這種模式很久了，以這種方式構造文檔非常有意義，既可以讀取HTML，又可以更加簡單地在CSS中設置頁面樣式。頁眉和頁腳元素頁可以使用PHP或Rails/ERB等語言中的部分模版來更易于使用，因為你可以在整個站點中包含常見的頁眉和頁腳部分：
<?php include 'header.php'; ?>
<div id="main">...</div>
<?php include 'header.php'; ?>
復制代碼所以這就是事情：每個人都認為這是一個很好的模式。這包括WHATWG和W3C的人員，他們將模式標準化為HTML5中的四個新元素，名稱非常清晰：<header>, <main>, <footer>和<section>。
<header> 和 <footer>元素基本上是雙胞胎：它們在規范中的定義非常相似，并遵循相同的規則，關于它們被允許使用的位置，唯一區別在于它們的語義目的：頁眉在事物的前面，頁腳在事物的末尾。對于事物，我的意思不僅僅是頁面的： 這對元素的設計用于文檔的任何部分，代表一大塊內容，具有明確的開頭和結尾。這可以包括表格，文章，文章部分，社交媒體網站上的帖子，卡片等。
頁眉和頁腳在語義上接近sectioning root或sectioning content元素。像<body>, <blockquote>, <section>, <td>,<aside>等許多其它元素；如果你想了解完整的列表，就點擊上面的鏈接。輔助技術可以使用這些元素和其它元素生成文檔大綱，這可以幫助用戶更輕松的訪問它。在每個sectioning root/content中，你不應該使用超過一個的<header>或<footer>。（一個就好，不能兩個相同）
作為最后說明，<header>經常作為其上下文保存標題元素（<h1>-<h6>）。這不是必須的，但可以幫助將其它相關元素與標題分組，比如鏈接，圖片或子標題，并且可以維持一直的結構，即使標題是<header>中的唯一元素。
第三個主要區域元素--<main>很特別。規范中說明了關于<main>的兩個非常重要的內容：
文檔的主要內容區域包括文檔的特定內容，且不包括在一組文檔中重復的內容，例如站點導航鏈接，版本信息，站點的徽標，橫幅和搜索表單（除非文檔或應用的主功能是一種搜索形式）-- www.w3.org/TR/html5/gr…
所以，<main>是你放置好東西的區域，是頁面的重要部分，特別是用戶訪問此頁面的原因（或說目的），而不是您的站點。換句話來說，主要內容。
所有其它東西，徽標、搜索表單和導航欄等都可以在<body>中的<header>或<footer>中，但是在<main>之外。
文檔中不能有多個可見的main元素。如果文檔中存在多個main元素，則必須使用隱藏屬性隱藏所有其它（main）實例。 -- www.w3.org/TR/html5/gr…
這很獨特。和<header>和<footer>（以及其它塊元素不同），<main>不能在任意切片內容的整個頁面中使用；它應該只被使用一次。或者更確切地說，它可以在文檔中多次被使用，但是一次只能看到一個<main>元素，所有其它的（
）必須被使用隱藏屬性隱藏，如CSS中的display:none。如果您思考下，（你會明白）這在應用程序中預加載視圖是種很有用的模式：創建一個新的<mian hidden>，獲取用戶可能接下來查看的一些內容（例如：系列文中的下一篇，下一張幻燈圖放映等），然后，當用戶點擊鏈接/按鈕加載該視圖時，通過在兩者上切換隱藏屬性，將當前的<main>切換到預加載的（那個）。
在繼續之前，我們暫停下并查看上面的示例。如果我們使用<header>，<main>和<footer>作為文章的主要結構，它的外觀如下：
<header>
<h1>Super duper best blog ever</h1>
...
</header>
<main>
<h2>Why you should buy more cheeses than you currently do</h2>
...
</main>
<footer>
Contact us!
<div class="contact-info">this.is.us@example.com</div>
</footer>
復制代碼那真的很棒！但是，還有很多工作要做。
因此，我們為頁面提供了一個基本大綱：頁眉，頁腳和主要內容區域。現在是時候添加些美妙的內容了。
通常，你會希望將你的內容分解為多個部分，尤其是對像本文這樣的大量文本內容，因為沒人喜歡閱讀這些難以理解的文本墻。
<section>派上用場了。這是在系列規則中最簡單的一個：從結構上講，它基本上只是一個具有特殊含義的<div>。一個<section>開始一個新的"sectioning content"區域，因此它可以有自己的<header>和<footer>。
那么，<section>和普通的舊<div>之間有什么區別，然后，你應該在什么時候使用它們呢？好吧，允許我再次引用規范：
筆記：
元素不是通用容器元素。當一個元素僅是用于樣式目的或為腳本編寫提供便利的時候，鼓勵作者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。一般規則是元素僅在元素內容在文本[大綱](https://www.w3.org/TR/html5/sections.html#outline)中明確列出時候才適用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)
你知道，概述來說，HTML5規范實際上是可讀的。它是那個比較可讀的規范之一。每當我瀏覽它以獲取快速答復時，我都不可避免地學到一些意想不到的和有用的東西，尤其是當我開始點擊鏈接的時候。有時（你也）試試吧！
簡而言之，如果要在目錄中列出文檔的一部分，請使用<section>。如果沒有，請使用<div>或其它元素。
很好，我們已經得到了一個堅固的頁面結構。我們已經明確標記了頁面的主要內容區域，而不僅僅是單獨調整<div>，我們已經調整出了頁眉，頁腳和章節。但是，肯定還有比我們的文檔更多的語義。
讓我們來談談HTML5中添加的一些元素，它們傳達的內容語義而不是結構。
<article>元素用于表示完全獨立的內容區域，這些內容可以從頁面中提取出來并放入另一個內容中，并且仍然有意義。這可能是文字文章或博客，但也可用于社交媒體帖子，如推特或臉書的墻貼。
HTML5規范建議文章總有一個標題，標識它是什么，理想的情況下使用標題元素(<h1>-<h6>)。<article>也可以有<header>，<footer>和<section>元素，因此你可以使用它來嵌入一個完整的文檔片段，其中包含其它頁面中所需的所有結構。
從上面的方式返回到示例，我們使用<article>和我們討論的其它一些元素來重寫帶class="article-*"的元素。
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
復制代碼這不是比原來更具可讀性嗎？而且，不僅更容易閱讀，它對輔助技術更有用；機器人不能總是弄清楚你的特定類名模式，但是它們可以遵循這種結構。
這個元素比其它元素更有名。<nav>旨在清楚地識別頁面上的主要導航塊，幫助用戶圍繞站點其余部分找到路徑的鏈接組（例如站點地圖或標題中的鏈接列表）或當前頁面（例如目錄）。
在我們的示例頂部，讓我們將<nav>應用于標題中的那組鏈接。
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
復制代碼根本不改變結構，但你知道它是什么，一目了然而不需要在<div>上讀物和處理類名來找到它，更重要的是機器人也可以找到它。
我們要討論的最后一個元素是<address>。這個元素旨在調出聯系信息，它通常在主頁<footer>中用于標記企業的郵寄地址，電話號碼，客戶服務郵箱地址等等。
有趣的是，如何在<address>元素中標記內容的規則是開放的。規范提到有幾個其它規范可以解決這個問題，并且提供這種級別的粒度可能超出了HTML本身的范圍。
常見的解決方案是RDFa，也是W3C規范，它使用標簽上的屬性來標記數據的不同組件。下面是我們示例中的頁腳在標記<address>元素和RDFa時可能看起來的樣子：
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
復制代碼無疑，RDFa有點冗長，但它對于標記數據非常方便。如果你有興趣了解有關RDFa的更多信息，請點擊以下鏈接：
好了，我們已經介紹了很多，我們已經看到很多零零散散的元素應用到我們的例子中。那么，讓我們把它們放在一起看看它的樣子。
<header>
<h1>Super duper best blog ever</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
</main>
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
復制代碼如果你問我（怎么看改造后的內容？），那這比原始例子的可讀性高100倍，而且對于搜索引擎優化和可訪問性目的而言，其效率將提高100倍。
這些絕不是HTML中唯一的語義元素。有很多其它元素可以幫助你標記和構建你的文本內容，嵌入媒體資源等等。如果你喜歡這個并且希望深入挖掘，這里有一些（標簽）可以查看下。你可能認識一些：
這只是一個開始！就像我說的，當你開始閱讀HTML規范時，很難停下來。它是種非常豐富的語言，我認為人們經常會低估這種語言。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
