網站部分：UI：AI、PS
前端：html、css、js
網站：是一個存放在網絡服務器上的完整信息的集合體。由域名、空間服務器、網站程序、數據庫等組成。由多個網頁以一定的方式連接在一起，成為一個整體。
首頁（index.html）：制作首頁要突出重點、分類准確、操作簡單
網頁的三層結構：
結構層：html 結構框架
表現層：css 美化
行為層：js javascript 實現動態交互
萬維網：WWW （World Wide web）一種基於超文本方式的信息檢索服務工具
用超鏈接的方式將各種不同空間的文字信息組織在一起的網狀文本
HTML：超文本標記語言，是構成web頁面的基礎 是WWW的母語
HTML標記可以說明文字、圖形、動畫、聲音、 表格、鏈接等
超鏈接：特殊的文字標識，跳轉到指向www中的資源
統一資源定位符：URL 資源指向的地址
用於描述Internet上資源的位置和訪問方式
協議名：//網址或IP端口號/URL
http：//www.baidu.com:80/路徑
主機 域名 端口號(http默認值)
通信協議：http---超文本傳輸協議
ftp傳輸文件
HTML文檔結構：
<html> 開始代碼
<head> 頭部標記（不被顯示在正文，）
<title>…</title>
</head>
<body>
頁面內容
</body>
</html> 結束代碼
HTML標記：
頭部：
<link> ; <meta> ; <title>…</title>
<style>…</style> ; <script>…</script>(插入js)
屬性間用空格隔開，屬性值用“ ”括起來
<meta>標記的屬性：
1.name 設定本網頁的制作工具
2.keywords 設定網頁的關鍵字,便於搜索引擎搜索
<meta name=“keywords” content=“關鍵字描述”>
3.discription 設定網頁的描述
4.Content-Type 聲明本網頁所采用的字符集
<meta http-equiv=“content-type” content=“text/html；charset=utf-8”>
文本格式
編寫網頁的開頭：DOCTYPE標記來聲明是用什么語言版本來解釋當前文本
<!DOCTYPE html>
單標記：eg:<br>換行 <img src=“##.jpg ”>添加圖片 <input>
雙標記：eg:<b>…</b>粗體
塊級標記:eg:<h1>…</h1>(標題)
行內標記：
標記屬性：附加信息
樣式設置：單標記直接在標記內設置eg:<hr width=”” align=””>
注釋：<!—注釋內容—> 注釋會被瀏覽器忽略
注：
標記可以嵌套，不可以交叉
文件名只能是英文字母、數字或下划線組成
文件名區分大小寫
首頁一般為index.html
文字與段落
標題字：共六級 字體依次遞減 默認加粗顯示 本身具有自動換行
<h# align=“left/right/center”>標題文字</h#>
水平對齊
特殊符號：（注意最后的分號）
空格： 不管文字間有幾個空格，都被視作一個空格
<(小於號) >(大於號) ©(版權符©)
®(注冊符®) & &符 ×(x符號)
注釋：<!—注釋內容—>
文字樣式：16px 字體默認宋體 字號默認3 屬性中的屬性值都沒有單位
<font face=”” size=”1-7(字號表示)” color=””> </font>
字號依次遞增 red/#00ffff
嵌套：塊級可以嵌套行級，行級不可以嵌套塊級，同級可相互嵌套
eg: <h#><font>…</font></h#>
<b>…</b> <strong>…</strong> 加粗
<i>…</i> <em></em> 斜體
<del>…</del> 刪除線
<u>…</u> 下划線
<sup>…</sup> 上標 <sub>…</sub> 下標
<address>…</address> 通常顯示為斜體 地址文字（E-mail、地址）(塊級元素)
段落：<p align=””>…</p> 一個p空一行
換行：<br>
<nobr>…</nobr>
<wbr>…</wbr>
居中標記：<center>…</center> 圖片、表格、表單(H5不可用) 塊級
水平分隔線：<hr width=””size=”” color=”” align=”” noshade>
寬度 粗細
預格式化：<pre>…</pre> 保持文檔輸出樣式，原樣輸出 塊級
段落縮進：<blockquote>…</blockquote>
段前段后縮進5個字符，產生層次關系，可多個嵌套連用
列表
無序ul、有序ol、定義dl 目錄dir 菜單menu
無序列表：沒有特定順序的相關條目，呈並列關系。默認距離頁面40px,
<ul type=””> 設置項目符號樣式:disc(默認)/circle/square
<li>…</li>
<li>…</li>
…
</ul>
有序列表： 編號的樣式:1/a/A/i/I
<ol type=”” start=““> 改變編號的起始值，取阿拉伯數字
<li>…</li>
<li type=”1“>…</li>
<li value=”5“>…</li> 改變本身及之后的值
…
</ol>
原則：就近原則：在列表<ol></ol>的type屬性和列表項標記<li></li>的type屬性發生沖突的情況下，在指定的單個列表項遵循<li></li>的type屬性進行顯示。
嵌套：整組嵌套，互相嵌套，
一級默認實心圓，二級默認空心圓，三級默認實心方塊
√定義列表：
<dl>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
</dl>
(菜單列表，一般不嵌套)
超鏈接
指由一個網頁指向一個目標的連接關系，可以是另一個網頁、圖片、郵件地址、文件、應用程序… (屬於網頁的一部分)
各個網頁鏈接在一起后才能真正構成一個網站
<a href=“路徑”>…</a>
分類：
外部鏈接：跳轉到當前網站的外部 一般要用絕對路徑，要有完整的URL地址
內部連接：在同一個網站內部 相對路徑，明確指向哪個文件
路徑：
絕對路徑：完整的URL地址
<a href="http://www.baidu.com">跳轉到百度</a>
√相對路徑：以當前文件所在的路徑為起點，進行文件查找。通常只包括文件夾名和文件名 （在本地不可以跨盤符）
1.鏈接到同一目錄下的文件：<a href=“index.html”>
2.鏈接到下一級子目錄a中的文件：<a href=“a/index.html”>
3.鏈接到上一級目錄中的文件：<a href=“../index.html”>
4.鏈接到上兩級目錄中的文件：<a href=“../../index.html”>
根路徑：
根目錄：
創建超鏈接：
<a href=“url” title=“指向鏈接的文字” target=“目標窗口”>…</a>
_self(在當前窗口打開) _blank(新窗口打開)
書簽鏈接：跳轉到指定的位置
<a name=“書簽名稱”>連接內容</a>
<a href=“#書簽名稱”>鏈接標題</a> （同一頁面內）
<a href=“URL地址#書簽名稱”>鏈接標題</a> （不同頁面）
下載文件：
<a href“url”>鏈接內容</a> （相對路徑或絕對路徑—word、pdf、文件）
圖片
插入圖片標記： 設置寬/高,等比例縮放
<img src=“URL”border=“ ” width=“ ” height=“ ” >
title=“” 鼠標划入時顯示信息
alt=“圖片加載失敗時顯示的內容”
align=“ ” 定義圖片的對齊方式 （影響跟在圖片后邊的內容）
hspace=“ ” 水平間距
vspace=“ ” 垂直間距
圖片連接：
<a href=””><img src=””></a>
滾動文字
<marquee>文字或圖片</marquee> 塊級
設置屬性的值單位：px
behavior:scroll(循環滾動/默認) slide(滾動一次) alternate(來回交替)
direction:left right up down
bgcolor:red/十六進制
width/height:數字/百分比
hspace/vspace:數字
loop:正整數n/infinite (循環次數)
scrollamount:**px 文字每次移動的距離
scrolldelay:**ms 間歇時間 1000ms=1s
插入背景音樂：
<bgsound src=”” loop=””>
插入多媒體文件：
<embed src=”” loop=””autostart=”true/false” width=”” height =”” type=”media-type” pluginspage=”pluge” >可插入各種多媒體文件
表格（table tr td）羅列數據、布局
<table>
<caption>表格標題<caption>
<tr>
<th>…</th> <!—表頭、默認居中加粗顯示-->
…
</tr>
<tr>
<td>…</td> <!—單元格-->
…
</tr>
…
</table>
屬性：
border、bordercolor、width、height、bgcolor(背景顏色)background(背景圖)
邊框樣式：<table frame=”” rules=””>
單元格間距：<table cellspacing=””> 間距為0，邊框粗細值合並
單元格邊距：<table cellpadding=””>
表格的水平對齊方式：<table align=””>
tr(行)屬性：
<tr align=””>…</tr> 水平對齊
<tr valign=”top/middle/bottom”>…</tr> 垂直對齊
bgcolor、bordercolor、
td(單元格)屬性：
align、valign、bgcolor、background、bordercolor、width、height、
(rowspan、colspan跨行、列合並)
<td rowspan/colspan=”行數/列數”></td>
框架：
<frame> 定義框架
<framesel> 定義框架集
結構：
<html>
<head>
<title>…</title>
</head> 框架的邊框
<feameset border=”” rows=”10%，20%，*”>
<frame src=“ ”>
</frameset>
</html>
水平分割：rows 垂直分割：cols
嵌套分割：用n個<frameset>連接
target=”name=”””連接兩個板塊
<frameset frameborder=”1/0”yes/no> 框架邊框 默認為1 0為不顯示
<frame noresize> 不可移動
<frame scrolling=”yes/no auto”> 滾動條
浮動框架：<iframe src=””>…</iframe> 可以包含在body中
表單：
form：name action—傳輸到某個地址 method ---（get/post）
get:瀏覽器將表單中的各個值添加到action屬性后
缺點：1.地址欄允許輸入的URL長度有限，最多為2048個字符，不適合數據較多的表單，安全性較低。 2.get方法提交數據是明文的。
post:傳輸較大數據
（file:///F:/HTML/a.html?username=123&pwd=1234）
單行文本輸入框：<input>單標記
<input name=””
type=”text”
size=”” 文本框大小
mexlength=”n” 可輸入的最大字符數
value=“ ” 首次被載入時顯示的值
checked=””
input type=”類型” 與內容一樣可省略
text 文本框
password 密碼框 name mexlength size value
checkbox 復選框 name value(必填) checked(默認被選中)
<input name="" type="checkbox" value="3" checked>排
radio 單選框 name type value checked
(實現多選一，所有屬性的name值應相同)
file 文件選擇輸入框
對於允許上傳的文件，不能使用get方法
<form name=”” action=”” method=”post” enctype=”上傳格式”>
<input type=”file”>
hidden 隱藏域 name type value()
提交按鈕：type=”submit” value=”“
重置按鈕：type=”reset” value=”“
value的屬性值顯示在按鈕上的字 默認為提交
圖片按鈕(提交) <input name=”” type=”image” src=””>
<input type=”button” value=””>
多行文本輸入框
<form> 顯示文本字符多少 victual 自動換行默認
<textarea name=””cols=”” rows=”” wrap= ”physical”顯示換行符
</textarea> 寬/列 高/行 off 不自動換行
</form>
標簽中間內容是顯示文本框的初始信息
下拉列表 顯示框大小
<select name=”” size=”1” multiple>實現多選：按ctrl多選
<option value=””> 列表項
…
</select>
默認值為第一項
href和src的區別：
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌套到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內