1. 程式人生 > >前端之HTML(一)

前端之HTML(一)

BE 二維 格式 雙標簽 color pen 腳本 AC tip

一、初識HTML

1.1、web服務本質

import socket
sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
sock.bind(("127.0.0.1",8080))
sock.listen(5)
while 1:
    conn,addr=sock.accept()
    data=conn.recv(1024)
    print("data",data.decode("utf8"))
    with open("index.html","r") as f:
        response=f.read()  #可以吧html放在一個文檔裏面讀出來
    conn.send((
"HTTP/1.1 201 OK\r\n\r\n%s"%response).encode("utf8"))

瀏覽器發送請求->HTTP協議->服務端接收請求->服務端返回響應->服務端把響應的請求發給瀏覽器->瀏覽器渲染頁面

1.2、html是什麽

  1. 超文本標記語言(Hypertext Markup Language, HTML)是一種創建網頁的標記語言
  2. 本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器,對同一個標簽可能會有不同的解釋。(兼容性問題)
  3. 網頁文件的擴展名:.html或.htm

1.3、html不是什麽

  HTML是一種標記語言(markup language),它不是一種編程語言。

技術分享圖片

1.4、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">。

1.5、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樣式)

二、常用標簽

2.1、<!DOCTYPE> 標簽

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位於 <html> 標簽之前。

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

2.2、head內常用標簽

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

2.2.1、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 name="description" content="北京汽車網,北京汽車報價,北京車市最新報價,北京汽車報道,北京易車網,北京汽車團購服務">

2.2.2、非meta標簽

<link rel="icon" href="http://www.jd.com/favicon.ico">  <!--設置頭部圖標,,就像我們打開百度網址上會有百度的小圖標-->
<link rel="stylesheet" href="css.css">    #加載css
<script src="hello.js"></script> #加載js

2.3、body內常用標簽

2.3.1、標簽分類

標簽的分類一:

  自閉合標簽:單標簽
  閉合標簽:雙標簽

標簽的分類二:

  塊級標簽:就是獨占一行,可以自行設置寬高!如: div,p,h1-h6

  內聯標簽:按內容占位,高度和廣度是由自己的內容填充的 如: a,br,img

判斷塊級標簽和內聯標簽的方法:

  1.是否獨占一行(可以通過設置背景顏色去判斷)

  2.是否可以單獨為元素設置高度和寬度。

2.3.2、基本標簽

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

<p>段落標簽</p>

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

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

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

2.3.3、特殊字符

內容對應代碼
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版權 &copy;
註冊 &reg;

2.3.4、div和span標簽

div標簽用來定義一個塊級元素,並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
span標簽用來定義內聯(行內)元素,並無實際的意義。主要通過CSS樣式為其賦予不同的表現。

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

註意:

關於標簽嵌套:通常塊級元素可以包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其它內聯元素。

p標簽不能包含塊級標簽。

2.3.6、img標簽

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="" height="高(寬高兩個屬性只用一個會自動等比縮放)">

2.3.7、a標簽

超鏈接標簽

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

技術分享圖片
 1 什麽是URL?
 2 URL是統一資源定位器(Uniform Resource Locator)的縮寫,也被稱為網頁地址,是因特網上標準的資源的地址。
 3 URL舉例
 4 http://www.sohu.com/stu/intro.html
 5 http://222.172.123.33/stu/intro.html
 6 
 7 URL地址由4部分組成
 8 第1部分:為協議:http://、ftp://
 9 第2部分:為站點地址:可以是域名或IP地址
10 第3部分:為頁面在站點中的目錄:stu
11 第4部分:為頁面名稱,例如 index.html
12 各部分之間用“/”符號隔開。
什麽是url
<a href="http://www.baidu.com" target="_blank" >點我</a>

href屬性指定目標網頁地址。該地址可以有幾種類型:

  • 絕對URL - 指向另一個站點(比如 href="http://www.jd.com)
  • 相對URL - 指當前站點中確切的路徑(href="index.htm")
  • 錨URL - 指向頁面中的錨(href="#top")

target:

  • _blank表示在新標簽頁中打開目標網頁
  • _self表示在當前標簽頁中打開目標網頁

2.3.8、列表

1.無序列表

<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>

2.3.9、表格

表格是一個二維數據空間,一個表格由若幹行組成,一個行又有若幹單元格組成,單元格裏可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式(即按行和列組織)的數據。
表格的基本結構:

    <table>
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>

屬性:

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

2.3.10、form表單

功能:

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

表單能夠包含input系列標簽,比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label標簽。

表單屬性

屬性含義
action URL 指定一個表單處理目標URL,表單數據將被提交到該URL地址的處理程序。如果該屬性值為空,則提交到文檔自身。
method get或post 將表單數據提交到http服務器的方法,默認為get
enctype application/x-www-form-urlencoded 指定表單數據的編碼類型,此屬性只有在method屬性設置為post時才有效。默認值為application/x-www-form-urlencode對所有字符進行編碼。如果表單包含用於文件上傳的控件(input type="file"),那麽這個屬性值必須設置為multipart/form-data,不對字符進行編碼。

表單元素

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

2.3.11、input系列

type屬性值表現形式對應代碼
text 單行輸入文本 <input type=text" />
password 密碼輸入框 <input type="password" />
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" value="隱藏按鈕" />
file 文本選擇框 <input type="file" />

類型(type)說明:

  • text:文本輸入框
  • password:密碼輸入框
  • radio:單選框
  • checkbox:多選框
  • submit:提交按鈕
  • button:可點擊的按鈕,沒有任何行為,一般配合JS使用
  • hidden:對用戶不可見,通常用於修改某條數據時,記錄數據的id值
  • file:提交文件 form表單需要加上enctype="multipart/form-data",method="post"

屬性說明:

  • name:表單提交時的“鍵”,註意和id的區別
  • value:表單提交時對應項的值
    • type="button", "reset", "submit"時,為按鈕上顯示的文本年內容
    • type="text","password","hidden"時,為輸入框的初始值
    • type="checkbox", "radio", "file",為輸入相關聯的值
  • checked:radio和checkbox默認被選中的項
  • readonly:text和password設置只讀
  • disabled:所有input均適用

2.3.12、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:定義提交時的選項值

2.3.13、label標簽

定義:<label> 標簽為 input 元素定義標註(標記)。
說明:

    1. label 元素不會向用戶呈現任何特殊效果。
    2. <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action="">
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

2.3.14、textarea標簽

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

屬性說明:

  • name:名稱
  • rows:行數
  • cols:列數
  • disabled:禁用

前端之HTML(一)