技術標籤：前端學習

文字標籤

水平線/分割線 <hr>

自閉合標籤

語義標籤

html的標籤是語義標籤，方便人或者計算機理解網頁結構，可能會幫助seo。學習HTML的目的並不是記住所有的標籤，而是在你需要的地方能使用正確的語義化標籤。把標籤用在對的地方，這才是學習HTML的目的所在。

<header> header: 標籤定義文件的頁首（介紹資訊）。</header>

<section> 標籤定義文件中的節（section、區段）。比如章節、頁首、頁尾或文件中的其他部分。
	<article>文章1</article>
	<article>文章2</article>
	<article>文章3</article>
</section>
<aside>aside 的內容應該與附近的內容相關。</aside>

<footer>標籤定義文件或節的頁尾。頁尾通常包含文件的作者、版權資訊、使用條款連結、聯絡資訊等等。</
 
footer>

列表

ul: unordered list無序列表, ol : ordered list, 而且每一行都要用<li> 標籤。ul元素的子元素只能是li，不能是其他元素。

無序列表

我的購物清單
<div>
    我的購物清單
    <ul>
        <li>牛奶</li>
        <li>辣條</li>
        <li>酸奶
            <ul>
                <li>芒果味</li>
 

                <li>草莓味</li>
                <li>巧克力味</li>
            </ul>
        </li>
	</ul>
</div>

• 牛奶
• 辣條
• 酸奶
  • 芒果味
  • 草莓味
  • 巧克力味

有序列表

<div>
起床3件事情
    <ol>
    	<li>睜開雙眼</li>
    	<li>強迫自己坐起來</li>
        <li>穿衣服</li>
    </ol>
</div>

1. 睜開雙眼
2. 強迫自己坐起來
3. 穿衣服

<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ol>

1. HTML
2. CSS
3. JavaScript
4. jQuery
5. Vue.js

定義列表

在HTML中，定義列表由兩部分組成：名詞和描述。

dl即definition list（定義列表），dt即definition term（定義名詞），而dd即definition description（定義描述）。

<dl>
    <dt>html</dt>
    <dd>控制結構</dd>
    <dt>css</dt>
    <dd>控制樣式</dd>
    <dt>js</dt>
    <dd>控制行為</dd>
</dl>

html

控制結構

css

控制樣式

js

控制行為

轉義字元 html entity

在編寫HTML頁面時，需要用到"<"、">"、"空格"等符號，直接輸入這些符號時，會錯誤的把它們與標記混在一起，非常不利於編碼。那麼就需要把這些字元進行轉義，以另一種方式書寫，以相同的形式展現。

注： 為non-breaking space，是在UTF-8編碼下的一種特殊的空格,意指換行時阻止空格兩端文字被斷開。

連結

連結分為內鏈、外鏈、片段識別符號（fragment identifier）

a標籤的屬性：href，title，target

href ：hypertext reference，href的值可以為相對路徑或者絕對路徑。title：滑鼠掃過連結時會顯現的文字

target=“_blank”,強制瀏覽器開啟新標籤頁

內鏈

 <a href="1.htm結構.html"  title="第一課">html的結構</a>
 <a href="2.list.html" title="列表"><div>列表</div></a>

外鏈

<a href="https://www.baidu.com" title="百度一下，你就知道" target="_blank">百度一下</a>

片段識別符號

<ul>
    <li><a href="#section1">section1</a></li>
    <li><a href="#section2">section2</a></li>
    <li><a href="#section3">section3</a></li>
 </ul>
<section id ="section1">我是section1</section>
<section id ="section2">我是section2</section>
<section id ="section3">我是section3</section>

表格

表格一般由以下三個部分組成。表格：table標籤；行：tr標籤（table row）；單元格：td標籤（table data cell）。可以使用caption標籤來實現。

<table>和</table>表示整個表格的開始和結束，<tr>和</tr>表示行的開始和結束，而<td>和</td>表示單元格的開始和結束。

語法

<table>
    <caption>學習</caption>
    <tr>
    <td>Html</td>
    <td>css</td>
    </tr>
    <tr>
    <td>Javascript</td>
    <td>jQuery</td>
    </tr>
</table>

在HTML中，單元格其實有兩種：一種是“表頭單元格”，使用的是th標籤；另一種是“錶行單元格”，使用的是td標籤。th指的是table header cell（表頭單元格）。td指的是table data cell（錶行單元格）。

顯示上：瀏覽器會以“粗體”和“居中”來顯示th標籤中的內容，但是td標籤不會。

語義上：th標籤用於表頭，而td標籤用於錶行。

<table>
    <caption>考試成績表</caption>
    <tr>
    <th>姓名</th>
    <th>語文</th>
    <th>數學</th>
    </tr>
    <tr>
    <td>小明</td>
    <td>80</td>
    <td>80</td>
    </tr>
    <tr>
    <td>小紅</td>
    <td>90</td>
    <td>90</td>
    </tr>
</table>

一個完整的表格包含：table、caption、tr、th、td。為了更進一步地對錶格進行語義化，HTML引入了thead、tbody和tfoot這3個標籤，thead、tbody和tfoot把表格劃分為3部分：表頭、表身、表腳。

表腳（tfoot）往往用於統計資料。對於thead、tbody和tfoot標籤，不一定需要全部都用上，如tfoot就很少用。

合併行：rowspan

所謂的合併行，指的是將“縱向的N個單元格”合併。

<table>
    <tr>
    <td>姓名：</td>
    <td>小明</td>
    </tr>
    <tr>
    <td rowspan="2">喜歡：</td>
    <td>水果</td>
    </tr>
    <tr>
    <td>運動</td>
    </tr>
</table>

合併列：colspan

合併列，指的是將“橫向的N個單元格”合併，使用colspan屬性來合併列。

<table>
    <tr>
    <th colspan="2">前端開發技術</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>CSS</td>
    </tr>
    <tr>
    	<td>Javascript</td>
        <td>jQuery</td>
    </tr>
</table>

```html
<table>
    <tr>
    <th colspan="2">前端開發技術</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>CSS</td>
    </tr>
    <tr>
    	<td>Javascript</td>
        <td>jQuery</td>

</table>