網(wǎng)頁設(shè)計(jì)HTML零基礎(chǔ)入門

、Html概述

Html是Hyper Text Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的標(biāo)簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另一個網(wǎng)頁。

二、Html標(biāo)簽語法

Html中標(biāo)簽分為：成對標(biāo)簽和自閉合標(biāo)簽【空標(biāo)簽】

1、成對標(biāo)簽

成對出現(xiàn)，有開始標(biāo)簽必須有結(jié)束標(biāo)簽，內(nèi)容包裹在兩個標(biāo)簽中，而且開始標(biāo)簽名和結(jié)束標(biāo)簽名一致,并且結(jié)束標(biāo)簽必須以斜杠/開頭

語法：

<font>內(nèi)容</font>

2、自閉合標(biāo)簽

只有一個標(biāo)簽，用斜杠結(jié)束，斜杠也可以省略

語法：

<br/>

注意事項(xiàng)：

成對標(biāo)簽中，結(jié)束標(biāo)簽必須以斜杠開頭
成對標(biāo)簽與成對標(biāo)簽可以嵌套不能交叉
標(biāo)簽名不區(qū)分大小寫，但是我們都必須小寫

三、Html基本架構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文檔聲明，定義文檔類型為html，并且告訴不同的瀏覽器用標(biāo)準(zhǔn)方式進(jìn)行解析html語言，如果不寫的話，會產(chǎn)生怪異模式，所謂怪異模式，就是瀏覽器會用自己的方式進(jìn)行解析，不同的瀏覽器有各自的解析方式，從而會出現(xiàn)無效果、不兼容等問題。
注意，html中有兩種聲明類型，一種叫做xhtml，即html，另一種叫做html5，html5是xhtml的升級版，所以我們建議使用html5的聲明方式
xhtml聲明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5聲明方式：
<!DOCTYPE html>

2、html

html是html文檔的整體，也就是表示一個網(wǎng)頁。
html中的lang="en"是定義該文件語言是英文

3、head

head是html的第一層子元素【子標(biāo)簽】，負(fù)責(zé)對網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和JavaScript文件等。設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會顯示在標(biāo)題欄中。即title標(biāo)簽。

4、meta

meta是html語言head標(biāo)簽中的一個輔助性標(biāo)簽，該標(biāo)簽不包含任何內(nèi)容，但是該標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱，比如：編碼

<meta charset="utf-8"></meta>

5、body

body也是html的第一層子元素，我們頁面中顯示的所有內(nèi)容全部都是編寫在該標(biāo)簽體中。

四、Html文檔規(guī)范

html制定了文檔的編寫規(guī)范，必須遵守。
所有的標(biāo)簽必須小寫
所有的屬性必須用雙引號括起來

五、Html注釋

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內(nèi)容不會顯示在頁面上。
注釋的語法：


六、html基本屬性

注：屬性是標(biāo)簽的輔助作用。

屬性描述 bgcolor 設(shè)置網(wǎng)頁的背景顏色 background 設(shè)置網(wǎng)頁的背景圖片

1.bgcolor

設(shè)置網(wǎng)頁的背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路徑

我們在開發(fā)網(wǎng)頁時，需要經(jīng)常的插入圖片、視頻、文件等一些操作，但是我們需要指定文件所在的位置，這個位置就是所謂的路徑

路徑分為：

相對路徑指目標(biāo)相對于當(dāng)前文件的路徑，網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)中多采用這種方式來表示目標(biāo)的路徑。相對路徑有多種表示方法，其表示的意義不盡相同。表示方法如下： ./ ：代表文件所在的目錄（可以省略不寫）../ ：代表文件所在的父級目錄../../ ：代表文件所在的父級目錄的父級目錄/ ：代表文件所在的根目錄【/ ：可以理解為目標(biāo)文件的絕對路徑】
絕對路徑指目標(biāo)文件的完整路徑，從盤符開始。

3.background

設(shè)置網(wǎng)頁的背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事項(xiàng)：
bgcolor和background不能同時使用
background不能指定絕對路徑

七、Html標(biāo)簽

1.網(wǎng)頁的組成

網(wǎng)頁的組成：文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

2、文本段落標(biāo)簽

標(biāo)簽 描述 hn 設(shè)置文字標(biāo)題【n：取值范圍 1~6】 center 居中對齊 hr 水平線屬性（width：寬度 color：顏色 size：粗細(xì)） br 換行 p 段落

3、文本控制標(biāo)簽

標(biāo)簽 描述 font 設(shè)置字體，需要借助屬性設(shè)置

屬性描述 color 設(shè)置字體顏色 size 設(shè)置字體大小，不需要帶單位，取值范圍：1~7【瀏覽器默認(rèn)值：3】 face 設(shè)置字體風(fēng)格

<font size="2" color="red" face="黑體"></font>

4、文本格式化標(biāo)簽

標(biāo)簽 描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號字 strong 定義加重語氣 sub 定義下標(biāo)字 sup 定義上標(biāo)字 ins 定義插入字 del 定義刪除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化標(biāo)簽</title>
</head>
<body>

    <b>粗體文本</b>
    <i>傾斜文本</i>
    <em>著重文本</em>
    <small>小號字</small>
    <strong>加重語氣</strong>
    <sub>上標(biāo)</sub>
    <sup>下標(biāo)</sup>
    <ins>插入字</ins>
    <del>刪除字</del>
    
</body>
</html>

5、圖片標(biāo)簽

在Html中，圖像由
標(biāo)簽定義。
是空標(biāo)簽，意思是說，它只包含屬性。
要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

標(biāo)簽 描述 img 圖片標(biāo)簽

屬性描述 src 指定圖片的地址 width 設(shè)置圖片的寬度 height 設(shè)置圖片的高度 alt 設(shè)置圖片的預(yù)備文本

注意事項(xiàng)：不建議設(shè)置圖片大小，容易失真

6、audio

在Html中，聲音由標(biāo)簽定義。

標(biāo)簽 描述 audio 聲音標(biāo)簽

屬性描述 src 指定聲音地址

<audio src="nice.mp3">對不起，您的瀏覽器不支持</audio>

7、video

在Html中，視頻由video標(biāo)簽定義

標(biāo)簽 描述 video 視頻標(biāo)簽

屬性描述 src 指定視頻地址

<video src="美女.mp4">對不起，您的瀏覽器不支持</video>

8、超鏈接

a標(biāo)簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。
a標(biāo)簽最重要的屬性是href，它指定鏈接的目標(biāo)。
在所有瀏覽器中，鏈接的默認(rèn)外觀如下：
未被訪問的鏈接帶有下劃線而且是藍(lán)色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的

語法：

<a href="鏈接目標(biāo)">點(diǎn)擊內(nèi)容</a>

屬性描述 href 指定鏈接目標(biāo) name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉(zhuǎn)方式屬性值描述 _blank 新窗口打開【常用】 _parent 在父窗口中打開鏈接【了解】 _self 默認(rèn)，在當(dāng)前窗口打開【了解】 _top 在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個窗體【了解】 framename 到 iframe 在講【常用】

超鏈接分類：

內(nèi)部鏈接鏈接目標(biāo)：本地頁面 <a href="demo.html">點(diǎn)擊內(nèi)容</a>
外部鏈接鏈接目標(biāo)：外部頁面 <a href="http://www.baidu.com">點(diǎn)擊內(nèi)容</a>
多媒體鏈接鏈接目標(biāo)：圖片、視頻等 <a href="images/美女.jpg">點(diǎn)擊內(nèi)容</a>
電子郵件鏈接鏈接目標(biāo)：電子郵件【系統(tǒng)自帶的電子郵件】 <a href="mailto:12345@qq.com">點(diǎn)擊內(nèi)容</a>
錨鏈接鏈接目標(biāo)：錨點(diǎn) 1.建立錨點(diǎn)
<a name="錨點(diǎn)名"></a>

2.跳轉(zhuǎn)
<a href="#錨點(diǎn)名">點(diǎn)擊內(nèi)容</a>

9、列表

列表的使用與word等軟件的列表概念相似，只不過是應(yīng)用在網(wǎng)頁展示中。

1.有序列表

有序列表是指有數(shù)字編號或字母的列表項(xiàng)，可以使用css定義更多樣式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新聞一</li>
        <li>新聞二</li>
        <li>新聞三</li>
    </ol>

屬性描述 type 設(shè)置符號類型值：1 a A I i 默認(rèn)數(shù)字 start 從第幾個開始【用于ol標(biāo)簽中】 value 從第幾個開始【用于li標(biāo)簽中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新聞一</li>
        <li type="1" value="1">新聞二</li>
        <li>新聞三</li>
    </ol>

2、無序列表

無序列表是指沒有數(shù)字編號或字母的列表項(xiàng)，可以使用css定義更多樣式。

<!-- 無序列表 -->
<ul>
    <li>童裝</li>
    <li>男裝</li>
    <li>女裝</li>
</ul>

屬性描述 type 用于設(shè)置符號類型，默認(rèn)：實(shí)心圓值：空心圓、正方形【用于ul、li】

<!-- 無序列表 -->
<ul type="square">
        <li>童裝</li>
        <li type="circle">男裝</li>
        <li>女裝</li>
    </ul>

3、描述列表

描述列表指每個列表項(xiàng)有單獨(dú)的標(biāo)題。

<!-- 描述列表 -->
    <dl>
        <dt>開源產(chǎn)品</dt>
        <dd>Java封裝庫</dd>
        <dd>Web組件庫</dd>
        
        <dt>網(wǎng)站導(dǎo)航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在網(wǎng)頁開發(fā)中使用頻率非常高，尤其是數(shù)據(jù)展示的時候。

10.1 基本使用

標(biāo)簽 描述 table 代表表格標(biāo)簽 caption 表格標(biāo)題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

屬性描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設(shè)置背景顏色 background 設(shè)置背景圖片 align 對齊方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

10.2 單元格合并

屬性說明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計(jì)表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當(dāng)前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

11、表單

表單是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容，比如：文本域(textarea)、下拉列表(select)、單選框(radio)、復(fù)選框(checkbox)等等。

11.1 基本使用

表單需要使用表單標(biāo)簽來設(shè)置：

<form>
input元素
</form>

11.2 GET&POST

屬性說明 action 后臺地址 method 提交方式GET或POST

GET和POST區(qū)別：

1.GET

數(shù)據(jù)會顯示在地址欄中，數(shù)據(jù)不安全
數(shù)據(jù)大小有限制
數(shù)據(jù)通過請求頭傳遞

2.POST

數(shù)據(jù)不會顯示在地址欄中，數(shù)據(jù)安全
數(shù)據(jù)對大小無限制
數(shù)據(jù)通過實(shí)體內(nèi)容傳遞

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表單標(biāo)題，當(dāng)點(diǎn)擊標(biāo)題后文本框會獲得焦點(diǎn)，需要保證使用的ID在頁面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" id="username">

        <label for="password">密碼</label>
        <input type="password" id="password">
</form>

也可以將文本框放在label標(biāo)簽內(nèi)部，這樣就不需要設(shè)置id與for屬性了。

11.4 INPUT

文本框用于輸入單行文本使用，下面是常用屬性與示例。

屬性說明 type 表單類型,默認(rèn)為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內(nèi)容 value 默認(rèn)指 maxlength 允許最大輸入字符數(shù) size 表單長度,一般用css來控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設(shè)置選中類型比如:.jpg capture 使用麥克風(fēng)\視頻或攝像頭哪種方式獲取手機(jī)上傳文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" placeholder="請輸入用戶名" maxlength="5" size="50" required>
</form>

11.4.2 調(diào)用攝像頭

當(dāng)input類型為file時手機(jī)會讓用戶選擇圖片或者拍照,如果想直接調(diào)取攝像頭使用以下代碼.

<form action="后端接口" method="POST">
        <label for="file">上傳文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他類型

通過設(shè)置表單的type字段可以指定不同的輸入內(nèi)容.

類型說明 email 輸入內(nèi)容為郵箱 url 輸入內(nèi)容為URL地址 password 輸入內(nèi)容為密碼項(xiàng) tel 電話號,移動端會調(diào)出數(shù)字鍵盤 search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

11.4.4 HIDDEN

隱藏表單用于提交后臺數(shù)據(jù),但在前臺內(nèi)容不顯示所以在其上做用樣式定義也沒有意義.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

創(chuàng)建提交按鈕可以將表單數(shù)據(jù)提交到后臺,有多種方式可以提交數(shù)據(jù),比如:AJAX,或者Html的表單按鈕.

a.使用input構(gòu)建提交按鈕,如果設(shè)置了name值,那么按鈕數(shù)據(jù)也會提交到后臺,如果有多個表單項(xiàng)可以通過這些進(jìn)行判斷是哪個表單提交的.

<input type="submit" name="submit" value="提交表單">

b.使用button也可以提交,設(shè)置type屬性為submit或不設(shè)置都可以提交表單.

<button type="submit">提交表單</button>

11.4.6 禁用表單

通過為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端

<input type="text" value="數(shù)據(jù)" readonly>

11.4.7 PATTERN

表單可以通過設(shè)置pattern屬性指定正則驗(yàn)證.

屬性說明 pattern 正則表達(dá)式驗(yàn)證規(guī)則 oninvalid 輸入錯誤時觸發(fā)的事件

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請輸入5~20位字母的用戶名')">
        <button>提交表單</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以輸入多行文本的表單,當(dāng)然更復(fù)雜的情況可以使用編輯器如ueditor , ckeditor等.

屬性說明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)

<textarea cols="30" rows="3">請踩踩我......</textarea>

11.4.9 SELECT

下拉列表項(xiàng)可用于多個值中的選擇.

屬性說明 multiple 支持多選 size 列表框高度 optgroup 選項(xiàng)組 selected 選中狀態(tài) option 選項(xiàng)值

<form action="">
        <select multiple size="10">
            <option value="">選擇課程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

單選框指只能選擇一個選項(xiàng)的表單,如性別的選擇:男 , 女 , 保密只能選擇一個.

屬性說明 checked 選中狀態(tài)

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

復(fù)選框指允許選擇多個值的表單

屬性說明 checked 選中狀態(tài)

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認(rèn)的上傳功能,只是上傳效果并不是很美觀.

屬性說明 multiple 支持多選 accept 允許上傳類型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上傳">
    </form>

11.4.13 日期時間

屬性說明 min 最小時間 max 最大時間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期選擇

<h1>日期選擇</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周選擇

<h1>周選擇</h1>
    <input type="week" name="" id="">

c.月份選擇

<h1>月選擇</h1>
    <input type="month" name="" id="">

d.日期與時間

<h1>日期與時間</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表單的輸入值選項(xiàng)列表

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后臺管理語言</option>
            <option value="CSS">美化網(wǎng)站頁面</option>
            <option value="MYSQL">掌握數(shù)據(jù)庫使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定義一個框架集。它被用來組織多個窗口（框架），每個框架存有獨(dú)立的文檔，在其最簡單的應(yīng)用中，frameset元素僅僅會規(guī)定在框架集中存在多少列或多少行，您必須使用cols或rows屬性。

注意事項(xiàng)：由于是分割原網(wǎng)頁，所以我們不能在body中進(jìn)行編寫，在head中進(jìn)行分割。

標(biāo)簽 說明 frameset 框架集 frame 框架

屬性說明 cols 定義框架集中列的數(shù)目和尺寸 rows 定義框架集中行的數(shù)目和尺寸 frame border 去除框架邊框 scrolling 去除滾動條

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 導(dǎo)航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

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

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html動物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

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

    <a href="Html美女.html" target="view">美女圖片</a>
    <a href="Html野獸.html" target="view">野獸圖片</a>
    <a href="Html動物.html" target="view">動物圖片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、內(nèi)聯(lián)框架

iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架。

屬性說明 align 對齊方式，后期采用css的方式進(jìn)行設(shè)置 width 設(shè)置寬度 height 設(shè)置高度 src 設(shè)置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動條 frameborder 設(shè)置iframe的邊框

TML5是一種標(biāo)記語言，用于創(chuàng)建和呈現(xiàn)網(wǎng)頁內(nèi)容。與早期的HTML版本相比，HTML5具有許多新的功能和改進(jìn)，可以更好地支持動態(tài)內(nèi)容、多媒體、圖形和互動性。在本文中，我們將討論如何使用HTML5制作網(wǎng)頁，以及HTML5與舊版本HTML的區(qū)別。

首先，讓我們了解一下HTML5的一些主要功能和優(yōu)勢。HTML5具有以下特點(diǎn)：

1. 語義化標(biāo)簽：HTML5引入了一些新的語義化標(biāo)簽，例如、、、等。這些標(biāo)簽的使用可以增強(qiáng)網(wǎng)頁的結(jié)構(gòu)并提高搜索引擎的可讀性。

2. 多媒體支持：HTML5內(nèi)置了對多媒體的支持，例如和標(biāo)簽，可以在網(wǎng)頁上直接播放視頻和音頻文件，而無需使用第三方插件。

3. Canvas繪圖：HTML5引入了元素，允許開發(fā)者通過JavaScript在網(wǎng)頁上繪制圖形和動畫。這對于創(chuàng)建復(fù)雜的圖表、可視化效果和游戲非常有用。

4. 本地存儲：HTML5提供了幾種本地存儲方法，例如localStorage和sessionStorage。這些方法可以在客戶端存儲數(shù)據(jù)，使得網(wǎng)頁可以更快地加載和響應(yīng)用戶的操作。

5. 表單增強(qiáng)：HTML5為表單提供了許多新的輸入類型和屬性，例如日期、時間、顏色、URL等。這些功能減少了對JavaScript的依賴，在客戶端驗(yàn)證和收集用戶輸入數(shù)據(jù)時更加方便。

現(xiàn)在，讓我們看看如何使用HTML5制作網(wǎng)頁的基本步驟。

步驟一：創(chuàng)建HTML文檔結(jié)構(gòu)HTML5的網(wǎng)頁結(jié)構(gòu)包括、和等標(biāo)簽。在標(biāo)簽中，可以設(shè)置網(wǎng)頁的語言屬性（）和字符編碼（）。在標(biāo)簽中，可以添加網(wǎng)頁的標(biāo)題（）和其他元數(shù)據(jù)（標(biāo)簽）。在標(biāo)簽中，可以編寫網(wǎng)頁的內(nèi)容。

步驟二：使用語義化標(biāo)簽為了增強(qiáng)網(wǎng)頁的結(jié)構(gòu)和可讀性，應(yīng)盡量使用語義化標(biāo)簽。例如，標(biāo)簽用于網(wǎng)頁的標(biāo)題和導(dǎo)航欄，標(biāo)簽用于網(wǎng)頁的導(dǎo)航鏈接，和標(biāo)簽用于劃分網(wǎng)頁的內(nèi)容部分。

步驟三：插入多媒體使用、和

等標(biāo)簽插入多媒體內(nèi)容。例如，使用標(biāo)簽可以插入視頻文件，并設(shè)置其屬性（例如src、width、height）來指定視頻的來源和尺寸。

步驟四：繪制圖形和動畫使用標(biāo)簽和JavaScript繪制圖形和動畫。通過在標(biāo)簽中指定寬度和高度，并調(diào)用JavaScript函數(shù)繪制圖形，可以在網(wǎng)頁上顯示自定義的圖形和動畫效果。

步驟五：使用本地存儲使用localStorage和sessionStorage等方法，在客戶端存儲數(shù)據(jù)。通過調(diào)用JavaScript的API，可以將數(shù)據(jù)存儲在瀏覽器中，并在需要時讀取和更新數(shù)據(jù)。

步驟六：優(yōu)化網(wǎng)頁性能使用HTML5的新功能來優(yōu)化網(wǎng)頁性能。例如，使用新的表單輸入類型和屬性可以在客戶端驗(yàn)證和收集用戶輸入數(shù)據(jù)，減少對服務(wù)器的請求和響應(yīng)時間。

現(xiàn)在，讓我們來了解一下HTML5和HTML的區(qū)別。

HTML5是HTML的第五個版本，是對以前的HTML版本進(jìn)行的改進(jìn)和擴(kuò)展。與HTML4相比，HTML5具有許多新的功能和語義化標(biāo)簽，使開發(fā)者能夠創(chuàng)建更現(xiàn)代、豐富和交互性的網(wǎng)頁。

以下是HTML5和HTML的一些區(qū)別：

1. 標(biāo)簽語義化：HTML5引入了許多新的語義化標(biāo)簽，如、、、等。這些標(biāo)簽增強(qiáng)了網(wǎng)頁的結(jié)構(gòu)和可讀性，有助于搜索引擎優(yōu)化和可訪問性。

2. 多媒體支持：HTML5內(nèi)置了對多媒體的支持，如和標(biāo)簽，可以在網(wǎng)頁上直接播放視頻和音頻文件。而在HTML4中，需要使用第三方插件（如Flash）來實(shí)現(xiàn)相同的功能。

3. Canvas繪圖：HTML5引入了元素，允許在網(wǎng)頁上通過JavaScript繪制圖形和動畫。而在HTML4中，圖形和動畫的創(chuàng)建通常依賴于第三方插件或JavaScript庫。

4. 本地存儲：HTML5提供了localStorage和sessionStorage等方法，在客戶端存儲數(shù)據(jù)。這使得網(wǎng)頁可以更快地加載和響應(yīng)用戶的操作。相比之下，HTML4需要通過服務(wù)器來存儲和獲取數(shù)據(jù)。

5. 表單增強(qiáng)：HTML5為表單提供了新的輸入類型和屬性，如日期、時間、顏色、URL等。這減少了對JavaScript和服務(wù)器的依賴，提高了用戶體驗(yàn)。

總結(jié)起來，HTML5相對于HTML4具有更多的功能和改進(jìn)，使得開發(fā)者可以創(chuàng)建更現(xiàn)代、豐富和互動性的網(wǎng)頁。它提供了語義化標(biāo)簽、多媒體支持、Canvas繪圖、本地存儲和表單增強(qiáng)等功能，為網(wǎng)頁開發(fā)提供了更多的選擇和可能性。

lt;div>塊元素基礎(chǔ)屬性講解

<div>元素是個有故事的元素，這個元素很早就出現(xiàn)在html超文本標(biāo)記語言中，它設(shè)計(jì)之初就是為了解決網(wǎng)頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。

在我還上初中的時候，智能手機(jī)還沒有出現(xiàn)，更沒有平板電腦等移動設(shè)備。上網(wǎng)是通過擺在桌子上的計(jì)算機(jī)來完成的。

那時，大街小巷上有好多網(wǎng)吧。

那時，馬云剛剛辭去工作準(zhǔn)備創(chuàng)業(yè)。

那時，發(fā)送郵件的操作都會出現(xiàn)在計(jì)算機(jī)課程中。

那時，對頁面還沒有現(xiàn)在的跨平臺要求。

那時，flashplayer大行其道。

那時，dreamwaver、flash、fireworks被稱為網(wǎng)頁三劍客！

那時，制作網(wǎng)頁可以不用懂的html的寫法！

第一次接觸網(wǎng)頁制作是在大學(xué)的專業(yè)課上，使用三劍客，通過點(diǎn)擊軟件菜單中的按鈕就能制作網(wǎng)頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。

那時，對html還沒有深刻的認(rèn)識，但是卻對<table></table>這個標(biāo)簽有著極深的印象。

因?yàn)楫?dāng)時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進(jìn)行布局的！

也就是說，在移動智能設(shè)備誕生之前，在用戶對頁面還沒有可以適應(yīng)不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業(yè)，讓<div>這個專業(yè)的塊元素閑置了好久。

直到智能手機(jī)，平板電腦產(chǎn)生后，由于對頁面的跨平臺顯示的要求的出現(xiàn)（這類適應(yīng)多平臺的頁面布局叫做響應(yīng)式布局），<table>表格制作的頁面在響應(yīng)式布局大行其道的今天，用它布局的頁面開始出現(xiàn)代碼冗余，維護(hù)困難等諸多問題。手機(jī)端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數(shù)反感和惱火的插件。

從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關(guān)代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復(fù)了寫代碼做頁面的操作方式，過去的點(diǎn)擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術(shù)的從業(yè)人感到難受。

dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網(wǎng)頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。

這個故事在開始學(xué)習(xí)<div>和css布局之前我都會講給學(xué)生（一群文科生）聽，我只是想告訴大家，學(xué)習(xí)任何計(jì)算機(jī)技術(shù)，我們可以從簡單易學(xué)的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術(shù)換代中不會被輕易淘汰。

在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數(shù)字娛樂技術(shù)概述》，這門課既不娛樂也不概述，但是通篇都是數(shù)字，那位年輕的教授為我們透析了游戲、影視特效的核心----計(jì)算機(jī)圖形學(xué)。

從此我開始學(xué)習(xí)數(shù)學(xué)。因?yàn)槔蠋煹囊痪湓挘?strong>從2000年到現(xiàn)在（2014）雖然各種軟件層出不窮，但是計(jì)算機(jī)圖形學(xué)的核心算法卻幾乎沒什么改變。

向下挖掘雖然很難，但是有必要！與各位共勉！

下面開始今天的內(nèi)容。

首先，我們將之前的"第一個頁面.html"文件復(fù)制一個，叫做"塊元素學(xué)習(xí).html"。然后把<body></body>中間的內(nèi)容清空。

如圖：

下面，我們在<body></body>中間添加<div></div>標(biāo)簽。示例代碼如下：

<body><div></div></body>

我們看看效果：

啦啦啦，什么都沒有！

為了讓大家可以看出來不同，我們?yōu)?lt;div>添加邊框?qū)傩裕?/p>

我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實(shí)際上我們已經(jīng)開始接觸CSS的一些內(nèi)容了。具體寫法的講解大家可以看這個教程，這里不再贅述。

示例代碼如下：（通過style = "border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便！）

<div style = "border-style: solid;">

效果如圖：

因?yàn)槔锩鏇]有內(nèi)容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內(nèi)容。

為了看起來花哨些，加張圖片吧！

示例圖片

示例代碼如下：

<div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%；"></div>

大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作》

效果如下：

其中，我們也是使用了style的方式為<img>設(shè)置的寬度，這個設(shè)置方法在<div>中一樣使用！

代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！

<div style = "border-style: solid; width:50%;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    </div>

效果如圖：

整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。

為了方便觀看，我們?nèi)サ鬱iv的width設(shè)置。同時在<div>中繼續(xù)添加<div>標(biāo)簽。為了方便顯示，我們在新的<div>中添加一段文字！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    <div>
    <p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</div>
</div>

效果如下：

如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？

示例代碼如下：

<div style = "float:right;"><p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p></div>

我們通過為新的<div>標(biāo)簽中的style屬性添加float（浮動）屬性，同時設(shè)置為right（右）。

頁面效果如圖：

大家思考一下如何讓圖片與文字都靠在左邊呢？

是不是為圖片style添加float:left;同時把新<div>的float改為left？

我們試試看！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</div>
</div>

頁面效果：

效果完全不對，圖片和文字跑到外邊來了。

這是div布局中經(jīng)常出現(xiàn)的一個問題！解決方案有點(diǎn)奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標(biāo)簽！給這個新的空的<div>的style設(shè)置為"clear:both"即可修正。

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>

頁面效果如下：

值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標(biāo)簽的style設(shè)置為float：left，是沒有問題的，只有把它們放到<div>中才會出現(xiàn)上面的情況。

代碼如下：

<body>
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <p style = "float:left;">學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</body>

頁面顯示效果如下：

大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現(xiàn)上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！

現(xiàn)在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細(xì)說明。

疫情期間，請大家少出門，不聚會，沒事在家學(xué)學(xué)網(wǎng)頁制作，即抗擊疫情又提高自己!

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：使用CSS3屬性選擇器特性來完成JavaScript的工作
下一篇：亞馬遜運(yùn)營必備技能，一分鐘學(xué)會HTML「附各HTML工具測評」

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁設(shè)計(jì)HTML零基礎(chǔ)入門

、Html概述

二、Html標(biāo)簽語法

1、成對標(biāo)簽

2、自閉合標(biāo)簽

三、Html基本架構(gòu)

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文檔規(guī)范

五、Html注釋

六、html基本屬性

1.bgcolor

2.路徑

3.background

七、Html標(biāo)簽

1.網(wǎng)頁的組成

2、文本段落標(biāo)簽

3、文本控制標(biāo)簽

4、文本格式化標(biāo)簽

5、圖片標(biāo)簽

6、audio

7、video

8、超鏈接

9、列表

1.有序列表

2、無序列表

3、描述列表

10、表格

10.1 基本使用

10.2 單元格合并

11、表單

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 調(diào)用攝像頭

11.4.3 其他類型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表單

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期時間

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 導(dǎo)航框架

13、內(nèi)聯(lián)框架

lt;div>塊元素基礎(chǔ)屬性講解

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求