本文鏈接: http://www.itdecent.cn/p/dce0153b960f
作者：西瓜甜

一、初始 HTML

1. 基本介紹

超文本標記語言（英語：Hyper Text Markup Language，簡稱：HTML）是一種用于創(chuàng)建網頁的標準標記語言。

HTML常與CSS、JavaScript 一起被眾多網站用于設計令人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。

網頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網頁。

HTML 負責展現網頁的內容
CSS 層疊樣式表，負責以什么樣的樣式展現網頁的內容，比如字體的大小和顏色，背景圖片和內容放在什么位置。
JavaScript 負責用戶和網頁內容的交互，就是讓網頁內容動起來。

維護HTML和CSS標準的組織是萬維網聯盟（W3C）

2. 標記

HTML標記包含標簽（及其屬性）、基于字符的數據類型、字符引用和實體引用等幾個關鍵部分。

HTML標簽是最常見的，通常成對出現，比如<h1>與 </h1>。
這些成對出現的標簽中，第一個標簽是開始標簽，第二個標簽是結束標簽。
兩個標簽之間為元素的內容，有些標簽沒有內容，如 <img>, 這個稍后會介紹。

HTML另一個重要組成部分為文檔類型聲明這會告訴瀏覽器改用哪一種標準來渲染。

下面是一個經典的Hello World程序的例子，一個用于比較編程語言、腳本語言和標記語言的不同之處的通用測試。這個例子用9行代碼寫成：

<!DOCTYPE html>
<html>
  <head>
    <title>這是標題</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

文檔標記類型<!DOCTYPE html>用于表示這是一個 HTML5 類型的文檔。

<html>和</html>之間的文本用于描述整個網頁部分。

<body>和</body>之間的文本是你真正能在頁面上看到的內容，即瀏覽器的窗口內容。

<title>這是標題</title>定義了瀏覽器的頁面標題，就是在瀏覽器每個標簽上展現的內容。

image.png

3. HTML 文檔總體結構

<!DOCTYPE html>
<!--
 我是 HTML 語言中的注釋,可以單行，
 也可以多行。
-->
<!--設置頁面的語言： 英文。中文把 en 換成 zh-CN -->
<html lang="en">   <!--網頁開始-->
   <head>          <!--網頁頭開始-->   
       <title>千鋒教育</title> <!--頁面標題-->
       <meta charset="UTF-8"/>
   </head>         <!--網頁頭結束-->
   
   <body>          <!--網頁體開始-->
      
       <!--頁面正文標簽開始-->
       <div>     
        頁面正文內容  
       </div>
       <!--頁面正文標簽結束-->

    </body>        <!--網頁體結束-->
</html>           <!--網頁結束-->

4. HTML5 語法

實際上是沿用了之前的 html 語法，只是做的更加簡單、更加人性化。

不區(qū)分大小寫（規(guī)范化建議小寫）
支持布爾值 <input type="text" required="true">
屬性的值可以省略引號（規(guī)范化考慮，建議使用雙引號）
```
<div class=c1></div>

<div class="c1"></div>
```

5. 標簽和元素的關系

HTML文檔由嵌套的HTML元素構成。它們用HTML標簽表示，包含于尖括號中，如 <div>。

在一般情況下，一個元素由一對標簽表示：開始標簽<p>與結束標簽 </p>。元素如果含有文本內容，就被放在這兩個標簽之間。

<p>我是段落標簽，用來表示一段文字</p>

在開始與結束標簽之間也可以嵌套另外的標簽元素，包括標簽與文本的混合。
這些嵌套的標簽是父與子的關系。

<p>
    我是段落標簽<a>我是 a 標簽，可以被點擊，
    點我</a>
</p>

6. 標簽分類

a. 從書寫方式分，標簽分為:

自閉合標簽

自閉合標簽，只有一個大于號和小于號組合而成，后面的反斜線可以有，也可以沒有。建議都有。

<!--  -->
<meta/>
<img/>

主動閉合標簽

主動閉合標簽都是成對兒出現的,并且后面的必須加反斜線 /,以表名此標簽內容結束。

<div>主動閉合標簽</div>

b. 從元素(標簽) 在頁面中所占據的位置空間來分，可分為：

塊級元素

在整個頁面上，無論自己內容的多少，自己都會獨占一行。

內聯標簽，不獨占一行，只占據自己寬度大小的空間

標簽分類

HTML5 源碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>標簽分類</title>
  <style>
    .c1{
      border: 2px solid red;
      background-color:thistle;
      font-size: 20px;
    }
    .c2{
      border: 2px solid rgb(47, 28, 99);
      background-color:rgb(138, 179, 127);
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="c1">我就是霸道，這一行都是我的地盤</div>
  <a href="" class="c2">左青龍</a>
  <span class="c2">我最好說話了，是兄弟站在我的兩邊</span>
  <a href="" class="c2">右白虎</a>
</body>
</html>


常見塊級標簽有：

```html
<div></div>
<p></p>

<h1></h1>
到
<h6></h6>

<ul></ul>
<table></table>

常用的內聯標簽有：

<a href="#"></a>   <i></i>   <span></span>

7. 認識標簽的屬性

幾乎在所有的標簽中都可以針對標簽的種類，設置自身的屬性；如：

<a class="widget-controls">

這里 class 就是這個 a 標簽的屬
性名，這個屬性叫做類屬性。

widget-controls 是屬性的值，也就是類的名字，規(guī)范要求用雙引號包裹起來。
在一個HTML文本中同一個類的名字可給多個標簽使用。

具體有哪些屬性，下面會針對不同的標簽來說明。

二、HTML元素之間的關系結構

了解一些瀏覽器的工作原理是很重要的。以下面這段 HTML 為例：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

當瀏覽器讀到這些代碼時，它會建立一個“DOM 節(jié)點”樹來保持追蹤所有內容，如同你會畫一張家譜樹來追蹤家庭成員的發(fā)展一樣。

上述 HTML 對應的 DOM 節(jié)點樹如下圖所示：

image.png

每個元素都是一個節(jié)點。每段文字也是一個節(jié)點。甚至注釋也都是節(jié)點。一個節(jié)點就是頁面的一個部分。就像家譜樹一樣，每個節(jié)點都可以有孩子節(jié)點 (也就是說每個部分可以包含其它的一些部分)。

三、標簽及其屬性詳解

先下面從一下幾個部分對標簽分別進行介紹

結構標簽
頭部標簽
功能標簽
- 文本文字
- 超鏈接
- 多媒體 (html5 中新增)
- 表單

1. 結構標簽

在前面第 1.3 小節(jié) HTML 文檔總體結構 中，已經介紹了總體結構標簽，這里就不再贅述。

在這里注意是說一下 HTML5 中心增的結構標簽，就是有語義化的標簽。

也可以是說是一看到標簽名稱，就知道是啥意思。

結構化標簽

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 讓 html5 的語義化標簽在 IE8 及其一下版本的支持 -->
  <!--[if lte IE 8]>
      <script src="./html5shiv.js"></script>
  <![endif]-->
</head>
<body>
 <header>
   <div>Logo</div>
   <nav>
     <a href="index.html">首頁</a>
     <a href="#">發(fā)現</a>
     <a href="#">關注</a>
     <a href="#">消息</a>
     <a href="#">個人中心</a>
   </nav>
 </header>
 
 <section>
   <article>
    <h3>標題黨1</h3>
    <p>The article element represents a complete, or self-contained,
      composition in a document, page, application, or site and that is,
       in principle, independently distributable or reusable, e.g.
       in syndication. This could be a forum post,
       a magazine or newspaper article, a blog entry,
       a user-submitted comment, an interactive widget or gadget,
       or any other independent item of content.
       Each article should be identified, typically by including
        a heading (h1–h6 element) as a child of the article element.
    </p>
   </article>
 </section>
 <section>
    <article>
        <h3>標題黨2</h3>
        <p>The article element represents a complete, or self-contained,
          composition in a document, page, application, or site and that is,
           in principle, independently distributable or reusable, e.g.
           in syndication. This could be a forum post,
           a magazine or newspaper article, a blog entry,
           a user-submitted comment, an interactive widget or gadget,
           or any other independent item of content.
           Each article should be identified, typically by including
            a heading (h1–h6 element) as a child of the article element.
        </p>
       </article>
 </section>
 <section>
    <article>
        <h3>標題黨3</h3>
        <p>The article element represents a complete, or self-contained,
          composition in a document, page, application, or site and that is,
           in principle, independently distributable or reusable, e.g.
           in syndication. This could be a forum post,
           a magazine or newspaper article, a blog entry,
           a user-submitted comment, an interactive widget or gadget,
           or any other independent item of content.
           Each article should be identified, typically by including
            a heading (h1–h6 element) as a child of the article element.
        </p>
       </article>
 </section>
 <footer>表示底部，一般放置版權信息等</footer>
</body>
</html>

2. 頭部標簽及其屬性

就是在 <head></head> 標簽中定義的標簽。

網頁標題圖標 shark.ico

源數據 `meta`

<!--設置整個頁面的字符集編碼-->
<meta charset="UTF-8">

<!--主要是針對移動設備而進行優(yōu)化顯示效果的, 后面會有更詳細的解釋-->
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>


<!--設置用最新的 IE 引擎去渲染HTML,這是為了兼容IE瀏覽器-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!--設置頭部圖標-->
<link rel="shortcut icon"  sizes="16x16"/>
       
<!--刷新,下面是定義每30秒刷新一次這個頁面-->
<meta http-equiv="Refresh" Content="30"/>
      
<!-- 禁用瀏覽器緩存 -->
<meta http-equiv="pragma" content="no-cache"/>
      
<!--設置頁面在打開幾秒后跳轉到目標URL-->
<!--<meta http-equiv="Refresh" Content="5; URL=http://www.qfedu.com"/>-->
     
<!--設置關鍵字，用于在搜索引擎上通過這些關鍵字進行搜索時，能夠搜索到這個網址-->
<meta name="keywords" content="鯊魚,千鋒，云計算，python， 運維開發(fā)， Vue"/>
      
<!--設置網址的描述性信息-->
<meta name="description" content="網站的簡單介紹信息，描述了網站的主要功能、業(yè)務范圍，等信息"/>

3. 功能標簽

a. 盒子標簽 `div`

首先它是一個塊級元素的標簽。

div 標簽通常作為一個盒子或者說容器，可以把其他的標簽放在里面，在 html5 之前通常用于網頁的布局。

  <div class="header">網頁頭部</div>
  <div class="conntet">網頁內容</div>
  <div class="footer">網頁底部</div>

現在大部分情況下只是作為一個盒子容器，存放其他功能標簽。

 <div>
   姓名<input type="text">
  </div>
 <div>
   年齡<input type="text">
 </div>
 <div>
   地址<input type="text">
 </div>

b. 文本文字

h1 到 h6 塊元素，主動封閉，用于書寫標題內容，字體有大變小。

h5 中新增了 hgroup 標簽，假如網頁上出現了連續(xù)的 h 標簽，可以把這些標題標簽放到 hgroup 中。

<hgroup>
    <h1>標題一</h1>
    <h2>標題二</h2>
<hgroup>

p 表示文章中的一個段落, 塊級元素

<p>段落內容一</p>
<p>段落內容二</p>

span

    <span>
      我也是比較純潔的標簽，沒有太多的限制，比較有利于進行CSS的修飾，同時我是內聯標簽 
    </span>
    <span>我是不會換行的，同時我是內聯標簽</span>

換行標簽：
可以在內聯標簽中或者在一個塊標簽內換行

其實幾乎所有的成對兒出現的標簽內都可以寫文字內容。

c.多媒體

示例圖片

妹子meizi.jpg

img 圖片

    <img src="https://upload-images.jianshu.io/upload_images/11414906-c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
         alt="色即是空"
         title="犀利的眼神"/>

src 　　圖片文件的本地絕對或者相對路徑，通常情況下都是一個 url 地址；

alt 　　假如圖片不能顯示，則顯示這里的文字,跳轉功能不受影響；

title 　當鼠標放在這個圖片上時，會出現的內容

audio 音頻播放， h5 新增

  <audio src="music/隔壁老樊 - 多想在平庸的生活擁抱你.flac"  controls loop>無法播放，瀏覽器不支持</audio>
<br/>
<audio src="https://vipkshttps0.wiz.cn/ks/attachment/download/9d341970-76bb-11e9-8499-f9054e49814b/3dad2926-67e8-4cac-9131-4a0db35dda35/0a863399-01c6-4b0d-b63d-e040e7e44a10?clientType=web&clientVersion=3.0.0&apiVersion=10&lang=zh-cn"
           controls
          loop></audio>

上面示例中的視頻容量稍大，根據網速，需要等待幾分鐘

src 指定文件地址或 url

controls 顯示播放控件

loop 循環(huán)播放

video 視頻播放， h5 新增

    <div>
        <video src="video/我曾.mp4"
          width="800" height="680"
          loop
          autoplay
          muted
          controls="controls">
          對不起！ 您的瀏覽器不支持，請升級
        </video>
    </div>

autoplay 是自動播放，谷歌瀏覽器不支持
解決辦法同時加上 muted 屬性，但是默認是靜音狀態(tài)

d. 超鏈接

a 標簽，同時它是一個內聯標簽

可以設置跳轉,就是在頁面上點擊它，會跳轉到目標頁面（稱為重定向）
或者同頁面的另一個標簽處（稱為錨）

   <a  target="_blank">新標簽打開百度</a>
  
<!--錨,可以跳到同一個頁面的其他標簽的位置，需要指定 id-->
   <a href="#p100">跳到 id 為 p100 的標簽位置</a>
   
<!--設置點擊一個圖片進行跳轉-->
<p>點擊下方圖片進行跳轉</p>
<a >
     <img src="https://upload-images.jianshu.io/upload_images/11414906-c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
         alt="色即是空"
         title="犀利的眼神"/>
</a>

href 指定跳轉到地址

targe ="_blank" 是在一個新的標簽頁面打開跳轉到目標頁面, 默認是在當前頁面跳轉。

e. 表單和表單中的元素

form 用于向后臺服務端提交數據，比如注冊時候的注冊信息等。塊級元素，使用頻率較高，重點掌握。

 <form action="http://192.168.56.128/index/"
       method="POST"
       enctype="multipart/form-data">
  姓名： <input type="text" >
 </form>

action 把 input 標簽的數據提交到哪兒，通常是一個 url

method 把 input 標簽的數據提交的方法：

GET 方法, 把提交的內容放到請求的 url 地址后面，數據被封裝在請求頭中，后臺接收到的數據內會是一個字典的形式

POST 方法,把提交的數據放到請求體中，后臺接收到的數據也是一個字典的形式

enctype="mutipart/form-data" 是提交文件或圖片專用的屬性

form 標簽中通常會有如下標簽，用于獲取用戶輸入的信息。

input 輸入普通文本，內聯元素

input 用于設置提交表單數據，用于前端用戶和后臺交互，這個標簽也是內聯標簽。很重要，必須掌握。

    <form action="http://www.qfedu.com" method="GET">
        <input type="text" name="user_name" placeholder="輸入用戶名" required /><br/>
        <input type="submit"/>
    </form>

type 定義輸入內容的類型

text 是普通的文本輸入框

password 密碼輸入框，輸入的內容在輸入框中看到的是小圓點

submit 提交按鈕

name 定義一個 key

value 可以定義一個默認值值
最終后臺接收到的數據應該是這種形式:
{"user_name": "shark"}

input 提交文件

上傳文件/圖片，一定要在form標簽開頭出設置屬性:enctype="multipart/form-data"

<div>
    <input name="submit_file" type="file"/>
</div>

input 單選框

實現方式把 type 屬性的值設置為 radio ，并把 name 屬性的值設置為相同，就可以實現互斥，這種情況下只能選一個。

單選框

        <div>
            性別：<input type="radio" name="gender" value="1"  checked="checked"/>男
            <input type="radio" name="gender" value="2" />女 <br>
        </div>

checked="checked" 設定選中。

value 的值會被提交到后臺服務器，比如上例選擇了男 , 后臺收到的數據會是： {"gender": "1"}

input 實現多選框,

多選框

        <div>
            <input type="checkbox" name="cls_name" value="11" checked="checked"/>千鋒云計算好程序員
            <input type="checkbox" name="cls_name" value="12"/>千鋒云計算就業(yè)班
            <input type="checkbox" name="cls_name" value="13" checked="checked"/>千鋒網絡安全班
        </div>

select 下拉框

image.png

<div>
    <!--單選-->
    選擇你所在的城市：<br/>
    <select name="city">
        <option value="bj">北京</option>
        <!--selected 設定默認值,不設定默認是在代碼中第一個出現的-->
        <option value="sh" selected="default">上海</option>
        <option value="zz">鄭州</option>
    </select><br>
    <!--多選-->
    城市，按住ctrl鍵可多選：<br/>
    <select name="multi_city" multiple>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="zz" selected="selected">鄭州</option>
    </select>
</div>

textarea 提交多行文本

頁面上顯示一個邊框，里面的有默認的內容，鼠標拉動邊框的邊緣，可以改變其大小

<div>
    <textarea name="submit_text">默認內容</textarea>
</div>

input 關于提交到類型

<input type="submit" value="Submit提交"/>
<input type="button" value="Button提交"/>
<input type="reset" value="重置"/>

submit 點擊后會把 form 便簽中的所有以上提到的數據提交到后臺。

button 點擊后不會通過 form 提交到后臺，通常會綁定一個 javascript 事件。

HTML5 中也新增了 `input` 標簽的屬性(自修)

    姓名: <input type="text" name="name" id="" required="true"/> <br/><br/> 

    郵箱: <input type="email" name="user_email" /> <br/><br/>

    網址: <input type="url" name="url" /> <br/><br/>

    日期: <input type="datetime-local" name="date_local" /> <br/><br/>

    時間: <input type="time" name="t" id="input-time"> <br/><br/>

    數字: <input type="number" name="nub" min="2" max="10"/> <br/><br/>

    搜索: <input type="search" name="s" id="input-search"> <br/><br/>

f. 列表

ul 和 ol 用于在頁面中呈現出一個列表，塊級元素。

    <h3>以 點 標識的菜單</h3>
        <ul>
            <li>菜單一</li>
            <li>菜單二</li>
        </ul>

    <h3>有序列表 </h3>
        <ol>
            <li>菜單一</li>
            <li>菜單二</li>
        </ol>
        <ol>
            <li>菜單一</li>
            <li>菜單二</li>
        </ol>

h. 表格

table 用于呈現一個表格，塊級標簽，使用頻率較高，重點掌握。

 <h3>表格</h3>
   
    <!--border="1" 表格最外邊的邊框線,粗細是 1 (基本是最小的了，只接受整數)-->
    <table border="1">
        <!-- thead table head的縮寫，表頭的意思-->
        <thead>
            <tr>
                <th>序號</th>
                <th>主機名</th>
                <th>端口號</th>
            </tr>
        </thead>
        <!--tbody 表的主體-->
        <tbody>
            <!--第一行-->
            <tr>
                <td>1</td>
                <td>host1.com</td>
                <td>80</td>
            </tr>
            <!--第二行-->
            <tr>
                <td>2</td>
                <td>host2.com</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

j. `label` + `input` 觸發(fā)獲取焦點

當在頁面上用鼠標點擊 lanbel標簽定義的內容時（這里是：用戶名），輸入框就會被自動選中

<label for="inputUser">用戶名</label>
<input id="inputUser" type="text"/>

網頁布局

image.png

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

HTML5

HTML5

一、初始 HTML

1. 基本介紹

2. 標記

3. HTML 文檔總體結構

4. HTML5 語法

5. 標簽和元素的關系

6. 標簽分類

a. 從書寫方式分，標簽分為:

b. 從元素(標簽) 在頁面中所占據的位置空間來分，可分為：

7. 認識標簽的屬性

二、HTML元素之間的關系結構

三、標簽及其屬性詳解

1. 結構標簽

2. 頭部標簽及其屬性

源數據 `meta`

3. 功能標簽

a. 盒子標簽 `div`

b. 文本文字

c.多媒體

d. 超鏈接

e. 表單和表單中的元素

`type` 定義輸入內容的類型

name 定義一個 key

value 可以定義一個默認值值

HTML5 中也新增了 `input` 標簽的屬性(自修)

f. 列表

h. 表格

j. `label` + `input` 觸發(fā)獲取焦點

網頁布局

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

HTML5

一、初始 HTML

1. 基本介紹

2. 標記

3. HTML 文檔總體結構

4. HTML5 語法

5. 標簽和元素的關系

6. 標簽分類

a. 從書寫方式分，標簽分為:

b. 從元素(標簽) 在頁面中所占據的位置空間來分，可分為：

7. 認識標簽的屬性

二、HTML元素之間的關系結構

三、 標簽及其屬性詳解

1. 結構標簽

2. 頭部標簽及其屬性

源數據 meta

3. 功能標簽

a. 盒子標簽 div

b. 文本文字

c.多媒體

d. 超鏈接

e. 表單和表單中的元素

type 定義輸入內容的類型

name 定義一個 key

value 可以定義一個默認值值

HTML5 中也新增了 input 標簽的屬性(自修)

f. 列表

h. 表格

j. label + input 觸發(fā)獲取焦點

網頁布局

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

a. 從書寫方式分，標簽分為:

三、標簽及其屬性詳解

源數據 `meta`

a. 盒子標簽 `div`

`type` 定義輸入內容的類型

HTML5 中也新增了 `input` 標簽的屬性(自修)

j. `label` + `input` 觸發(fā)獲取焦點