整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
上一篇：php基礎(chǔ)知識(shí)
主要參考：https://www.w3school.com.cn
思維導(dǎo)圖
思維導(dǎo)圖第一版
web網(wǎng)站可以說(shuō)是互聯(lián)網(wǎng)的基礎(chǔ)。每個(gè)網(wǎng)站，可以比喻為一座座房子。寬帶網(wǎng)絡(luò)，就是房子門(mén)前的路。url地址，就是房子的門(mén)牌標(biāo)志。HTML代碼，就是建造房子的建筑材料（磚頭、水泥、鋼筋）；CSS代碼，就是裝修房子的裝修材料；那么Javascript代碼就是這房子的水電了？ JS代碼則更像是未來(lái)世界可以讓房子成為變形金剛的智能機(jī)器。因此，一些展示“老房子”的瀏覽器，可能并不支持Javascript。
定義：
HTML（Hyper Text Markup Language），是使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)的一種超文本標(biāo)記語(yǔ)言。
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(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ù)
參考上一篇：php基礎(chǔ)知識(shí)，安裝-集成環(huán)境與編輯器
推薦使用 phpstudy + phpstorm
操作步驟：1、在phpstudy 安裝目錄下，把代碼文件放大到根目錄www/ 下。
2、瀏覽器直接訪問(wèn) localhost/index.html即可看到效果。
HTML元素：是從開(kāi)始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
例如：<p>前面這個(gè)是開(kāi)始標(biāo)簽，中間文字是元素內(nèi)容，后面這個(gè)是結(jié)束標(biāo)簽</p>
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開(kāi)始標(biāo)簽中規(guī)定。
常用HTML元素屬性：
class ：規(guī)定元素的類(lèi)名（classname），一個(gè)html文件里面多個(gè)標(biāo)簽可以擁有相同的類(lèi)名。
id ：規(guī)定元素的唯一 id，一個(gè)html文件里面id不能相同。
style ：規(guī)定元素的行內(nèi)樣式（inline style）
1、標(biāo)題：標(biāo)題（Heading）是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
2、段落：通過(guò) <p> 標(biāo)簽定義。
3、注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋。
4、鏈接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 屬性規(guī)定鏈接的目標(biāo)。開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。
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> 元素沒(méi)有特定的含義。除此之外，由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行。如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span> 元素也沒(méi)有特定的含義。
當(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的輸入類(lèi)型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)。您能夠通過(guò)添加 selected 屬性來(lái)定義預(yù)定義選項(xiàng)。
<textarea>：定義多行輸入字段（文本域）
<button>：定義可點(diǎn)擊的按鈕
樣式表允許以多種方式規(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)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)。
selector {property: value}
1、派生選擇器：
通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，例如: h1 span{color:red;}
2、id選擇器：
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來(lái)定義。
3、類(lèi)選擇器：
以一個(gè)點(diǎn)號(hào)顯示，例如： .className{text-align: center;}
4、屬性選擇器：
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。例如： div[rel=’mm’]{ color:’#000’;}
可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。
注釋?zhuān)褐挥性谝?guī)定了 !DOCTYPE 時(shí)，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
5、后代選擇器（包含選擇器）：可以選擇作為某元素后代的元素
6、子元素選擇器：選擇作為某元素子元素的元素。例如：h1>span{font-size:16px;}
7、相鄰兄弟選擇器：可選擇緊接在另一元素后的元素，且二者有相同父元素。
例如：h1 + p {margin-top:50px;}
8、偽類(lèi)：用于向某些選擇器添加特殊的效果。
:active 向被激活的元素添加樣式
:focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式
:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式
:link 向未被訪問(wèn)的鏈接添加樣式
:visited 向已被訪問(wèn)的鏈接添加樣式
:first-child 向元素的第一個(gè)子元素添加樣式（不建議使用）
:lang 向帶有指定lang屬性的元素添加樣式
9、偽元素：用于向某些選擇器設(shè)置特殊效果。
:first-letter 向文本的第一個(gè)字母添加樣式
:first-line 向文本的首行添加樣式
:before 在元素之前添加內(nèi)容
:after 在元素之后添加內(nèi)容
在 HTML 中，某些字符是預(yù)留的。
在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。
如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）。
字符實(shí)體類(lèi)似這樣：
&entity_name; 或者 entity_number;
如需顯示小于號(hào)，我們必須這樣寫(xiě)：< 或 <
提示：使用實(shí)體名而不是數(shù)字的好處是，名稱(chēng)易于記憶。不過(guò)壞處是，瀏覽器也許并不支持所有實(shí)體名稱(chēng)（對(duì)實(shí)體數(shù)字的支持卻很好）。
HTML基礎(chǔ)教程： 瀏覽器中符號(hào)是怎么顯示出來(lái)的
不間斷空格（non-breaking space）
HTML 中的常用字符實(shí)體是不間斷空格( )。
瀏覽器總是會(huì)截短 HTML 頁(yè)面中的空格。如果您在文本中寫(xiě) 10 個(gè)空格，在顯示該頁(yè)面之前，瀏覽器會(huì)刪除它們中的 9 個(gè)。如需在頁(yè)面中增加空格的數(shù)量，您需要使用 字符實(shí)體。
實(shí)例
<html> <body> <h2>字符實(shí)體</h2> <p>&x;</p> <p>用實(shí)體數(shù)字（比如"divide"）或者實(shí)體名稱(chēng)（比如 "#247"）替代 "X"，然后查看結(jié)果。</p> </body> </html>
HTML基礎(chǔ)教程： 瀏覽器中符號(hào)是怎么顯示出來(lái)的
希望以上可以解決你們心中的一些疑惑，其中可能會(huì)有不對(duì)的地方或是需要改進(jìn)的地方，歡迎留言糾正。感覺(jué)還不錯(cuò)歡迎關(guān)注收藏轉(zhuǎn)載哦
一章 職業(yè)規(guī)劃和前景
第二章 html基本結(jié)構(gòu)
<html> <head></head> <body></body> </html>
第三章 html基本標(biāo)簽
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動(dòng)速度)
第四章 img圖片標(biāo)簽與路徑
第五章 三種列表的講解
<ul> <li></li> <li></li> <li></li> </ul>
<ol> <li>內(nèi)容一</li> <li>內(nèi)容二</li> <li>內(nèi)容三</li> </ol>
<ul> <li>柚子 <ul> <li>沙田柚</li> <li>蜜柚</li> </ul> </li> <li>荔枝</li> <li>蘋(píng)果</li></ul>
<ol> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>果汁</li> <li>牛奶</li></ol>
<dl> <dt>pc網(wǎng)頁(yè)制作</dt> <dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> <dt>手機(jī)網(wǎng)頁(yè)制作</dt> <dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd> </dl>
<dl> <dt>中國(guó)城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>廣州 </dd> <dt>美國(guó)城市</dt> <dd>華盛頓 </dd> <dd>芝加哥 </dd> <dd>紐約 </dd> </dl>
第六章 表單元素(上)
<form> <input type="text"/> </form>
<form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提 交" /> </form>
<form> <input type="hidden" name="hid" value="value"> </form>
<input type="text" name="" value="今天心情不錯(cuò)" /> <input type="radio" name="" value="" checked="checked"> <input type="checkbox" name="" value="" checked="checked"> <select name="" > <option value=""></option> <option value="" selected="selected"></option> <select>
<p>單向選擇</p> <label for="male">男：</label><input type="radio" name="sex" id="male"/> <label for="nv">女：</label><input type="radio" name="sex"checked="check"/>
第七章 表單和表格(下)
<form> <select name="" id=""> <option value="1">1月</option> <option value="2">2月</option> </select> </form>
<table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> </table>
<table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> <tr> <td>姓名</td> <td>性別</td> </tr> </table>
<table border="1"> <tr> <td >姓名</td> <td>性別</td> <td>愛(ài)好</td> </tr> </table>
第一部分總結(jié)：
HTML部分導(dǎo)圖總結(jié)
學(xué)習(xí)從來(lái)不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問(wèn)題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門(mén)資料，一起學(xué)習(xí)，一起成長(zhǎng)！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
