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()
瀏覽器輸入網址回車都發生了什么？
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面
- 瀏覽器 給服務端 發送了一個消息
- 服務端拿到消息
- 服務端返回消息
- 瀏覽器展示頁面
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文檔結構
首先來看一下HTML文檔樹
一個html的基本結構如下：
<!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">
HTML文檔類型
| 版本 |
年份 |
| 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>
兩種文檔的區別
1、文檔聲明和編碼聲明
2、html5新增了標簽元素以及元素屬性
HTML標簽
一、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注釋
<!--注釋內容-->
二、<!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常用標簽
一、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學院">
二、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>
2、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>
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>
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),
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.內聯標簽和快標簽（是否獨占一行）
塊元素，也可以稱為行元素，布局中常用的標簽如：div、p、ul、li、ol,h1~h6、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表示定義列表等，語義化的標簽不多。
二、嵌套的規則
雖然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. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素 h1、h2、h3、h4、h5、h6、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> 這個題選 A<br> 10 > 9<br> 9 < 10<br> ©版權 ®注冊 </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>
<!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>
<!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>
<!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>
<!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>
<!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>
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 }