1.HTML是網(wǎng)頁內(nèi)容的載體
2.CSS樣式是表現(xiàn)
3.JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果
html文檔基本機(jī)構(gòu)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
head標(biāo)簽內(nèi)常用元素
<title> 用于定義文檔標(biāo)題
<script>用于包括含javascript腳本
<link>用于鏈接外部css資源文件
<style>用于定義內(nèi)部css樣式
<meta>用于HTML頁面的元數(shù)據(jù)
使用title標(biāo)簽
<head>
<title>123</title>
</head>
顯示：
<meat>
標(biāo)簽用于定義頁面元信息萍膛，也就是一些鍵值對秕硝，主要有以下三個屬性
1.http-equiv：指定元信息的名稱比肄，該屬性指定的名稱具有特殊意義，它可以向瀏覽器傳回一些有用的信息，幫助瀏覽器正確地處理網(wǎng)頁內(nèi)容委煤。
2.name ： 指定元信息名稱，該名稱值可以隨意指定。
3.content ： 指定元信息的值衔肢。
舉個栗子
描述文檔類型和字符編碼
<head>
<meta http -equiv="Content-Type" content="text/html; charst=gbk"/>
</head>
HTML常用標(biāo)簽
常用的塊級標(biāo)簽
顯示為“塊”狀，瀏覽器會在其前后顯示折行豁翎。常用的塊級元素包括：p角骤，h1-h6，div心剥，ul等邦尊。
標(biāo)題標(biāo)簽語法
<body>
<h1>一級標(biāo)題</h1>
。优烧。蝉揍。
<h6>六級標(biāo)題</h6>
</body>
輸出：
段落標(biāo)簽語法
<p>...</p>
<body>
<h1>杭州歡迎你</h1>
<p>實現(xiàn)我夢想的地方</p>
<p>有夢想就有奇跡</p>
</body>
輸出：
水平線標(biāo)簽語法
有序標(biāo)簽語法：
<ol>
<li>列表項</li>
</>
舉個栗子：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
輸出：
html列表標(biāo)簽
屬性：
無序標(biāo)簽語法：
<ul>
<li>列表項</li>
</ul>
舉個栗子：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
輸出：
定義描述標(biāo)簽語法：
<dl>
<dt>標(biāo)題</dt>
<dd>描述1</dd>
</dl>
輸出：
** 分區(qū)標(biāo)簽**
<div>頭部內(nèi)容</div>
<div>導(dǎo)航內(nèi)容</div>
<div>底部內(nèi)容</div>
HTML <div> 元素是塊級元素，它可用于組合其他 HTML 元素的容器匙隔。
<div> 元素沒有特定的含義疑苫。除此之外熏版，由于它屬于塊級元素，瀏覽器會在其前后顯示折行捍掺。
如果與 CSS 一同使用撼短，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局挺勿。它取代了使用表格定義布局的老式方法曲横。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)不瓶。
常用的行級標(biāo)簽
按行逐一顯示禾嫉，前后不會自動換行
<b> 定義粗體文本
<i> 定義斜體文本
<em>定義強(qiáng)調(diào)文本，實際效果與斜體文本差不多
<strong>定義粗體文本蚊丐，與<b>的作用基本一樣
<small>定義定義小號文本
定義定義下標(biāo)文本 比如水的化學(xué)H2O里的2
定義定義上標(biāo)文本 比如氧氣 O2里的2
<bdo>定義定義文本顯示方向熙参，內(nèi)有dir屬性，只能取值ltr或者rtl
超鏈接標(biāo)簽
<a href ="鏈接地址" target ="目標(biāo)窗口"> 鏈接文本或圖片</a>
其中
- href 指定超鏈接所關(guān)聯(lián)的另一個資源
2.target 指定框架集中的哪個框架來裝載另一個資源麦备，該屬性可以是-self 使用自身加載網(wǎng)頁孽椰，-top 頂層框架,-parent 父框架,-blank 新窗口.
圖像標(biāo)簽
<img src="圖片地址" alt="提示文本">
<span>標(biāo)簽
<span>文本等行級內(nèi)容</span>
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器
<span> 元素也沒有特定的含義凛篙。
當(dāng)與 CSS 一同使用時黍匾，<span> 元素可用于為部分文本設(shè)置樣式屬性。
換行
常用的特殊符號
空格  呛梆；
大于（>） >
小于（<） <
引號（“） "锐涯；
版權(quán)號 ©；
frameset框架集
創(chuàng)建框架網(wǎng)頁的步驟：
1.創(chuàng)建各個子窗口對應(yīng)的HTML文件
2.創(chuàng)建整個框架文件填物，分別引用子窗口文件
創(chuàng)建框架頁面的基本語法：
<frameset cols="25%,50%,*" rows=50%,*" border="5">
<frame src ="top.html">
</frameset>
注意：<frameset></frameset> 標(biāo)簽不能與<body></body>標(biāo)簽同時使用纹腌。除非你<frameset>中使用<noframes>標(biāo)簽
<frameset>框架集標(biāo)簽中的常用屬性。
屬性 ： cols 值： pixel融痛、%壶笼、* 描述：定義框架集中列的數(shù)目和尺寸
屬性 ： rows 值： pixel、%雁刷、* 描述：定義框架集中行數(shù)目和尺寸
iframe內(nèi)嵌框架
<iframe>標(biāo)簽中的常用屬性：
<iframe>語法：
<body>
<iframe src ="引用頁面地址" name="框架標(biāo)識名" frameborder="邊框" scrolling="yes"/>
</body>
iframe設(shè)置高度和寬度
舉個栗子
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
</body>
輸出：
html表格標(biāo)簽使用
特點：通常情況下，同行高度一致保礼，同列寬度一致
相關(guān)元素：
表格由 <table> 標(biāo)簽來定義沛励。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）炮障。字母 td 指表格數(shù)據(jù)（table data）目派，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本胁赢、圖片企蹭、列表、段落、表單谅摄、水平線徒河、表格等等。
表格標(biāo)簽特點：
1.主要用于規(guī)則的數(shù)據(jù)顯示
2.適當(dāng)?shù)目梢栽俦韱雾撁嬷惺褂?/p>
缺點：
1.代碼量比較大送漠，頁面瀏覽速度比較慢
2.層次結(jié)構(gòu)復(fù)雜顽照，不易于維護(hù)和改版
3.不利于搜索引擎搜索，查找數(shù)據(jù)
舉個栗子
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
輸出：
html圖像標(biāo)簽
<img src="url" alt="some_text">
舉個栗子
<body>
<h2>美麗的山</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</body>
輸出闽寡；
html表單標(biāo)簽
屬性：
表單是一個包含表單元素的區(qū)域代兵。
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表爷狈、單選框(radio-buttons)植影、復(fù)選框(checkboxes)等等。
表單使用表單標(biāo)簽 <form> 來設(shè)置:
語法：
<form action="服務(wù)器文件" method="傳送方式">
涎永。何乎。。文本框土辩、按鈕等表單元素支救。。拷淘。
</form>
form的常用屬性：
1.action：指定表單提交后由服務(wù)器上的哪個處理程序進(jìn)行處理
2.enctype：用于指定表單數(shù)據(jù)的編碼方式
*application/x-www-form-urlencoded:默認(rèn)編碼方式各墨，將表單控件中的值處理成rul
編碼方式
*mutipart/form-data：以二進(jìn)制流的方式來處理表單數(shù)據(jù)
*text/plain: 當(dāng)表單的action屬性值為mailto：URL的形式時使用
3.method：指定向服務(wù)器提交的方式一般為get和post兩種方式
*get方式的請求會將請求參數(shù)的名和值轉(zhuǎn)換成字符串，并附加在原URL之后启涯，
因此可以在地址欄中看到的請求參數(shù)的名和值贬堵。且get求傳送的數(shù)據(jù)量比較小，一般不能大于2KB结洼。
post方式 安全性相對較高黎做、 post方式的請求參數(shù)是放在HTML的HEADER中傳輸，用戶在地址欄中看不到參數(shù)松忍。
html表單 輸入元素 <input>
大多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）
輸入類型是由類型屬性（type）定義的蒸殿。
單行文本框：
指定<input..../>元素的type屬性為text即可
舉個栗子
<form>
第一個名字: <input type="text" name="firstname"><br>
最后一個名字: <input type="text" name="lastname">
</form>
輸出：
密碼輸入框：
密碼輸入框通過標(biāo)簽<input type="password"> 來定義:
舉個栗子
<form>
password:<input type="password" name="pwd">
</form>
輸出：
單選框（Radio Buttons）
指定<input.../>元素的type屬性為radio即可
舉個栗子
<form>
<input type="radio" name="sex" value="male">香蕉<br>
<input type="radio" name="sex" value="female">蘋果
</form>
輸出：
復(fù)選框（Checkboxes）
指定<input.../>元素的type屬性為checkbox即可
舉個栗子
<form>
<input type="checkbox" name="vehicle" value="自行車">我有一輛自行車<br>
<input type="checkbox" name="vehicle" value="汽車">我有一輛小轎車
</form>
輸出：
提交按鈕(Submit Button)
指定<input.../>元素的type屬性為submit
當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件
舉個栗子
<form name="input" action="html_form_action.php" method="get">
名字: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
輸出：
input元素常用的幾個屬性
checked：設(shè)置單選框鸣峭，復(fù)選框初始狀態(tài)是否處于選中狀態(tài)宏所，只有當(dāng)type屬性值為
checkbox或radio時才可指定。
disabled：設(shè)置首次加載時禁用此元素摊溶。當(dāng)type="hidden"時不能被指定該屬性爬骤。
maxlength： 該屬性是一個數(shù)字，指定文本框中所允許輸入的最大字符數(shù)莫换。
readonly：指定該文本框內(nèi)的值不允許修改（可使用javascript腳本修改）
size：是一個數(shù)字霞玄，指定該元素的長度骤铃，當(dāng)type=“hidden” 時 不能指定該屬性
src：指定圖像域所顯示的圖像URL，當(dāng)type="image"時才可以指定該元素
列表框和下拉菜單 select對象
語法：
<select name="指定列表名稱" size="行數(shù)">
<option value="選項值" selected="selected"> ...</option>
</select>
列表框常用屬性
disabled: 是否禁用該元素
mutiple：設(shè)置該列表框是否允許多選
size：指定該列表內(nèi)同時顯示多少個列表項
在<select.../>元素李坷剧，只能包含如下兩種子元素
- <option>:用于定義列表框選項或者菜單項惰爬，它的常用屬性如下：
- disable:指定是否禁用該元素
- selected： 指定該列表初始狀態(tài)是否處于被選中狀態(tài)，值只能是selected
- value： 指定該選項對應(yīng)的請求參數(shù)值
- <optgroup> 用于定義列表項或菜單項組听隐，它的常用屬性如下补鼻，
- label：指定該選項組的標(biāo)簽。這個屬性必須填雅任。
- disabled: 禁用該選項組里的所有選項风范，該屬性值只能是disabled或者省略
多行文本框
屬性：
語法：
<textarea rows="行數(shù)" cols="列數(shù)">
文本內(nèi)容
</textarea>
多行文本常用屬性
1.<textarea>標(biāo)簽是成對出現(xiàn)的，以<textarea>開始沪么，以</textarea>結(jié)束硼婿。
2、cols ：多行輸入域的列數(shù)禽车。
3寇漫、rows ：多行輸入域的行數(shù)。
4殉摔、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值州胳。
舉個栗子
<form method="post" action="save.php">
<label>請聯(lián)系我們</label>
<textarea cols="50" rows="10" >輸入您的簡介...</textarea>
</form>
輸出：
CSS的作用與發(fā)展
css稱之為層疊樣式單。
css可以控制HTML文檔的顯示逸月，但在控制文檔顯示之前栓撞，首先應(yīng)在需要顯示的HTML文檔中引入css樣式單，html提供了以下四種方式：
使用內(nèi)聯(lián)樣式：這種方式樣式內(nèi)聯(lián)定義到具體的HTML元素上碗硬，通常用于精確控制一個HTML元素的表現(xiàn)瓤湘。
使用內(nèi)部樣式表： 這種方式是通過在html文檔頭定義樣式單部分來實現(xiàn)，在這種方式下恩尾，每批css樣式只控制一份html文檔
鏈接外部樣式文件： 這種方式將樣式文件徹底與html文檔分離
導(dǎo)入外部樣式文件： 這種方式與第三種方式類似弛说，只是使用@import 來引入外部樣式表文件
內(nèi)聯(lián)式css樣式
列子：
<p style="color:yellow">黃色的</p>
嵌入式css樣式
列子：
<style type="text/css">
span{
color:red;
}
</style>
外部式css樣式
例子：
<link href="style.css" rel="stylesheet" type="text/css" />
<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)
標(biāo)簽選擇器
就是html代碼中的標(biāo)簽。比如<html >翰意、<h1>木人、<body>、<p>猎物、<img>
p{font-size:10px; line-height:1.5em;}
id選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式虎囚。
HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
以下的樣式規(guī)則應(yīng)用于元素屬性 id="para1":
#para1
{
text-align:center;
color:red;
}
輸出：
class選擇器
class 選擇器用于描述一組元素的樣式蔫磨，class 選擇器有別于id選擇器，class可以在多個元素中使用圃伶。
class 選擇器在HTML中以class屬性表示, 在 CSS 中堤如，類選擇器以一個點"."號顯示
語法：
. 類選擇器{css樣式代碼;}
需要注意的是：
- 英文的園點
2.其中類選擇器名稱可以任意起名
CSS字體
css字體屬性定義文本的字體系列大小蒲列，加粗，風(fēng)格和變形搀罢。
屬性 描述
font-family 設(shè)置字體系列蝗岖，比如：“serif”、“sans-serif”等
font-size 設(shè)置字體的尺寸
font-style 設(shè)置字體風(fēng)格榔至。主要有noraml抵赢、italic、oblique
font-variant 以小型大寫字體或正常字體顯示文本
font-weight 設(shè)置字體的粗細(xì)唧取。主要有normal铅鲤、bold、自定義粗細(xì)
css為控制文本提供了大量的屬性枫弟，這些屬性主要用于控制文本的顏色邢享，修飾，字符間距等外觀淡诗。
color ：設(shè)置文本顏色
letter-spacing：設(shè)置字符間距
line-height：設(shè)置文本行高
text-align：設(shè)置文本的對齊方式骇塘，只要有l(wèi)eft，right韩容，center
text-decoration：設(shè)置文本的裝飾效果款违，主要有overline，underline群凶，line-through
text-indent：設(shè)置文本塊首行縮進(jìn)
text-transform：控制文本的大小寫插爹，主要有uppercase，lowercase座掘，capitalize
word-spacing： 設(shè)置單詞間距
CSS定位與DIV布局-盒子模型
css盒模型邊框
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線递惋，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個屬性)溢陪。
css常用邊框?qū)傩匀缦拢?/strong>
border：在一個聲明中設(shè)置所有邊框?qū)傩?/p>
border-width：設(shè)置四條邊框的寬度
border-style：設(shè)置四條邊框的樣式萍虽，主要有dotted（點線）、soild（實線）形真、
double杉编、dashed（虛線）
border-color：設(shè)置四條邊框的顏色
border-left：再一個聲明中設(shè)置所有左邊框?qū)傩酝校瑢?yīng)還有border-right等
border-left-color：設(shè)置左邊框顏色喷户，對應(yīng)還有border-right-color-style
border-left-style：設(shè)置左邊框樣式娱局，對應(yīng)還有border-right-style
border-left-width：控制左邊框?qū)挾戎憾希瑢?yīng)還有border-right-width
除了border屬性可以將各個屬性寫在一起蟆盐，CSS的很多其他屬性也可以進(jìn)行類似的操作法梯，
舉個栗子
div{
border: 3px solid red; //邊框粗細(xì)3px厦瓢，樣式為實心揍障，顏色為紅色的邊框
}
CSS背景
網(wǎng)頁背景除了使用顏色同樣可以使用圖片脉课，css提供了相關(guān)屬性來對背景圖片進(jìn)行精確的控制
屬性：
background ：在一個聲明中設(shè)置所有的背景屬性
background-attachment：設(shè)置背景圖像是否固定或者都隨著頁面的其余部分滾
動救军。主要有fixed和scroll兩個值财异。
background-color：設(shè)置元素的背景顏色
background-image：設(shè)置元素的背景圖像，主要有url和none兩個屬性
background-position：設(shè)置背景圖像的開始位置唱遭，可以指定top left 等戳寸，也可以指
定具體的像素位置
background-repeat：設(shè)置是否及如何重復(fù)背景圖像。主要有repeat拷泽、repeat-x疫鹊、
repeat-y、no-repeat司致。
舉個栗子
<style>
body
{
background-color:#f90拆吆；
}
</style>
</head>
<body>
<h1>我的 CSS </h1>
<p>你好杭州！</p>
</body>
輸出：
CSS列表
屬性：
盒子模型
CSS盒模型本質(zhì)上是一個盒子蚌吸，封裝周圍的HTML元素锈拨，它包括：邊距，邊框羹唠，填充奕枢，和實際內(nèi)容。
Margin(外邊距) - 清除邊框外的區(qū)域佩微，外邊距是透明的缝彬。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域哺眯，內(nèi)邊距是透明的谷浅。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像奶卓。
元素的寬度和高度
一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界
元素浮動 float
float定位是css排版中重要的手段一疯。屬性float的值很簡單，可以設(shè)置為left夺姑、right墩邀、或者默認(rèn)值none，當(dāng)設(shè)置了元素向左或向右浮動時盏浙，元素會向其父元素的左側(cè)或右側(cè)靠緊眉睹。
強(qiáng)調(diào)：float屬性在文字排版和布局排版中經(jīng)常使用到。
舉個栗子
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
輸出：
position絕對定位(absolute)
絕對定位的元素的位置相對于最近的已定位父元素废膘，如果元素沒有已定位的父元素竹海，那么它的位置相對于<html>
舉個栗子
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>這是一個絕對定位了的標(biāo)題</h2>
<p>用絕對定位,一個元素可以放在頁面上的任何位置。標(biāo)題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素丐黄。.</p>
</body>
輸出：
position相對定位(relative)
相對定位元素的定位是相對其正常位置斋配。
舉個栗子
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
輸出：
position固定定位(fixed)
元素的位置相對于瀏覽器窗口是固定位置。
css布局-水平&垂直對齊
文本居中對齊
如果僅僅是為了文本在元素內(nèi)居中對齊，可以使用 text-align: center;
舉個栗子
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>文本居中對齊</h2>
<div class="center">
<p>文本居中對齊许起。</p>
</div>
</body>
輸出：
