HTML https://www.cnblogs.com/yuanchenqi/articles/5976755.html

 

HTML介紹

 

前端概述 

 

複製代碼
import socket

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8089))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        buf = connection.recv(1024)

        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

        connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))

        connection.close()

if __name__ == '__main__':

    main()
複製代碼

html css 以及js的關係

HTML的學習

HTML 是什麼?

htyper text markup language  即超文本標記語言javascript

超文本: 就是指頁面內能夠包含圖片、連接,甚至音樂、程序等非文字元素。css

標記語言: 標記(標籤)構成的語言.html

 

網頁==HTML文檔,由瀏覽器解析,用來展現的前端

靜態網頁:靜態的資源,如xxx.htmljava

動態網頁:html代碼是由某種開發語言根據用戶請求動態生成的python

html文檔樹形結構圖:web

                      

 

什麼是標籤

  • 是由一對尖括號包裹的單詞構成 例如: <html> *全部標籤中的單詞不可能以數字開頭.
  • 標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
  • 標籤分爲兩部分: 開始標籤<a> 和 結束標籤</a>. 兩個標籤之間的部分 咱們叫作標籤體.
  • 有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img />
  • 標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>

標籤的屬性

  • 一般是以鍵值對形式出現的. 例如 name="alex"
  • 屬性只能出如今開始標籤 或 自閉和標籤中.
  • 屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
  • 若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly

<!DOCTYPE html>標籤

      因爲歷史的緣由,各個瀏覽器在對頁面的渲染上存在差別,甚至同一瀏覽器在不一樣版本中,對頁面的渲染也不一樣。在
W3C標準出臺之前,瀏覽器在對頁面的渲染上沒有統一規範,產生了差別(Quirks mode或者稱爲Compatibility
Mode);因爲W3C標準的推出,瀏覽器渲染頁面有了統一的標準(CSScompat或稱爲Strict mode也有叫作Standars
mode),這就是兩者最簡單的區別。
      W3C標準推出之後,瀏覽器都開始採納新標準,但存在一個問題就是如何保證舊的網頁還能繼續瀏覽,在標準出來之前,
不少頁面都是根據舊的渲染方法編寫的,若是用的標準來渲染,將致使頁面顯示異常。爲保持瀏覽器渲染的兼容性,使以
前的頁面可以正常瀏覽,瀏覽器都保留了舊的渲染方法(如:微軟的IE)。這樣瀏覽器渲染上就產生了Quircks mode
和Standars mode,兩種渲染方法共存在一個瀏覽器上。編程

window.top.document.compatMode:
//BackCompat:怪異模式,瀏覽器使用本身的怪異模式解析渲染頁面。 
//CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。

       這個屬性會被瀏覽器識別並使用,可是若是你的頁面沒有DOCTYPE的聲明,那麼compatMode默認就是BackCompat,瀏覽器

這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面,那麼,在不一樣的瀏覽器就會顯示不一樣的樣式。安全

    若是你的頁面添加了<!DOCTYPE html>那麼,那麼就等同於開啓了標準模式,那麼瀏覽器就得老老實實的按照W3C的

標準解析渲染頁面,這樣一來,你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的做用。

head標籤

<meta>

         meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不一樣的屬性又有不一樣的參數值,這些不一樣的參數值就實現了不一樣的網頁功能。

        1: name屬性主要用於描述網頁,與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。     

?
1
2
3
<meta name = "keywords" content = "meta總結,html meta,meta屬性,meta跳轉" >
 
<meta name = "description" content = "老男孩培訓機構是由一個老的男孩建立的" >

        2: http-equiv顧名思義,至關於http的文件頭做用,它能夠向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容,與之對應的屬性值爲content,              content中的內容其實就是各個參數的變量值。   

?
1
2
3
4
5
<meta http - equiv = "Refresh" content = "2;URL=https://www.baidu.com" > / / (注意後面的引號,分別在秒數的前面和網址的後面)
 
<meta http - equiv = "content-Type" charset = UTF8">
 
<meta http - equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /

 

 注意:X-UA-Compatible

每一個主要版本IE新增的功能都是爲了讓瀏覽器更容易使用、增長安全性及更支持業界標準。以這些做爲IE的特點,其中
一個風險就是舊版本網站沒法正確的顯示。

爲了將這個風險降到最低,IE6容許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"爲預設,這會
使頁面以舊版本瀏覽器的視點顯示,"Standards mode"(也稱爲"strict mode")特色是支持業界標準最爲完善。
然而要利用這個加強的支持功能,網頁必須包含恰當的<!DOCTYPE>指令。

若一個網頁沒有包含<!DOCTYPE>指令,IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏
覽器沒法辨識,IE6會將它以IE6 standards mode顯示。由於少數網站已經包含<!DOCTYPE>指令,兼容性模式的
切換至關成功。這使網頁開發人員能選擇將他們的網頁轉移爲standards mode的最佳時機。

隨著時間通過,更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來講,IE6
不支持universal selector(即css之全局選擇器 * {}),一些網站便使用它來針對IE作特定的對應。

當 IE7增長了對全域選擇器的支持,那些依賴IE6特色的網站便沒法偵測出這個新版本的瀏覽器。所以那些針對IE的
特定對應沒法應用於IE7,形成這些網站便沒法如他們預期的顯示。因爲<!DOCTYPE>只支持兩種兼容性模式,受到影
響的網站擁有者被迫更新他們的網站使其能支持IE7。

IE8 比以前的任何版本瀏覽器都更支持業界標準,所以針對舊版本瀏覽器設計的網頁可能沒法如預期般呈現。爲了幫
助減輕全部問題,IE8引入文件兼容性的概念,使你能選擇你的網頁設計要對應的特定IE版本。文件兼容性在IE8增長
了一些新的模式,這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁沒法在 ie8正確的顯示,你能夠更新
你的網站使它支持最新的網頁標準(優先選項)或在你的頁面上新增一個meta元素用於告訴IE8如何依照舊版本瀏覽器
編譯你的頁面。

這能讓你選擇將你的網站更新支持IE8新特色的時機。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時,它將使用 <!DOCTYPE> 指令來確
定如何顯示該網頁。 若是該指令丟失或未指定基於標準的文檔類型,則 Internet Explorer 8 將以 IE5 模式
(Quirks 模式)顯示該網頁。
View Code

 非meta標籤

    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script> 

body標籤

一 基本標籤(塊級標籤和內聯標籤

複製代碼
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

<div><span>
複製代碼

塊級標籤:<p><h1><table><ol><ul><form><div>

內聯標籤:<a><input><img><sub><sup><textarea><span>

block(塊)元素的特色

 老是在新行上開始;
 寬度缺省是它的容器的100%,除非設定一個寬度。
 它能夠容納內聯元素和其餘塊元素

inline元素的特色

和其餘元素都在一行上;
寬度就是它的文字或圖片的寬度,不可改變
內聯元素只能容納文本或者其餘內聯元素

特殊字符

      &lt; &gt;&quot;&copy;&reg;

二 圖形標籤: <img> 

複製代碼
src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
複製代碼

三 超連接標籤(錨標籤)<a>

複製代碼
href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.

name: 定義一個頁面的書籤.

用於跳轉 href : #id.(錨)
複製代碼

四 列表標籤:

複製代碼
<ul>: 無序列表

<ol>: 有序列表
         <li>:列表中的每一項.
<dl> 定義列表 <dt> 列表標題 <dd> 列表項
複製代碼

五 表格標籤: <table>

複製代碼
border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素 百分比.(最好經過css來設置長寬)

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

colspan:  單元格橫跨多少列(即合併單元格)

<th>: table header <tbody>(不經常使用): 爲表格進行分區.
複製代碼

六 表單標籤<form>

      表單用於向服務器傳輸數據。

      表單可以包含 input 元素,好比文本字段、複選框、單選框、提交按鈕等等。

      表單還能夠包含textarea、select、fieldset和 label 元素

1.表單屬性

  HTML 表單用於接收不一樣類型的用戶輸入,用戶提交表單時向服務器傳輸數據,從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中.

            action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據(即表單元素值)做相應處理,好比https://www.sogou.com/web

            method: 表單的提交方式 post/get 默認取值 就是 get(信封)

                          get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

                          post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

                          get/post是常見的兩種請求方式.

2.表單元素

           <input>  標籤的屬性和對應值              

複製代碼
type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別?

             file 提交文件:form表單須要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.注意和id屬性的區別:name屬性是和服務器通訊時使用的名稱;而id屬性是瀏覽器端使用的名稱,該屬性主要是爲了方便客
戶端編程,而在css和javascript中使用的
 value:   表單提交項的值.對於不一樣的輸入類型,value 屬性的用法也不一樣:
?
1
2
3
4
5
type = "button" , "reset" , "submit" - 定義按鈕上的顯示的文本
 
type = "text" , "password" , "hidden" - 定義輸入字段的初始值
 
type = "checkbox" , "radio" , "image" - 定義與輸入相關聯的值  
 checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.
複製代碼

上傳文件注意兩點:

 1 請求方式必須是post

 2 enctype="multipart/form-data"

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')
上傳文件                 

          <select> 下拉選標籤屬性

複製代碼
          name:表單提交項的鍵.

          size:選項個數

          multiple:multiple 

                 <option> 下拉選中的每一項 屬性:

                       value:表單提交項的值.   selected: selected下拉選默認被選中

                 <optgroup>爲每一項加上分組
複製代碼

          <textarea> 文本域              

name:    表單提交項的鍵.
cols: 文本域默認有多少列
rows: 文本域默認有多少行

    <label>    

?
1
2
<label for = "www" >姓名< / label>
< input id = "www" type = "text" >

    <fieldset>

?
1
2
3
4
<fieldset>
     <legend>登陸吧< / legend>
     < input type = "text" >
< / fieldset>
相關文章
相關標籤/搜索