2. 程式人生 > >前端開發 -- HTML

前端開發 -- HTML

阿新 • • 發佈：2020-06-29

一、前端開發介紹

作為一枚程式設計師，如果想要開發網站，其本質就是在socket服務端接收瀏覽器請求並給其返回資料，並且返回資料格式要符合瀏覽器能識別的規則。

前端開發的課程目的就是帶大家去學習瀏覽器能識別的所有規則，這樣我們就可以服務端給瀏覽器返回特定規則的資料，從而控制使用者瀏覽器顯示的效果。

前端開發中瀏覽器所有能識別的規則分為三大類，分別是HTML，CSS，JavaScript。

其中HTML即超文字標記語言，是一種標識性的語言。它包括一系列標籤．通過這些標籤可以將網路上的文件格式統一，使分散的internet資源連線為一個邏輯整體。HTML文字是由HTML命令組成的描述性文字，HTML命令可以說明文字、圖形、動畫、聲音、表格、連結等。

CSS（Cascading Style Sheets）稱為層疊樣式表，是一種用來表現HTML或XML等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。概括來說，CSS可用於對頁面進行美化。

JavaScript是一種在網路瀏覽器上執行的程式語言。它主要新增到使用HTML和CSS構建的網站中，並在實現各種頁面動態效果方面發揮作用。 例如，網頁上顯示的輪播模式和在諮詢平臺上輸入內容後顯示的提示資訊不正確等。另外，在商場網站上購物時，購物車的使用和成本估算也 需要JavaScript。 因此，即使不是很明顯，它仍然是編碼人員經常使用的語言。

 

二、HTML學習

2.1 本地檢視

為了方便本地開發除錯，在學習前端開發的過程，都會在本地瀏覽器直接開啟編寫的html檔案，例如：

  • 建立 s_h.html 檔案（前端頁面一般都是以 .html 字尾結尾）。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>前端開發</h1>
    <div style='color:red'>HTML學習</div>
    <a href='http://www.baidu.com'>基本結構</a>
</body>
</html>
  • 在本地找到s_h.html 檔案，並用瀏覽器方式開啟以檢視檔案內容。

          

2.2 基本結構

從這一部分開始，我們將正式開始學習HTML標籤。並在寫完效果之後在本地瀏覽器開啟去檢視效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>

每個html都應該包含上述部分，否則就是不規範（之前的示例僅為展示效果，編寫方式都是不規範）。

  •  <!DOCTYPE html>，指定文件型別為html格式，瀏覽器會根據html格式去渲染下面的標籤.
  •  <html lang="en">...</html>，HTML檔案內容區域，所有的內容都應該寫到它的內部。其中lang=”en”表示頁面是英文格式，翻譯頁面時會讀取此值來獲取當前頁面是什麼語言編寫。
  •  <head>...</head>，放一些描述資訊。
  •  <body>...</body>，放希望瀏覽器呈現出的內容。

規範的編寫方式應該如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網頁</title>
</head>
<body>
    <h1>前端開發</h1>
    <div style='color:red'>HTML學習</div>
    <a href='http://www.baidu.com'>基本結構</a>
</body>
</html>

2.3 head 標籤

head標籤相當於人的大腦，內部可以放一些頁面的描述資訊，該部分內容雖然不會在頁面展示，但也起到非常重要的作用。

2.3.1 title標題

title標籤用於指定網頁的標題，所有網站頁面標籤部分的文字都是基於title實現。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網頁</title>
</head>
<body>
    
</body>
</html>

2.3.2 meta 文件字元編碼

meta標籤可以定義文件的字元編碼，即：瀏覽器會按照charset設定的編碼去讀取下面的文件內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網頁</title>
</head>
<body>
    
</body>
</html>

注意：1. 定義字元編碼的標籤必須放在最上方；2. 亂碼現象：檔案編碼和charset字串編碼不一致時，瀏覽器會根據charset定義去讀取內容，所以就會出現亂碼。

2.3.3 meta頁面重新整理

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
        <meta http-equiv="Refresh" content="5" />
    </head>
    <body>
        <h1>ABCD</h1>
    </body>
</html>

<meta http-equiv="Refresh" content="5" />  為頁面每五秒重新整理一次。

同樣也可以經過特定的時間後跳轉到某個頁面，即 <meta http-equiv="Refresh" content="5;Url=http://www.pythonav.com"/>

2.3.4 meta關鍵字

meta標籤可以設定關鍵字，用於搜尋引擎收錄和關鍵字搜尋。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
        <meta name="keywords" content="python,c,java,php" />
    </head>
    <body>
        <h1>code</h1>
    </body>
</html>

2.3.5 meta 網站描述

meta標籤可以設定網站描述資訊，用於在搜尋引擎搜尋時，顯示網站基本描述資訊。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>nba</title>
        <meta name="keywords" content="kobe,lebron,durant,curry" />
        <meta name="description" content="nba是美國職業籃球聯盟" />
    </head>
    <body>
        <h1>一起打球吧！</h1>
    </body>
</html>

關於網站描述與關鍵字，我們可以以騰訊NBA官網為例。

 

 

2.3.6 link標籤

link標籤可以設定網頁標題上的圖示。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    <link rel="shortcut icon" href="圖示檔案路徑">
    </head>
    <body>
        <h1>123456</h1>
    </body>
</html>

 

 2.3.7 meta IE瀏覽器

因為IE遵循自己的標準而其他瀏覽器遵循另一套標準，所以同樣的程式碼在其他瀏覽器都可以執行，唯獨IE需要特殊設定。

以下是專門針對IE瀏覽器設定，在IE瀏覽器上執行時，按照最新的預設渲染頁面，例如：使用 IE10 瀏覽器訪問頁面，如果在IE瀏覽器相容中切換到IE8，倘若沒有設定X-UA-Compatible，那麼頁面就會按照IE8模式去顯示頁面，而設定X-UA-Compatible之後，瀏覽器永遠會按照最新的預設來對頁面進行渲染。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
        <h1>IE瀏覽器</h1>
    </body>
</html>

 

以上就是關於head部分的最常用設定。

 

2.4 body標籤

在使用瀏覽器檢視html頁面時候，看得到內容都是body標籤中呈現出來。body中所有標籤可以劃分為兩類：

  • 塊級，標籤自己獨佔整行。
  • 行內，標籤內容有多少就佔多少空間。

2.4.1 div與span標籤

這兩個標籤屬於html中最素的，他們本身沒有攜帶太多的樣式：

  • div，僅塊級標籤樣式。
  • span，僅行內標籤樣式。

也恰恰正是因為他們是最素的，所以之後在對標籤進行定製時會很方便，所以應用也會很廣，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    asdfasdf
    <div>
        <div>div1</div>
        <div>div2</div>
        <span>span1</span>
        <span>span2</span>
    </div>
</body>
</html>

可看到頁面：

 

 

2.4.2 br標籤與p標籤

br標籤用來換行，p標籤用於表示段落，段落和段落之間有些間距，一般用於多內容多段落展示，例如：文章、作文、部落格等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
    <p>123</p>

    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>

    <div>1</div>
    <div>2</div>
    <div>3</div>

</body>
</html>

 

 

2.4.3 h標題系列

h標籤用於展示標題資料（加大加粗的樣式），h系列標籤共有6種，從h1~h6依次變小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>

    <h1>title</h1>
    <h2>title</h2>
    <h3>title</h3>
    <h4>title</h4>
    <h5>title</h5>
    <h6>title</h6>

</body>
</html>

 

 

2.4.4 a超連結

a標籤主要有兩個作用：分別是做超連結，點選之後可以跳轉到指定地址；做錨點，點選後跳轉到頁面指定位置。

  • 做超連結，點選之後可以跳轉到指定地址
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老男孩</title>
    <link rel="shortcut icon" href="1.jpg">
</head>
<body>
    <a href="http://www.baidu.com">老男孩</a>
</body>
</html>
  • 做錨點，點選後跳轉到頁面指定位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="1.jpg" />
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>

    <div id="i1" style="height:600px;">第一章的內容</div>
    <div id="i2" style="height:600px;">第二章的內容</div>
    <div id="i3" style="height:600px;">第三章的內容</div>
    <div id="i4" style="height:600px;">第四章的內容</div>
</body>
</html>

2.4.5 ul列表系列

在html中 ul、ol、dl用於展示列表資料。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>

    <ol>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ol>

    <dl>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
    </dl>
</body>
</html>

 

 

2.4.5 table表格

table標籤用於在html頁面展示表格，一般在網站中看到的表格都是基於table標籤實現。

  • 表格基本顯示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Kobe</td>
                <td>18</td>
                <td>看書</td>
            </tr>
            <tr>
                <td>lebron</td>
                <td>18</td>
                <td>rap</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

  •  合併單元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>主機名</td>
        <td>埠</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>
            <a href="s2.html">檢視詳細</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>第二行，第3列</td>
    </tr>
</table>

<table border="1">
    <thead>
    <tr>
        <th>表頭1</th>
        <th>表頭1</th>
        <th>表頭1</th>
        <th>表頭1</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="3">1</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
<textarea>文字內容寫在這裡...</textarea>

</body>
</html>

 

 

2.4.6 img圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">
        <img src="1.jpg" title="nike" style="height: 200px;width: 400px;" alt="NBA">
    </a>
</body>
</html>

 

 2.4.7 input系列

 input系列中共有5個至關重要的標籤，他為瀏覽器提供了資料互動的功能，即：使用者可以在瀏覽器上輸入資料和選擇選項，以後可以把輸入和選擇的內容提交給後端。

  • text，文字框。
  • password，密碼框。
  • radio，單選框（必須設定name屬性相同，否則無法實現）。
  • checkbox，複選框。
  • file，檔案上傳。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h3>文字框</h3>
    <input type="text">
    <h3>密碼框</h3>
    <input type="password">
    <h3>單選框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>複選框</h3>
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox">橄欖球
    <h3>上傳檔案</h3>
    <input type="file">
</body>
</html>

 

 

2.4.8 select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>下拉框</title>
</head>
<body>
    <h3>單選</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多選</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

 

 

2.4.9 textarea多行文字框

textarea用於在瀏覽器上展示多行文字輸入框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>多行文字</title>
</head>
<body>
    <textarea>文字內容寫在這裡...</textarea>
</body>
</html>

 

 

2.4.10 form表單

如果想要再瀏覽器上把輸入的內容提交到後臺，則需要表單與提交按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>form表單</title>
</head>
<body>
    <form action="http://www.x.cn" method="get">
        <p>使用者名稱：<input type="text" name="user"></p>
        <p>密  碼：<input type="password" name="pwd"></p>
        <p>性別：
            <input type="radio" name="gender" value="2">男
            <input type="radio" name="gender" values="3">女
        <p/>
        <p>愛好：
            <input type="checkbox" name="favor" value="2">籃球
            <input type="checkbox" name="favor" value="8">足球
            <input type="checkbox" name="favor" value="10">橄欖球
        </p>
        <p>城市：
            <select name="city">
                <option value="1">上海</option>
                <option value="2">北京</option>
            </select>
        </p>
        <p>備註：<textarea> name="memo"></textarea></p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

 

 

在使用form表單進行提交資料時，需要注意以下幾點：

  • 提交時，只會提交form標籤內部【使用者互動】相關的標籤。

  • <input type="submit" value="提交">用於提交當前所在的表單。

  • <input type="reset" value="重置">用於重置當前標籤中的選項。

  • form標籤內建屬性

    • action="/xx/" ，表示表單要提交的地址。

    • method="get"，表示表單的提交方式（get 或 post）。

    • enctype="multipart/form-data"，如果form內部有檔案上傳，必須加上此設定。

  •  form內部【使用者互動】相關標籤必須設定name，不然提交資料後後端無法獲取。
  • radio、checkbox、select 除了要設定name屬性以外，還必須設定value屬性，因為這三中標籤在form表單提交時，不會把看到的內容提交到後臺，而是把選擇選項對應的value值提交到後臺。

&n

相關推薦

前端開發 - HTML - 簡介

ID html中 java get 互聯 image 標記語言 交互性 文字 [TOC] 一、web1.0時代的網頁制作 靜態網頁，所謂的靜態網頁就是沒有與用戶進行交互而僅僅供讀者瀏覽的網頁，我們當時稱為“牛皮癬”網頁。例如一篇QQ日誌、一篇博文等展示性文章。 網頁三劍客

前端開發---HTML---介紹

網頁 什麽 標準 char firework 樣式表 註釋 ID 標簽 閱讀目錄 1.標簽 2.HTML目錄結構 3.HTML註釋 一、web1.0時代的網頁制作 靜態網頁，所謂的靜態網頁就是沒有與用戶進行交互而僅僅供讀者瀏覽的網頁，我們當時稱為“牛皮癬”網頁。例如一篇Q

前端開發-HTML標題

圖片 head family color 文檔結構 ima 技術 理解 代碼編輯 HTML標題 標題（heading）是通過<h1>-<h6>標簽進行定義的 <h1>定義最大的標題。<h6> 定義最小的標題

前端開發:HTML-css

元素 通過 對齊方式 顯示 info css gre -s round CSS (Cascading Style Sheets) 用於渲染HTML元素標簽的樣式 如何使用CSS CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的. CSS 可

前端開發 - HTML

des js文件 str 高度 推薦 splay word 特定 pos 1.index2.head標簽相關內容3.常用標簽一4.常用標簽二 table5.常用標簽二 form6.標簽分類 1.index <!--聲明文檔的類型 標記該文檔為HTML5的文件--&

前端開發 -- HTML

一、前端開發介紹 作為一枚程式設計師，如果想要開發網站，其本質就是在socket服務端接收瀏覽器請求並給其返回資料，並且返回資料格式要符合瀏覽器能識別的規則。 前端開發的課程目的就是帶大家去學習瀏覽器能識別的所有規則，這樣我們就可以服務端給瀏覽器返回特定規則的資料，從而控制使用者瀏覽器顯示的效果。 前端開發中

我的IT夢——web前端開發之HTML,CSS（一）

jpg 標記語言 方便 add body 前端 input cti 列表 HTML HTML全稱HyperText Markup Language（超文本標記語言） 標簽成對出現 <!DOCTYPE html> 文檔類型定義 < > 標

從零開始學習前端開發 — 1、HTML基礎

大小 lpad 文件夾 check 受限 安全性 瀏覽器兼容 列表 type 一、web標準 web標準-網頁制作的標準，它是由一系列標準組成的，主要包含三個方面： 結構（html,xhtml）,表現（css）,行為（javascript） 註：結構和表現的標準由w3

Web前端開發精品課HTML與CSS基礎教程 (莫振傑著) 完整pdf掃描版

OS 選擇器 鏈接樣式 大量 整理 培養 分享圖片 mage 入門 Web前端開發精品課：HTML與CSS基礎教程結合大量開發實戰經驗，將前端開發知識系統化整理，濃縮精華，用通俗易懂的語言直指初學者的痛點。 全書分為兩部分：首部分是HTML基礎知識，幫助讀者認識和理解網

Web前端開發之HTML+CSS基礎入門(框架)

AR 網頁 html 表單提交 pos 部分加載 selected area pin HTML框架詳解與框架布局? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 1)什麽是框架 框架將瀏覽器劃分成不同的部分，每一部分加載不同的網頁，實現在同一

Web前端開發之HTML+CSS基礎入門(使用CSS樣式的方式)

AD 層疊樣 b前端開發 col In 基於 允許 ML 語言 1) HTML<!DOCTYPE> 聲明標簽 a.定義和用法 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。 <!DOCTYP

前端開發：HTML-圖像

inf 技術 ace style idl mil www. 創建 font HTML 圖像- 圖像標簽（ <img>）和源屬性（Src） 在 HTML 中，圖像由<img> 標簽定義。 <img> 是空標簽，意思是說，它只包含屬性，並

前端開發：HTML-列表

歷史 點列 light 字母 alt mage 嵌套列表 開發 圓點 HTML無序列表 無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。 無序列表使用 <ul> 標簽 <ul> <li>

前端開發：HTML-表格

歷史 -- 分割 星期 row ont 單元 邊框 true HTML 表格 表格由 <table> 標簽來定義。每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由 <td> 標簽定義）。字母 td 指表格數據（t

前端開發之JavaScript HTML DOM理論篇二

parent paragraph app style document col () 刪除 create 主要內容： 　　1、HTML DOM元素 　　2、HTML DOM事件 　　3、HTML DOM實例 一、DOM元素 　　主要操作有添加、刪除和替換HT

前端開發之html基礎知識02

輸入框 option cap 性別 下拉菜單 設置 checkbox ble submit 經典表格：表格沒有列的概念，只有行的概念， 一行 tr,行中的單元格 td表頭的突出顯示：tr>th <table width="400px" align="center

前端開發-5-HTML-總結

不執行 一個 包含 語文 -h 一行 課程表 htm dex 1、總體 資源：https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c html head標簽 title

前端開發-2-HTML-table&form&表單控制 標籤

 1、table標籤 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>表格</title> <

測試開發之前端——No1.HTML和HTML5

不同 標題 設計 大小寫 doctype 元素 之間 只需要 媒體 學習之前，讓我們先來了解一下HTML。 它的英文全稱是：Hyper Text Markup Language，中文通常被稱為超文本標記語言，HTML是Internet中用於編寫網頁的主要語言，HTML提

前端開發-2-HTML-body標籤

 body標籤 h、p、a、ul、ol、div、img、  想要在網頁上展示出來的內容一定要放在body標籤中。 把我們之前海燕那一段HTML程式碼貼過來，儲存到一個HTML格式的檔案中。 <!DOCTYPE HTML> <html>