http學習筆記
http
HTTP訊息由頭和體組成。
請求頭
請求訊息第一行為請求行：方法欄位（GET,POST和HEAD)，URL欄位，HTTP版本欄位。
Host:定義存放所請求物件的主機。
Connection:為close代表不想使用持久連線。
User-agent：指定使用者代理，即產生請求的瀏覽器的型別。
響應頭
響應頭第一行為狀態行：協議版本欄位，狀態碼欄位，原因短語欄位。
| 訊息 | 描述 |
|---|---|
| 200 | 成功 |
| 301 | 永久移動（自動跳轉） |
| 304 | 未修改 |
| 400 | 錯誤請求 |
| 404 | 未找到 |
| 500 | 伺服器內部錯誤 |
| 502 | 錯誤閘道器 |
| 505 | http版本不支援 |
Connectlon:為close表示告訴客戶將在傳送完後關閉tcp連線。
Data：指出響應訊息日期和時間。
Server：指出發出伺服器型別。
Last-Nodified:指出物件本身建立或最後修改日期或時間。
Content-Length:指出傳送物件的位元組數。
Content-Type:指出包含在附屬體中的對像文字型別。
URL概述
URL(統一資源定位符)
格式
http://<ip地址>/<埠號>/<路徑><?[查詢資訊]>
例如：http://www.openyourass.cn/book/index.html
http://:代表超文字傳輸協議。
www:代表一臺web（全球資訊網）伺服器。
openyourass.cn:代表裝有網頁伺服器的域名。
book/:代表該伺服器的子目錄。
index.html:是資料夾中一個HTML檔案。
HTML的設計與應用
簡單的HTML例項製作
<html> <!--html開始標記-->
<head> <!-- html頭資訊-->
<title>頁標題</title> <!-- 網頁標題標記-->
</head><!--html頭資訊結束標記 -->
<body bgcolor="black" text='#ffffff'><!-- 網頁主體標記-->
<center><!-- 居中格式標記-->
<h1>例項</h1><!--html內容一號標題標記 -->
</center><!-- 居中格式結束標記-->
<hr width=80%><!-- 輸出分格線標記-->
<p>顯示黑色背景，白色文字</p><!-- html段落的標記對-->
</body><!-- 頁面體中內容結束標記-->
</html>
標籤和元素
HTMl以標籤來標記網頁結構和顯示內容資料，成對的標籤被稱為容器。
HTMl標籤的屬性：是HTMl元素提供的附加資訊，總是“名稱=值”的形式。例如：<body bgcolor="black" text='#ffffff'>
HTML顏色設定：被W3C支援的：aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow。如果使用其他顏色需要使用16進位制顏色值如：bgcolor="#00ff00"
註釋：<!-- 被註釋的內容 -->
HTML字元實體：分為三部分&+實體名稱或#和實體編號+分號
例如：
空格 或者是 ；
HTML檔案主體結構
<html>
<head>
......
</head>
<body>
......
</body>
</html>
HTML文件頭部元素
<title>元素
給頁面指定一個標題。是<head>的子元素。
<base>元素
將相對url轉換為完整的絕對URL。指定頁面的基URL,其中target代表在何處開啟文件。
例如：<base href="URL" target="WINDOW_NAME"/>
<link>元素
用於建立到CSS樣式表的連線，描述兩個文件中的連線關係。
例如<link rel="stylesheet" type="text/css" href="style.css"/>
<meta>元素
定義檔案資訊的名稱，內容等。
<meta name="某個設定值" content="對該設定值進行補充說明的資訊"/>
<meta http-equiv="某個設定值" content="對該設定值進行具體補充說明的資訊"/>
示例：
<head>
<title>這是標題</title>
<meta name="keywords" content="HTML學習">
<meta name="description" content="HTML是web頁面的描述性語言“>
<meta name"author" content="路人甲"
<meta name="copyright" content="2020">
<meta http-equiv="Content-Type" content"text/html"; charset=UTF-8">
<base href="https://www.baidu.com/s?ie=UTF-8&wd=" target="_blank">
<link rel="archives" title="PHP" href="archver/"
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="include/js/common.js" type="text/javascript"></script>
</head>
HTML文件主體標記
<body>和</body>放置頁面中所有內容，如圖片，文字，表格，表單，超連線等。
示例
<html>
<body bgcolor="#FFFFE7" text="#FF0000" link="#3300FF" alink="#FF00FF" vlink="#9900FF">
</body>
</html>
body標籤常用屬性表
| 屬性 | 描述 |
|---|---|
| text | 設定頁面文字顏色 |
| bgcolor | 設定頁面背景顏色 |
| background | 設定頁面背景圖案 |
| bgproperties | 設定頁面的背景影像為固定，不隨頁面的滾動而滾動 |
| link | 設定頁面預設的連連結顏色 |
| alink | 設定滑鼠正在單擊時的連結顏色 |
| vlink | 設定訪問後連結文字的顏色 |
| topmargin | 設定頁面上的邊距 |
| leftmargin | 設定頁面的左邊距 |
通用HTML標籤屬性
| 屬性 | 描述 |
|---|---|
| id | 設定標籤的id |
| name | 設定標籤的名稱 |
| class | 設定標籤樣式的類選擇器 |
| style | 設定標籤樣式屬性 |
文字版面的編輯
格式標籤
定義網頁中文字的佈局如縮排，位置，換行控制，列表等。
常見的HTML格式標籤
| 標籤 | 描述 |
|---|---|
| <br> | 換行標籤 |
| <p> | 換段落標籤 |
| <center> | 居中對齊標籤 |
| <pre> | 預格式標籤，保留文字在原始碼中的格式 |
| <li> | 列表項的標記 |
| <ul> | 無序列表，使用<ul>作為無序的宣告，使用<li>作為每個專案的起始 |
| <ol> | 有序列表，可以顯示特定的專案順序，與無序列表使用方式相同 |
| <hr> | 水平分隔線標識，用於段落與段落之間的分隔 |
<html>
<head><title>格式標記測試網頁</title></head>
<body>
<p>一段文字</p>
<center>居中顯示</center>
<pre>
上邊
左邊 右邊
下邊
</pre>
<hr>
無順序列表：
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<hr>
有順序列表
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
</body>
</html>
文字標籤
強調某一部分文字
常見文字風格標籤
| 標籤 | 描述 |
|---|---|
| <hn> | 標題字標記，n為1-6 |
| <b> | 粗體字標籤 |
| <i> | 斜體字標籤 |
| <u> | 下畫線字型標籤 |
| <sub> | 文字下標字型標籤 |
| <sup> | 文字上標字型標籤 |
| <font> | 字型標記，使用該標記指定字型大小，顏色，字型等資訊 |
| <tt> | 打字機文字 |
| <cite> | 用於引證，舉例，通常為斜體字 |
| <em> | 表示強調，通常為斜體字 |
| <strong> | 表示強調，通常為粗體字 |
| <small> | 小型字型標籤 |
| <big> | 大型字型標籤 |
示例
<html>
<head>
<title>文字標記測試網頁</title>
</head>
<body>
<h1>使用<H1>輸出一號標題字型</h1>
<h2>使用<H1>輸出一號標題字型</h2>
<h3>使用<H1>輸出一號標題字型</h3>
<h4>使用<H1>輸出一號標題字型</h4>
<h5>使用<H1>輸出一號標題字型</h5>
<h6>使用<H1>輸出一號標題字型</h6>
<font face="楷體_GB2312" color="red" size="5">絕對字號為5的紅色楷體字</font><br>
<font face="宋體" color="green" size="+3">絕對字號為+3的綠色宋體字</font><br>
<font face="黑體" color="blue" size="-1">絕對字號為5的藍色黑體字</font><br>
<b>使用<B>標記輸出粗體字</b><br>
<u>使用<U>標記輸出帶有下劃線的文字</u><br>
<i>使用<I>標記輸出斜體字</i><br>
<tt>使用<TT>；標記輸出印表機文字</tt><br>
<cite>使用<CITE>；標記輸出引證，舉例的斜字型</cite><br>
<em>使用<EM>標記輸出強調的斜體字</em><br>
<strong>使用<STRONG>標記輸出強調的粗體字</strong><br>
<small>使用<SMALL>標記輸出小型的字型</small><br>
<big>使用<BIG>標記輸出大型的字型</big><br>
</body>
</html>
建立影像和連線
插入圖片
常用JPEG,GIF和PNG三種格式的圖片。語法如下：
<img src="URL" alt="text" width="num" height="num" border="num"/>
src:指定包含url路徑名的圖片檔案
alt：用於定義一個字串
width:定義影像的寬
height：定義影像高
border:用於指定影像邊界的寬度
<html>
<head><title>圖片插入示例</title></head>
<body>
<img src="images/1.jpg" alt="圖片1">
<img src="images/2.jpg" border="2">
<img src="images/1.jpg" width="80">
<img src="images/linux_logo.jpg" width="80" height="40">
</body>
</html>
建立描點和超連結
定義描點和超連結都是用<a>標記
<a href="URL" name="name" target="target">連結文字</a>
href:連結檔案的url路徑。
name:指定頁面描點名稱。
target:指定要開啟的連結所使用的瀏覽器視窗名稱。self：當前視窗開啟，blank:開啟新視窗開啟，parent:在父級視窗開啟，top:在頂層視窗開啟檔案
<html>
<head><title>建立描點和超連結示例</title></head>
<body>
<a name="anchor_one">
<a href="https://www.baidu.com/">以絕對url指定連結檔案地址</a><br>
<a href="link.html" target="_blank">在新的視窗中開啟以相對URL指定的檔案</a><br>
<a href="link.html"><img src="images/linux_logo.jpg" alt="影像連結"></a><br>
<a href="#anchor_one">連結到當前頁面的描點位置</a><br>
<a href="link.html#anchor_one">連結的其他頁面的描點位置</a><br>
</body>
</html>
使用HTML表格
基本結構
<table>
<caption>表格名稱</caption>
<tr>
<th>表頭單元格</th>
</tr>
<tr>
<td>單元格</td>
</tr>
</table>
<table>標籤
用於定義一張表格。
| 屬性 | 描述 |
|---|---|
| align | 指定表格在上一層標記中顯示的位置 |
| border | 指定表格外邊線的寬度 |
| width | 表示表格的寬度 |
| height | 表示表格的高度 |
| cellspacing | 設定表格單元格之間的間距 |
| cellpadding | 設定表格單元格內容與單元格邊框之間的距離 |
<caption>標籤
定義表格標題的位置，可以由align（左右）和valign（上下）屬性設定。位於<table>標籤內，表格行標籤<tr>之前。
<tr>標籤
定義一行標籤。
<th>和<td>標籤
插入單元格標籤
常用可選屬性
| 屬性 | 描述 |
|---|---|
| width/heigh | 單元格的寬和高 |
| avalign | 單元格內字畫的水平擺放 |
| valign | 單元格內字畫的垂直襬放 |
| rowspan | 設定當前單元格所跨越的行數 |
| colspan | 設定當前單元格所跨越的列數 |
表格示例
<html>
<head><title>表格使用示例</title></head>
<body>
<table> width="%80" border="1" cellpadding="3" cellspacing="0" align="center">
<caption><h1>學員表</h1></caption>
<tr><th colspan="3">學員基本資訊</th><th colspan="2">成績</th><tr>
<tr><th>姓名</th><th>性別</th><th>專業</th><th>課程</th><th>分數</th></tr>
<tr align="center">
<td>小封</td>
<td>男</td>
<td rowspan="2">計算機</td>
<td rowspan="2">PHP開發</td>
<td>86</td>
</tr>
<tr align="center">
<td>小影</td>
<td>女</td>
<td>98</td>
</tr>
</table>
</body>
</html>
框架結構
把瀏覽器視窗劃分為許多子視窗。每個視窗顯示不同的網頁，如果所有的框架標記要放在一個HTML文件中，那麼這個文件體標籤<body>要被框架集標籤<frameset>取代。
<frameset>標籤的屬性
| 屬性 | 描述 |
|---|---|
| cols | 用畫素數和%分隔左右視窗，”*“表示剩餘部分 |
| rows | 用畫素數和%分隔上下視窗，”*“表示剩餘部分 |
| frameborder | 為0表示不顯示邊框，為1表示顯示邊框 |
| border | 設定邊框粗細，預設值為5畫素 |
<frame>標籤
frame為表示子視窗，放在<frameset>下使用。常見屬性如下表：
| 屬性 | 描述 |
|---|---|
| src | 只是url地址 |
| name | 指示框架名稱，用於連線target標記 |
| noresize | 是不能調整視窗的大小 |
| scrolling | 指示滾動條(auto,yes,no) |
| frameborder | 指示是否要邊框（1，0） |
| border | 設定邊框粗細 |
程式碼示例
主窗體檔案
<html>
<head><title>使用框架</title></head>
<frameset rows="80.*" frameborder="1" border="5">
<frame src="top.html" name="top" scrooling="no" noresize/>
<frameset cols="200.*">
<frame src="menu.html" name="menu" scrolling="no" noresize/>
<frame src="main.html" name="main" noresize/>
</frameset>
</frameset>
</html>
大類選項窗體檔案top.html
<html>
<head><title>標題文件</title></head>
<body>
<center><h2>後臺管理系統></h2></center>
<p>
<a href="menu.html" target="menu">一</a> ||
<a href="menu2.html" target="menu">二</a> ||
<a href="menu3.html" target="menu">三</a>
</p>
</body>
</html>
選單選項窗體檔案menu.html
<html>
<head><title>標題</title></head>
<body>
<center><h3>大類選單<h3></center>
<p>
<a href="main.html" target="main">一</a><br>
<a href="main2.html" target="main">二</a><br>
<a href="main3.html" target="main">三</a><br>
</p>
</body>
</html>
內容窗體檔案main.html
<html>
<head><title>無標題文件</title></head>
<body>
<center><h4>大類管理一>管理選項1>內容設定<h4></center>
</body>
</html>
HTML表單設計
建立：使用<from></from>建立
<from>標籤屬性表（該標籤必須定義action屬性。
| 屬性 | 描述 |
|---|---|
| name | 表單名稱 |
| method | 定義獲取資訊的方式GET或POST |
| action | 處理程式的程式名（URL) |
| enctype | 設定表單資料的編碼方式 |
| target | 指定目標視窗和目標幀 |
<input>標籤
該標籤包含在<from>標籤內。用來定義一個使用者輸入區。
<input type="text" name="filed_name" value="filed-value" size="n" maxlength="n"> <input type="password" name="file_name" value="filed_value" size="n" maxlength="n">
常用屬性表
| 屬性 | 描述 |
|---|---|
| type | 輸入域型別（text,password) |
| name | 控制元件名稱 |
| value | 指定控制元件初始值（內容） |
| size | 指定控制元件寬度 |
| maxlength | 允許使用者輸入的最大字元數 |
<from>下屬性和標籤的用法
| 屬性 | 用法 |
|---|---|
| type | 值為“submit","reset","button"時代表提交，重置和普通按鈕 |
| type | 為”checkbox"和“radio"時分別代表核取按鈕和單選按鈕，可以通過checked值設定為選中狀態 |
| type | type值為“hidden"建立一個隱藏域 |
| <textarea> | 使用該標籤製作多行文字域，其屬性有name,rows,cols,value |
| <select> | 該標籤代表選單下拉選單，其屬性有multiple,name和size。加入multiple代表是可多選的列表。其下可以用<option>標籤指定選項，<option>的屬性selected指定預設選項，value給標籤指定選項賦值 |
例項：
<html>
<head><title>學員基本資訊</title></head>
<body>
<table align="center" width="500" border="0" cellpadding="2" cellspacing="0">
<caption align="center"><h2>學員基本資訊<h2></caption>
<from action="server.php" method="post">
<tr>
<th>姓名：</th>
<td><input type="text" name="username" size="20"></td>
</tr>
<tr>
<th>性別：</th>
<td>
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="0">保密
</td>
</tr>
<tr>
<th>學歷:</th>
<td>
<select name="edu">
<option>--請選擇--</option>
<option value="1">高中</option>
<option value="2">大專</option>
<option value="3">本科</option>
<option value="4">研究生</option>
<option value="5">其他</option>
</select>
</td>
</tr>
<tr>
<th>選修課程：</th>
<td>
<input type="checkbox" name="course[]" value="4">linux
<input type="checkbox" name="course[]" value="5">Apache
<input type="checkbox" name="course[]" value="6">Mysql
<input type=""checkbox" name="course[]" value="7">PHP
</td>
</tr>
<tr>
<th>自我評價：</th>
<td><textarea name="eval" rows="4" cols="40"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交”>
<input type="reset" name="reset" value="重置">
</td>
</tr>
</from>
</table>
</body>
</html>
相關文章
- Web之http學習筆記WebHTTP筆記
- 關於http(自己的學習筆記)HTTP筆記
- Web開發學習筆記——HTTP 概述Web筆記HTTP
- HTTP2基本概念學習筆記HTTP筆記
- HTTP Client 學習筆記 (一) 初遇篇HTTPclient筆記
- Golang 學習筆記（一） - HTTP 客戶端 - 基礎Golang筆記HTTP客戶端
- numpy的學習筆記\pandas學習筆記筆記
- <node.js學習筆記(4)>stream和http模組Node.js筆記HTTP
- 《圖解HTTP》學習筆記（附帶WebSocket知識點）圖解HTTP筆記Web
- HTTP 1.x 學習筆記 —— Web 效能權威指南HTTP筆記Web
- 學習筆記筆記
- Golang 學習筆記（二） - HTTP 客戶端 - 使用 Client 型別Golang筆記HTTP客戶端client型別
- 【學習筆記】數學筆記
- 《JAVA學習指南》學習筆記Java筆記
- 機器學習學習筆記機器學習筆記
- 學習筆記-粉筆980筆記
- 學習筆記（3.29）筆記
- 學習筆記（4.1）筆記
- 學習筆記（3.25）筆記
- 學習筆記（3.26）筆記
- JavaWeb 學習筆記JavaWeb筆記
- golang 學習筆記Golang筆記
- Nginx 學習筆記Nginx筆記
- spring學習筆記Spring筆記
- gPRC學習筆記筆記
- GDB學習筆記筆記
- 學習筆記（4.2）筆記
- 學習筆記（4.3）筆記
- 學習筆記（4.4）筆記
- Servlet學習筆記Servlet筆記
- 學習筆記（3.27）筆記
- jest 學習筆記筆記
- NodeJS學習筆記NodeJS筆記
- WebSocket 學習筆記Web筆記
- mount 學習筆記筆記
- mapGetters學習筆記筆記
- jQuery學習筆記jQuery筆記
- 學習筆記：ＤＤＰＧ筆記