內(nèi)容概括:
- 1、介紹、HTML相關(guān)概念，HTML發(fā)展歷史
- 2、WEB標(biāo)準(zhǔn)，W3C/WHATWG/ECMA相關(guān)概念
- 3、相關(guān)軟件的應(yīng)用以及站點(diǎn)的創(chuàng)建
- 4、HTML基本結(jié)構(gòu)和HTML語(yǔ)法
- 5、HTML常用標(biāo)記
一、介紹、HTML相關(guān)概念，HTML發(fā)展歷史
移動(dòng)前端/WEB前端 網(wǎng)站建站流程
二、WEB標(biāo)準(zhǔn)，W3C/WHATWG/ECMA相關(guān)概念
WEB標(biāo)準(zhǔn)的概念及組成
組織解析：
W3C( World Wide Web Consortium )萬(wàn)維網(wǎng)聯(lián)盟，創(chuàng)建于1994年是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。 W3C (制定了結(jié)構(gòu)(xhtml、xml)和表現(xiàn)(css)的標(biāo)準(zhǔn)，非贏利性的。)
ECMA(European Computer Manufactures Association) 歐洲電腦場(chǎng)商聯(lián)合會(huì)。 ECMA制定了行為(DOM(文檔對(duì)象模型)，ECMAScript)標(biāo)準(zhǔn)
WHATWG網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作小組是一個(gè)以推動(dòng)網(wǎng)絡(luò)HTML 5 標(biāo)準(zhǔn)為目的而成立的組織。在2004年，由Opera、Mozilla基金會(huì)和蘋(píng)果這些瀏覽器廠商組成。
HTML及相關(guān)概念的介紹
HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language) www萬(wàn)維網(wǎng)的描述性語(yǔ)言。
XHTML指可擴(kuò)展超文本標(biāo)記語(yǔ)言（標(biāo)識(shí)語(yǔ)言）（EXtensible HyperText Markup Language）是一種置標(biāo)語(yǔ)言，表現(xiàn)方式與超文本標(biāo)記語(yǔ)言（HTML）類似，不過(guò)語(yǔ)法上更加嚴(yán)格。
HTML5指的是HTML的第五次重大修改（第5個(gè)版本）(HTML5 是 W3C 與 WHATWG 合作的結(jié)果)
HTML發(fā)展歷史
三、相關(guān)軟件的應(yīng)用以及站點(diǎn)的創(chuàng)建
1)站點(diǎn)的作用
A/ 用來(lái)歸納一個(gè)網(wǎng)站上所有的網(wǎng)頁(yè)、素材以及他們之間的聯(lián)系
B/ 規(guī)劃網(wǎng)站的所有內(nèi)容和代碼整合資源
2)創(chuàng)建站點(diǎn)的步驟
A/創(chuàng)建網(wǎng)頁(yè)所需各個(gè)文件夾 css、js、images
3)文件的命名規(guī)則
A/ 件命名規(guī)則：用英文，不用中文
B/ 名稱全部用小寫(xiě)英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；必須以英文字母開(kāi)頭。@#￥%……！ -_
C/ 網(wǎng)站的首頁(yè)必須命名為index.html不建議使用shouye.html
四、HTML基本結(jié)構(gòu)和HTML基本語(yǔ)法
HTML基本結(jié)構(gòu)
擴(kuò)展知識(shí)點(diǎn)
1：HTTP-EQUIV類似于HTTP的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
聲明了文檔的根元素是 html，它在公共標(biāo)識(shí)符被定義為"-//W3C//DTDXHTML1.0Transitional//EN" 的 DTD(Document Type Definition 文檔類型定義) 中進(jìn)行了定義。
瀏覽器將明白如何尋找匹配此公共標(biāo)識(shí)符的 DTD。
如果找不到，瀏覽器將使用公共標(biāo)識(shí)符后面的 URL 作為尋找 DTD 的位置
另外，需要知道的是，HTML 4.01 規(guī)定的三種文檔類型、XHTML 1.0 規(guī)定的三種 XML 文檔類型都是：Strict、Transitional 以及Frameset。
定義文檔類型 分為四種：
Strict（嚴(yán)格型)、
Trasitional（過(guò)渡型 常用這種）、
Frameset（框架型）、
手機(jī)瀏覽器DTD mobile
而這句<html xmlns="http://www.w3.org/1999/xhtml">，是在文檔中的<html> 標(biāo)簽中使用 xmlns 屬性，以指定整個(gè)文檔所使用的主要命名空間。
對(duì)于文檔聲明，了解這些就足夠了，現(xiàn)在的html5不再這么繁瑣，只需要： <!DOCTYPE html> <html> 就可以了。
HTML的基本語(yǔ)法
1、<常規(guī)標(biāo)記>
<標(biāo)記 屬性=“屬性值” 屬性=“屬性值”></標(biāo)記>
例如：<head></head>
2.空標(biāo)記
<標(biāo)記 屬性=“屬性值” />
例如：<meta charset=”utf-8”> <br/>
說(shuō)明：
1.寫(xiě)在<>中的第一個(gè)單詞叫做標(biāo)記，標(biāo)簽，元素。
2.標(biāo)記和屬性用空格隔開(kāi)，屬性和屬性值用等號(hào)連接，屬性值必須放在“”號(hào)內(nèi)。
3.一個(gè)標(biāo)記可以沒(méi)有屬性也可以有多個(gè)屬性，屬性和屬性之間不分先后順序。
4.空標(biāo)記沒(méi)有結(jié)束標(biāo)簽，用“/”代替。
五、HTML常用標(biāo)記
1、文本標(biāo)題（h1-h6）
<h1>LOGO</h1>
<h2>次要欄目或標(biāo)題-小標(biāo)題H2</h2>
<h3>再次要欄目或分類小標(biāo)題H3</h3>
<h4>文中分類小標(biāo)題H4</h4>
<h5>二級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
html標(biāo)題標(biāo)簽使用原則：
1、H1在一個(gè)網(wǎng)頁(yè)中最好只使用一次，如對(duì)一個(gè)網(wǎng)頁(yè)LOGO使用。
2、段落文本(p) <p>段落文本內(nèi)容</p> 標(biāo)識(shí)一個(gè)段落(段落與段落之間有段間距)
3、空格 ? 所占位置沒(méi)有一個(gè)確定的值,這與當(dāng)前字體字號(hào)都有關(guān)系.
4、換行(br)<br /> 換行是一個(gè)空標(biāo)記(強(qiáng)制換行)
5、加粗 加粗有兩個(gè)標(biāo)記A、<b>加粗內(nèi)容</b> B、<strong>加粗內(nèi)容</strong>
6、傾斜<em></em> ,<i></i>
7、水平線 <hr />空標(biāo)記
8、列表(ul,ol,dl)
HTML中有三種列表分別是：
無(wú)序列表，有序列表，自定義列表
*無(wú)序列表
無(wú)序列表組成：
<ul>
<li></li>
<li></li>
</ul>
*有序列表
有序列表組成：
<ol>
<li></li>
<li></li>
</ol>
*自定義列表
<dl>
<dt>名詞</dt>
<dd>解釋</dd>
</dl>
知識(shí)擴(kuò)展2----有序列表的屬性
1)、type:規(guī)定列表中的列表項(xiàng)目的項(xiàng)目符號(hào)的類型
語(yǔ)法：<ol type="a"></ol>
1 數(shù)字順序的有序列表（默認(rèn)值）（1, 2, 3, 4）。
a 字母順序的有序列表，小寫(xiě)（a, b, c, d）。
A 字母順序的有序列表，大寫(xiě)（A,B,C,D)
i 羅馬數(shù)字，小寫(xiě)（i, ii, iii, iv）。
I 羅馬數(shù)字，大寫(xiě)（I, ii, iii, iv）。
2)、start 屬性規(guī)定有序列表的開(kāi)始點(diǎn)。
語(yǔ)法：<ol start="5"></ol>
9、插入圖片
<img src="目標(biāo)文件路徑及全稱" alt="圖片替換文本" title="圖片標(biāo)題" />
注:所要插入的圖片必須放在站點(diǎn)下
title的作用:
在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示，鼠標(biāo)離開(kāi)就沒(méi)有了，HTML的絕大多數(shù)標(biāo)簽都支持title屬性，title屬性就是專門(mén)做提示信息的.
alt的作用:
alt屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息，它會(huì)直接輸出在原本加載圖片的地方。
*相對(duì)路徑的寫(xiě)法：
1)當(dāng)當(dāng)前文件與目標(biāo)文件在同一目錄下，直接書(shū)寫(xiě)目標(biāo)文件文件名+擴(kuò)展名；
<img src=”q12.jpg”/>
2)當(dāng)當(dāng)前文件與目標(biāo)文件所處的文件夾在同一目錄下，寫(xiě)法如下： 文件夾名/目標(biāo)文件全稱+擴(kuò)展名；
<img src=”images/q12.jpg”/>
3)當(dāng)當(dāng)前文件所處的文件夾和目標(biāo)文件所處的文件夾在同一目錄下，寫(xiě)法如下： ../目標(biāo)文件所處文件夾名/目標(biāo)文件文件名+擴(kuò)展名；
<img src=”../images/q12.jpg”/>
10、超鏈接的應(yīng)用
語(yǔ)法：
<a href="目標(biāo)文件路徑及全稱/連接地址" title="提示文本">鏈接文本/圖片</a>
<a href="#"></a>空鏈接
屬性：target:頁(yè)面打開(kāi)方式，默認(rèn)屬性值_self。
屬性值：_blank 新窗口打開(kāi)
<a href="#" target="_blank">新頁(yè)面打開(kāi)</a>
11、div和span的用法
<div ></div> 沒(méi)有具體含義，統(tǒng)稱為塊標(biāo)簽， 用來(lái)設(shè)置文檔區(qū)域，是文檔布局常用對(duì)象
<span> </span> 文本結(jié)點(diǎn)標(biāo)簽 可以是某一小段文本，或是某一個(gè)字。
12、數(shù)據(jù)表格的作用及組成
作用：顯示數(shù)據(jù)
表格組成
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注：一個(gè)tr表示一行;一個(gè)td表示一列(一個(gè)單元格)
*數(shù)據(jù)表格的相關(guān)屬性
- width="表格的寬度"
- height="表格的高度"
- border="表格的邊框"
- bgcolor="表格的背景色" bg=background
- bordercolor="表格的邊框顏色"
- cellspacing="單元格與單元格之間的間距"
- cellpadding="單元格與內(nèi)容之間的空隙"
- 對(duì)齊方式：align="left/center/right";
- 合并單元格屬性：
colspan=“所要合并的單元格的列數(shù)"合并列;
rowspan=“所要合并單元格的行數(shù)”合并行;
13、表單的作用及組成
表單的作用：用來(lái)收集用戶的信息的;
-
表單框
<form name="表單名稱" method="post/get" action=""> </form> -
文本框
<input type="text" value="默認(rèn)值"/> -
密碼框
<input type="password" /> <input type="password" placeholder="密碼" /> -
重置按鈕
<input type="reset" value="按鈕內(nèi)容" /> -
單選框/單選按鈕
<input type="radio" name="ral" /> <input type="radio" name="ral" checked="checked" />
單選按鈕里的name屬性必須寫(xiě)，同一組單選按鈕的name屬性值必須一樣。
checked="checked"(默認(rèn)選中；)
disabled="disabled"禁用
-
復(fù)選框
<input type="checkbox" name="like" /> <input type="checkbox" name="like" disabled="disabled" />
(disabled="disabled" :禁用)
(checked="checked" :默認(rèn)選中)
-
下拉菜單
<select name=""> <option>菜單內(nèi)容</option> </select> -
多行文本框（文本域）
<textarea name="textareal" cols="字符寬度" rows="行數(shù)"> </textarea> -
按鈕
<input name="'" type="button" value=“按鈕內(nèi)容” /> <input name="'" type="submit" value=“按鈕內(nèi)容” /> <button></button>button和submit的區(qū)別是：
submit是提交按鈕起到提交信息的作用，type類型是button只起到跳轉(zhuǎn)的作用，不進(jìn)行提交。
擴(kuò)展知識(shí)點(diǎn)3：
對(duì)于不同的輸入類型，value 屬性的用法的意義
value 屬性為 input 元素設(shè)定值。
對(duì)于不同的輸入類型，value 屬性的用法也不同：
type="button","reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password" - 定義輸入字段的初始值
type="checkbox", "radio" - 定義與輸入相關(guān)聯(lián)的值
注釋：
<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。
擴(kuò)展知識(shí)點(diǎn)4：
<form name="表單名稱" method="post/get" action=""></form>
Form中的獲取數(shù)據(jù)的兩個(gè)方式get和post的區(qū)別？
1. get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)。
2. get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng)，在URL中可以看到。post是通過(guò)HTTP post機(jī)制，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個(gè)過(guò)程。
3. 對(duì)于get方式，服務(wù)器端用Request.QueryString獲取變量的值，對(duì)于post方式，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。
4. get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。
5. get安全性非常低，post安全性較高。但是執(zhí)行效率卻比Post方法好。
** 建議： **
1、get方式的安全性較Post方式要差些，包含機(jī)密信息的話，建議用Post數(shù)據(jù)提交方式；
2、在做數(shù)據(jù)查詢時(shí)，建議用Get方式；而在做數(shù)據(jù)添加、修改或刪除時(shí)，建議用Post方式；
微信公眾號(hào):Hi前端學(xué)習(xí)筆記
知乎專欄:前端入門(mén)知識(shí)錄
