HTML 簡介

什麼是 HTML？

HTML 是用來描述網頁的一種語言。

HTML 指的是超文字標記語言 (HyperTextMarkupLanguage)
HTML 不是一種程式語言，而是一種標記語言(markup language)
標記語言是一套標記標籤(markup tag)
HTML 使用標記標籤來描述網頁

HTML 標籤

HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。

HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤

開始和結束標籤也被稱為開放標籤和閉合標籤

HTML 文件 = 網頁

HTML 文件描述網頁
HTML 文件包含 HTML 標籤和純文字
HTML 文件也被稱為網頁

Web 瀏覽器的作用是讀取 HTML 文件，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容。

<!DOCTYPE html> <!--文件型別--><!--html裡註釋用這個-->
<html lang="en">
<head> <!--文件頭部-->
    <meta charset="UTF-8"> 
 <!--編碼-->
    <title>Title</title><!--標題，在瀏覽器標籤欄上顯示的文字-->
    <link rel="stylesheet" href="01.css"><!--外部引用，href指明檔案路徑-->
    <style type = text/css><!--樣式-->
        /*樣式中註釋用這個*/
    </style>
</head>
<body> <!--文件體，會顯示在瀏覽器中-->
    < 
div>這只是個簡單的例子
        <p>1</p>
    </div>
    <p>2</p>
    <p>3</p>
    <div><a href="http://www.baidu.com" target="_blank">百度一下</a></div><!--
    href屬性指明a標籤的連結，可以是絕對或相對路徑，target表明是跳轉，還是新開啟一個頁面
    _blank :新開啟
    _self :跳轉（預設）
    -->
    <span style="width:100px;height:100px;background: aqua;display:block;text-align: center">真的很簡單</span>

</body>
</html>

HTML 元素

HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的所有程式碼。

HTML 元素語法

HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
元素的內容是開始標籤與結束標籤之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
大多數 HTML 元素可擁有屬性

巢狀的 HTML 元素

大多數 HTML 元素可以巢狀（可以包含其他 HTML 元素）。

HTML 文件由巢狀的 HTML 元素構成。

空的 HTML 元素

沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。

<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。

在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。

在開始標籤中新增斜槓，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

HTML 屬性

HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的資訊。

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性總是在 HTML 元素的開始標籤中規定。

比如a標籤裡的href屬性，img標籤裡的src屬性

注意：

屬性和屬性值對大小寫不敏感。不過推薦使用小寫

屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號。

下面列出了適用於大多數 HTML 元素的屬性：

屬性	值	描述
class	classname	規定元素的類名（classname）
id	id	規定元素的唯一 id
style	style_definition	規定元素的行內樣式（inline style）
title	text	規定元素的額外資訊（可在工具提示中顯示）

HTML <head> 元素

<head> 元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。

<title>

<title> 標籤定義了不同文件的標題。

<title> 在 HTML/XHTML 文件中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標題
當網頁新增到收藏夾時，顯示在收藏夾中的標題
顯示在搜尋引擎結果頁面的標題

<link>

<style>

在<style> 元素中你也可以直接新增樣式來渲染 HTML 文件.

<script>

HTML 標題

HTML 標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。一般一個文件只有一個h1標籤，便於搜尋。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通過 <p> 標籤進行定義的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 連結

HTML 連結是通過 <a> 標籤進行定義的。

<a href="http://www.baidu.com" target="_blank">百度一下</a>

href屬性指明a標籤的連結，可以是絕對或相對路徑，target表明是跳轉，還是新開啟一個頁面
 _blank :新開啟
 _self :跳轉（預設）

HTML 連結- id 屬性

id屬性可用於建立在一個HTML文件書籤標記。

提示:書籤是不以任何特殊的方式顯示，在HTML文件中是不顯示的，所以對於讀者來說是隱藏的。

例項

在HTML文件中插入ID:

<a id="tips">有用的提示部分</a>

注意這裡不一定非要是a標籤，p標籤等其他標籤（有id屬性）也可以使用。

在HTML文件中建立一個連結到"有用的提示部分(id="tips"）"，也叫錨點。

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個頁面建立一個連結到"有用的提示部分(id="tips"）"：

<a href="https://www.cnblogs.com/woaixuexi9999/p/9365087.html#tips">
訪問有用的提示部分</a>

HTML 影象

HTML 影象是通過 <img> 標籤進行定義的。<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。

定義影象的語法是：

<img src="url" alt="some_text">

要在頁面上顯示影象，你需要使用源屬性（src）。src 指 "source"。源屬性的值是影象的 URL 地址。URL 指儲存影象的位置，如果名為 "girl.gif" 的影象位於 www.cnblogs.com 的 images 目錄中，那麼其 URL 為 http://www.cnblogs.com/images/girl.gif。當然，也可以使用相對路徑/images /girl.gif。

瀏覽器將影象顯示在文件中影象標籤出現的地方。如果你將影象標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，然後顯示圖片，最後顯示第二段。

HTML 影象- Alt屬性

alt 屬性用來為影象定義一串預備的可替換的文字。

替換文字屬性的值是使用者定義的。

<img src="girl.gif" alt="girl">

在瀏覽器無法載入影象時，替換文字屬性告訴讀者她們失去的資訊。此時，瀏覽器將顯示這個替代性的文字而不是影象。為頁面上的影象都加上替換文字屬性是個好習慣，這樣有助於更好的顯示資訊，並且對於那些使用純文字瀏覽器的人來說是非常有用的。

HTML 影象- 設定影象的高度與寬度

height（高度）與 width（寬度）屬性用於設定影象的高度與寬度。

屬性值預設單位為畫素:

<img src="image/01.jpg" width="104" height="142" />

width和height規定了圖片的寬和高。

提示:指定影象的高度和寬度的一個很好的習慣。如果影象指定了高度寬度，頁面載入時就會保留指定的尺寸。如果沒有指定圖片的大小，載入頁面時有可能會破壞HTML頁面的整體佈局。

HTML 表格

表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干單元格（由 <td> 標籤定義）。字母 td 指表格資料（table data），即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。單元格使用align屬性來控制內容所處位置。

表格的常用標籤：

table表格
thead表格頭
tbody表格主體
tfoot表格尾
th元素定義表頭單元格
tr定義表格行
td元素定義內容單元格
caption表格標題
rowspan合併行
colspan合併列

表格例項

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在瀏覽器顯示如下：:

HTML 表格和邊框屬性

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表頭

表格的表頭使用 <th> 標籤進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文字：

例項

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在瀏覽器顯示如下：

跨行或跨列表格

例項

<html>

<body>

<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">電話</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>橫跨兩行的單元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">電話</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

帶有背景顏色或背景圖片的表格

例項

<html>

<body>

<h4>背景顏色：</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景影象：</h4>
<table border="1" 
background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

HTML 列表

HTML 支援有序、無序和定義列表

無序列表

無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始於 <ul> 標籤。每個列表項始於 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

瀏覽器顯示如下：

Coffee
Milk

<ul type="circle">
 <li>蘋果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ul>

瀏覽器顯示如下：

蘋果
香蕉
檸檬
桔子

設定ul標籤的type屬性可以改變標記的格式

type="disc" 小黑圓圈

type="circle" 空心圓圈

type="square" 小黑方塊

列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。

有序列表

同樣，有序列表也是一列專案，列表專案使用數字進行標記。

有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

瀏覽器顯示如下：

Coffee
Milk

同樣，改變ol標籤的type屬性可以修改標記格式

預設：數字

type="A" ：大寫字母

type="a" ：小寫字母

type="I" ：羅馬數字

type="i" ：小寫羅馬數字

列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。

定義列表

自定義列表不僅僅是一列專案，而是專案及其註釋的組合。

自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

定義列表的列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。

巢狀列表

例項

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶
      <ul>
      <li>中國茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

瀏覽器顯示如下：

咖啡
茶
- 紅茶
- 綠茶
  - 中國茶
  - 非洲茶
牛奶

`form`表單

<form action="" method="get" name="" target="" ></form>

action規定當前提交表單時向何處傳送表單資料

method規定用於傳送的方法get/post

target規定action屬性中提交的頁面在何處開啟_black``_self

name名字

`input`標籤

input標籤是根據type的型別來判斷這個輸入框是什麼型別

text文字框
password密碼
radio單選框，要指定相同的name
checkbox複選checked預設選中disabled禁選
submit提交
reset重置
button按鈕，多數情況下
select/option下拉選框
- <select name="" id="" size="2"></select>
  - size規定下拉列表中可見選項的數目
- <option selected></option>
  - selected規定在select裡面預設展示第幾項
placeeholder提示資訊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        textarea{
            width: 200px;
            height: 200px;
            /*resize: none;*/
            /*resize: vertical;*/
            resize: horizontal;
        }
    </style>

</head>
<body>
    <form action="http://www.baidu.com" method="get" autocomplete="off">
        <!--method  預設get-->
        <!--action 規定當前提交表單向何處傳送表單資料-->
        <!--autocomplete自動完成，on輸入框會提示  off輸入框不會提示-->
        帳號：<input type="text" name="user" placeholder="請輸入你的帳號"><br/>
        密碼：<input type="password" name="psd" placeholder="請輸入你的密碼" required><br/>
        性別（單選框）：
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="2">女
        <input type="radio" name="gender" value="3">保密<br/>
        興趣（多選框）：
        <input type="checkbox" name="hobby" id="sing" value="1">
        <label for="sing">唱歌</label>
        <input type="checkbox" name="hobby" value="2" checked>跳舞
        <input type="checkbox" name="hobby" value="3" disabled>看書
        <input type="checkbox" name="hobby" value="4">運動<br/>
        下拉框：
        <select name="select" id="select" size="2">
            <!--size規定下拉列表中可見選項的數目-->
            <!--selected 規定在select裡面預設展示第幾項-->
            <option value="1">長沙</option>
            <option value="2" selected>上海</option>
            <option value="3">北京</option>
        </select><br/>
        文字框：
        <textarea name="text" id="text"></textarea><br/>
        <input type="submit" value="提交">
        <input type="button" value="註冊"> <!--給js操作-->
        <input type="reset" value="重置">
    </form>
    <script>
    </script>
</body>
</html>

結果：

HTML <div> 和 <span>

HTML 可以通過 <div> 和 <span>將元素組合起來。

HTML 區塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

例項: <h1>, <p>, <ul>, <table>

HTML 內聯元素

內聯元素在顯示時通常不會以新行開始。

例項: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是塊級元素，它可用於組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。

如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設定樣式屬性。

<div> 元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文件佈局不是表格的正確用法。<table> 元素的作用是顯示錶格化的資料。

HTML <span> 元素

HTML <span> 元素是內聯元素，可用作文字的容器

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用於為部分文字設定樣式屬性。

HTML 分組標籤

標籤	描述
<div>	定義了文件的區域，塊級 (block-level)
<span>	用來組合文件中的行內元素，內聯元素(inline)

什麼是 HTML5？

HTML5 是最新的 HTML 標準。

HTML5 是專門為承載豐富的 web 內容而設計的，並且無需額外外掛。

HTML5 擁有新的語義、圖形以及多媒體元素。

HTML5 提供的新元素和新的 API 簡化了 web 應用程式的搭建。

HTML5 是跨平臺的，被設計為在不同型別的硬體（PC、平板、手機、電視機等等）之上執行。

HTML5 - 新特性

HTML5 的一些最有趣的新特性：

新的語義元素，比如 <header>, <footer>, <article>, and <section>。
新的表單控制元件，比如數字、日期、時間、日曆和滑塊。
強大的影象支援（藉由 <canvas> 和 <svg>）
強大的多媒體支援（藉由 <video> 和 <audio>）
強大的新 API，比如用本地儲存取代 cookie。

HTML5 - 被刪元素

以下 HTML 4.01 元素已從 HTML5 中刪除：

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML 基礎知識

HTML 簡介

什麼是 HTML？

HTML 標籤

HTML 文件 = 網頁

HTML 元素

HTML 元素語法

巢狀的 HTML 元素

空的 HTML 元素

HTML 屬性

HTML <head> 元素

HTML 標題

HTML 段落

HTML 連結

HTML 連結- id 屬性

例項

HTML 影象

HTML 影象- Alt屬性

HTML 影象- 設定影象的高度與寬度

HTML 表格

表格例項

HTML 表格和邊框屬性

HTML 表格表頭

跨行或跨列表格

帶有背景顏色或背景圖片的表格

HTML 列表

無序列表

有序列表

定義列表

巢狀列表

form表單

input標籤

HTML <div> 和 <span>

HTML 區塊元素

HTML 內聯元素

HTML <div> 元素

HTML <span> 元素

HTML 分組標籤

什麼是 HTML5？

HTML5 - 新特性

HTML5 - 被刪元素

相關推薦

`form`表單

`input`標籤