HTML-1

時間 2019-11-08
標籤 html 欄目 HTML 简体版
原文原文鏈接
********HTML********


**Web服務本質**

import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http協議 簡化
    conn.send(b"<h1>Hello world!</h1>")#發送內容
    conn.close()
sk.close()

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


What HTML?

*超文本標記語言（Hypertext Markup Language，HTML）是一種用於建立網頁標記語言

*本質上是瀏覽器可識別的規則，咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的頁面。
對於不一樣的瀏覽器，對於同一個標籤可能會有不一樣的解釋。（兼容性問題）

*網頁文件的擴展名：.html或.htm

*HTML是一種標記語言，他不是一種編程語言，HTML使用標籤來描述網頁。


****HTML文檔結構****

*最基本的HTML文檔**
<!DOCTYPE html>
<html lang = 'zh-CN'>
<head>
    <meta chrset = 'UTF-8'>
    <title> 標題 </title>
</head>
<body>

</body>
</html>

#解釋

1.<!DOCTYPE html>聲明爲HTML5文檔

2.<html></html>是文檔的開始標記語言和結束標記，是HTML頁面的根本元素，在他們之間是文檔的頭部(head)和主題(body)

3.<head></head>定義了HTML文檔的開頭部分。他們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據

4.<title></title>定義了網頁標題，在瀏覽器標題欄顯示

5.<body></body>之間的文本是可見的網頁主體內容

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

****HTML標籤格式****

*HTML標籤是由尖括號包圍的關鍵字
*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>標籤****

<!DOCTYPE> 聲明必須是HTML文檔的第一行，位於<html>標籤以前
<!DOCTYPE> 聲明不是HTML標籤，他是指示web瀏覽器關於頁面使用哪一個HTML版本進行編寫的指令

****HTML經常使用標籤****


**head內經常使用的標籤**

1.<title></title> 定義網頁的標題
2.<style></style> 定義內部樣式表
3.<script><script>定義JS代碼或引入外部JS文件
4.<link/> 引入外部樣式文件
5.<meta/>定義網頁原信息

****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.baidu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

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

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="Python">


******body內經常使用表標籤******

****基本標籤（塊級標籤和內聯標籤）****

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<a>刪除</a>

<p>段落標籤</p>

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

<!--換行-->
<br>

<!--水平線-->
<hr>


****特殊字符****

空格------&nbsp;
>--------&gt;
<--------&lt;
&--------&amp;
￥--------&yen;
版權(©️)---&copy;
註冊(®️)---&reg;



****div標籤和span標籤****

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

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

注意：

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

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

****img標籤****

<img src='圖片路徑' alt='圖片未加載成功時的提示' title='鼠標懸浮時提示信息' width='寬' height='高（寬高只有一個會等比縮放）'>

****a標籤****
超連接標籤

所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，
也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，
甚至是一個應用程序。

什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
URL舉例
http://www.baidu.com/stu/index.html
http://111.13.100.91/stu/index.html

URL地址由4部分組成
第1部分：爲協議：http://、ftp://等 
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。

<a href='https://www.baidu.com' target='_blank'>點擊我</a>

href屬性指定目標網頁地址。該地址能夠有幾種類型：
1.絕對URL-指向另外一個站點（不如 href = 'https://www.baidu.com'）
2.相對URL-指向當前站點中確切的路徑（href = 'index.html'）
3.錨URL-指向頁面中的錨（href = '#top'）

target:
1._blank表示在新標籤頁中打開目標頁面
2._self表示在當前標籤頁中打開目標頁面

****列表*****

1.無序列表 

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

type屬性：
1.disc（實心圓點，默認值）
2.circle（空心圓圈）
3.square（實行方塊）
4.none（無樣式）

2.有序列表
<ol type="1" start="2">
    <li>第一項</li>
    <li>第二項</li>
</ol>

type屬性：
1.1數字列表，默認值
2.A大寫字母
3.a小寫字母
4.I大寫羅馬
5.i小寫羅馬


3.標題列表

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


****表格****

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

表格基本結構：

<table>
    <thead>
        <tr>
            <th>序號</th>
            <th>姓名</th>
            <th>愛好</th>
        </tr>
    </theaf>
    <tbody>
        <tr>
            <td>1</td>
            <td>tom</td>
            <td>吃老鼠</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacl</td>
            <td>吃奶酪</td>
        </tr>
    </tbody>
</table>



屬性：
1.border：表格邊框
2.cellpadding：內邊距
3.cellspacing：外邊距
4.width：像素百分比（最好經過css來設置長度）
5.rowspan：單元格豎跨多少行
6.colspan：單元格橫跨多少列（即合併單元格）

****form（表單）****

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

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

表單還能夠包含textarea、select、fieldest和lable標籤


***表單屬性

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

***表單元素

基本概念：

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


******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"  />


屬性說明：

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


******select標籤******

<from action="" method="post">
    <select name="city" id="city">
        <option value="1">北京</option>
        <option selected="selected" value="2">成都</option>
        <option value="3">西安</option>
    </select>
</form>

屬性說明：

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


******lable標籤******

定義：<lable>標籤爲input元素定義標註（標記）

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

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



******textarea多行文本******

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

屬性說明：
1.name:名稱
2.rows:行數
3.cols:列數
4.disable:禁用
相關標籤/搜索
html1
HTML
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。