網頁三劍客之HTML

時間 2019-12-12

標籤網頁劍客 html 欄目 HTML 简体版

原文原文鏈接

Web服務本質

import socket


def handle_request(client):
    request_data = client.recv(1024)
    print(request_data)
    client.send(b"HTTP/1.1 200 OK\r\n\r\n")
    # client.send(b"Hello, World")
    # client.send(b"<h1>Hello, World</h1>")
    # with open('data.txt', mode='rb') as f:
    with open('data.html', mode='rb') as f:
        response = f.read()
    print(response)
    client.send(response)


def main():
    # 1. 創建一個socket
    sock = socket.socket()
    sock.bind(('127.0.0.1', 8000))
    sock.listen(5)
    print('socket has build connection...')
    while True:
        # 2. 循環接收請求
        connection, addr = sock.accept()
        print(addr)
        # 3. 處理請求併發送
        handle_request(connection)
        # 4. 關閉當前鏈接
        connection.close()


if __name__ == '__main__':
    main()

瀏覽器輸入網址回車都發生了什麼？　　javascript

瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面css

瀏覽器給服務端發送了一個消息
服務端拿到消息
服務端返回消息
瀏覽器展現頁面

HTML概述

HTML,CSS,JS號稱網頁三劍客。那麼它們的功能分別是什麼呢？
簡言之，HTML控制頁面的結構，也就是頁面的佈局，CSS控制頁面的表現，也就是使頁面變得好看。JS控制頁面的行爲，和用戶產生交互。那麼，接下來我將詳細的介紹這三種語言。

首先是HTML。

1.HTML是什麼？
    htyper text markup language  即超文本標記語言
    超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
    標記語言: 標記（標籤）構成的語言.

    網頁==HTML文檔，由瀏覽器解析，用來展現的
    靜態網頁：靜態的資源，如xxx.html
    動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的
2.什麼是標籤?
    (1)是由一對尖括號包裹的單詞構成 例如: <html> *全部標籤中的單詞不可能以數字開頭.
    (2)標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
    標籤分爲兩部分: 開始標籤<a> 和 結束標籤</a>. 兩個標籤之間的部分 咱們叫作標籤體.
    有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img />
    標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>
3.標籤的屬性
    一般是以鍵值對形式出現的. 例如 name="alex"
    屬性只能出如今開始標籤 或 自閉和標籤中.
    屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
    若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly

HTML不是什麼？

HTML是一種標記語言（markup language），它不是一種編程語言。html

HTML使用標籤來描述網頁。html5

有了這些概念以後，咱們未來學習各個標籤表明着什麼含義。

HTML文檔結構


首先來看一下HTML文檔樹

一個html的基本結構以下：java

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>

    <body>
          網頁顯示內容
    </body>
</html>

<!DOCTYPE html>聲明爲HTML5文檔。
<html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
<head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
<body>、</body>之間的文本是可見的網頁主體內容。

注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">python

HTML文檔類型程序員

版本web	年份django
HTML編程	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

目前經常使用的兩種文檔類型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5以前的一個經常使用的版本，目前許多網站仍然使用此版本。
此版本文檔用sublime text建立方法： html:xt + tab
文檔示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文檔類型 </title>
</head>
<body>

</body>
</html>

html5

pc端可使用xhtml 1.0，也可使用html5，html5是向下兼容的
此版本文檔用sublime text建立方法： html:5 + tab 或者 ! + tab
文檔示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文檔類型 </title>
</head>
<body>

</body>
</html>

兩種文檔的區別

一、文檔聲明和編碼聲明

二、html5新增了標籤元素以及元素屬性

HTML標籤

1、HTML的標籤格式

HTML標籤是由尖括號包圍的關鍵字，如<html>, <div>等
HTML標籤一般是成對出現的，好比：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg" />等。
標籤裏面能夠有若干屬性，也能夠不帶屬性。

標籤的語法：

<標籤名屬性1=「屬性值1」屬性2=「屬性值2」……>內容部分</標籤名>
<標籤名屬性1=「屬性值1」屬性2=「屬性值2」…… />

幾個很重要的屬性：

id：定義標籤的惟一ID，HTML文檔樹中惟一
class：爲html元素定義一個或多個類名（classname）(CSS樣式類名)
style：規定元素的行內樣式（CSS樣式）

HTML註釋

<!--註釋內容-->

2、<!DOCTYPE html>標籤

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。

<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令

咱們知道，因爲各個瀏覽器生產者並非同一個，所以其支持對頁面的渲染標準也存在差別，即同一我的寫出的網頁代碼，在不一樣的瀏覽器上可能會產生很大不一樣。
那麼，如何讓程序員寫出的代碼在不一樣的瀏覽器上有相同的渲染標準呢？
那就是在頁面頭部加上<!DOCTYPE html>標籤，表示該頁面遵循W3C標準。萬維網聯盟（外語縮寫：W3C）標準不是某一個標準，而是一系列標準的集合。經過這個JS語句，
能夠查看當前頁面渲染模式。
window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
因此，咱們本身寫代碼的時候，必定要加上這個標籤。不然會出現意想不到的後果。

經常使用的聲明

HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN「 "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN「 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML經常使用標籤

1、head內經常使用標籤

標籤	意義
<title></title>	定義網頁標題
<style></style>	定義內部樣式表
<script></script>	定義JS代碼或引入外部JS文件
<link/>	引入外部樣式表文件
<meta/>	定義網頁原信息

Meta標籤介紹：

<meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。

meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

1.http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">

2、body內經常使用標籤

基本標籤：

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<p>段落</p> 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

<b>加粗</b> 
<strong>加粗</strong>

<i>斜體</i>
<strike>: 爲文字加上一條中線.
<u>下劃線</u>
<s>刪除</s>

<em> 文字變成斜體.

<sup>和<sub> 上角標 和 下角表.

<br> 換行.

<hr> 水平線


<img src="圖片地址" alt="圖片描述">

<a href="url地址">內容</a>

特殊字符

顯示結果	描述	實體名稱	實體編號
	空格
<	小於號	<	<
>	大於號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分	¢	¢
£	鎊	£	£
¥	日圓	¥	¥
€	歐元	€	€
§	小節	§	§
©	版權	©	©
®	註冊商標	®	®
™	商標	™	™
×	乘號	×	×
÷	除號	÷	÷

　　1.HTML標題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html標題、段落</title>
</head>
<body>

    <h1>一級標題</h1>

    <h2>二級標題</h2>

    <h3>三級標題</h3>

    <h4>四級標題</h4>
    
    <h5>五級標題</h5>

    <h6>六級標題</h6>
</body>

　二、div標籤和span標籤

div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。
span標籤用來定義內聯(行內)元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。

塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

注意：

關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。

p標籤不能包含塊級標籤，p標籤也不能包含p標籤。

　3.HTML段落、換行和字符實體

　　<p>標籤訂義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落換行和字符實體</title>
</head>
<body>
<div style="text-align: left;width: 230px;margin: 0 auto;">
    <h1>熱愛生命</h1>
    <span>【做者】汪國真 【朝代】現代</span>
    <p>
        我不去想是否可以成功<br>
        既然選擇了遠方<br>
        便只顧風雨兼程<br>
    </p>
    <p>
        我不去想可否贏得愛情<br>
        既然鍾情於玫瑰<br>
        就勇敢地吐露真誠<br>
    </p>
    <p>
        我不去想身後會不會襲來寒風冷雨<br>
        既然目標是地平線<br>
        留給世界的只能是背影<br>
    </p>
    <p>
        我不去想將來是平坦仍是泥濘<br>
        只要熱愛生命<br>
        一切，都在乎料之中<br>
    </p>
</div>
</body>
</html>

4.HTML圖像標籤-img標籤

<img src="./images/resume.jpg" alt="簡歷" title="我的簡歷" width="400px;" height="400px;">

5.HTML連接-a標籤：

<a href="http://www.itcast.cn" title="跳轉到傳智播客的網站" target="_blank">傳智播客</a>

6.HTML列表

無序列表

<ul type="disc">
  <li>第一項</li>
  <li>第二項</li>
</ul>

type屬性：

disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

2.有序列表

<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
</ol>

type屬性：

1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬

3.標題列表

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <h3>有序列表</h3>
    <!--ol>li*3+tab-->
    <ol>
        <li>學習html</li>
        <li>學習css</li>
        <li>學習JavaScript</li>
    </ol>
    <!--
    <ul>
        <li><a href="#">新聞標題一</li>
        <li>新聞標題二</li>
        <li>新聞標題三</li>
        <li>新聞標題四</li>
        <li>新聞標題五</li>
    </ul>-->
    <!-- ul>(li>a)*5+tab-->
    <h3>無序列表</h3>
    <ul>
        <li><a href="">新聞標題</a></li>
        <li><a href="">新聞標題</a></li>
        <li><a href="">新聞標題</a></li>
        <li><a href="">新聞標題</a></li>
        <li><a href="">新聞標題</a></li>
    </ul>

    <h3>定義列表</h3>

    <!-- dl>(dt+dd)*3+tab-->
    <dl>
        <dt>html</dt>
        <dd>負責頁面的結構</dd>
        
        <dt>css</dt>
        <dd>負責頁面的表現</dd>

        <dt>javascript</dt>
        <dd>負責頁面的行爲</dd>    
    </dl>

</body>
</html>

html列表

7.HTML表格-table

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。

表格的經常使用標籤：

表格的基本結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <div width=1000px;>
<table border="1" cellspacing="0" cellpadding="10" style="margin: 100px auto;">
    <thead style="background-color: #4cae4c;color: white;">
      <tr>
        <th>序號</th>
        <th>姓名</th>
        <th>愛好</th>
        <th>操做</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>Egon</td>
        <td>槓娘</td>
        <td>增長 | 刪除 | 修改</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Yuan</td>
        <td>日天</td>
        <td>增長 | 刪除 | 修改</td>
      </tr>
  </tbody>
</table>
</div>
</body>
</html>

屬性:

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素百分比.（最好經過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）

8.HTML表單-form

功能：

表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含textarea、select、fieldset和 label標籤。

表單屬性

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

表單元素

基本概念：
HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。

1. input標籤

<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。

type屬性值	表現形式	對應代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	複選框	<input type="checkbox" checked="checked" />
radio	單選框	<input type="radio" />
submit	提交按鈕	<input type="submit" value="提交" />
reset	重置按鈕	<input type="reset" value="重置" />
button	普通按鈕	<input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" />

屬性說明:

name：表單提交時的「鍵」，注意和id的區別
value：表單提交時對應項的值
- type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
- type="text","password","hidden"時，爲輸入框的初始值
- type="checkbox", "radio", "file"，爲輸入相關聯的值
checked：radio和checkbox默認被選中的項
readonly：text和password設置只讀
disabled：全部input均適用

2. select標籤

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">廣州</option>
    <option value="4">深圳</option>
  </select>
</form>

屬性說明：

multiple：布爾屬性，設置後爲多選，不然默認單選
disabled：禁用
selected：默認選中該項
value：定義提交時的選項值

3. label標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。
說明：

label 元素不會向用戶呈現任何特殊效果。
<label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

<form action="">
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

4. textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默認內容
</textarea>

屬性說明：

name：名稱
rows：行數
cols：列數
disabled：禁用

<form action="http://www.itcast.cn" method="post" enctype="multipart/form-data">
        <div>
            <label for="username" >用戶名：</label>
            <input type="text" name="username" id="username" disabled placeholder="姓名">
         </div>
         <br>
         <div>
             <label for="pwd">密碼：</label>
             <input type="password" name="pwd" id="pwd" placeholder="密碼" readonly>
         </div>
         <br>
         <div>
             <label>性別：</label>
             <input type="radio" name="gender" value="0" id="male"><label for="male">男</label>
             <input type="radio" name="gender" value="1" id="female"><label for="female">女</label>
         </div>
          <div>
             <label>愛好：</label>
             <input type="checkbox" name="like" value="game" checked="checked">遊戲
             <input type="checkbox" name="like" value="shopping">逛街
             <input type="checkbox" name="like" value="sleep">睡覺
         </div>
         <br>
         <div>
             <label>照片：</label>
             <input type="file" name="photos">
         </div>
         <br>
         <div>
             <label>籍貫：</label>
             <!--<select name="site" multiple size="1">-->
            <select name="site">
                <optgroup label="中國">
                 <option value="0">北京</option>
                 <option value="1">上海</option>
                 <option value="2">廣州</option>
                 <option value="3" selected="selected">山西</option>
                </optgroup>
             </select>
         </div>
         <div>
             <label>我的描述：</label>
             <textarea name="info" cols="20" rows="8"></textarea>
         </div>
        <br>
         <input type="hidden" name="hed" value="10000">
         <input type="submit" name="" value="提交">
         <input type="reset" name="" value="重置">
         <input type="image" name="" src="images/picstyle04.jpg">
         <input type="button" name="" value="按鈕">

    </form>

form表單例子

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上傳成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),

django接收上傳文件

9.HTML內嵌框架iframe

　　iframe 用於在網頁內顯示網頁。

1. 添加 iframe 的語法

<iframe src="URL"></iframe>

URL 指向隔離頁面的位置。

2. Iframe - 設置高度和寬度

height 和 width 屬性用於規定 iframe 的高度和寬度。

屬性值的默認單位是像素，但也能夠用百分比來設定（好比 "80%"）。

實例

<iframe src="http://www.baidu.com" width="200" height="200"></iframe>

3. Iframe - 刪除邊框

frameborder 屬性規定是否顯示 iframe 周圍的邊框。

設置屬性值爲 "0" 就能夠移除邊框：

實例

<iframe src="http://www.baidu.com" frameborder="0"></iframe>

4. 使用 iframe 做爲連接的目標

iframe 可用做連接的目標（target）。

連接的 target 屬性必須引用 iframe 的 name 屬性：

實例

<iframe src="https://www.cnblogs.com/zhangyafei" name="myframe"></iframe>
<p><a href="https://www.cnblogs.com/zhangyafei" target="myframe">個人博客</a></p>

5. 例子：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內嵌框架</title>
    <style type="text/css">
        .menu{
            width: 600px;
            height: 50px;
            list-style: none;
            margin:30px auto;
            font-size: 0;
        }
        .menu li{
            width: 140px;
            height: 46px;
            display: inline-block;
            border: 2px solid gold;
            text-align: center;
            line-height: 46px;
            font-size: 16px;
            background-color: blue;
        }
        .menu li a{
            color: gold;
            text-decoration: none;
        }
        .menu li:hover{
            background-color: orange;
        }
        .menu li a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="http://www.baidu.com" target="myframe">百度網</a></li>
        <li><a href="http://www.qq.com" target="myframe">騰訊網</a></li>
        <li><a href="https://www.taobao.com" target="myframe">淘寶網</a></li>
        <li><a href="https://www.sina.com.cn/" target="myframe">新浪網</a></li>
    </ul>
    <iframe src="http://www.baidu.com" width="100%" height="500" name="myframe"></iframe>
    <hr>
    <h3>01 經常使用標籤.html</h3>
    <iframe src="01_html經常使用標籤.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
    <hr>
    <h3>02 html列表.html</h3>
    <iframe src="02_html列表.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
    <hr>
    <h3>03 html表格.html</h3>
    <iframe src="03_html表格.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
    <hr>
    <h3>04 html表單.html</h3>
    <iframe src="04_html表單.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
</body>
</html>

內嵌框架

補充：頁面內跳轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面內跳轉</title>
    <style type="text/css">
        .head{
            height: 200px;
            background-color: #003366;
        }
        .menu{
            width: 850px;
            height: 50px;
            margin: 50px auto 0;
            padding: 0;
            font-size: 20px;
        }
        .menu li{
            width: 98px;
            height: 46px;
            display: inline-block;
            text-align: center;
            line-height: 46px;
        }
        .menu li a{
            color: white;
            text-decoration: none;
        }
        .menu li:hover{
            background-color: orange;
        }
        .menu a:hover{
            color: red;
        }
        .search{
            width: 800px;
            height: 100px;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="head">
    <a href="http://www.sxmu.edu.cn/" target="_blank"><img src="images/head-logo.png" alt="山西醫科大學"></a>
    <a href='http://www.sxmu.edu.cn/' style="float: right;margin: 40px 40px 0 0;"><img src="images/newxiaoxun.png" alt=""></a>
    <ul class="menu">
        <li><a href="index">首頁</a></li>
        <li><a href="survey">學校概況</a></li>
        <li><a href="guanli">管理機構</a></li>
        <li><a href="jiaoxue">教學單位</a></li>
        <li><a href="shizi">師資隊伍</a></li>
        <li><a href="xuesheng">學生工做</a></li>
        <li><a href="zhaosheng">招生信息</a></li>
        <li><a href="kexue">科學研究</a></li>
    </ul>
</div>

<div class="content">
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>

    <h1 id='title1'>標題一</h1>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1 id='title2'>標題二</h1>
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1 id='title3'>標題三</h1>
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1 id='title4'>標題四</h1>
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>

</body>
</html>

頁面內跳轉

總結

1、標籤的分類

1.內聯標籤和快標籤（是否獨佔一行）

塊元素，也能夠稱爲行元素，佈局中經常使用的標籤如：div、p、ul、li、ol,h1~h六、dl、dt、dd，form,hr等等都是塊元素，它在佈局中的行爲：
	支持所有的樣式,能夠設置長和寬
	若是沒有設置寬度，默認的寬度爲父級寬度100%
	盒子佔據一行、即便設置了寬度

內聯元素，也能夠稱爲行內元素，佈局中經常使用的標籤如：img、 a、span、em、b、strong、i、s等等都是內聯元素，它們在佈局中的行爲：
	支持部分樣式（不支持寬、高、margin上下、padding上下）
	寬高由內容決定
	盒子並在一行
	代碼換行，盒子之間會產生間距
	子元素是內聯元素，父元素能夠用text-align屬性設置子元素水平對齊方式，用line-height屬性值設置垂直對齊方式

2.雙標籤和單標籤

雙標籤：h1-h6, div p a span
	<!-- 成對出現的標籤  -->
		<body>......</body>
		<h1>.....</h1>
		<p>......</p>
		<div>......</div>
		<span>......</span>
		<b>......</b>
		<a>.....</a>
		<ul><li></li></ul>
單標籤: img input br hr
	<!-- 單個出現的標籤  -->
		<br/>
		<hr/>
		<img src="..." />
		<input type="..." />

3.語義化的標籤

無語義的標籤
	div標籤 塊元素，表示一塊內容，沒有具體的語義。
	span標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標籤
	em標籤 行內元素，表示語氣中的強調詞
	i標籤 行內元素，本來沒有語義，w3c強加了語義，表示專業詞彙
	b標籤 行內元素，本來沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
	strong標籤 行內元素，表示很是重要的內容
語義化的標籤
	語義化的標籤，就是在佈局的時候多使用語義化的標籤，搜索引擎在爬網的時候能認識這些標籤，理解文檔的結構，方便網站的收錄。
好比：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連接，dl、dt、dd表示定義列表等，語義化的標籤很少。

2、嵌套的規則

　　雖然HTML標籤有不少而且咱們在製做頁面的時候能夠無限的嵌套，可是嵌套也有規則，不能隨意的嵌套。有些標籤是固定的嵌套規則，好比ul包含li、ol包含li、dl包含dt和dd等等。還有不少是獨立的標籤，咱們如何來使用它編寫更優秀的頁面，下面就說說

1. 塊級元素與塊級元素平級、內嵌元素與內嵌元素平級

<div><span></span><p></p></div>  //span是行內元素，p是塊級元素，因此這個是錯誤的嵌套

<div><span></span><a></a></div>  //對的

2. 塊元素能夠包含內聯元素或某些塊元素，但內聯元素不能包含塊元素，它只能包含其它的內聯元素

<div><span></span></div>
<span><span></span></span>

3. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素 h一、h二、h三、h四、h五、h六、p、dt 
4. 塊級元素不能放在標籤p裏面
5. li 標籤能夠包含 div 標籤，由於li 和 div 標籤都是裝載內容的容器

附件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML經常使用標籤</title>
    <style type="text/css">
        .poems{
            width: 20%;
            text-align: left;
            margin: 0 auto;
        }
        .title_test{
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        // alert('hello, 你好！');
    </script>
    <link rel="stylesheet" type="text/css" href="">
    <meta charset="utf-8" name="keywords" content="html,標籤，經常使用標籤">
    <meta charset="utf-8" name="description" content="這是一個介紹html經常使用標籤的頁面">
    <!-- <meta charset="utf-8" http-equiv="refresh" content="2;URL=http://www.sxmu.edu.cn"> -->
</head>
<body>
    <div class="title_test">
        <h1>一級標題</h1>
        <h2>二級標題</h2>
        <h3>三級標題</h3>
        <h4>四級標題</h4>
        <h5>五級標題</h5>
        <h6>六級標題</h6>
        標題
    </div>
    <div class="poems">
        <h1>熱愛生命</h1>
        <span>【做者】汪國真 【朝代】現代</span>
        <p>
            我不去想是否可以成功<br/>
            既然選擇了遠方<br/>
            便只顧風雨兼程<br/>
        </p>
        <p>
            我不去想可否贏得愛情<br/>
            既然鍾情於玫瑰<br/>
            就勇敢地吐露真誠<br/>
        </p>
        <p>
            我不去想身後會不會襲來寒風冷雨<br/>
            既然目標是地平線<br/>
            留給世界的只能是背影<br/>
        </p>
        <p>
            我不去想將來是平坦仍是泥濘<br/>
            只要熱愛生命<br/>
            一切，都在乎料之中<br/>
        </p>
    </div>
<hr style="border: 5; border-color: red;">
<div style="float: left;">
    <h3>帶語義的標籤</h3>
    <i>i標籤是斜體</i><br>
    <em>em標籤是斜體</em><br>
    <b>b表示關鍵字</b><br>
    <strong>strong表示很重要的內容，表示強調</strong><br>
    <strike>strike爲文字加一道中線</strike><br>
    <u>u表示下劃線</u><br>
    <s>s表示刪除</s><br>

    10<sup>3</sup>
    log<sub>e</sub>
    
</div>
<div style="float: right;margin-right: 200px;">
    <h1>特殊字符</h1>
    這個題選&nbsp;&nbsp;&nbsp;A<br>
    10 &gt; 9<br>
    9 &lt; 10<br>
    &copy;版權
    &reg;註冊
</div>

<a href="http://www.sxmu.edu.cn">
    <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3583547339,179351815&fm=58&bpow=602&bpoh=602" alt="這是一張圖片" title="山西醫科大學">
    山西醫科大學
</a>

    </body>
</html>

01_html經常使用標籤.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html列表</title>
</head>
<body>
<div>
    <h3>有序列表</h3>
    <ol>
        <li>學習html</li>
        <li>學習css</li>
        <li>學習js</li>
    </ol>

    <h3>無序列表</h3>
    <ul>
        <li>新聞標題一</li>
        <li>新聞標題二</li>
        <li>新聞標題三</li>
    </ol>

    <h3>自定義列表</h3>
    <dl>
        <dt>html</dt>
        <dd>負責頁面的結構</dd>
        
        <dt>css</dt>
        <dd>負責頁面的表現</dd>

        <dt>javascript</dt>
        <dd>負責頁面的行爲</dd>    
    </dl>
</div>




</body>
</html>

02_html列表.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表格</title>
</head>
<body>
    <table border="1" style="width: 400px;margin: 100px auto;" cellspacing="0">
        <thead>
            <tr style="background-color: #4cae4c;color: white;">
                <th>學號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th colspan="3">操做</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr>
                <td>1</td>
                <td>張三</td>
                <td>22</td>
                <td>增長</td> 
                <td>刪除</td>
                <td>修改</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>23</td>
                <td>增長</td>
                <td>刪除</td>
                <td>修改</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

03_html表格.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單</title>
    <style type="text/css">
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div style="width: 50%;margin: 0 auto;">
    <h3>form表單</h3>
    <form action="" method="POST">
        <p>用戶名：<input type="text" name="username" placeholder="請輸入用戶名"></p>
        <p>密碼：<input type="password" name="pwd" placeholder="請輸入密碼"></p>
        <p>性別：
            <input type="radio" name="gender" value="1" checked>男
            <input type="radio" name="gender" value="2">女
        </p>
        <p>出生日期
            <input type="date" name="birthday">
        </p>
        <p>愛好：
            <input type="checkbox" name="hobby" value="1">籃球
            <input type="checkbox" name="hobby" value="2">寫文章
            <input type="checkbox" name="hobby" value="3">計算機
        </p>
        <p>上傳頭像：
            <input type="file" name="image">
        </p>
        <p>籍貫：
            <select>
                <optgroup label="山西">
                <option value="1">太原</option>
                <option value="2">晉城</option>
                <option value="3">大同</option>
                <option value="4">忻州</option>
                <option value="5">臨汾</option>
                <optgroup label="河南">
                <option value="1">鄭州</option>
                <option value="2">開封</option>
                <option value="3">洛陽</option>
            </select>
        </p>
        <p>我的描述：
            <textarea name="desc" cols="30" rows="10"></textarea>
        </p>
        <input type="hidden" name="hid" value="10000">
        <input type="submit" value="提交" class="btn" style="background-color: #337ab7; color: white;">
        <input type="reset" value="重置" class="btn" style="background-color: #398439; color: #fff;">
        <input type="button" value="按鈕" class="btn">
    </form>
</div>
</body>
</html>

04_html表單.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面內跳轉</title>
    <style type="text/css">
        .head{
            height: 200px;
            background-color: #003366;
        }
        .menu{
            width: 850px;
            height: 50px;
            margin: 50px auto 0;
            padding: 0;
            font-size: 20px;
        }
        .menu li{
            width: 98px;
            height: 46px;
            display: inline-block;
            text-align: center;
            line-height: 46px;
        }
        .menu li a{
            color: white;
            text-decoration: none;
        }
        .menu li:hover{
            background-color: orange;
        }
        .menu a:hover{
            color: red;
        }
        .search{
            width: 800px;
            height: 100px;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="head">
    <a href="http://www.sxmu.edu.cn/" target="_blank"><img src="images/head-logo.png" alt="山西醫科大學"></a>
    <a href='http://www.sxmu.edu.cn/' style="float: right;margin: 40px 40px 0 0;"><img src="images/newxiaoxun.png" alt=""></a>
    <ul class="menu">
        <li><a href="index">首頁</a></li>
        <li><a href="survey">學校概況</a></li>
        <li><a href="guanli">管理機構</a></li>
        <li><a href="jiaoxue">教學單位</a></li>
        <li><a href="shizi">師資隊伍</a></li>
        <li><a href="xuesheng">學生工做</a></li>
        <li><a href="zhaosheng">招生信息</a></li>
        <li><a href="kexue">科學研究</a></li>
    </ul>
</div>

<div class="content">
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>

    <h1 id='title1'>標題一</h1>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1 id='title2'>標題二</h1>
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1 id='title3'>標題三</h1>
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1 id='title4'>標題四</h1>
    <a href="#title1">標題一</a>
    <a href="#title2">標題二</a>
    <a href="#title3">標題三</a>
    <a href="#title4">標題四</a>
    <p> HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。
    </p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</div>

</body>
</html>

05_html頁面內跳轉.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內嵌框架</title>
    <style type="text/css">
        .menu{
            width: 600px;
            height: 50px;
            list-style: none;
            margin:30px auto;
            font-size: 0;
        }
        .menu li{
            width: 140px;
            height: 46px;
            display: inline-block;
            border: 2px solid gold;
            text-align: center;
            line-height: 46px;
            font-size: 16px;
            background-color: blue;
        }
        .menu li a{
            color: gold;
            text-decoration: none;
        }
        .menu li:hover{
            background-color: orange;
        }
        .menu li a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="http://www.baidu.com" target="myframe">百度網</a></li>
        <li><a href="http://www.qq.com" target="myframe">騰訊網</a></li>
        <li><a href="https://www.taobao.com" target="myframe">淘寶網</a></li>
        <li><a href="https://www.sina.com.cn/" target="myframe">新浪網</a></li>
    </ul>
    <iframe src="http://www.baidu.com" width="100%" height="500" name="myframe"></iframe>
    <hr>
    <h3>01 經常使用標籤.html</h3>
    <iframe src="01_html經常使用標籤.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
    <hr>
    <h3>02 html列表.html</h3>
    <iframe src="02_html列表.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
    <hr>
    <h3>03 html表格.html</h3>
    <iframe src="03_html表格.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
    <hr>
    <h3>04 html表單.html</h3>
    <iframe src="04_html表單.html" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
</body>
</html>

06_內嵌框架.html

sublime

安裝包：連接：https://pan.baidu.com/s/1-coY-0R6q-vOPFIbd2XxTw 　　提取碼：61rh

{
    "expand_tabs_on_save": true,
    "font_size": 10,
    "ignored_packages":
    [
        "Markdown",
        "Vintage"
    ],
    "save_on_focus_lost": true,
    "tab_size": 4,
    "theme": "Default.sublime-theme",
    "translate_tabs_to_spaces": true
}

preferences:Settings-User

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。