day042前端之HTML

時間 2019-11-12

標籤 day042 day 前端 html 欄目 HTML 简体版

原文原文鏈接

本節內容：

一、HTML的介紹
二、HTML文檔結構
三、HTML經常使用標籤

1、HTML的介紹

一、web服務的本質

web實際上就是一個socket服務端，
流程：
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應
--> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面

服務端css

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") conn.send(b"<h1>Hello world!</h1>") conn.close()

二、HTML是什麼？

1.超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。

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

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

三、HTML不是什麼？

HTML是一種標記語言（markup language），它不是一種編程語言。

HTML使用標籤來描述網頁。
不像python編程語言同樣，有邏輯什麼的，這個標記語言是沒有邏輯的

2、HTML文檔結構

一、最基本的HTML文檔：

<!DOCTYPE html>
<html lang="zh-CN">   #這個language表示語言，zh-CN是中文的意思，就是說，你整個文檔的內容以中文爲主，若是以英文爲主，就寫成lang='en'

<head>
  <meta charset="UTF-8">
  <title>css樣式優先級</title>
</head>
<body>

</body>
</html>

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

二、<html></html>是文檔的開始標記和結束的標記。
是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。

3.<head>、</head>定義了HTML文檔的開頭部分。
它們之間的內容不會在瀏覽器的文檔窗口顯示。
包含了文檔的元（meta）數據，配置信息等，是給瀏覽器看的，你看到的是在body標籤裏面寫的。

4.<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
（修改一下title中的內容，而後看一下瀏覽器，你就會發現title是什麼了，就是瀏覽器上面的小標題）

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

注意：對於中文網頁須要使用聲明編碼，不然會出現亂碼。
有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲。html

pycharm中建立一個html文件，你就會發現，整個結構都給你直接生成好了，
由於無論什麼瀏覽器，這個文檔結構都是這樣的。
pycharm能夠直接點擊瀏覽器，打開寫好的HTML文件，
你會發現地址欄是種file:///這也是一個協議，瀏覽器打開本身本地文件的協議。python

二、HTML標籤格式，嚴格封閉

HTML標籤一般是成對出現的，好比：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。

HTML標籤是由尖括號包圍的關鍵字如：<div>、<html>等，

也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg" />等。

標籤裏面能夠有若干屬性，也能夠不帶屬性。

三、標籤的語法

第一種寫法：（成對出現的）
<標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」……>內容部分</標籤名>

第二種寫法：（單獨呈現的）
<標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」…… />

有些屬性是沒有特殊的效果的，而有些屬性是有效果的，
好比 <h1 s='name'>xxx<h1/>，其中s='name'是沒什麼效果的，
而<a src='http://www.baidu.com'>xxx</a>，你會看到一些效果，能夠點擊，有下劃線，有顏色。

四、幾個很重要的屬性

一、id
定義標籤的惟一ID，HTML文檔樹中惟一，id不能重複
寫在標籤裏面，不是被標籤包圍，<span id="1"></span>
用來區分頁面上的標籤，咱們就能夠經過id來快速查找到這個標籤

二、class
爲html元素定義一個類名（class="類名"）,<div class="c1"></div>
或者多個類名（class="類名1 類名2 ···"）
(CSS樣式類名) 詳見下一篇css

三、style
成對的被<head>M</head>,夾住
規定元素的行內樣式（css樣式）

如何註釋：
<!--註釋內容-->
#找到一行內容ctrl+/就能註釋，註釋的內容不會在網頁上顯示出來

五、標籤

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。

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

3、HTML經常使用標籤

一、head內經常使用標籤

二、Meta標籤（head裏的內容,瞭解）

Meta標籤介紹： #做爲了解內容

<meta>元素可提供有關頁面的元信息（meta-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。

一、meta標籤共有兩個屬性，（瞭解）

分別是http-equiv屬性
和name 屬性
不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

2.http-equiv屬性：（瞭解）

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

<!--2秒後跳轉到對應的網址，注意引號--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #若是把URL和後面的內容去掉，就是2秒鐘刷新一次，這些內容瞭解一下就行 <!--指定文檔的編碼類型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告訴IE以最高級模式渲染文檔--> <meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微軟的一個全新的瀏覽器,其實就是告訴IE瀏覽器，你按照最高標準來渲染個人頁面，瞭解一下就能夠啦

二、name屬性:

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

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> # 關鍵字，也就是別人是能夠經過這些關鍵字搜索到個人這個文章的， # 搜索引擎就是可以這個content內容來幫別人搜索到你的這個文檔的 #SEO就是作這個的，就是怎麼讓大家公司的網站在別人搜索的時候可以靠前顯示， # 不算那個花錢的，百度是充值的，你衝個20w，別人可能一天就給你點擊完了，特別的貴 <meta name="description" content="xxxxxpythonxxx學習"> #是對這個文檔的描述，在百度一些內容的頁面上，f12打開看看

下面這個紅框裏面就是描述信息：
web

四、瀏覽器內核：

「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，
渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。
渲染引擎是兼容性問題出現的根本緣由。

三、body內經常使用標籤（HTML中的重點）

一、基本標籤（塊級標籤和內聯標籤）

基本標籤django

不加標籤的純文字也是能夠在body中寫的
<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> #就是單獨個一個水平線
每次加上一些內容，別忘了刷新一下頁面，才能看到新添加的效果或者內容，
其實上面這些標籤不多用

四、特殊字符（瞭解）

（還有好多其餘的，能夠直接百度搜HTML特殊符號對照表）

五、div標籤和span標籤（經常使用）

這兩個標籤沒有特別的樣式，能夠隨意的經過css來設計樣式；

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

一、塊級元素與行內元素的區別：

所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。
若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。

這兩個元素是專門爲定義CSS樣式而生的。

剛纔學的標籤：

塊級標籤：p、h1--h六、hr、div

內聯標籤：b、i、u、s

二、關於標籤嵌套：

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

p標籤比較特殊，不能包含塊級標籤，p標籤也不能包含p標籤。
能夠試一下p標籤套p標籤，f12你會發現三個p標籤

五、img標籤（經常使用）

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

 src的路徑又分爲兩種：網上的一個圖片路徑和本地的一個圖片路徑

六、a標籤–超連接標籤（經常使用）

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

什麼是URL編程

什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址， 是因特網上標準的資源的地址。 URL舉例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分組成 第1部分：爲協議：http://、ftp://等 第2部分：爲站點地址：能夠是域名或IP地址 第3部分：爲頁面在站點中的目錄：stu 第4部分：爲頁面名稱，例如 index.html 各部分之間用「/」符號隔開。

<a href="http://www.oldboyedu.com" target="_blank" >點我</a>

一、該地址能夠有幾種類型：

href屬性指定目標網頁地址。
一、絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）

二、相對URL - 指當前站點中確切的路徑（href="index.htm"） #學django的時候會用的比較多

三、錨URL - 指向頁面中的錨（href="#top"），博客的目錄常常用到，（回到頂部）
還能夠跳轉到 name屬性爲p1的a標籤上，<a name='top'>xxx</a>

四、_blank表示在新標籤頁中打開目標網頁

五、_self表示在當前標籤頁中打開目標網頁

七、列表

一、無序列表

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

types屬性：

disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

二、有序列表

<ol type="1" start="2"> <li>第一項</li> <li>第二項</li> </ol>

type屬性： start是從數字幾開始

1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬

三、標題列表（就像大綱同樣，有一個層級效果）

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

八、表格

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，
單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。

表格最重要的目的是顯示錶格類數據。
表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。

表格的基本結構：後端

<table border='1'>
  <thead> #標題部分
  <tr> #一行
    <th>序號</th> #一個單元格
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody> #內容部分
  <tr> #一行
    <td>1</td> #一個單元格
    <td>Egon</td>
    <td>槓娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

一、屬性:

border: 表格邊框.
cellpadding: 內邊距 （內邊框和內容的距離）
cellspacing: 外邊距.（內外邊框的距離）
width: 像素 百分比.（最好經過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）

其實標籤又能夠分爲兩類：一、展現給用戶看的二、獲取用戶輸入內容的標籤，
下面要學的標籤是捕獲用戶輸入的標籤。基本上HTML中經常使用的就這些標籤瀏覽器

九、form（最後再學這個標籤，先去學input標籤）

功能：

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

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

表單還能夠包含textarea、select、fieldset和 label標籤。

一、表單屬性

屬性            描述
accept-charset  規定在被提交表單中使用的字符集（默認：頁面字符集）。

action  規定向何處提交表單的地址（URL）（提交頁面）。

autocomplete    規定瀏覽器應該自動完成表單（默認：開啓）。

enctype 規定被提交數據的編碼（默認：url-encoded）。

method  規定在提交表單時所用的 HTTP 方法（默認：GET）。

name    規定識別表單的名稱（對於 DOM 使用：document.forms.name）。

novalidate  規定瀏覽器不驗證表單。

target  規定 action 屬性中地址的目標（默認：_self）。

二、表單元素

HTML表單是HTML元素中較爲複雜的部分，
表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。

訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。
這些信息經過Internet傳送到服務器上。 

服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。
當數據完整無誤後，服務器反饋一個輸入完成的信息。

三、如何將瀏覽器用戶輸入的內容發送到服務端

一、input中type=submit的那個按鈕，

點擊提交按鈕，input中type=submit的那個按鈕，而後就會將form表單中全部用戶輸入的內容或者選擇的內容（{name屬性:值，}）
都發給服務端（以咱們本身寫的那個socket舉例，打印一下接收的內容），

可是全部的輸入標籤必須有一個叫作name的屬性。

二、讓用戶選擇的，必須指定一個value值，

要否則後端接收不到內容，用戶本身填寫的標籤，不須要指定value值

三、咱們用post封裝提交寫信息，到一個消息體裏面，

可是這樣並很差，由於url中顯示了你的信息，而且若是內容不少的話，
你的地址欄不可以輸入那麼長的內容，爲何會默認拼接到url裏面呢，
由於form表單默認是get請求提交內容，咱們能夠改成post，
來看看：post會把全部你提交的信息封裝到一個消息體裏面，
在瀏覽器上就看不到了，
對於小白來講，看着安全一些。

 而後咱們後端經過提交過來的數據，
 來作某些事情，該驗證的驗證，該保存的保存

四、記住form表單裏面有兩個屬性

action控制往哪裏提交數據、
method控制用什麼方式提交。

五、還有一個文件input

由於咱們剛纔說，數據是經過組成一個字典發給後端的，
可是文件怎麼作鍵值對啊，作不了，
因此須要經過二進制流的形式一點一點的傳送給後端，就是這個multipart搞的事情，
有個瞭解就好了，別糾結，到了django咱們在細說。

六、注意：

form表單提交數據的時候，必須有個submit按鈕

django的示例安全

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上傳成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]

十、input(都去練一下)

<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。

一、屬性說明:

name：   表單提交時的「鍵」，注意和id的區別

value：  表單提交時對應項的值
type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
type="text","password","hidden"時，爲輸入框的初始值
type="checkbox", "radio", "file"，爲輸入相關聯的值

checked：    radio和checkbox默認被選中的項
readonly：   text和password設置只讀
disabled：   全部input均適用

十一、select標籤

<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> #默認選中，當屬性和值相同時，能夠簡寫一個selected就好了 <option value="3">廣州</option> <option value="4">深圳</option> </select> </form>

一、屬性說明

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

十二、label標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。
若是不用這個label給input標籤一個標記，input會變黃，不影響使用，
只是提示你，別忘了給用戶一些提示，也就是這個label標籤。

說明：
一、label 元素不會向用戶呈現任何特殊效果。
可是點擊label標籤裏面的文本，那麼和他關聯的input標籤就得到了光標，讓你輸入內容

二、<label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

<form action=""> <label for="username">用戶名</label> #for和input的id屬性同樣，就關聯在一塊兒了 <input type="text" id="username" name="username"> </form>

1三、textarea多行文本

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

一、屬性說明：

name：名稱
rows：行數  #至關於文本框高度設置
cols：列數   #至關於文本框長度設置
disabled：禁用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。