*******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>
****特殊字符****
空格------
>-------->
<--------<
&--------&
¥--------¥
版權(??)---?
注冊(??)---?
****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 target='_blank'>點擊我</a>
href屬性指定目標網頁地址。該地址可以有幾種類型:
1.絕對URL-指向另一個站點(不如 )
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>
<td>序號</td>
<td>姓名</td>
<td>愛好</td>
</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:禁用
WEB標準是網頁制作的標準,它不是一個標準,它是根據網頁的不同組成部分生成的一系列標準。這些標準大部分由W3C起草發布,也有部分標準由ECMA起草發布
(1)W3C( World Wide Web Consortium )萬維網聯盟,創建于1994年是Web技術領域最具權威和影響力的國際中立性技術標準機構;是專門負責網絡標準制定的非贏利組織。制定了結構標準和樣式標準; (2)ECMA:歐洲電腦網商聯合會(廠商協會),制定了行為標準;
HTML 指的是超文本標記語言 (Hyper Text Markup Language) www萬維網的描述性語言。 XHTML指可擴展超文本標記語言(標識語言)(EXtensible HyperText Markup Language)是一種置標語言,表現方式與超文本標記語言(HTML)類似,不過語法上更加嚴格。 HTML5指的是HTML的第五次重大修改(第5個版本)
規劃網站的所有內容和代碼
整合資源
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
有三種:Strict(嚴格型)、
Trasitional(過渡型)、
Frameset(框架型)
(1)標簽
txt 寫在尖角號<>里的第一個單詞,叫做標記,也叫做標簽,也稱作元素;
(2)屬性
標記和屬性用空格隔開,屬性和屬性值用等號連接,屬性值必須放在雙引號內 一個標記可以有多個屬性,屬性和屬性之間用空格隔開,屬性不分先后順序
(1)常規標記(雙標記): <標記名稱 屬性1名="屬性1值" 屬性2名="屬性2值" ………… >
(2)空標記(單標記):<標記名 屬性1名="屬性1值" />
文本標題共有6個(h1-h6)
<h1>一級標題</h1>(唯一性,放網站LOGO)
<h2>二級標題</h2>
...
<h6>六級標題</h6>
文本傾斜:
<i></i>
<em></em>
文本加粗:
<b></b>
<strong></strong>
<u></u>
<br>
<hr>
<sup></sup>
<sub></sub>
<p></p>
<span></span>
<ul>
<li>列表項內容</li>
<li>列表項內容</li>
<li>列表項內容</li>
........
</ul>
? (2)有序列表
<ol>
<li>列表項內容</li>
<li>列表項內容</li>
<li>列表項內容</li>
........
</ol>
type:規定列表中的列表項目的項目符號的類型 語法:<ol type=“ a"></ol> 1 數字順序的有序列表(默認值)(1, 2, 3, 4)。 a 字母順序的有序列表,小寫(a, b, c, d)。 A 字母順序的有序列表,大寫(A,B,C,D) i 羅馬數字,小寫(i, ii, iii, iv)。 I 羅馬數字,大寫(i, ii, iii, iv)。 start 屬性規定有序列表的開始點。(start的屬性值必須是數字) 語法:<ol start="5"></ol>
? (3)自定義列表
<dl>
dt></dt>
<dd></dd>
</dl>
<a></a>
屬性:
href = 'url'
target = "_blank / _self";
title = '文本提示'
拓展:
rel = 'nofollow';
<img>
屬性:
src = 'url';
alt = ' 標簽 實例 帶有指定替代文本的圖像'
title = '文本提示'
width = ''
height = ''
border = ''
alt:
1、alt屬性是考慮到不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶,
以及視覺障礙的用戶和使用屏幕閱讀器的用戶。當圖片不顯示的時候,圖片的替換文字。
2、alt屬性值的長度必須少于100個英文字符
3、alt屬性是img標簽的必須屬性,如果沒有特別意義的圖片,可以寫alt=""
4、alt屬性是搜索引擎判斷圖片與文字是否相關的重要依據, alt屬性添加到img主要的目的才是為了SEO
title:
1、title屬性并不是必須的。
2、title屬性規定元素的額外信息,有視覺效果, 當鼠標放到文字或是圖片上時有文字顯示。
3、title屬性并不作為搜索引擎抓取圖片的參考, 更多傾向于用戶體驗的考慮。
(同級)
1)當當前文件與目標文件在同一目錄下, 直接書寫目標文件的文件名+擴展名;
(上級找下級)
2)當當前文件與目標文件所處的文件夾在同一目錄下,寫法如下:
文件夾名/目標文件全稱+擴展名;
(下級找上級)
3)當當前文件所處的文件夾和目標文件在同一目錄下,寫法如下:
../目標文件文件名+擴展名;
<!-- 注釋 -->
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--
table 為表格
tr 行
td 列(每一個單元格)
-->
1)width="表格的寬度"
2)height="表格的高度"
3)border="表格的邊框"
4)bordercolor="邊框色"
5)cellspacing="單元格與單元格之間的間距"
6)cellpadding=“單元格與內容之間的距離"
7)align="表格水平對齊方式"
取值:left、right、center、
valign=“垂直對齊” top\bottom\middle
8)合并單元格屬性:(td)
合并列: colspan=“所要合并的單元格的列數"
合并行: rowspan=“所要合并單元格的行數”
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<colgroup span="value"></colgroup>
<!--span屬性為把幾列分為一組-->
<th></th>
<caption></caption>
1、單元格間距:border-spacing:value; 說明:單元格間距(該屬性必須給table添加) 表示單元格邊框之間的距離, 不可取負值 2、合并相鄰單元格邊框:border-collapse:separate/collapse; 說明:合并相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開)默認值; collapse(邊框合并) 3、無內容時單元格的設置:empty-cells:show/hide; 說明:定義當單元格無內容時,是否顯示該單元格的邊框區域;show:顯示 ;hide:隱藏; 4、顯示單元格行和列的算法(加快運行的速度): table-layout:auto/fixed;
本文轉自知乎號:千鋒HTML5學院
TML(英文Hyper Text Markup Language的縮寫)中文譯為“超文本標簽語言”,主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。
1 HTML骨架格式
日常生活的書信,我們要遵循共同的約定。
同理:HTML 有自己的語言語法骨架格式:
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
2 html基本標簽
作用:所有HTML中標簽的一個根節點。
作用:用于存放:title,meta,base,style,script,link
注意:在head標簽中我們必須要設置的標簽是title
作用:讓頁面擁有一個屬于自己的標題。
作用:頁面在的主體部分,用于存放所有的HTML標簽:p,h,a,b,u,i,s,em,del,ins,strong,img
3 顏色的表示方式
第一種方式:使用顏色名稱: 僅僅有16種顏色名可用英文字母,其余的要用16進制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
第二種方式:RGB模式
第三種:十六進制
#000000 #ffffff #325687 #377405
4 文檔類型<!DOCTYPE>(重點)
<!DOCTYPE html>這句話就是告訴我們使用哪個html版本, 我們使用的是 html 5 的版本。 html有很多版本,那我們應該告訴用戶和瀏覽器我們使用的版本號。
標簽位于文檔的最前面,用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范,必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型,只有這樣瀏覽器才能按指定的文檔類型進行解析。
5 HTML標簽的語義化(重點)
所謂標簽語義化,就是指標簽的含義。
為什么要有語義化標簽:方便代碼的閱讀和維護,同時讓瀏覽器或是網絡爬蟲可以很好地解析,從而更好分析其中的內容,使用語義化標簽會具有更好地搜索引擎優化
核心:合適的地方給一個最為合理的標簽。
語義是否良好: 當我們去掉CSS之后,網頁結構依然組織有序,并且有良好的可讀性,不管是誰都能看懂這塊內容是什么。
遵循的原則:先確定語義的HTML ,再選合適的CSS。
6 總結:(重要知識點)
<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center>
<br>
<hr>
<img>
<input>
<param>
<meta>
<link>
1.注釋標簽:<!–注釋–>
-------------------------------------
2.換行標簽:<br/>
-------------------------------------
3.段落標簽:<p>文本文字
特點:段與段之間有行高
屬性:align對齊方式
(left:左對齊 center:居中 right:右對齊)
-------------------------------------
4.水平線標簽:<hr/>
屬性:
width:水平線的長度(兩種:第一種:像素表示;第二種,百分比表示)
size: 水平線的粗細 (像素表示,例如:10px)
color: 水平線的顏色
align:水平線的對齊方式(left:左對齊 center:居中 right:右對齊)
-------------------------------------
5.容器標簽(重點)
<div>:塊級標簽,獨占一行,換行
<span>:行級標簽,所有內容都在同一行作用
<div>:主要是結合css頁面分塊布局
<span>:進行友好提示信息
為了使網頁更具有語義化,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的標題,隨著數字增大文字逐漸變小,字體是加粗的,內置字號,默認占據一行;
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
容器里面裝載著文字或圖表的一種形式,叫列表。列表最大的特點就是 整齊 、整潔、 有序
無序列表 ul (重點)
無序列表標簽: <ul></ul>
屬性:type :三個值,分別為:
circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
列表項:<li></li>
注意:
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器,可以容納所有元素。
無序列表會帶有自己樣式屬性,放下那個樣式,一會讓CSS來!
有序列表 ol
有序列表標簽:<ol>
屬性:type:1、A、a、I、i(數字、字母、羅馬數字)
列表項: <li></li>
定義列表dl
\dl>
<dt>名詞1
<dd>名詞1解釋1
<dd>名詞1解釋2
…
<dt>名詞2
<dd>名詞2解釋1
<dd>名詞2解釋2
…
</dl>
dl>
名詞1
名詞1解釋1
名詞1解釋2
... 名詞2
名詞2解釋1
名詞2解釋2
...
獨立標簽
屬性:
src:圖片地址: 相對路徑 (同一個網站) 絕對路徑 (不同網站)
width:寬度height:高度border:邊框align:對齊方式,代表圖片與相鄰的文本的相當位置(有三個屬性值:top middle bottom)
alt:圖片的文字說明hspace 和 vspace 設定圖片邊沿上下左右空白,以免文字或其它圖片過于貼近
鏈接標簽
超鏈接可以是文本,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。(不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈接)
屬性:
href:跳轉頁面的地址(跳轉到外網需要添加協議);
name:名稱,錨點(回到錨點: 頂部,底部,中間),在訪問錨點的書寫格式:#name的值
target:_self(自己) _blank(新頁面,之前頁面存在) _
__parent top 默認
self_search相等于給頁面起一個名字,如果再次打開時,如果頁面存在,則不再打開新的頁面。可以是任意名字。
如果當時沒有確定鏈接目標時,通常將鏈接標簽的href屬性值定義為“#”(即href="#"),表示該鏈接暫時為一個空鏈接。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。