內(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語法
- 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ǎng)聯(lián)盟劫流，創(chuàng)建于1994年是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(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īng)用技術(shù)工作小組是一個(gè)以推動(dòng)網(wǎng)絡(luò)HTML 5 標(biāo)準(zhǔn)為目的而成立的組織。在2004年凰浮，由Opera我抠、Mozilla基金會(huì)和蘋果這些瀏覽器廠商組成苇本。
HTML及相關(guān)概念的介紹
HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language) www萬維網(wǎng)的描述性語言。
XHTML指可擴(kuò)展超文本標(biāo)記語言（標(biāo)識(shí)語言）（EXtensible HyperText Markup Language）是一種置標(biāo)語言菜拓，表現(xiàn)方式與超文本標(biāo)記語言（HTML）類似瓣窄，不過語法上更加嚴(yán)格。
HTML5指的是HTML的第五次重大修改（第5個(gè)版本）(HTML5 是 W3C 與 WHATWG 合作的結(jié)果)
HTML發(fā)展歷史
三纳鼎、相關(guān)軟件的應(yīng)用以及站點(diǎn)的創(chuàng)建
1)站點(diǎn)的作用
A/ 用來歸納一個(gè)網(wǎng)站上所有的網(wǎng)頁俺夕、素材以及他們之間的聯(lián)系
B/ 規(guī)劃網(wǎng)站的所有內(nèi)容和代碼整合資源
2)創(chuàng)建站點(diǎn)的步驟
A/創(chuàng)建網(wǎng)頁所需各個(gè)文件夾 css、js贱鄙、images
3)文件的命名規(guī)則
A/ 件命名規(guī)則：用英文劝贸，不用中文
B/ 名稱全部用小寫英文字母、數(shù)字逗宁、下劃線的組合映九，其中不得包含漢字、空格和特殊字符疙剑；必須以英文字母開頭氯迂。@#￥%……！ -_
C/ 網(wǎng)站的首頁必須命名為index.html不建議使用shouye.html
四言缤、HTML基本結(jié)構(gòu)和HTML基本語法
HTML基本結(jié)構(gòu)
擴(kuò)展知識(shí)點(diǎn)
1：HTTP-EQUIV類似于HTTP的頭部協(xié)議嚼蚀，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(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（過渡型 常用這種）虐秦、
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的基本語法
1暮现、<常規(guī)標(biāo)記>
<標(biāo)記 屬性=“屬性值” 屬性=“屬性值”></標(biāo)記>
例如：<head></head>
2.空標(biāo)記
<標(biāo)記 屬性=“屬性值” />
例如：<meta charset=”utf-8”> <br/>
說明：
1.寫在<>中的第一個(gè)單詞叫做標(biāo)記还绘，標(biāo)簽，元素栖袋。
2.標(biāo)記和屬性用空格隔開蚕甥，屬性和屬性值用等號(hào)連接，屬性值必須放在“”號(hào)內(nèi)栋荸。
3.一個(gè)標(biāo)記可以沒有屬性也可以有多個(gè)屬性，屬性和屬性之間不分先后順序凭舶。
4.空標(biāo)記沒有結(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)頁中最好只使用一次身冀，如對(duì)一個(gè)網(wǎng)頁LOGO使用钝尸。
2、段落文本(p) <p>段落文本內(nèi)容</p> 標(biāo)識(shí)一個(gè)段落(段落與段落之間有段間距)
3搂根、空格 ? 所占位置沒有一個(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中有三種列表分別是：
無序列表，有序列表锦积，自定義列表
*無序列表
無序列表組成：
<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)的類型
語法：<ol type="a"></ol>
1 數(shù)字順序的有序列表（默認(rèn)值）（1, 2, 3, 4）。
a 字母順序的有序列表丰介，小寫（a, b, c, d）背蟆。
A 字母順序的有序列表，大寫（A,B,C,D)
i 羅馬數(shù)字基矮，小寫（i, ii, iii, iv）淆储。
I 羅馬數(shù)字，大寫（I, ii, iii, iv）家浇。
2)本砰、start 屬性規(guī)定有序列表的開始點(diǎn)。
語法：<ol start="5"></ol>
9钢悲、插入圖片
<img src="目標(biāo)文件路徑及全稱" alt="圖片替換文本" title="圖片標(biāo)題" />
注:所要插入的圖片必須放在站點(diǎn)下
title的作用:
在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示点额，鼠標(biāo)離開就沒有了舔株，HTML的絕大多數(shù)標(biāo)簽都支持title屬性，title屬性就是專門做提示信息的.
alt的作用:
alt屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁面顯示的提示信息还棱，它會(huì)直接輸出在原本加載圖片的地方载慈。
*相對(duì)路徑的寫法：
1)當(dāng)當(dāng)前文件與目標(biāo)文件在同一目錄下，直接書寫目標(biāo)文件文件名+擴(kuò)展名珍手；
<img src=”q12.jpg”/>
2)當(dāng)當(dāng)前文件與目標(biāo)文件所處的文件夾在同一目錄下办铡，寫法如下： 文件夾名/目標(biāo)文件全稱+擴(kuò)展名；
<img src=”images/q12.jpg”/>
3)當(dāng)當(dāng)前文件所處的文件夾和目標(biāo)文件所處的文件夾在同一目錄下琳要，寫法如下： ../目標(biāo)文件所處文件夾名/目標(biāo)文件文件名+擴(kuò)展名寡具；
<img src=”../images/q12.jpg”/>
10、超鏈接的應(yīng)用
語法：
<a href="目標(biāo)文件路徑及全稱/連接地址" title="提示文本">鏈接文本/圖片</a>
<a href="#"></a>空鏈接
屬性：target:頁面打開方式稚补，默認(rèn)屬性值_self童叠。
屬性值：_blank 新窗口打開
<a href="#" target="_blank">新頁面打開</a>
11、div和span的用法
<div ></div> 沒有具體含義课幕，統(tǒng)稱為塊標(biāo)簽厦坛， 用來設(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污桦、表單的作用及組成
表單的作用：用來收集用戶的信息的;
-
表單框
<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屬性必須寫亩歹，同一組單選按鈕的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是通過HTTP post機(jī)制，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個(gè)過程膨蛮。
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í)筆記
知乎專欄:前端入門知識(shí)錄
