主要參考：https://www.w3school.com.cn
思維導(dǎo)圖
思維導(dǎo)圖第一版
1耗美、web編程基礎(chǔ)-什么是HTML、CSS航缀、Javascript
web網(wǎng)站可以說是互聯(lián)網(wǎng)的基礎(chǔ)商架。每個(gè)網(wǎng)站，可以比喻為一座座房子谬盐。寬帶網(wǎng)絡(luò)甸私，就是房子門前的路诚些。url地址飞傀，就是房子的門牌標(biāo)志皇型。HTML代碼，就是建造房子的建筑材料（磚頭砸烦、水泥弃鸦、鋼筋）；CSS代碼幢痘，就是裝修房子的裝修材料唬格；那么Javascript代碼就是這房子的水電了？ JS代碼則更像是未來世界可以讓房子成為變形金剛的智能機(jī)器颜说。因此购岗，一些展示“老房子”的瀏覽器，可能并不支持Javascript门粪。
定義：
HTML（Hyper Text Markup Language）喊积，是使用標(biāo)記標(biāo)簽來描述網(wǎng)頁(yè)的一種超文本標(biāo)記語(yǔ)言。
Web 瀏覽器的作用是讀取 HTML 文檔玄妈，并以網(wǎng)頁(yè)的形式顯示出它們乾吻。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來解釋頁(yè)面的內(nèi)容拟蜻。HTML定義網(wǎng)頁(yè)的內(nèi)容绎签。
CSS（Cascading Style Sheets），指層疊樣式表酝锅。樣式定義如何顯示HTML元素刚操，規(guī)定網(wǎng)頁(yè)的布局。
Javascript 則是屬于HTML和Web的編程語(yǔ)言单雾，對(duì)網(wǎng)頁(yè)進(jìn)行編程诉植。
Jquery 是一個(gè)Javascript函數(shù)庫(kù)
2、環(huán)境配置
參考上一篇：php基礎(chǔ)知識(shí)阁谆，安裝-集成環(huán)境與編輯器
推薦使用 phpstudy + phpstorm
操作步驟：1碳抄、在phpstudy 安裝目錄下，把代碼文件放大到根目錄www/ 下场绿。
??????????????2剖效、瀏覽器直接訪問 localhost/index.html即可看到效果。
3焰盗、HTML
HTML元素：是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼璧尸。
例如：<p>前面這個(gè)是開始標(biāo)簽，中間文字是元素內(nèi)容熬拒，后面這個(gè)是結(jié)束標(biāo)簽</p>
HTML 標(biāo)簽可以擁有屬性爷光。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對(duì)的形式出現(xiàn)澎粟，比如：name="value"蛀序。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定欢瞪。
常用HTML元素屬性：
class ：規(guī)定元素的類名（classname），一個(gè)html文件里面多個(gè)標(biāo)簽可以擁有相同的類名徐裸。
id???：規(guī)定元素的唯一 id遣鼓，一個(gè)html文件里面id不能相同。
style ：規(guī)定元素的行內(nèi)樣式（inline style）
3.1重贺、常用HTML標(biāo)簽：
1骑祟、標(biāo)題：標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題气笙。<h6> 定義最小的標(biāo)題次企。
2、段落：通過 <p> 標(biāo)簽定義潜圃。
3抒巢、注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋。
4秉犹、鏈接：<a >www.yummuu.com</a> 蛉谜。href 屬性規(guī)定鏈接的目標(biāo)。開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來顯示崇堵。
5型诚、圖像：<img src="yummuu.png" alt="Yummuu" /> 。src 圖像源屬性鸳劳，alt替換文本屬性狰贯。
6、表格標(biāo)簽：
7赏廓、列表標(biāo)簽
8涵紊、塊級(jí)元素和內(nèi)聯(lián)元素
<div> 元素是塊級(jí)元素，它是可用于組合其他 HTML 元素的容器幔摸。
<div> 元素沒有特定的含義摸柄。除此之外，由于它屬于塊級(jí)元素既忆，瀏覽器會(huì)在其前后顯示折行驱负。如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性患雇。
<div> 元素的另一個(gè)常見的用途是文檔布局跃脊。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法苛吱。<table> 元素的作用是顯示表格化的數(shù)據(jù)酪术。
<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器翠储。
<span> 元素也沒有特定的含義绘雁。
當(dāng)與 CSS 一同使用時(shí)橡疼，<span> 元素可用于為部分文本設(shè)置樣式屬性。
兩者的區(qū)別：就是在顯示時(shí)是否起新行咧七。塊級(jí)元素會(huì)起新行衰齐，而內(nèi)聯(lián)元素則不會(huì)任斋。
9继阻、框架與內(nèi)聯(lián)框架：frame，<iframe src=" " name=" "></iframe>
10废酷、腳本：<script> 定義客戶端腳本瘟檩，如Javascript；<noscript> 為不支持客戶端腳本的瀏覽器定義替代內(nèi)容澈蟆。
11墨辛、頭部元素：
<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本趴俘，指示瀏覽器在何處可以找到樣式表睹簇，提供元信息，等等寥闪。
以下標(biāo)簽都可以添加到 head 部分：<title>太惠、<base>、<link>疲憋、<meta>凿渊、<script> 以及 <style>。
<title>：在所有 HTML/XHTML 文檔中都是必需的缚柳。它能夠定義瀏覽器工具欄中的標(biāo)題埃脏，提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題，顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題秋忙。
<base>：為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）
<link> ：定義文檔與外部資源之間的關(guān)系彩掐。最常用于連接樣式表。
<style>：用于為 HTML 文檔定義樣式信息灰追。
<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)佩谷。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的监嗜。典型的情況是谐檀，meta 元素被用于規(guī)定頁(yè)面的描述、關(guān)鍵詞裁奇、文檔的作者桐猬、最后修改時(shí)間以及其他元數(shù)據(jù)。
<meta> 標(biāo)簽始終位于 head 元素中刽肠。元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面）溃肪，搜索引擎（關(guān)鍵詞）免胃，或其他 web 服務(wù)。
<script> 標(biāo)簽用于定義客戶端腳本惫撰，比如 JavaScript羔沙。
12、HTML實(shí)體
在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>）厨钻，這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽扼雏。如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）夯膀。
13诗充、表單元素：
<form> ：定義 HTML 表單。
<input> ：是最重要的表單元素诱建。<input> 元素有很多形態(tài)蝴蜓，根據(jù)不同的 type 屬性。
input的輸入類型type有text俺猿、password茎匠、submit、radio押袍、checkbox诵冒、button；（HTML5新增）number伯病、date造烁、color、range午笛、month惭蟋、week、time药磺、datetime告组、datetime-local、email癌佩、search木缝、tel、url围辙。
input的常用屬性：value我碟、readonly、disabled姚建、size矫俺、maxlength；（HTML5新增）required、multiple厘托、pattern友雳、min和max、list铅匹、height和width押赊、autocomplete
<select> ：定義下拉列表 <option> 元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)包斑。您能夠通過添加 selected 屬性來定義預(yù)定義選項(xiàng)流礁。
<textarea>：定義多行輸入字段（文本域）
<button>：定義可點(diǎn)擊的按鈕
4、CSS
樣式表允許以多種方式規(guī)定樣式信息舰始。樣式可以規(guī)定在單個(gè)的 HTML 元素中崇棠，在 HTML 頁(yè)的頭元素中咽袜，或在一個(gè)外部的 CSS 文件中丸卷。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。
層疊次序
當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)询刹，會(huì)使用哪個(gè)樣式呢谜嫉？
一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中凹联，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)沐兰。
1、瀏覽器缺省設(shè)置
2蔽挠、外部樣式表
3住闯、內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
4、內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此澳淑，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)比原，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明杠巡，或者瀏覽器中的樣式聲明（缺省值）量窘。
4.1、CSS語(yǔ)法
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器氢拥，以及一條或多條聲明蚌铜。
selector {declaration1; declaration2; ... declarationN }
每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）嫩海。每個(gè)屬性有一個(gè)值冬殃。屬性和值被冒號(hào)分開。
selector {property: value}
4.2叁怪、CSS選擇器
1审葬、派生選擇器：
通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，例如: h1 span{color:red;}
2、id選擇器：
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式耳璧。id 選擇器以 "#" 來定義成箫。
3、類選擇器：
以一個(gè)點(diǎn)號(hào)顯示旨枯，例如： .className{text-align: center;}
4蹬昌、屬性選擇器：
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。例如： div[rel=’mm’]{ color:’#000’;}
可以為擁有指定屬性的 HTML 元素設(shè)置樣式攀隔，而不僅限于 class 和 id 屬性皂贩。
注釋：只有在規(guī)定了 !DOCTYPE 時(shí)，IE7 和 IE8 才支持屬性選擇器昆汹。在 IE6 及更低的版本中明刷，不支持屬性選擇。
5满粗、后代選擇器（包含選擇器）：可以選擇作為某元素后代的元素
6辈末、子元素選擇器：選擇作為某元素子元素的元素。例如：h1>span{font-size:16px;}
7映皆、相鄰兄弟選擇器：可選擇緊接在另一元素后的元素挤聘，且二者有相同父元素。
例如：h1 + p {margin-top:50px;}
8捅彻、偽類：用于向某些選擇器添加特殊的效果组去。
:active 向被激活的元素添加樣式
:focus 向擁有鍵盤輸入焦點(diǎn)的元素添加樣式
:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式
:link 向未被訪問的鏈接添加樣式
:visited 向已被訪問的鏈接添加樣式
:first-child 向元素的第一個(gè)子元素添加樣式（不建議使用）
:lang 向帶有指定lang屬性的元素添加樣式
9步淹、偽元素：用于向某些選擇器設(shè)置特殊效果从隆。
:first-letter 向文本的第一個(gè)字母添加樣式
:first-line 向文本的首行添加樣式
:before 在元素之前添加內(nèi)容
:after 在元素之后添加內(nèi)容
4.3、常用CSS屬性
