全棧 - 19 Web 基礎網頁的骨骼 HTML

時間 2019-11-17

標籤 web 基礎網頁骨骼 html 欄目 HTML 简体版

原文原文鏈接

這是全棧數據工程師養成攻略系列教程的第十九期：19 Web基礎網頁的骨骼HTML。javascript

寫Web網頁的基礎三件套是HTML、CSS和JavaScript，這一節讓咱們先來了解下HTML。html

什麼是HTML

HTML全拼是Hyper Text Markup Language，即超文本標記語言。之因此將HTML比喻成網頁的骨骼，是由於它是Web網頁的基本組成部分，並且HTML中所定義的元素，決定了網頁的內容和結構。html5

Python是一門編程語言，能夠用來處理數據、編寫程序、完成任務，重在作什麼和怎麼作。而HTML是一門標記語言，如同畫畫同樣，HTML告訴瀏覽器，應該在網頁上畫出哪些內容，重點在是什麼和有什麼。java

基本結構

使用HTML所寫的代碼保存時後綴名能夠取成.html，通常來講會包含如下基本結構。Web網頁都是由一些HTML標籤（或者稱做HTML元素）組成的，即用尖括號擴起來的內容，而且呈現出層級嵌套結構。編程

<!DOCTYPE html>
<html> <head></head> <body></body> </html>複製代碼

第一行代碼聲明瞭如下使用HTML5語法，HTML5是HTML的最新版本，在本來HTML的基礎上增長了一些新的擴展和功能。接下來是一個html標籤，包括開始標籤<html>和結束標籤</html>，二者之間中即是網頁的所有內容。html中包括head標籤和body標籤，分別表明網頁的頭部和主體，而且head、body都有各自對應的開始標籤和結束標籤。head中會記錄網頁的基本信息和引用的資源連接等，而body中則存放着網頁詳細的主體結構。能夠向head和body中添加更多HTML標籤，從而進一步豐富對應網頁的內容。canvas

能夠發現，由於head和body包裹在html中，因此相對於html標籤存在一級縮進。這正是HTML的層級嵌套結構，內層標籤相對於直接外層標籤都會保持一級縮進，所以在編寫HTML代碼時須要注意標籤的縮進和對齊。後端

經常使用標籤

HTML標籤主要分爲單標籤和雙標籤兩類。單標籤只有開始標籤，因此須要在開始的同時關閉，例如meta標籤，用於定義Web網頁的基本信息。如下meta標籤指定了網頁使用UTF-8字符集，經過標籤的屬性值進行設定，即將屬性名和屬性值都寫在標籤內部。瀏覽器

<meta charset="UTF-8"/>複製代碼

而雙標籤既有開始標籤又有結束標籤，因此能夠在其中包裹一些標籤的內容，例如title標籤，用於定義Web網頁的標題。所以，雙標籤包含標籤內容而且通常會直接顯示在Web網頁上，而單標籤則主要是爲了完成某些功能。less

<title>我愛HTML</title>複製代碼

meta和title標籤須要放入head之中。能夠將以上例子添加到以前提供的基本結構裏，而後雙擊.html運行，在瀏覽器中觀察網頁中出現了什麼變化。dom

再來介紹一些經常使用的內容標籤，這些標籤都須要放入body之中，能夠嘗試添加並刷新瀏覽器，觀察標籤對應的效果。

首先是h1至h6，分別表示一級標題至六級標題，標題文字會依次減少。

<h1>這裏是一級標題</h1>
<h2>這裏是二級標題</h2>
<h3>這裏是三級標題</h3>
<h4>這裏是四級標題</h4>
<h5>這裏是五級標題</h5>
<h6>這裏是六級標題</h6>複製代碼

p表示正文中的段落。

<p>這裏是段落內容</p>複製代碼

a表示超連接，提供Web網頁之間的跳轉，或者從網頁的一部分跳轉到另外一部分。在a標籤中須要指定href屬性，即跳轉的目標連接，target="_blank"表示連接點擊後在新標籤頁中打開目標連接，如下代碼即生成一個跳轉到個人我的博客的超連接。

<a href="http://zhanghonglun.cn" target="_blank">一個乾貨滿滿的地方</a>複製代碼

img用於生成圖片，src屬性指定圖片源文件的地址，可使用相對路徑調用本地圖片，或者使用互聯網上能訪問到的圖片連接。width和height屬性分別指定圖片的寬度和高度，單位是像素，若是僅提供其中一個的值，則保持圖片原始比例並計算另外一個的值。

<img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>複製代碼

須要注意的是，Web網頁中使用的圖片資源應當在知足清晰度條件下儘量地使用小文件。平面設計和網頁設計不一樣，前者會盡可能使用高清圖片，便於後期修改細節、打印海報等；然後者只需知足在瀏覽器上的顯示清晰度便可，文件越小則加載越快，過大的高清圖片只會致使長時間的加載等待和徹底能夠避免的流量浪費。

再介紹兩個新的概念：塊級標籤和內聯標籤。塊級標籤單獨佔據一行，其後面的標籤會在下一行出現，而多個內聯標籤則會顯示在同一行中，直到總寬度超過了瀏覽器寬度才換行。以前介紹的h1至h6、p都是塊級標籤，而a、img則是內聯標籤。瀏覽器在渲染HTML頁面時會遵循默認的文檔流，從上往下依次顯示每一個HTML標籤，對於塊級標籤則獨佔一行，對於內聯標籤則放置在同一行，直到總寬度超過瀏覽器寬度才換行。

能夠在HTML標籤之間或者p等標籤內容中添加br，用於添加空白行或換行。

<p>這是一段<br/>換行的段落</p>複製代碼

div和span分別屬於塊級標籤和內聯標籤，均可以用做其餘HTML標籤或頁面文本的容器。它們自己沒有具體的語義，僅做爲其餘內容的容器，從而將Web頁面更加結構化地組織起來。咱們在設計網頁時，每每會將頁面劃分爲多個區域，例如導航欄、側邊欄、第一部分、第二部分、第三部分、底欄等，若是將所有內容都直接寫在body的下一級中，則會給開發帶來很大的不便。相比之下，合理使用div勾勒出網頁內容的結構和層次，可使代碼編寫和閱讀變得更加清晰明朗。

<div>
    div裏面能夠包含其餘HTML標籤或者文本內容
    <p>這個div是頁面的第一塊內容</p>
</div>

<div>
    <p>這個div是頁面的第二塊內容</p>
    <div>
        <span>span是內聯標籤，後面的文本不換行</span>
        <span>div裏面還能夠嵌套其餘div</span>
        <p>div的使用可讓頁面內容更加結構化、有層次</p>
    </div>
</div>複製代碼

使用table標籤能夠定義表格，用tr表示表格中的每一行，用td表示每一行中的單元格，用th表示表頭行中的單元格。如下是一個簡單的例子，固然能夠經過更復雜的語法實現合併單元格等效果，在咱們掌握了CSS以後，也能夠進一步美化表格樣式，使得表格看起來更美觀。

<table>
    <tr>
        <th>語言</th>
        <th>難度</th>
        <th>功能</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>簡單</td>
        <td>強大</td>
    </tr>
    <tr>
        <td>R</td>
        <td>簡單</td>
        <td>強大</td>
    </tr>
</table>複製代碼

使用ul和ol定義列表，分別對應無序列表和有序列表，用於展現多個並列項，每一項用li定義。

<ol>
    有序列表
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
    <li>第四項</li>
</ol>

<ul>
    無序列表
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
    <li>第四項</li>
</ul>複製代碼

標籤的屬性

不少HTML標籤都有對應的屬性，即寫在標籤開始部分中的屬性名和屬性值，例如a的href、img的src等。這裏再介紹四種重要並且通用的屬性：id、class、name和style。

id屬性能夠給標籤取一個id，id值應當在整個頁面中是獨一無二的，使用id能夠針對性地操做某一個標籤，例如控制樣式、綁定事件等。另外，若是將a的href設置爲#加上某一標籤的id，則點擊連接後頁面將跳轉到對應標籤所在位置。

<p id="main">這是最主要的一段話</p>
<a href="#main">跳到main所在位置</a>複製代碼

class屬性能夠給標籤取一個class，同一個class值能夠應用於多個標籤，從而使用class能夠同時操做多個標籤，例如控制它們的樣式、爲它們綁定事件等。

<p class="content">這些段落都是普通內容</p>
<p class="content">這些段落都是普通內容</p>
<p class="content">這些段落都是普通內容</p>複製代碼

name屬性和class相似，只是基於name控制相應的標籤沒有class那麼方便，能夠將id、class和name理解成一我的的身份證號、姓、名等。

style屬性能夠爲標籤添加內聯樣式，即便用CSS的一種方法，等咱們瞭解CSS以後再詳細討論，這裏提供一個簡單的示例。

<p style="color:red;">這是一段有顏值的內容</p>複製代碼

註釋

在HTML中知足如下格式的內容即爲註釋，被註釋的內容將不會渲染和顯示。

<!--這是一個註釋！-->複製代碼

表單

可以接受用戶輸入而且能夠被賦值的標籤統稱爲表單標籤，例如常見的文本框、單選框、多選框、下拉菜單等。表單標籤通常都會放在form標籤之中，使得在觸發提交時能夠一併上傳所有表單標籤的值。

<form action="" method="post">
    用戶名 <input type="text" placeholder="用戶名" name="username"/>
    密碼 <input type="password" placeholder="密碼" name="password"/>
    <select>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="廣州">廣州</option>
        <option value="深圳">深圳</option>
    </select>
    一大段文本 <textarea rows="10" cols="10" placeholder="一大段文本" name="content"></textarea>
    <button type="submit">登錄</button>
</form>複製代碼

form的action屬性指定了用戶提交時應當觸發的響應函數，method屬性指定了提交的HTTP請求類型，這裏爲post；
input爲輸入框，不一樣的type對應不一樣的表單元素，可取的值包括button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time等。placeholder指定了當標籤內容爲空時，在頁面上顯示的提示信息；
使用select和option能夠定義下拉列表，默認選中第一項。option中的內容會顯示在頁面上，而value屬性則對應每一個option的值，處於選中狀態的option值將做爲整個select的值；
textarea爲文本框，用於顯示多行文本，rows和cols分別用於指定文本框的行數和列數；
button爲按鈕，type="submit"表示按鈕點擊以後將觸發提交操做，form內所有表單標籤的值都會一併提交給action裏定義的響應函數處理。

添加以上代碼並在瀏覽器中刷新便可看到表單的效果。input、textarea、button都屬於內聯標籤，所以全部的表單標籤都顯示在同一行。能夠向input和textarea中輸入文本，填寫完畢後點擊button便可提交。但因爲這裏在action中並未指定相應的響應處理函數，所以點擊後頁面只是簡單地刷新一下。處理表單提交涉及到一些後端的內容，因此等咱們掌握了相應知識以後再回過頭來說解。

顏色

HTML中能夠用三種方法來表示顏色，用於修改HTML標籤的外觀，例如標籤的文字顏色、背景色、邊框色等。

第一種方法是RGB表示法。網頁渲染使用R、G、B來合成任意一種顏色，分別表示顏色的紅色份量、綠色份量和藍色份量，0爲最小值，255爲最大值，所以rgb(0, 0, 0)表示黑色，rgb(255, 255, 255)表示白色，rgb(255, 0, 0)表示純紅色，依此類推。若是是rgba(255, 0, 0, 0.5)，則第四個份量表示顏色的透明度。

第二種方法是十六進制表示法，一樣基於RGB色彩合成原理，只不過用十六進制來表示相應的值，例如#000表示黑色，#fff表示白色，#f00表示純紅色。

第三種方法是使用顏色名稱，例如red、green、blue等，這些內置的名稱分別對應一些預先設定好的顏色。

<p style="color:rgb(255,0,0);">紅色</p>
<p style="color:#0f0;">綠色</p>
<p style="color:blue;">藍色</p>複製代碼

若是對顏色沒有準確的把握，能夠在須要控制顏色的地方打開開發者工具，點擊右邊對應的色塊，交互式地進行調整直到滿意。

DOM

DOM的全拼是Document Object Model，即文檔對象模型。咱們以前提到HTML是層次結構化的，若是將內層標籤看做直接外層標籤的子節點，那麼整個HTML頁面能夠整理成樹形結構，樹的根節點即html，下一層即head和body，以樹形結構不斷展開，這即是HTML頁面的文檔對象模型。

在後續內容中，咱們也會將HTML標籤稱做DOM元素。DOM的概念在遍歷和操做HTML標籤時很是有用，咱們常常須要找到一個DOM元素的父節點、兄弟節點以及子節點，而遍歷一顆DOM樹也是經過先訪問根節點，而後遞歸地遍歷根節點的所有子樹來實現的。

HTML5

HTML5是HTML的最新版本，在本來HTML的基礎上增長了一些新的擴展和功能，例如在手機上能夠檢測抖動、獲取地理位置等，所以受到了普遍關注，而且在移動端引爆了一股開發狂潮。

HTML5中添加了一些新的功能標籤，例如支持更加高級、複雜和精細繪圖功能的canvas和svg，支持直接播放音頻和視頻的audio和video，支持嵌入多種類型資源的embed。關於svg的更多內容能夠查看www.runoob.com/svg/svg-tut…，關於canvas的更多內容能夠查看zhanghonglun.cn/blog/canvas…。

HTML5中也引入了一些新的語義標籤，例如header、nav、section、article、aside、figcaption、figure、footer等。這些標籤的使用方法和div大同小異，只是像p表明段落同樣，賦予了一些用途語義。如下兩種寫法在實際應用中沒有任何區別，都可以很好地說明這一塊內容對應網頁的導航欄部分，只不過前者稍微簡潔一些而已。

<header>導航欄部分</header>
<div id="header">導航欄部分</div>複製代碼

除此以外，HTML5中還增長了一些新的功能，例如元素拖拽、地理定位、更豐富的input type、Web存儲等，限於篇幅這裏就不展開介紹了，有興趣的話能夠訪問如下連接獲取更多內容，www.runoob.com/html/html5-…。

補充學習

HTML語法比較簡單，沒有複雜的編程邏輯，只須要根據本身的設計排列HTML標籤便可，所以對HTML的掌握關鍵在於多寫多練、熟能生巧。關於HTML的更多內容能夠訪問如下連接，www.runoob.com/html/html-t…，裏面提供了更爲詳細和系統的講解，並結合大量實例代碼加以鞏固，推薦完整地瀏覽和嘗試一遍。

最後，推薦安裝一個Sublime插件，Emmet，能夠極大地加速和簡化HTML代碼編寫，功能十分強大，詳細使用方法能夠參考這裏，juejin.im/post/584f53…。

視頻連接：