day042前端之HTML
生活随笔
收集整理的這篇文章主要介紹了
day042前端之HTML
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
本節(jié)內(nèi)容：
1、HTML的介紹
2、HTML文檔結構
3、HTML常用標簽
一、HTML的介紹
1、web服務的本質(zhì)
web實際上就是一個socket服務端，
流程：
瀏覽器發(fā)請求 --> HTTP協(xié)議 --> 服務端接收請求 --> 服務端返回響應
--> 服務端把HTML文件內(nèi)容發(fā)給瀏覽器 --> 瀏覽器渲染頁面
服務端
import socketsk = 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() 2、HTML是什么？
1.超文本標記語言（Hypertext Markup Language, HTML）是一種用于創(chuàng)建網(wǎng)頁的標記語言。2.本質(zhì)上是瀏覽器可識別的規(guī)則，我們按照規(guī)則寫網(wǎng)頁，瀏覽器根據(jù)規(guī)則渲染我們的網(wǎng)頁。
對于不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題）3.網(wǎng)頁文件的擴展名：.html或.htm
3、HTML不是什么？
HTML是一種標記語言（markup language），它不是一種編程語言。HTML使用標簽來描述網(wǎng)頁。
不像python編程語言一樣，有邏輯什么的，這個標記語言是沒有邏輯的
二、HTML文檔結構
1、最基本的HTML文檔：
<!DOCTYPE html>
<html lang="zh-CN"> #這個language表示語言，zh-CN是中文的意思，就是說，你整個文檔的內(nèi)容以中文為主，如果以英文為主，就寫成lang='en'<head><meta charset="UTF-8"><title>css樣式優(yōu)先級</title>
</head>
<body></body>
</html>
1.<!DOCTYPE html>聲明為HTML5文檔。2、<html></html>是文檔的開始標記和結束的標記。
是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。3.<head>、</head>定義了HTML文檔的開頭部分。
它們之間的內(nèi)容不會在瀏覽器的文檔窗口顯示。
包含了文檔的元（meta）數(shù)據(jù)，配置信息等，是給瀏覽器看的，你看到的是在body標簽里面寫的。4.<title>、</title>定義了網(wǎng)頁標題，在瀏覽器標題欄顯示。
（修改一下title中的內(nèi)容，然后看一下瀏覽器，你就會發(fā)現(xiàn)title是什么了，就是瀏覽器上面的小標題）5.<body>、</body>之間的文本是可見的網(wǎng)頁主體內(nèi)容。
注意：對于中文網(wǎng)頁需要使用?聲明編碼，否則會出現(xiàn)亂碼。
有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為?。
pycharm中創(chuàng)建一個html文件，你就會發(fā)現(xiàn)，整個結構都給你直接生成好了，
因為不管什么瀏覽器，這個文檔結構都是這樣的。
pycharm可以直接點擊瀏覽器，打開寫好的HTML文件，
你會發(fā)現(xiàn)地址欄是種file:///這也是一個協(xié)議，瀏覽器打開自己本地文件的協(xié)議。
2、HTML標簽格式，嚴格封閉
HTML標簽通常是成對出現(xiàn)的，比如：<div>和</div>，第一個標簽是開始，第二個標簽是結束。結束標簽會有斜線。HTML標簽是由尖括號包圍的關鍵字如：<div>、<html>等，也有一部分標簽是單獨呈現(xiàn)的，比如：<br/>、<hr/>、<img src="1.jpg" />等。標簽里面可以有若干屬性，也可以不帶屬性。
3、標簽的語法
第一種寫法：（成對出現(xiàn)的）
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標簽名>第二種寫法：（單獨呈現(xiàn)的）
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />有些屬性是沒有特殊的效果的，而有些屬性是有效果的，
比如 <h1 s='name'>xxx<h1/>，其中s='name'是沒什么效果的，
而<a src='http://www.baidu.com'>xxx</a>，你會看到一些效果，可以點擊，有下劃線，有顏色。
4、幾個很重要的屬性
1、id
定義標簽的唯一ID，HTML文檔樹中唯一，id不能重復
寫在標簽里面，不是被標簽包圍，<span id="1"></span>
用來區(qū)分頁面上的標簽，我們就可以通過id來快速查找到這個標簽2、class
為html元素定義一個類名（class="類名"）,<div class="c1"></div>
或者多個類名（class="類名1 類名2 ···"）
(CSS樣式類名) 詳見下一篇css3、style
成對的被<head>M</head>,夾住
規(guī)定元素的行內(nèi)樣式（css樣式）如何注釋：
<!--注釋內(nèi)容-->
#找到一行內(nèi)容ctrl+/就能注釋，注釋的內(nèi)容不會在網(wǎng)頁上顯示出來
5、 標簽
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE> 聲明不是 HTML 標簽；
它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
三、HTML常用標簽
1、head內(nèi)常用標簽
2、Meta標簽（head里的內(nèi)容,了解）
Meta標簽介紹： #作為了解內(nèi)容<meta>元素可提供有關頁面的元信息（meta-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見的。
1、meta標簽共有兩個屬性，（了解）
分別是http-equiv屬性
和name 屬性
不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。
2.http-equiv屬性：（了解）
相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁內(nèi)容，
與之對應的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值。
<!--2秒后跳轉到對應的網(wǎng)址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #如果把URL和后面的內(nèi)容去掉，就是2秒鐘刷新一次，這些內(nèi)容了解一下就行 <!--指定文檔的編碼類型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告訴IE以最高級模式渲染文檔--> <meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微軟的一個全新的瀏覽器,其實就是告訴IE瀏覽器，你按照最高標準來渲染我的頁面，了解一下就可以啦 2、name屬性:
主要用于描述網(wǎng)頁，與之對應的屬性值為content，
content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> # 關鍵字，也就是別人是可以通過這些關鍵字搜索到我的這個文章的， # 搜索引擎就是能夠這個content內(nèi)容來幫別人搜索到你的這個文檔的 #SEO就是做這個的，就是怎么讓你們公司的網(wǎng)站在別人搜索的時候能夠靠前顯示， # 不算那個花錢的，百度是充值的，你沖個20w，別人可能一天就給你點擊完了，特別的貴 <meta name="description" content="xxxxxpythonxxx學習"> #是對這個文檔的描述，在百度一些內(nèi)容的頁面上，f12打開看看 下面這個紅框里面就是描述信息：
4、瀏覽器內(nèi)核：
「瀏覽器內(nèi)核」也就是瀏覽器所采用的「渲染引擎」，
渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。
渲染引擎是兼容性問題出現(xiàn)的根本原因。
3、body內(nèi)常用標簽（HTML中的重點）
1、基本標簽（塊級標簽和內(nèi)聯(lián)標簽）
基本標簽
不加標簽的純文字也是可以在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> #就是單獨個一個水平線
每次加上一些內(nèi)容，別忘了刷新一下頁面，才能看到新添加的效果或者內(nèi)容，
其實上面這些標簽很少用
4、特殊字符（了解）
（還有好多其他的，可以直接百度搜HTML特殊符號對照表）
5、div標簽和span標簽（常用）
這兩個標簽沒有特別的樣式，可以隨意的通過css來設計樣式；div標簽用來定義一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。
span標簽用來定義內(nèi)聯(lián)(行內(nèi))元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。
1、塊級元素與行內(nèi)元素的區(qū)別：
所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。
如果單獨在網(wǎng)頁中插入這兩個元素，不會對頁面產(chǎn)生任何的影響。這兩個元素是專門為定義CSS樣式而生的。剛才學的標簽：塊級標簽：p、h1--h6、hr、div內(nèi)聯(lián)標簽：b、i、u、s
2、關于標簽嵌套：
關于標簽嵌套：通常塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素，
但內(nèi)聯(lián)元素不能包含塊級元素，它只能包含其它內(nèi)聯(lián)元素。
div是可以包含div的p標簽比較特殊，不能包含塊級標簽，p標簽也不能包含p標簽。
可以試一下p標簽套p標簽，f12你會發(fā)現(xiàn)三個p標簽
5、img標簽（常用）
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息"width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">src的路徑又分為兩種：網(wǎng)上的一個圖片路徑和本地的一個圖片路徑
6、a標簽–超鏈接標簽（常用）
所謂的超鏈接是指從一個網(wǎng)頁指向一個目標的連接關系，這個目標可以是另一個網(wǎng)頁，
也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，
一個文件，甚至是一個應用程序。
什么是URL
什么是URL？
URL是統(tǒng)一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網(wǎng)頁地址，
是因特網(wǎng)上標準的資源的地址。URL舉例
http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分組成 第1部分：為協(xié)議：http://、ftp://等 第2部分：為站點地址：可以是域名或IP地址 第3部分：為頁面在站點中的目錄：stu 第4部分：為頁面名稱，例如 index.html 各部分之間用“/”符號隔開。 <a href="http://www.oldboyedu.com" target="_blank" >點我</a> 1、該地址可以有幾種類型：
href屬性指定目標網(wǎng)頁地址。
1、絕對URL - 指向另一個站點（比如 href="http://www.jd.com）2、相對URL - 指當前站點中確切的路徑（href="index.htm"） #學django的時候會用的比較多3、錨URL - 指向頁面中的錨（href="#top"），博客的目錄經(jīng)常用到，（回到頂部）
還可以跳轉到 name屬性為p1的a標簽上，<a name='top'>xxx</a>4、_blank表示在新標簽頁中打開目標網(wǎng)頁5、_self表示在當前標簽頁中打開目標網(wǎng)頁
7、列表
1、無序列表
<ul type="disc"> <li>第一項</li> <li>第二項</li> </ul> types屬性：
disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）
2、有序列表
<ol type="1" start="2"> <li>第一項</li> <li>第二項</li> </ol> type屬性： start是從數(shù)字幾開始
1 數(shù)字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
3、標題列表（就像大綱一樣，有一個層級效果）
<dl><dt>標題1</dt> <dd>內(nèi)容1</dd> <dt>標題2</dt> <dd>內(nèi)容1</dd> <dd>內(nèi)容2</dd> </dl> 8、表格
表格是一個二維數(shù)據(jù)空間，一個表格由若干行組成，一個行又有若干單元格組成，
單元格里可以包含文字、列表、圖案、表單、數(shù)字符號、預置文本和其它的表格等內(nèi)容。表格最重要的目的是顯示表格類數(shù)據(jù)。
表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。
表格的基本結構：
<table border='1'><thead> #標題部分<tr> #一行<th>序號</th> #一個單元格<th>姓名</th><th>愛好</th></tr></thead><tbody> #內(nèi)容部分<tr> #一行<td>1</td> #一個單元格<td>Egon</td><td>杠娘</td></tr><tr><td>2</td><td>Yuan</td><td>日天</td></tr></tbody>
</table>
1、屬性:
border: 表格邊框.
cellpadding: 內(nèi)邊距 （內(nèi)邊框和內(nèi)容的距離）
cellspacing: 外邊距.（內(nèi)外邊框的距離）
width: 像素 百分比.（最好通過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）
其實標簽又可以分為兩類：1、展示給用戶看的 2、獲取用戶輸入內(nèi)容的標簽，
下面要學的標簽是捕獲用戶輸入的標簽。基本上HTML中常用的就這些標簽
9、form（最后再學這個標簽，先去學input標簽）
功能：表單用于向服務器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與Web服務器的交互表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含textarea、select、fieldset和 label標簽。
1、表單屬性
屬性 描述
accept-charset 規(guī)定在被提交表單中使用的字符集（默認：頁面字符集）。action 規(guī)定向何處提交表單的地址（URL）（提交頁面）。autocomplete 規(guī)定瀏覽器應該自動完成表單（默認：開啟）。enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認：url-encoded）。method 規(guī)定在提交表單時所用的 HTTP 方法（默認：GET）。name 規(guī)定識別表單的名稱（對于 DOM 使用：document.forms.name）。novalidate 規(guī)定瀏覽器不驗證表單。target 規(guī)定 action 屬性中地址的目標（默認：_self）。
2、表單元素
HTML表單是HTML元素中較為復雜的部分，
表單往往和腳本、動態(tài)頁面、數(shù)據(jù)處理等功能相結合，因此它是制作動態(tài)網(wǎng)站很重要的內(nèi)容。訪問者在瀏覽有表單的網(wǎng)頁時，可填寫必需的信息，然后按某個按鈕提交。
這些信息通過Internet傳送到服務器上。 服務器上專門的程序?qū)@些數(shù)據(jù)進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。
當數(shù)據(jù)完整無誤后，服務器反饋一個輸入完成的信息。
3、如何將瀏覽器用戶輸入的內(nèi)容發(fā)送到服務端
1、input中type=submit的那個按鈕，
點擊提交按鈕，input中type=submit的那個按鈕，然后就會將form表單中所有用戶輸入的內(nèi)容或者選擇的內(nèi)容（{name屬性:值，}）
都發(fā)給服務端（以我們自己寫的那個socket舉例，打印一下接收的內(nèi)容），但是所有的輸入標簽必須有一個叫做name的屬性。
2、讓用戶選擇的，必須指定一個value值，
要不然后端接收不到內(nèi)容，用戶自己填寫的標簽，不需要指定value值
3、我們用post封裝提交寫信息，到一個消息體里面，
但是這樣并不好，因為url中顯示了你的信息，并且如果內(nèi)容很多的話，
你的地址欄不能夠輸入那么長的內(nèi)容，為什么會默認拼接到url里面呢，
因為form表單默認是get請求提交內(nèi)容，我們可以改為post，
來看看：post會把所有你提交的信息封裝到一個消息體里面，
在瀏覽器上就看不到了，
對于小白來說，看著安全一些。然后我們后端通過提交過來的數(shù)據(jù)，來做某些事情，該驗證的驗證，該保存的保存
4、記住form表單里面有兩個屬性
action控制往哪里提交數(shù)據(jù)、
method控制用什么方式提交。
5、還有一個文件input
因為我們剛才說，數(shù)據(jù)是通過組成一個字典發(fā)給后端的，
但是文件怎么做鍵值對啊，做不了，
所以需要通過二進制流的形式一點一點的傳送給后端，就是這個multipart搞的事情，
有個了解就行了，別糾結，到了django我們在細說。
6、注意：
form表單提交數(shù)據(jù)的時候，必須有個submit按鈕
django的示例
from django.conf.urls import url
from django.shortcuts import HttpResponsedef upload(request):print("request.GET:", request.GET)print("request.POST:", request.POST)if request.FILES:filename = request.FILES["file"].namewith open(filename, 'wb') as f:for chunk in request.FILES['file'].chunks():f.write(chunk)return HttpResponse('上傳成功')return HttpResponse("收到了！")urlpatterns = [url(r'^upload/', upload),
]
10、input(都去練一下)
<input> 元素會根據(jù)不同的 type 屬性，變化為多種形態(tài)。
1、屬性說明:
name： 表單提交時的“鍵”，注意和id的區(qū)別value： 表單提交時對應項的值
type="button", "reset", "submit"時，為按鈕上顯示的文本年內(nèi)容
type="text","password","hidden"時，為輸入框的初始值
type="checkbox", "radio", "file"，為輸入相關聯(lián)的值checked： radio和checkbox默認被選中的項
readonly： text和password設置只讀
disabled： 所有input均適用
11、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> 1、屬性說明
multiple：布爾屬性，設置后為多選下拉框，否則默認單選
disabled：禁用
selected：默認選中該項
value：定義提交時的選項值
12、label標簽
定義：<label> 標簽為 input 元素定義標注（標記）。
如果不用這個label給input標簽一個標記，input會變黃，不影響使用，
只是提示你，別忘了給用戶一些提示，也就是這個label標簽。說明：
1、label 元素不會向用戶呈現(xiàn)任何特殊效果。
但是點擊label標簽里面的文本，那么和他關聯(lián)的input標簽就獲得了光標，讓你輸入內(nèi)容2、<label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action=""> <label for="username">用戶名</label> #for和input的id屬性一樣，就關聯(lián)在一起了 <input type="text" id="username" name="username"> </form> 13、textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默認內(nèi)容 </textarea> 1、屬性說明：
name：名稱
rows：行數(shù) #相當于文本框高度設置
cols：列數(shù) #相當于文本框長度設置
disabled：禁用轉載于:https://www.cnblogs.com/yipianshuying/p/10126006.html
總結
以上是生活随笔為你收集整理的day042前端之HTML的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OWASP TOP10(2017)
- 下一篇： ansible安装