【前端進階100天】Day01 HTML基礎

時間 2020-01-28

標籤前端進階100天 day01 day html 基礎欄目 HTML 简体版

原文原文鏈接

今日內容：css

一、本專業介紹、HTML相關概念，HTML發展歷史
二、WEB標準，W3C/WHATWG/ECMA相關概念
三、相關軟件的應用以及站點的建立
四、HTML基本結構和HTML語法
五、HTML經常使用標記

1、本專業介紹、HTML相關概念，HTML發展歷史

本專業介紹

移動前端/WEB前端html

網站建站流程前端

HTML及相關概念的介紹

HTML 指的是超文本標記語言 (Hyper Text Markup Language) www萬維網的描述性語言。html5

XHTML指可擴展超文本標記語言（標識語言）（EXtensible HyperText Markup Language）是一種置標語言，表現方式與超文本標記語言（HTML）相似，不過語法上更加嚴格。瀏覽器

HTML5指的是HTML的第五次重大修改（第5個版本）(HTML5 是 W3C 與 WHATWG 合做的結果)。安全

HTML發展歷史

2、WEB標準，W3C/WHATWG/ECMA相關概念

WEB標準的概念及組成

組織解析

（1）W3C( World Wide Web Consortium )萬維網聯盟，建立於1994年是Web技術領域最具權威和影響力的國際中立性技術標準機構。服務器

W3C 制定告終構(xhtml、xml)和表現(css)的標準，非贏利性的。網絡

（2）ECMA(European Computer Manufactures Association) 歐洲電腦場商聯合會。框架

ECMA制定了行爲(DOM(文檔對象模型)，ECMAScript)標準。ide

（3）WHATWG網頁超文本應用技術工做小組是：

一個以推進網絡HTML 5 標準爲目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。

3、相關軟件的應用以及站點的建立

站點的做用

用來概括一個網站上全部的網頁、素材以及他們之間的聯繫
規劃網站的全部內容和代碼整合資源

建立站點的步驟

建立網頁所需各個文件夾 css、js、images、html

文件的命名規則

文件命名規則：用英文，不用中文；
名稱所有用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；
必須以英文字母開頭；
網站的首頁必須命名爲index.html不建議使用shouye.html。

4、HTML基本結構和HTML基本語法

HTML基本結構

<title>網頁標題</title>

<!DOCTYPE html>聲明文檔類型，告知瀏覽器以何種方式解析頁面。

拓展知識點：

HTTP-EQUIV相似於HTTP的頭部協議，它迴應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/D...;

聲明瞭文檔的根元素是 html，它在公共標識符被定義爲 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的 DTD(Document Type Definition 文檔類型定義) 中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的 DTD。若是找不到，瀏覽器將使用公共標識符後面的 URL 做爲尋找 DTD 的位置

另外，須要知道的是，HTML 4.01 規定的三種文檔類型、XHTML 1.0 規定的三種

XML 文檔類型都是：Strict、Transitional 以及 Frameset。

定義文檔類型分爲四種：Strict（嚴格型)、Trasitional（過渡型經常使用這種）、Frameset（框架型）、手機瀏覽器DTD mobile

而這句<html xmlns="http://www.w3.org/1999/xhtml">，是在文檔中的<html> 標籤中使用 xmlns 屬性，以指定整個文檔所使用的主要命名空間。

對於文檔聲明，瞭解這些就足夠了，如今的html5再也不這麼繁瑣，只須要：

<!DOCTYPE html>

<html>

就能夠了。

HTML的基本語法

1.<常規標記>雙標記

<標記屬性=「屬性值」屬性=「屬性值」></標記>

例如：<head></head>

2.空標記單標記

<標記屬性=「屬性值」 />

例如：<meta charset=」utf-8」> <br/>

說明：

1.寫在<>中的第一個單詞叫作標記，標籤，元素。

2.標記和屬性用空格隔開，屬性和屬性值用等號鏈接，屬性值必須放在「」號內。

3.一個標記能夠沒有屬性也能夠有多個屬性，屬性和屬性之間不分前後順序。

4.空標記沒有結束標籤，用「/」代替。

5、HTML經常使用標記

1.文本標題（h1-h6）

<h2>次要欄目或標題-小標題H2</h2>

<h3>再次要欄目或分類小標題H3</h3>

<h4>文中分類小標題H4</h4>

html標題標籤使用原則：

h1在一個網頁中最好只使用一次，如對一個網頁LOGO使用。

h1 最重要的標題只有一個

h只到h6

h1-h6是塊元素，獨佔一行。

h標籤儘可能不要嵌套

2.段落文本(p)

<p>段落文本內容</p>

標識一個段落(段落與段落之間有段間距)

p最多能夠嵌套a和span標籤

p爲常規標記，必須成對出現。

段落標籤<p>中能夠包含多行文字，文字內容將隨瀏覽窗口大小自動換行。

p標籤是小標籤，不能嵌套p標籤。

3.空格（& nbsp;）

所佔位置沒有一個肯定的值，這與當前字體字號都有關係。

4.換行(br)

單標籤

換行是一個空標記(強制換行)

5.加粗加粗有兩個標記/

A、加粗內容

B、加粗內容

html是語義化標籤，會比更粗。

6.傾斜

///都是內聯元素（行內元素）

7.水平線

是空標記

8.列表(ul,ol,dl)

HTML中有三種列表，分別是：無序列表，有序列表，自定義列表。

無序列表

無序列表組成：

<ul>(unordered list)

通常用於編寫導航

</ul>

有序列表

有序列表組成：

<ol>(ordered list)

</ol>

拓展知識點：有序列表的屬性

（1）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）。

（2）start 屬性規定有序列表的開始點。

語法：<ol start="5"></ol>

自定義列表

<dl>(definition list)

<dt>名詞</dt> 在dl中只能寫一個

<dd>解釋</dd> 能夠寫多個

(definition description)

</dl>

9.圖片

注:所要插入的圖片必須放在站點下

title的做用: 在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標籤都支持title屬性，title屬性就是專門作提示信息的。

全部的標籤均可以加title屬性。

alt的做用:alt屬性是在你的圖片由於某種緣由不能加載時在頁面顯示的提示信息，它會直接輸出在本來加載圖片的地方。

alt和title一是起到提示做用，二是讓網絡爬蟲識別。搜索引擎優化時須要有alt，沒有alt時，title也有alt功能。

相對路徑的寫法：

（1）噹噹前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；<img src="q12.jpg"/> 或者<img src="./q12.jpg"/>

（2）噹噹前文件與目標文件所處的文件夾在同一目錄下，寫法以下：

文件夾名/目標文件全稱+擴展名；<img src=」images/q12.jpg」/>

（3）噹噹前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法以下：

../目標文件所處文件夾名/目標文件文件名+擴展名；

一、圖片的三種格式：

jpg：清晰，體積大，背景不透明；

gif：體積小，能夠作動圖，不清晰，可作透明背景；

png8：png比gif體積更小，背景透明；

png24：比png8更清晰，背景透明，體積小；

IE6中png24背景不透明

二、圖片高級-透明圖片

（一）網頁上經常使用的圖片格式（jpg,png,gif）

支持透明：gif，png(png8,png24,png32)

（二）網頁上的圖片形式（插入圖片和背景圖）

（三）插入圖片透明

A.圖片背景透明：

.gif：支持

.png8：支持(建議使用)

.png24：IE6不支持，其它內核瀏覽器支持（PS製做)

.png32：IE6不支持，其它內核瀏覽器支持

B.圖片自己透明

.png24：IE6不支持（ps製做)，可用filter兼容。

.png32：IE6不支持，可用filter兼容。

半透明插入圖片兼容IE6作法:（使用png32或PS製做的png24半透明圖片）：

樣式：

.alpha{display:none;_display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="圖片路徑",sizingMethod="scale");width:value;height:value;}

.ie6hidden{_display:none;}

</style>

結構：

三、網頁上經常使用的圖片格式

（1）jpg:有損壓縮格式，靠損失圖片自己的質量來減少圖片的體積，適用於顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )

（2）gif：有損壓縮格式，靠損失圖片的色彩數量來減少圖片的體積，支持透明，支持動畫，適用於顏色數量較少的圖像;

（3）png:有損壓縮格式，損失圖片的色彩數量來減少圖片的體積，支持透明，不支持動畫，是fireworks的源文件格式，適用於顏色數量較少的圖像;

10.超連接的應用

語法：

連接文本/圖片

空連接

屬性：

target:頁面打開方式，默認屬性值_self。 在當前窗口打開

不加target在當前頁面打開

屬性值：_blank 新窗口打開

新頁面打開

a標籤的默認字體是藍色，必須在a上修改字體顏色。

11.div和span的用法

<div ></div>

沒有具體含義，統稱爲塊標籤，獨佔一行。

用來設置文檔區域，是文檔佈局經常使用對象。

<div>全部標籤均可以嵌套，包括自身。

文本結點標籤，直接嵌套文本。

<span>只嵌套文本，通常不嵌套其餘標籤。

能夠是某一小段文本，或是某一個字。

12.數據表格的做用及組成

做用：顯示數據用於後臺信息管理頁面

表格組成

<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">

<tr >

</tr>

</table>

注：一個tr表示一行;一個td表示一列(一個單元格)

數據表格的相關屬性

（1）width="表格的寬度"

（2）height="表格的高度"

（3）border="表格的邊框"

（4）bgcolor="表格的背景色" bg=background

（5）bordercolor="表格的邊框顏色"

（6）cellspacing="單元格與單元格之間的間距"

（7）cellpadding="單元格與內容之間的空隙" cellpadding/cellspacing 只能加在table上

（8）水平對齊方式：align="left/center/right";

垂直對齊方式：valign=「top/middle/bottom「；加在table上無效

（9）合併單元格屬性：添加給td的屬性必須寫在結構裏

colspan=「所要合併的單元格的列數"合併列;

rowspan=「所要合併單元格的行數」合併行;

先作列合併，再作行合併。

合併的時候從後往前合併，不影響前面。

用空格&nbsp；把空的內容撐開

（10）caption

<caption> 標籤訂義表格的標題。

<caption> 標籤必須直接放置到 <table> 標籤以後。

您只能對每一個表格定義一個標題。

提示：一般這個標題會被居中於表格之上。然而，CSS 屬性 "text-align" 和 "caption-side" 能用來設置標題的對齊方式和顯示位置。

（11)th

<th> 標籤訂義 HTML 表格中的表頭單元格。

HTML 表格有兩種單元格類型：

表頭單元格 - 包含頭部信息（由 th 元素建立）
標準單元格 - 包含數據（由 td元素建立）

th 元素中的文本呈現爲粗體而且居中。

td 元素中的文本是普通的左對齊文本。

13.表單的做用及組成

表單的做用：用來收集用戶的信息的;

（1)表單框

form必須寫，form中的action是連接網址，把我的信息提交給服務器。

form是數據傳輸通道。

action=「」；寫服務器域名或網址。

method是提交方式，post：傳輸，向服務器提交、修改、刪除都用post，get不安全；get：獲取，不做爲提交來使用；

Form中的獲取數據的兩個方式get和post的區別？

（1）get是從服務器上獲取數據，post是向服務器傳送數據。

（2）get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。get是顯式提交，post是隱式提交。

（3）對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。

（4）get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制。

（5） get安全性很是低，post安全性較高。可是執行效率卻比Post方法好。

建議：

（1）get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；

（2）在作數據查詢時，建議用Get方式；而在作數據添加、修改或刪除時，建議用Post方式；

（2）文本框

文本框必須寫在form裏。

input是表單控件，類型經過type的屬性值來決定，表單控件必須寫在form裏。

type是當前input的顯示狀態。

value是提示信息，須要手動刪除。是個老屬性。

input不獲取焦點，使用屬性：outline:none;

（3）密碼框

IE6不兼容placeholder屬性

（4）重置按鈕

文本框的value值能夠手動刪除，重置按鈕不能夠。

（5）單選框/單選按鈕

單選按鈕裏的name屬性必須寫，同一組單選按鈕的name屬性值必須同樣。

checked="checked"(默認選中；)

disabled="disabled"禁用

屬性與屬性值相同時屬性值能夠不寫，只寫屬性。

（6）複選框

(disabled="disabled" :禁用)

(checked="checked" :默認選中)

checkbox和radio必須設置value屬性值。

（7）下拉菜單雙標籤父子級嵌套

</select>

（8）多行文本框（文本域）雙標籤

（9）按鈕

<input name="'" type="button" value=「按鈕內容」 /> 默認爲空

<input name="'" type="submit" value=「按鈕內容」 /> 默認爲提交

button和submit的區別是：

submit有提交表單功能，button沒有。

submit是提交按鈕，起到提交信息的做用。button只起到跳轉的做用，不進行提交。

按鈕寬度和文本框寬度相加不能夠等於form，按鈕和文本代碼中間有空格時中間會有空隙。

添加邊框會侵佔元素的height，不會添加在寬高以外，點擊邊框也能選選中按鈕。

對於不一樣的輸入類型，value 屬性的用法的意義:

value 屬性爲 input 元素設定值。

對於不一樣的輸入類型，value 屬性的用法也不一樣：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password" - 定義輸入字段的初始值

type="checkbox", "radio" - 定義與輸入相關聯的值

註釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

拓展知識點：Button標籤

使用input建立的button只是提供按鈕樣式，有跳轉功能，使用雙標籤button建立的按鈕有提交功能。

1、html button標籤訂義和用法：

button標籤是什麼意思：<button> 標籤訂義一個按鈕。

在 button 元素內部，您能夠放置內容，好比文本或圖像。這是該元素與使用 input 元素建立的按鈕之間的不一樣之處。

<button> 控件與 <input type="button"> 相比，提供了更爲強大的功能和更豐富的內容。<button> 與 </button> 標籤之間的全部內容都是按鈕的內容，其中包括任何可接受的正文內容，好比文本或多媒體內容。例如，咱們能夠在按鈕中包括一個圖像和相關的文本，用它們在按鈕中建立一個吸引人的標記圖像。

惟一禁止使用的元素是圖像映射，由於它對鼠標和鍵盤敏感的動做會干擾表單按鈕的行爲。

請始終爲按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button"，而其餘瀏覽器中的默認值是 "submit"。

二：HTML <button> 標籤實例

如下代碼標記了一個按鈕

三：瀏覽器支持

全部主流瀏覽器都支持 <button> 標籤。

重要事項：若是在 HTML 表單中使用 button 元素，不一樣的瀏覽器會提交不一樣的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其餘瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 input 元素來建立按鈕。