Python全棧工程師之html學習筆記

時間 2019-12-14
原文原文鏈接
https://www.bilibili.com/video/av15241731
筆記來源:黑馬程序員
HTML(Hyper Text Markup Language):超文本標籤語言
HTML標籤關係:
    1.嵌套關係
    2.並列關係

Sublime快捷鍵:html:5+Tab 或者!+Tab能夠生成以下模板:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
===============================================================================================================
<!DOCTYPE html>這句是告訴咱們使用哪一個html版本.
<!DOCTYPE>標籤位於文檔的最前面,用於向瀏覽器說明當前文檔使用哪一種HTML或XHTML標準規範.必須在開頭處使用<!DOCTYPE>
該標籤爲全部的XHTML文檔指定XHTML版本和類型,只有這樣瀏覽器才能按指定的文檔類型進行解析.
注意:一些老網站可能用的仍是老版本的文檔類型好比XHTML之類,但咱們學習的是HTML5,並且HTML5的文檔類型兼容性很好(向下兼容原則),
因此你們放心的使用HTML5的文檔類型就行了.
xhtml 1.0 是html5以前的一個經常使用的版本，目前許多網站仍然使用此版本.此版本文檔用sublime text建立方法： html:xt + tab
pc端可使用xhtml 1.0，也可使用html5，html5是向下兼容的
此版本文檔用sublime text建立方法： html:5 + tab 或者 ! + tab
上述兩種文檔的區別:
    一、文檔聲明和編碼聲明
    二、html5新增了標籤元素以及元素屬性

「<html>」標籤中的‘lang=「en」’定義網頁的語言爲英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它通常做爲分析統計用。
「<head>」標籤和「<body>」標籤是它的第一層子元素，「<head>」標籤裏面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，
外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，「<body>」內編寫網頁上顯示的內容。

<meta charset="UTF-8">用於定義字符集.
UTF-8 是目前最經常使用的字符集編碼方式,經常使用的字符集編碼方式還有gbk和gb2312
gb2312:簡單中文,包括6763個漢字
BIG5:繁體中文,港澳臺使用
GBK:包含所有中文字符集,是GB2312的擴展,加入對繁體的支持,兼容GB2312
UTF-8:包含全世界全部國家須要用到的字符,萬國碼的一種.

html文檔規範
    xhtml制定了文檔的編寫規範，html5可部分遵照，也可所有遵照，看開發要求。
    一、全部的標籤必須小寫
    二、全部的屬性必須用雙引號括起來
    三、全部標籤必須閉合
    四、img必需要加alt屬性(對圖片的描述)

HTML標籤:
1.排版標籤:
排版標籤主要和CSS搭配使用,顯示網頁結構的標籤,是網頁佈局最經常使用的標籤.
2.標題標籤:
爲了使網頁更具備語義化,咱們常常會在頁面中用到標題標籤,HTML提供了6個等級的標題標籤,即:h1-h6.
h1標籤由於重要,要儘可能少用.
3.段落標籤:<p>文本內容</p>,單詞縮寫:paragraph
段落標籤是HTML文檔中最多見的標籤,默認狀況下,文本在一個段落中會根據瀏覽器窗口的大小自動換行.
4.水平線標籤<hr />,單詞縮寫horizontal,這是一個單標籤.
用於在網頁中將段落與段落隔開,使文檔結構清晰.
5.換行標籤<br />,單詞縮寫:break
在HTML中,一個鍛落中的文字會從左到右依次排列,直到瀏覽器窗口的右端,而後自動換行.若是但願某段文字強制換行,就須要使用該標籤.
6.div span標籤
div,span是沒有語義的,是咱們網頁佈局主要的2個盒子.
div就是division的縮寫,分割,分區的意思,實際上是不少div來組合網頁.
span,跨度,跨距,範圍
語法格式:<div>這是頭部</div><span>今日價格</span>
7.文本格式化標籤
在網頁中,有時須要爲文字設置粗體,斜體或下劃線效果,這裏就須要用到HTML中的文本格式化標記,使文字以特殊的方式顯示.
<em></em>:表示語氣中的強調詞
<b></b>,<strong></strong>:文字以粗體方式顯示(XHTML推薦使用strong)
<i></i>和<em></em>:文字以斜體方式顯示(XHTML推薦使用em)
<s></s>和<del></del>:文字以加刪除線方式顯示(XHTML推薦使用del)
<u></u>和<ins></ins>:文字以加下劃線方式顯示(XHTML推薦使用u)
<b>,<s>,<u>只使用,沒有強調的意思
<strong>,<em>,<del>,<ins>語義更增強烈.

標籤屬性:
HTML屬性基本語法格式以下:
<標籤名 屬性1="屬性值1" 屬性2="屬性值2"...>內容</標籤名>
在上面的語法中:
    1.標籤能夠擁有多個屬性,必須寫在開始標籤中,位於標籤名後面.
    2.屬性之間不分前後順序,標籤名與屬性,屬性與屬性之間均以空格分開.
    3.任何標籤的屬性都有默認值,省略該屬性則取默認值.

圖像標籤img(重點)
單詞縮寫:image
HTML網頁中任何元素的實現都要依靠HTML標籤,要想在網頁中顯示圖像就須要使用圖像標籤.其基本語法格式以下:
該語法中src屬性用於指定圖像文件的路徑和文件名,他是img標籤的必需屬性.
<img src="圖像url" />
<img />標籤的屬性
scr-->url-->圖像的路徑
alt-->文本-->圖像不能顯示時的替換文本
title-->文本-->鼠標懸念時顯示的內容
width-->像素(XHTML不支持%頁面百分比)-->設置圖像的寬度
height-->像素(XHTML不支持%頁面百分比)-->設置圖像的高度
    圖片會根據寬或高等比縮放,要保持圖像原比例只需設置一個寬屬性或一個高屬性.
border-->數字-->設置圖像邊框的寬度

連接標籤(重點)
單詞縮寫:anchor,錨
在HTML中建立超連接很是簡單,只須要用標籤環繞須要被連接的對象便可,語法以下:
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href,用於指定連接目標的Url,當爲標籤應用href屬性時,它就具備了超連接的功能.href是 Hypertext Reference的縮寫,意思是超文本引用
其中的target屬性,用於指定連接頁面的打開方式,其取值有_self和_blank兩種,其中self爲默認值,blank爲在新窗口中打開方式.
注意:
1.外部連接須要添加 http://www.baidu.com
2.內部連接 直接連接內部頁面名稱便可,好比 <a herf="index.html">頁面</a>
3.若是當時沒有肯定連接目標是,一般將連接標籤的href屬性值定義爲"#",表示連接暫時爲一個空連接.
4.不只能夠建立文本超連接,在網頁中各類網頁元素,如圖像,表格,音頻,視頻均可以添加超連接.

錨點定位(難點)
經過建立錨點連接,用戶可以快速定位到目標內容
建立錨點連接爲分兩步:
1.使用<a href="#id名">連接文本</a>來建立連接文本
2.使用相應的id名標註跳轉目標的位置

base標籤
base標籤是個單標籤,能夠設置總體連接的打開狀態.
示例:<base target="_blank" />

特殊字符標籤
" "-->空格-->&nbsp;
"<"-->小於號-->&lt;
">"-->大於號-->&gt;
"&"-->和號-->&amp;
"￥"-->人民幣-->&yen;
"©"-->版權-->&copy;
"®"-->註冊商標-->&reg;
"℃"-->攝氏度-->&deg;
"+-"-->正負號-->&plusms;
"*"-->乘號-->&times;
"/"-->除號-->&divide;
"²"-->平方-->&sup2;
"³"-->立方-->&sup3;

註釋標籤:
<!-- 註釋語句 -->
{# 註釋語句 #}

路徑(重點)
相對路徑:
    1.圖像文件和HTML文件位於同一文件夾,只輸入圖像文件的名稱便可,如<img src="logo.gif" />
    2.圖像文件位於HTML文件的下一級文件夾,輸入文件夾名和文件名,之間用"/"隔開,如<img src="img/img01/logo.gif" />
    3.圖像文件位於HTML文件的上一級文件夾,在文件名以前輸入"../",若是是上兩級,輸入"../../",以此類推,如<<img src="../logo.gif" />
絕對路徑(儘可能不要用,移值性差)
文件絕對路徑示例:C:\Users\allen\Desktop\logo.gif
網頁絕對路徑:http://www.baidu.com

列表
無序列表ul(重點),格式以下:
ul裏只能嵌套li標籤,直接在ul標籤中輸入其餘標籤或者文字的作法是不被容許的.
li標籤至關於一個容器,能夠容納全部元素
無序列表會帶有本身樣式的屬性,要改變其默認屬性能夠經過css進行.
<ul>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
    ...
</ul>

有序列表ol(重點),格式以下:
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
ol標籤與ul標籤特性基本至關.但儘可能多用ul少用ol.

自定義列表(理解)
定義列表一般用於對術語或名詞進行解釋和描述,定義列表的列表項前沒有任何項目符號,基本語法以下:
<dl>
    <dt>名詞1</dt>
    <dd>名詞1解釋1</dd>
    <dd>名詞2解釋2</dd>
    ...
    <dt>名詞2</dt>
    <dd>名詞2解釋1</dd>
    <dd>名詞2解釋2</dd>
    ...
</dl>

表格table(會使用),使用例子:http://finance.sina.com.cn/stock/ 中的板塊行情,示例以下:
<table>
    <caption>table title and/or explanatory text</caption>
    <thead>
        <tr>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>
table經常使用標籤
    一、table標籤：聲明一個表格
    二、tr標籤：定義表格中的一行
    三、td和th標籤：定義一行中的一個單元格，td表明普通單元格，th表示表頭單元格
注:tr標籤裏面只能放td標籤,td標籤至關於一個容器,能夠任何標籤.
表格屬性:
border-->設置表格的邊框(默認border="0"無邊框)-->像素值
cellspacing-->設置單元格與單元格邊框之間的空白間距-->像素值,默認爲2個像素
cellpadding-->設置單元格內容與單元格邊框之間的空白間距-->像素值,默認爲1個像素
width-->寬度
height-->高度
align-->設置表格在網頁中的水平對齊方式-->left,center,right
valign 設置單元格中內容的垂直對齊方式-->top,middle,bottom
colspan 設置單元格水平合併
rowspan 設置單元格垂直合併

表頭標籤
表頭通常位於表格的第一行或第一列,其文本加粗居中.設置表頭只需用表頭標籤<th></th>替代相應的單元格標籤<td></td>便可.
表格標題:caption
caption標籤必須緊隨table標籤以後,只能對每一個表格定義一個標題.一般這個標題會被居中於表格之上.
合併單元格
跨行合併:rowspan,跨列合併:colspan
合併單元格的思想:
將多個內容合併的時候,就會有多餘的東西,把它刪除.
合併的順序:先上,先左

傳統佈局：
傳統的佈局方式就是使用table來作總體頁面的佈局，佈局的技巧概括爲以下幾點：
    一、定義表格寬高，將border、cellpadding、cellspacing所有設置爲0
    二、單元格里面嵌套表格
    三、單元格中的元素和嵌套的表格用align和valign設置對齊方式
    四、經過屬性或者css樣式設置單元格中元素的樣式

傳統佈局目前應用：
    一、快速製做用於演示的html頁面
    二、商業推廣EDM製做(廣告郵件)

表格經常使用樣式屬性
border-collapse:collapse 設置邊框合併，製做一像素寬的邊線的表格

總結表格:
1.表格提供了HTML中定義表格式數據的方法.
2.表格中由行中的單元格組成.
3.表格中沒有列元素,列的個數取決於行的單元格個數.
4.表格外觀最好經過CSS設定.

表單控件:
包含了具體的表單功能項,如單行文本輸入框,密碼輸入框,複選框,提交按鈕,重置按鈕等.
提示信息:
一個表單中一般還須要包含一些說明性的文字,提示用戶進行填寫操做.
表單域:
至關於一個容器,用來容納全部的表單控牛和提示信息,能夠經過他定義處理表單數據所用程序的Url地址,以及數據提交到服務器的方法.
若是不定義表單域,表單中的數據就沒法傳送到後臺服務器.
input控件(重點)
在上面的語法中,<input />標籤爲單標籤,type屬性爲其最基本的屬性,其取值有多種,用於指定不一樣控件類型.除了type屬性以外,
input標籤還能夠定義不少其餘的屬性,其經常使用屬性以下:
type-->text-->單行文本輸入框
type-->password-->密碼輸入框
type-->radio-->單選按鈕
type-->checkbox-->複選框
type-->button-->普通按鈕
type-->submit-->提交按鍵
type-->reset-->重置按鍵
type-->image-->圖像提交按鍵
type-->file-->文件域
name-->由用戶定義-->控件名稱
value-->由用戶定義-->input控件中的默認文本值
size-->正整數-->input控件在頁面中顯示的寬度
checked-->checked-->定義選擇控件默認被選中的項
maxlength-->正整數-->控件容許輸入的最多字符數,可用於限制帳號長度和密碼長度.
其中圖像按鈕爲:<<input type="image" src="im.jpg" />

label標籤(理解)
label標籤爲input元素定義標註(標籤).
做用:用於綁定一個表單元素,當點擊label標籤的時候,被的綁定的表單元素就會得到輸入焦點.
1.直接用label標籤進行包裹:
<label><input type="text" name="hobby" value="01"></label>
2.for屬性規定label與哪一個表單元素綁定:
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

文本域標籤:格式以下:
<textarea cols="每行中的字符數" rows="顯示的行數">
    文本內容
</textarea>

下拉菜單:
使用select控件定義下拉菜單的基本語法格式以下:
<select name="">
    <option value="">選項1</option>
    <option value="">選項2</option>
    <option value="">選項3</option>
    ...
</select>
select標籤中至少應當包含一個option標籤
在option中定義selected="selected"時,當前項即爲默認選中項.

表單域
在HTML中,form標籤被用於定義表單域,即建立一個表單,以實現用戶信息的收集與傳遞.form中全部內容都會被提交至服務器.
建立表單的基本語法格式以下:
<form action="url地址" method="提交方式" name="表單名字" accept-charset="utf-8">
    各類表單控件
</form>
1.action:在表單收集到信息後,須要將信息傳遞給服務器進行處理.action屬性用於指定接收並處理表單數據的服務器程序的Url地址.

文檔類設定:
document:
HTML:sublime 輸入 html:4s
XHTML:sublime 輸入 html:xt
HTML5 sublime 輸入 <!DOCTYPE html> 或!+Tab

字符設定:
<meta http-equiv="charset" content="utf-8">  HTML與XHTML中建議這樣去寫
<meta charset="utf-8">  HTML5的標籤中建議這樣去寫

經常使用新標籤:
w3c 手冊中文官網:http://w3school.com.cn/
header:定義文檔的頁眉.
nav:定義導航連接的部分.
footer:定義文檔或節的頁腳
article:標籤規定獨立的自包含內容
section:定義文檔中的節(section,區段)
aside:定義所外內容以外的內容
datalist:標籤訂義選項列表,請與input元素配合使用該元素,datalist示例以下:
<input type="text" value="輸入明星" list="star">
<datalist id="star">
    <option>張學友</option>
    <option>劉德華</option>
    <option>周杰倫</option>
    <option>謝霆鋒</option>
</datalist>
fieldset:元素將表單內的相關元素分組,打包,和legend搭配使用.fieldset示例:
<fieldset>
    <legend>用戶登陸</legend>
    用戶名:<input type="text"><br /><br />
    密　碼:<input type="password">
</fieldset>

經常使用新屬性:
placeholder--><input type="text" placeholder="請輸入用戶名">    佔位符,顯示本身設置的提示信息
autofocus--><input type="text" autofocus="">    規定當頁面加載時input元素應該自動得到焦點
multiple--><input type="file" multiple>        多文件上傳
autocomplete--><input type="text" autocomplete="off">    規定表單是否應當啓用自動完成(補全)功能,須要與submit結合,且這個表單須要有name屬性纔有效
required--><input type="text" required="">    表示必填項
accesskey--><input type="text" accesskey="s">    規定激活(使元素得到焦點)元素的快捷鍵
示例:暱稱:<input type="text" required accesskey="s">,意味着無論光標在哪裏,只要按住alt+s就能夠把光標定位到該元素

新增的input type屬性值:
email--><input type="email">    輸入郵箱格式
tel--><input type="tel">    輸入手機號碼格式
url--><input type="url">    輸入url格式
number--><input type="number">    輸入數字格式
search--><input type="search">    搜索框
range--><input type="range">    自由拖動滑塊
time--><input type="time">        小時分鐘
date--><input type="date">        年月日
datetime--><input type="datetime">    時間
month--><input type="month">    年月
week--><input type="week">        星期 年
color--><input type="color" />    顏色
示例:
<form action="" accept-charset="utf-8"> <!-- 下列標籤必須結合form使用 -->
    郵箱:<input type="email" />    <!-- 只能是郵箱格式 -->
    手機:<input type="tel" />    <!-- 在PC端上不明顯 -->
    數字:<input type="number" /> <!-- 不能輸入數字外的字符 -->
    url:<input type="url" />    <!-- 必須輸入網址 -->
    搜索:<input type="search" />
    區域:<input type="range" />
    時間:<input type="time" />
    年月日:<input type="date" />
    年月:<input type="month" />
    星期:<input type="week" />
    datetime:<input type="datetime" />
    顏色:<input type="color" />
    <input type="submit" />
</form>

多媒體標籤:
embed:標籤訂義嵌入的內容
audio:播放音頻
video:播放視頻
多媒體embed(會使用)
embed能夠用來插入各類多媒體,格式能夠是Midl,Wav,AIFF,AU,MP3等等,url爲音頻或視頻文件及其路徑,
能夠是相對路徑或絕對路徑.
<embed src="視頻地址" allowfullScreen="true" quality="heigh" width="480" height="400"
align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

多媒體audio
HTML5經過<audio>標籤來解決音頻播放的問題,示例以下:
<audio src="./music/See You Again.mp3"></audio>
而且能夠經過附加屬性能夠更加友好地控制音頻的播放:
autoplay:自動播放
controls:是否顯示不默認播放控件
loop:循環播放
示例:
咱們的視頻支持 ogg, mp4, webM三種視頻格式
<video autoplay controls>
    <source src="/media/video.oga">
    <source src="/media/video.m4v">
    <object type="video/ogg" data="/media/video.oga" width="320" height="240">
    <param name="src" value="/media/video.oga">
    <param name="autoplay" value="false">
    <param name="autoStart" value="0">
    <p><a href="/media/video.oga">Download this video file.</a></p>
    </object>
</video>

html內嵌框架
<iframe>標籤會建立包含另一個html文件的內聯框架（即行內框架），src屬性來定義另外一個html文件的引用地址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條，代碼以下：
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

內嵌框架與a標籤配合使用
a標籤的target屬性能夠將連接到的頁面直接顯示在當前頁面的iframe中，代碼以下：
    <a href="01.html" target="myframe">頁面一</a>
    <a href="02.html" target="myframe">頁面二</a>
    <a href="03.html" target="myframe">頁面三</a>
    <iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>


單標籤:input,br,hr,img,base