http學習筆記

duoduowangjia發表於2020-11-13
HTTP筆記

http

HTTP訊息由頭和體組成。

請求頭

請求訊息第一行為請求行：方法欄位（GET,POST和HEAD)，URL欄位，HTTP版本欄位。

Host:定義存放所請求物件的主機。

Connection:為close代表不想使用持久連線。

User-agent：指定使用者代理，即產生請求的瀏覽器的型別。

響應頭

響應頭第一行為狀態行：協議版本欄位，狀態碼欄位，原因短語欄位。

訊息描述
200成功
301永久移動（自動跳轉）
304未修改
400錯誤請求
404未找到
500伺服器內部錯誤
502錯誤閘道器
505http版本不支援

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字元實體：分為三部分&+實體名稱或#和實體編號+分號

例如：

空格 &nbsp;或者是&#160；

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>使用&lt;H1&gt;輸出一號標題字型</h1>
        <h2>使用&lt;H1&gt;輸出一號標題字型</h2>
        <h3>使用&lt;H1&gt;輸出一號標題字型</h3>
        <h4>使用&lt;H1&gt;輸出一號標題字型</h4>
        <h5>使用&lt;H1&gt;輸出一號標題字型</h5>
        <h6>使用&lt;H1&gt;輸出一號標題字型</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>使用&lt;B&gt;標記輸出粗體字</b><br>
        <u>使用&lt;U&gt;標記輸出帶有下劃線的文字</u><br>
        <i>使用&lt;I&gt;標記輸出斜體字</i><br>
        
        <tt>使用&lt;TT&gt；標記輸出印表機文字</tt><br>
        <cite>使用&lt;CITE&gt；標記輸出引證，舉例的斜字型</cite><br>
        <em>使用&lt;EM&gt;標記輸出強調的斜體字</em><br>
        <strong>使用&lt;STRONG&gt;標記輸出強調的粗體字</strong><br>
        <small>使用&lt;SMALL&gt;標記輸出小型的字型</small><br>
        <big>使用&lt;BIG&gt;標記輸出大型的字型</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值設定為選中狀態
typetype值為“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>

 

相關文章