????????????????????????????????????最基礎(chǔ)的的HTML
基本標(biāo)簽
< h1> 與 <
/h1> 之間的文本被顯示為標(biāo)題 < p> 與 < /p> 之間的文本被顯示為段落
HTML標(biāo)題 Heading 是通過(guò) < h1> - < h6> 等標(biāo)簽進(jìn)行定義的。
HTML段落 paragraph 是通過(guò) < p> 標(biāo)簽進(jìn)行定義的屎即。?
HTML鏈接 鏈接 是通過(guò) <a> 標(biāo)簽進(jìn)行定義的。
HTML圖像 image是通過(guò) <img> 標(biāo)簽進(jìn)行定義的。 示例：
<h1 align=”center”>----------------------設(shè)置位置為中間
--------------設(shè)置body背景顏色
Style 可以用來(lái)設(shè)置格式<p>，<h>唱蒸。
Eg: <h1 style="color:
aqua;font-size:px;">hhhhhhh</h1>-------設(shè)置顏色
??? ----------------------------設(shè)置位置
HTML標(biāo)題 Heading 是通過(guò) < h1> - < h6> 等標(biāo)簽進(jìn)行定義的廉赔。 示例：
This?is?first?heading
This?is?second?heading
This?is?third?heading
HTML段落 paragraph 是通過(guò) < p> 標(biāo)簽進(jìn)行定義的。 示例：
This?is?a?paragraph.
This?is?another?paragraph.
HTML鏈接 鏈接 是通過(guò) < a> 標(biāo)簽進(jìn)行定義的辽慕。 示例：
This?is?a?link
HTML圖像 image是通過(guò) <img> 標(biāo)簽進(jìn)行定義的。 示例：
用圖片添加鏈接
<a >
<img src="https://eduimage.nosdn.127.net/5B8826377EE623C7B6328E8F8B8D2871.png?imageView&thumbnail=510y288&quality=100&thumbnail=223x125&quality=100">
</a>
打開(kāi)連接之后是否新建窗口
打開(kāi)方式分為在本頁(yè)打開(kāi)和在新的瀏覽器窗口打開(kāi)赦肃，默認(rèn)情況下溅蛉，超級(jí)鏈接打開(kāi)新頁(yè)面的方式是自我覆蓋（就是在本頁(yè)打開(kāi)）公浪。根據(jù)瀏覽者的不同需要，讀者可以指定超級(jí)鏈接的其他打開(kāi)新窗口的方式船侧。超級(jí)鏈接標(biāo)簽提供了target屬性進(jìn)行設(shè)置欠气，取值分別為_(kāi)self（自我覆蓋，默認(rèn)）镜撩、_blank（創(chuàng)建新窗口打開(kāi)新頁(yè)面）预柒。下面我們就來(lái)動(dòng)手區(qū)分下這兩個(gè)屬性的區(qū)別（由于我們已近寫過(guò)默認(rèn)的情況，這里我們就只添加_blank屬性）
在前面的基礎(chǔ)上我們?cè)?lt; a>標(biāo)簽加入target屬性：target="_blank"
超鏈接添加提示文字
有些時(shí)候超鏈接文字不足以說(shuō)明點(diǎn)擊以后所要鏈接的內(nèi)容袁梗，所以這個(gè)時(shí)候我們就需要給超鏈接添加提示文字宜鸯，加以描述下一個(gè)鏈接的內(nèi)容，當(dāng)光標(biāo)停留在超鏈接上時(shí)遮怜，提示語(yǔ)言就會(huì)顯現(xiàn)淋袖，會(huì)讓頁(yè)面顯現(xiàn)的很簡(jiǎn)介。設(shè)計(jì)到的屬性就是title锯梁，下面我們?cè)賮?lái)動(dòng)手實(shí)驗(yàn)一把 下面就是實(shí)驗(yàn)內(nèi)容和效果
HTML表格
每個(gè)表格均有若干行（由 < tr> 標(biāo)簽定義）适贸，每行被分割為若干單元格（由 < td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data）涝桅，即數(shù)據(jù)單元格的內(nèi)容拜姿。< th>標(biāo)簽用來(lái)定義表頭。數(shù)據(jù)單元格可以包含文本冯遂、圖片蕊肥、列表、段落、表單、水平線寺酪、表格等等。
border="1"定義的是最外面邊框粗細(xì)展东，為1，你也可以設(shè)置為0炒俱，就是不顯示邊框（默認(rèn)就是沒(méi)有邊框）
標(biāo)簽：< th>表頭<
/th>：設(shè)置表頭
標(biāo)簽：< caption>標(biāo)題< /caption>：設(shè)置表的標(biāo)題
屬性：cellpadding="..."設(shè)置單元格邊距
屬性：bgcolor="..."設(shè)置表格背景顏色
屬性：background="..." 以某張圖片作為表格背景
??? 定義表格???
??? 定義表格標(biāo)題盐肃。???
??? 定義表格的表頭。???
??? 定義表格的行权悟。???
??? 定義表格單元砸王。???
??? 定義表格的頁(yè)眉。???
??? 定義表格的主體峦阁。???
??? 定義表格的頁(yè)腳谦铃。???
??? 定義用于表格列的屬性。???
??? 定義表格列的組榔昔。???
HTML圖片
下面是設(shè)置圖片的對(duì)齊方式：
???image test
???
let's have an example
???
???
???
align left
下面是創(chuàng)建圖片超鏈接范圍
涉及到的標(biāo)簽就是< map>標(biāo)簽驹闰，用來(lái)指定圖片,< area>用來(lái)指定超鏈接區(qū)域
這里以一張圖片作為地圖瘪菌， 在< area>標(biāo)簽中我們會(huì)涉及到shape ，coords嘹朗， href屬性师妙，分別用來(lái)指定超鏈接區(qū)域形狀，超鏈接區(qū)域坐標(biāo)骡显，還有超鏈接跳轉(zhuǎn)地。
這是具體實(shí)現(xiàn)內(nèi)容
image?test
tap?the?li?zi?
然后曾掂，當(dāng)我們點(diǎn)擊小松鼠舉起的栗子惫谤，你就會(huì)看見(jiàn)跟多栗子
[if !vml]
[endif]
shape屬性的取值可以是：rect(矩形)、circle(圓形)珠洗、poly(多邊形)和default(整個(gè)圖像區(qū)域)溜歪。這里采用的是矩形。
coords屬性對(duì)于矩形而言许蓖，coords有4個(gè)值蝴猪，分別用逗號(hào)隔開(kāi)，表示矩形區(qū)域左上角x坐標(biāo)膊爪、左上角y坐標(biāo)自阱、右下角x坐標(biāo)和右下角y坐標(biāo)，這里獲取坐標(biāo)的方式米酬，就用截圖工具幫忙就好沛豌。
Html布局
這里是具體實(shí)現(xiàn)內(nèi)容：
div#container{width:1000px}
div#header?{background-color:?royalblue?;height:?100px;text-align:center;font-size:?20px}
div#sidebar{background-color:?darkorange;height:400px;width:300px;float:left;}
div#mainbody?{background-color:?forestgreen;height:400px;width:700px;float:left;}
div#footer?{background-color:?powderblue;height:?100px;clear:both;text-align:center;}
????????<h1>php中文網(wǎng)
list?of?book
the?summary?of?the?book
i?will?lead?you?to?travel?in?the?season?of?linux
good?good?study?day?day?up
只要將上面的style里的div定義和下面的div塊對(duì)應(yīng)就很好理解，這里的邏輯表達(dá)的很清晰赃额，就不再贅述加派。直接來(lái)看看效果截圖吧
CSS背景
內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)跳芳，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素芍锦。(css2.1新增)，<img>飞盆、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽娄琉。
1、和其他元素都在一行上吓歇；
2车胡、元素的高度、寬度照瘾、行高以及頂和底邊距都可設(shè)置匈棘。
<title>內(nèi)聯(lián)塊狀元素
a{
display:inline-block;
?????????width:20px;/*在默認(rèn)情況下寬度不起作用*/
?????????height:20px;/*在默認(rèn)情況下高度不起作用*/
?????????background:pink;/*設(shè)置背景顏色為粉色*/
?????????text-align:center;?/*設(shè)置文本居中顯示*/
}
Css盒模型
下面我們就用一張圖來(lái)描述下他們的結(jié)構(gòu)：
均可進(jìn)行設(shè)置
CSS邊框
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style: dashed;
?border-top-width: 15px;
?border-right-width: 5px;
?border-bottom-width: 15px;
?border-left-width: 5px;
盒模型寬度和高度：
盒模型寬度和高度
盒模型寬度和高度和我們平常所說(shuō)的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height）析命，指的是填充以里的內(nèi)容范圍主卫。
因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界逃默。
[if !vml]
[endif]
元素的高度也是同理。
CSS定位
1.CSS 定位
定位的基本思想很簡(jiǎn)單簇搅，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置完域，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置瘩将。
CSS 有三種基本的定位機(jī)制：
普通流:
元素按照其在 HTML 中的位置順序決定排布的過(guò)程
浮動(dòng):
浮動(dòng)的框可以向左或向右移動(dòng)吟税，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
絕對(duì)定位:
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間姿现。這一點(diǎn)與相對(duì)定位不同肠仪，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置备典。
定位屬性:
position,將元素放在一個(gè)靜態(tài)的,相對(duì)的,絕對(duì)的,或固定的位置
通過(guò)對(duì) top,left,right,bottom 這四個(gè)屬性的賦值讓元素向?qū)?yīng)的方向偏移
overflow 設(shè)置元素溢出其區(qū)域發(fā)生的事情
clip 設(shè)置元素的顯示形狀,多用于圖片
vertical-align 設(shè)置元素的垂直對(duì)其方式
z-index 設(shè)置元素的堆疊順序
接下來(lái)就著重來(lái)看看 position 屬性: 為了形象,我們先建立一個(gè) html 文件和 CSS 文件
html:
<p>this?is?php中文網(wǎng)
<p>this?is?php中文網(wǎng)
<p>this?is?php中文網(wǎng)
<p>this?is?php中文網(wǎng)
CSS:
.position1{
width:?100px;
height:?100px;
background-color:?cornflowerblue;
}
接下來(lái)我們就可以看到普通流的效果:
當(dāng)我們?cè)?CSS 中加入 position 賦值為相對(duì)的,向左偏移60px
position:?relative;
left:?60px;
接下來(lái)我們會(huì)看見(jiàn):
下面我們?cè)賹?position 設(shè)置為絕對(duì)的:
position:?absolute;
效果就變成了這樣:
通過(guò)比較我么就能理解 position 這兩個(gè)值的區(qū)別,還有兩個(gè)屬性就是 fixed,和 static,fixed 是將元素固定下來(lái),就算滾動(dòng)屏幕,它也會(huì)在同一個(gè)地方不會(huì)動(dòng);而 static 設(shè)置以后,偏移量什么的就沒(méi)用了.
下面我們接著來(lái)看其他的屬性
當(dāng)我們?cè)偌右粋€(gè)塊在前面 div 后面的時(shí)候: HTML
CSS 添加:
.position2{
width:?100px;
height:?100px;
background-color:?aquamarine;
position:?relative;
left:10px;
top:?10px;
}
?接下來(lái)我們就可以通過(guò) z-index 來(lái)控制哪一塊在最前面:
接下來(lái)我們就修改下 CSS 文件來(lái)交換他們的前后順序: position1 中加入
z-index: 2;
position2 中加入:
z-index: 1;
就可以達(dá)到交換的效果:
CSS尺寸
CSS 尺寸
尺寸屬性允許你控制元素的高度和寬度异旧。同樣，它允許你增加行間距提佣。 涉及到的屬性有
height-- 設(shè)置元素的高度吮蛹。 line-height --設(shè)置行高。 max-height-- 設(shè)置元素的最大高度拌屏。 max-width --設(shè)置元素的最大寬度潮针。 min-height --設(shè)置元素的最小高度。 min-width --設(shè)置元素的最小寬度倚喂。 width --設(shè)置元素的寬度然低。
下面我們就寫個(gè) html 和 CSS 文件來(lái)具體比較下
.p1{????line-height:?normal;????width:?400px;
}.p2{????line-height:?50%;????width:?400px;
}.p3{????line-height:?200%;???width:?400px;
}
CSS導(dǎo)航欄
下面我們就來(lái)定制下自己的導(dǎo)航欄.
垂直導(dǎo)航欄:
首先我們以列表的形式作為最基礎(chǔ)的承載,然后我們?cè)倨渲屑尤氡镜鼗蛲獠康逆溄?就像下面這樣:
????<li><a?>php中文網(wǎng)link
然后我們就會(huì)得到這樣的效果:
我們一般看見(jiàn)的導(dǎo)航欄都沒(méi)有下劃線,和前面的帶點(diǎn),并且當(dāng)我們的鼠標(biāo)移到鏈接上面時(shí)鏈接的顏色會(huì)發(fā)生相應(yīng)的變化,這就是我們現(xiàn)在要讓 CSS 實(shí)現(xiàn)的效果.
首先,我們要去掉前面的點(diǎn)
ul{????list-style:?none;
}
接下來(lái)我們就去掉下劃線(不管是未被點(diǎn)擊的狀態(tài)還是已被點(diǎn)擊的狀態(tài)都去掉),然后加上個(gè)背景顏色,再將其顯示作為塊來(lái)顯示:
a:link,a:visited{???text-decoration:?none;???background-color:?lightgray;????display:?block;
}
最后我們?cè)俳o導(dǎo)航欄加個(gè)鼠標(biāo)移動(dòng)到上面時(shí),改變背景顏色:
a:active,a:hover{????background-color:?cadetblue;
}
下面就是效果圖
垂直的效果圖講完之后,我們?cè)賮?lái)講講水平的導(dǎo)航欄,我們就只需要修改 CSS 文件就可以了.
首先我們要將前面的顯示效果刪除,就是這句:
display:?block;
然我們只需要在 li 標(biāo)簽中改變顯示方式就可以:
li{????display:?inline;
}
這樣就可以實(shí)現(xiàn)水平導(dǎo)航欄
CSS圖片操作
首先我們先引入一張圖片,加上一句描述語(yǔ),使用 div 承載.
就是下面的效果:
接下來(lái)我們就開(kāi)始定制圖片的顯示:
圖片加邊框,修改描述字體中對(duì)其,修改字體大小,將整個(gè) div 向左浮動(dòng),使邊框與圖片進(jìn)行貼合:
.image{????border:?2px?solid?darkgrey;????width:?auto;????height:?auto;????float:?left;????text-align:?center;????padding:?5px;
}img{????padding:?5px;
}.text{????font-size:?20px;????margin-bottom:?5px;
}
這就是處理過(guò)后的的效果
[if !vml]
[endif]
之后我么再設(shè)計(jì)圖片的透明度: 這個(gè)比較簡(jiǎn)單,就只需要在圖片 CSS 設(shè)置中加入:
opacity: 0.5;
這個(gè)屬性的值范圍為 0-1 設(shè)置透明度,0 為完全透明,1 代表完全不透明.
下面就是半透明的效果圖:
[if !vml]
[endif]
選擇器
在很多方面，ID選擇器都類似于類選擇符务唐，但也有一些重要的區(qū)別：
1雳攘、為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"枫笛。
2吨灭、ID選擇符的前面是井號(hào)（#）號(hào)，而不是英文圓點(diǎn)（.）
HTML?表單和輸入
HTML 表單用于收集不同類型的用戶輸入刑巧。
[if !vml]
[endif]
在線實(shí)例
創(chuàng)建文本字段(Text field)本例演示如何在 HTML 頁(yè)面創(chuàng)建文本域喧兄。用戶可以在文本域中寫入文本。
創(chuàng)建密碼字段本例演示如何創(chuàng)建 HTML 的密碼域啊楚。
（在本頁(yè)底端可以找到更多實(shí)例吠冤。）
HTML 表單
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)恭理、下拉列表拯辙、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。
表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置:
.
input
元素
.
HTML 表單 - 輸入元素
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）涯保。
輸入類型是由類型屬性（type）定義的诉濒。大多數(shù)經(jīng)常被用到的輸入類型如下：
文本域（Text Fields）
文本域通過(guò)<input type="text"> 標(biāo)簽來(lái)設(shè)定，當(dāng)用戶要在表單中鍵入字母夕春、數(shù)字等內(nèi)容時(shí)未荒，就會(huì)用到文本域。
First name:
Last name:
瀏覽器顯示如下：
First name:
Last name:
注意:表單本身并不可見(jiàn)及志。同時(shí)片排，在大多數(shù)瀏覽器中，文本域的默認(rèn)寬度是 20 個(gè)字符速侈。
密碼字段
密碼字段通過(guò)標(biāo)簽<input type="password"> 來(lái)定義:
Password:
瀏覽器顯示效果如下:
Password:
注意:密碼字段字符不會(huì)明文顯示率寡，而是以星號(hào)或圓點(diǎn)替代。
單選按鈕（Radio Buttons）
<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)
Male
Female
瀏覽器顯示效果如下:
Male
Female
復(fù)選框（Checkboxes）
<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)锌畸。
I have a bike
I have a car
瀏覽器顯示效果如下:
I have a bike
I have a car
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當(dāng)用戶單擊確認(rèn)按鈕時(shí)勇劣，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件靖避。表單的動(dòng)作屬性定義了目的文件的文件名潭枣。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。:
Username:
瀏覽器顯示效果如下:
Username:
假如您在上面的文本框內(nèi)鍵入幾個(gè)字母幻捏，然后點(diǎn)擊確認(rèn)按鈕盆犁，那么輸入數(shù)據(jù)會(huì)傳送到 "html_form_action.php" 的頁(yè)面。該頁(yè)面將顯示出輸入的結(jié)果篡九。
????????????????????????????????????????tp實(shí)際操作
Href=網(wǎng)站鏈接
Alert（）?? 是用來(lái)在站點(diǎn)顯示出一個(gè)彈窗
???表示跳轉(zhuǎn)到out.js文件
????????????????????????????????????暫時(shí)進(jìn)度（截止至2019.8.4）
