[前端筆記——HTML介紹] 2.開始學(xué)習(xí)HTML
- 1什么是HTML？
- 2剖析一個HTML元素
- 3塊級元素和內(nèi)聯(lián)元素
- 4空元素
- 5屬性
- 6為一個元素添加屬性
- 7布爾屬性
- 8省略包圍屬性值的引號
- 9單引號或雙引號?
- 10剖析HTML文檔
- 11實體引用：在 HTML 中包含特殊字符
成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目
網(wǎng)站制作、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元龍城做網(wǎng)站,已為上家服務(wù),為龍城各地企業(yè)和個人服務(wù),聯(lián)系電話:189820811081什么是HTML？
HTML (HyperText Markup Language) 不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標(biāo)記語言。HTML 可復(fù)雜、可簡單，一切取決于開發(fā)者。它由一系列的元素（elements）組成，這些元素可以用來包圍不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。一對標(biāo)簽（ tags）可以為一段文字或者一張圖片添加超鏈接，將文字設(shè)置為斜體，改變字號，等等。
例如下面一行內(nèi)容：
My cat is very grumpy
可以將這行文字封裝成一個段落（Paragraph）
元素來使其在單獨(dú)一行呈現(xiàn)：
My cat is very grumpy
HTML 標(biāo)簽不區(qū)分大小寫。也就是說，輸入標(biāo)簽時既可以使用大寫字母也可以使用小寫字母。例如，標(biāo)簽寫作<title>、<TITLE>、<Title>、<TiTlE></code>，等等都可以正常工作。不過，從一致性、可讀性來說，最好僅使用小寫字母。</p>2剖析一個HTML元素<p><img src="/upload/otherpic40/8a9028985e1b4d36b8c2c690208675e5.jpg" alt="在這里插入圖片描述" /><br />這個元素的主要部分有：</p><p>1.開始標(biāo)簽（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號所包圍。表示元素從這里開始或者開始起作用 —— 在本例中即段落由此開始。<br />2.結(jié)束標(biāo)簽（Closing tag）：與開始標(biāo)簽相似，只是其在元素名之前包含了一個斜杠。這表示著元素的結(jié)尾 —— 在本例中即段落在此結(jié)束。初學(xué)者常常會犯忘記包含結(jié)束標(biāo)簽的錯誤，這可能會產(chǎn)生一些奇怪的結(jié)果。<br />3.內(nèi)容（Content）：元素的內(nèi)容，本例中就是所輸入的文本本身。<br />4.元素（Element）：開始標(biāo)簽、結(jié)束標(biāo)簽與內(nèi)容相結(jié)合，便是一個完整的元素。</p><p>通過使用標(biāo)簽<code><em>和</em></code>——這使得行內(nèi)容變成斜體強(qiáng)調(diào)：</p><pre><code><em>刀槍劍戟 斧鉞鉤叉</em></code></pre><p>也可以把元素放到其它元素之中——這被稱作嵌套：</p><pre><code><p>My cat is very grumpy.</p></code></pre>3塊級元素和內(nèi)聯(lián)元素<p>在HTML中有兩種重要的元素類別——塊級元素和內(nèi)聯(lián)元素。</p><p>塊級元素在頁面中以塊的形式展現(xiàn) —— 相對于其前面的內(nèi)容它會出現(xiàn)在新的一行，其后的內(nèi)容也會被擠到下一行展現(xiàn)。塊級元素通常用于展示頁面上結(jié)構(gòu)化的內(nèi)容，例如段落、列表、導(dǎo)航菜單、頁腳等等。一個以 block 形式展現(xiàn)的塊級元素不會被嵌套進(jìn)內(nèi)聯(lián)元素中，但可以嵌套在其它塊級元素中。</p><p>內(nèi)聯(lián)元素通常出現(xiàn)在塊級元素中并環(huán)繞文檔內(nèi)容的一小部分，而不是一整個段落或者一組內(nèi)容。內(nèi)聯(lián)元素不會導(dǎo)致文本換行：它通常出現(xiàn)在一堆文字之間，例如超鏈接元素<code></code>或者強(qiáng)調(diào)元素：<code><em></code>和<code></code>。<br />比如：</p><pre><code><em>第一</em><em>第二</em><em>第三</em><p>第四</p><p>第五</p><p>第六</p></code></pre>4空元素<p>不是所有元素都擁有開始標(biāo)簽，內(nèi)容，結(jié)束標(biāo)簽。一些元素只有一個標(biāo)簽，通常用來在此元素所在位置插入/嵌入一些東西。例如：元素是用來在元素所在位置插入一張指定的圖片。比如：</p><pre><code><img src="/upload/otherpic40/firefox-icon.jpg"></code></pre><p>空元素（Empty elements）有時也被叫作 void elements.</p>5屬性<p>元素也可以擁有屬性，如下：<br /><img src="/upload/otherpic40/b87e66ae4268487db4f42d059edc6b6a.jpg" alt="在這里插入圖片描述" /><br />屬性包含元素的額外信息，這些信息不會出現(xiàn)在實際的內(nèi)容中。在上述例子中，這個 class 屬性給元素賦了一個識別的名字（id），這個名字此后可以被用來識別此元素的樣式信息和其他信息。<br />一個屬性必須包含如下內(nèi)容：</p><ol><li>一個空格，在屬性和元素名稱之間（如果已經(jīng)有一個或多個屬性，就與前一個屬性之間有一個空格）。</li><li>屬性名稱，后面跟著一個等于號。</li><li>一個屬性值，由一對引號 (“”) 引起來。</li></ol>6為一個元素添加屬性<p>元素<code></code>是錨，它使被標(biāo)簽包裹的內(nèi)容成為一個超鏈接。此元素也可以添加大量的屬性，其中幾個如下：</p><ol><li>href<br />這個屬性聲明超鏈接的 web 地址，當(dāng)這個鏈接被點擊瀏覽器會跳轉(zhuǎn)至 href 聲明的 web 地址。例如：<br />href=“https://www.mozilla.org/”。</li><li>title<br />標(biāo)題title屬性為超鏈接聲明額外的信息，比如你將鏈接至的那個頁面。例如：<br />title=“The Mozilla homepage”。<br />當(dāng)鼠標(biāo)懸停在超鏈接上面時，這部分信息將以工具提示的形式顯示。</li><li>target<br />目標(biāo)target屬性用于指定鏈接如何呈現(xiàn)出來。例如，target="_blank"將在新標(biāo)簽頁中顯示鏈接。如果你希望在當(dāng)前標(biāo)簽頁顯示鏈接，忽略這個屬性即可。<br />比如:</li></ol><pre><code><p>欲練<a href="https://zh.wikipedia.org/zh-hans/葵花寶典" title="葵花寶典簡介" target="_blank">葵花寶典</a>，需引刀自宮</p></code></pre>7布爾屬性<p>有時會看到?jīng)]有值的屬性，它是合法的。這些屬性被稱為布爾屬性，它們只能有跟它的屬性名一樣的屬性值。例如disabled 屬性，他們可以標(biāo)記表單輸入使之變?yōu)椴豢捎?(變灰色)，此時用戶不能向他們它入任何數(shù)據(jù)。</p><pre><code><input type="text" disabled="disabled"></code></pre><p>方便起見，完全可以將其寫成以下形式：</p><pre><code><input type="text"></code></pre>8省略包圍屬性值的引號<p>有時，不給屬性值添加引號是合法的。比如：</p><pre><code><a href=https://www.mozilla.org/>收藏頁面</a></code></pre><p>但是如果再添加一個屬性時就會報錯。</p>9單引號或雙引號?<p>都可以用，但是注意單引號和雙引號不能在一個屬性值里面混用，否則會報錯。</p>10剖析HTML文檔<pre><code><!DOCTYPE html><html><head><meta charset="utf-8"><title>我的測試站點這是我的頁面
重慶分公司
重慶分公司