html+css的簡單瞭解
1.什麼是前端
前端對於網站來說，通常是指，網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高階版本HTML5、CSS3，以及SVG等。
2.什麼是html
HTML的全稱是Hyper Text Mark-up Language，超文字標記語言。
超文字：頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。
標記：與之相對是的編譯型語言，標記型語音無需編譯，直接可以被解析展示。
特點
可以設定文字的格式，比如
可以建立列表標題、字號、文字顏色、段落等等
可以插入影象和媒體
可以建立表格
超連結，可以使用滑鼠點選超連結來實現頁面之間的跳轉
head，title，meta標籤
head:用來包含檔案的基本資訊，比如網頁的標題、關鍵字。
在<head></head>內可以放<title></title>、<meta></meta>、<style></style>等等標記
注意：在<head></head>標記內的內容不會在瀏覽器中顯示
title:顯示在瀏覽器的視窗的左上角的標題
meta:頁面的元資訊（meta-information
常見的屬性：author，keywords，description
注意：meta標記必須放在head元素裡面
body標籤
body：HTML文件的主體標記，<body>...</body>是網頁的主體部分，在此標記之間可以包含如<p></p>、<h1></h1>、<br/>、<hr/>等等標記，正是由這些內容組成了我們所看見的網頁
body標記的常見屬性
bgcolor:設定背景顏色
text:設定文字顏色
link:設定連線顏色
vlink:已經訪問了的連結顏色
alink:正在被點選的連結顏色
文字標籤
<hn>:標題標記,n的範圍1~6，不同級別對應顯示大小不同的標題，h1最大
<font>字型設定標記,三個常用屬性size,color,face（字型）
<b>:粗字型標記
<i>:斜字型標記
<sub>:文字下標字型標記
<sup>:文字上標字型標記
<tt>:印表機字型標記
<cite>:引用方式的字型，通常是斜體
<em>:表示強調，通常顯示為斜體字
<strong>:表示強調，通常顯示為粗體字
<small>:小型字型標記
<big>:大型字型標記
<u>:下劃線字型標記
格式標籤
<br>：強制換行標記,讓後面的文字、圖片、表格等等，顯示在下一行
<p>：換段落標記，由於多個空格和回車在HTML中會被等效為一個空格，HTML要換段落用<p>
<center>：居中對齊標記，讓段落或者是文字相對於父標記居中顯示
<pre>：預格式化標記
<li>：列表專案標記，配合<ul>和<ol>使用，可以巢狀使用
<ul>：無序列表標記
<ol>：有序列表標記，屬性:type="1/A/a/I/i",value="指定序列數字起始值"
<hr>：水平分割線標記
<dl>：定義型列表，配合<dt><dd>使用
<div>：分割槽顯示標記，也稱之為層標記
<img/>:影象標籤
常用屬性：
src：指定我們要載入的圖片的路徑和圖片的名稱以及圖片格式
width：指定圖片的寬度，單位px、em、cm、mm
height：指定圖片的高度，單位px、em、cm、mm
border：指定圖示的邊框寬度，單位px、em、cm、mm
alt：三個作用：
1.當網頁上的圖片被載入完成後，滑鼠移動到上面去，會顯示這個圖片指定的屬性文字
2.如果影象沒有下載或者載入失敗，會用文字來代替影象顯示
3.搜尋引擎可以通過這個屬性的文字來抓取圖片
注意：
<img>為單標記，不需要使用</img>閉合
在載入影象檔案的時候，檔案的路徑或者檔名檔案格式錯誤，將無法載入圖片
<a>:超連結標籤
<a href="" target="開啟方式" name="頁面錨點名稱" >連結文字或者圖片</a>
常用屬性：
href：連結的地址，連結的地址可以是一個網頁，也可以是一個視訊、圖片、音樂等等
target：定義超連結的開啟方式
_blank：在一個新的視窗中開啟連結
_seif(預設值)：在當前視窗中開啟連結
_parent/_top：在父視窗/頂層視窗中開啟頁面（框架中使用較多）
name：指定頁面的錨點名稱（訪問定義好的錨點，連線需要加#）
可以包圍在Img標籤外部，讓img有連結作用
表格使用結構
<table> ：表格
<caption></caption> ：表名稱
<tr> ：表格的一行
<th></th><th></th> ：表格的兩個單元格，th表示列名單元格
</tr>
<tr>
<td></td><td></td> ：表格的兩個單元格，td表示普通單元格
</tr>
<table>
表格屬性
width：表示表格的寬度，他的值可以是畫素（px）也可以是父級元素的百分百（%）
height：表示表格的高度，他的值可以是畫素（px）也可以是父級元素的百分百（%）
border：表示表格外邊框的寬度
align：表格的顯示位置(left,center,right)
cellspacing：單元格之間的間距，預設是2px，單位畫素
cellpadding：單元格內容與單元格邊框的顯示距離，單位畫素
frame：控制邊框最外層的四條框void,above,below,hsides,lhs,rhs,vsides,box,border
rules：控制如何顯示單元格內邊框none,groups,rows,cols,all
bgcolor：表格的背景顏色
<td>和<th>都是單元格的標記，其必須巢狀在<tr>標籤內，是成對出現
兩者的區別
<th>是表頭標記，通常位於首行或者首列，<th>中的文字預設會被加粗，而<td>不會
<td>是資料標記，表示該單元格的具體資料
共同之處
兩者的標記屬性都是一樣的
bgcolor：設定單元格背景
align：設定單元格對齊方式
valign：設定單元格垂直對齊方式
width：設定單元格寬度
height：設定單元格高度
rowspan：設定單元格所佔行數
colspan：設定單元格所佔列數
form
<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容
常用屬性
name：表單名稱
method：傳送資料的方式，分為post和get兩種方式
get方式：get方式提交時，會將表單的內容附加在URL地址的後面，所以限制了提交的內容的長度，不超過8192個字元，且不具備保密性
post方式提交時，將表單中的資料一併包含在表單主體中，一起傳送到伺服器中處理，沒有資料大小限制
action：表單資料的處理程式的URL地址
enctype：設定表單的資料的編碼方式
target：和超連結的屬於類似，用來指定目標視窗
input
input常用表單型別，具體型別根據type引數決定
常用屬性
type：多種型別，如下
text：預設值，表示文字框
password：密碼框
submit：提交按鈕
button：普通按鈕
radio：單選按鈕，可以使用cheked屬性來設定預設選中項
checkbox：複選按鈕，可以使用cheked屬性來設定預設選中項
hidden：隱藏域，用於某些資料無需展示，但是可能需要提交到後臺使用
name：定義控制元件的名稱，很重要，以鍵值對提交資料時，該name就是key
value：初始化值，開啟瀏覽器時，文字框中的內容，編輯修改後，value也會變化
size：設定控制元件的長度
maxlength：輸入框中最大允許輸入的字元數
select下拉列表
格式
<select name='name' size='size' multiple>
<option value='value1' selected>選項1</option>
<option value='value2'>選項2</option>
</select>
屬性
multiple：表示用可以多選的下來列表，如果沒有這個屬性就只能單選
size：設定列表的高度
name：定義這個列表的名稱，以鍵值對提交資料時，該name就是key
option標籤
value：給選項賦值，指定傳送到伺服器上面的值（鍵值對中的value）
selected：指定預設的選項
textarea多行文字域
屬性
rows：顯示的行數，單位是字元個數
cols：顯示的列數，單位是字元個數
frameset
框架將瀏覽器劃分成不同的部分，每一部分載入不同的網頁，實現在同一瀏覽器視窗中載入多個頁面的效果
常用屬性
cols：
使用“畫素數”和%分割左右視窗，“*”表示剩餘部分
使用“*”，“*”表示框架平均分成2個
使用“*”，“*”，“*”表示框架平均分成3個
rows：使用“畫素數”和%分割上下視窗，“*”表示剩餘部分
frameborder：指定是否顯示邊框，0不顯示，1顯示
border：設定邊框的大小，預設值5畫素
frame
<frame>子視窗標籤
是一個單標記，
必須放在<frameset>中使用
在<frameset>中設定了幾個視窗，就必須對應使用幾個<frame>框架
使用src屬性指定一個網頁。
常用屬性：
src：載入網頁檔案的URL地址
name：框架名稱，是連結標記的target所要引數
noresize：表示不能調整框架大小，沒有設定時就可以調整，引數值為noresize
scrolling：是否需要滾動條，可選auto，yes，no
frameborder：是否需要邊框可選1顯示邊框，0不顯示邊框
3. 什麼是css
CSS 指層疊樣式表 (Cascading Style Sheets),是為了解決內容與表現分離的問題。
<body bgcolor='red'></red>
body為內容
bgcolor為表現
第一種定義css的方式：內鏈樣式表
<body bgcolor="red" >
<body style="background-color: red" >
但是這種方式還是沒有將內容和表現分離
第二種定義css的方式：嵌入式樣式表
<style type="text/css"></style>
需要將樣式放在<head></head>中
<body bgcolor="yellow" >
<style type="text/css">
body{background-color:yellow}
</style>
但是這種方式還是沒有將內容和表現完全分離
第三種定義css的方式：引入式樣式表
<link rel="StyleSheet" type="text/css" href="style.css">
style.css中
body{background-color:yellow}
這種方式完全將內容和表現完全分離
選擇器
通過選擇器，我們可以定位到css樣式需要修飾的目標，常用的選擇器有：
<p id='p1' class='c1'>選我啊，選我啊</p>
標籤選擇器p{color:red}
類選擇器.c1{color:red}
ID選擇器#p1{color:red}
組合選擇器如果有多個型別選擇器使用同一種樣式p,.p1,#c1,h1,h2,h2{color:red}
偽元素選擇器a:link{color:black}a:hover、a:active、a:visited
優先順序問題
ID>類>標籤
<p id='p1' class='c1'>選我啊，選我啊</p>
#p1{color:red}
.c1{color:blue}
p{color:yellow}
同級時選擇離元素最近的一個
div,span
DIV和SPAN在整個HTML標記中，沒有任何意義，他們的存在就是為了應用CSS樣式，DIV和span的區別在與，span是內聯元素，div是塊級元素。
<style type="text/css">
div{
background-color: green;
}
span
{ background-color: green; }
</style>
<div>華信教育</div>同時可以定義其寬度
<span>華信教育</span>單獨定義其寬度，沒有效果
盒模型
佈局相關的屬性
佈局相關的屬性
display
display：none 層不顯示
display：block 塊狀顯示，在元素後面換行，顯示下一個塊元素
display：inline 內聯顯示，多個塊可以顯示在一行內
block相當於將span轉化為div，inline相當於將div轉化為span
float
left :左浮動
right:右浮動
clear：left/right/both清除浮動
<div sytle='float:left'></div>
<div sytle='float:left'></div>
<div sytle='clear:both'></div>//新增這個div，可以遮蔽前一個div的float影響到後面的div
<div></div>
overflow 溢位處理
hidden 隱藏超出層大小的內容
scroll無論內容是否超出層大小都新增滾動條
auto 超出時自動新增滾動條
4. 4.什麼是JavaScript
JavaScript是NetScape公司為Navigator瀏覽器開發的，是寫在HTML檔案中的一種指令碼語言，能實現網頁內容的互動顯示。當用戶在客戶端顯示該網頁時，瀏覽器就會執行JavaScript程式，使用者通過互動的操作來改變網頁的內容，來實現HTML語言無法實現的效果。
如果將網頁比作模特
HTML表示模特自身
CSS表示模特的服裝修飾
JS則結合模特自身和修飾達到動態，表示模特的動作。
使用
通過<script></script>中直接編寫
通過<script src='目標文件的URL'></script>連結外部的Js檔案
作為某個元素的事件屬性值或者是超連結的href屬性值
常用事件
onchange HTML 元素改變
Onclick 使用者點選 HTML元素
Onmouseover 使用者在一個HTML元素上移動滑鼠
Onmouseout 使用者從一個HTML元素上移開滑鼠
Onkeydown 使用者按下鍵盤按鍵
Onload 瀏覽器已完成頁面的載入
DOM瞭解
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）
常見用法
查詢 HTML 元素
getElementsByTagName
getElementsByName
getElementById
建立節點
createElement
createTextNode
appendChild
刪除節點
removeChild
一個簡單的js例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//驗證姓名，密碼是否為空
function checkUserName(){
var name = document.getElementById("userName"); //獲取id為username的元素
var name1 = document.getElementById("nameEmpty");//獲取id為nameEmpty的元素
if(name==null||""==name.value){
name1.style.display="inline";//當name為空提示
}else{
name1.style.display="none";//不提示
}
}
function checkpwd(){
var name = document.getElementById("password");//獲取id為password的元素
var name1 = document.getElementById("pwdEmpty");//獲取id為pwdEmpty的元素
if(name==null||""==name.value){
name1.style.display="inline";//當name為空提示
}else{
name1.style.display="none";//不提示
}
}
//驗證使用者資訊
function checkuser(){
var name = document.getElementById("userName");//獲取id為username的元素
var pwd = document.getElementById("password");//獲取id為password的元素
if(name==null||""==name.value){
alert("名字不為空");//提示框
return false;
}if(pwd==null||""==pwd.value){
alert("密碼不為空");
return false;
}
return true;
}
//全選
onload=function(){
var checkbox = document.getElementById("checkbox");//獲取id為checkbox的元素
checkbox.onclick=function(){
var checkbox1 = document.getElementsByClassName("checkbox1");//獲取class為checkbox1的元素組
for (var i=0;i<checkbox1.length;i++) {
checkbox1[i].checked=checkbox.checked;//設定checked屬性
}
}
};
function addUser(){
var userName = document.getElementById("userName");//獲取id為username的元素
var age = document.getElementById("age");//獲取id為age的元素
var place = document.getElementById("place");//獲取id為place的元素
var place1 = document.getElementById("place1");//獲取id為place1的元素
var table = document.getElementById("table");//獲取id為table的元素
var tr = document.createElement("tr");//建立元素
var td = document.createElement("td");//建立元素
var td1 = document.createElement("td");//建立元素
var td2 = document.createElement("td");//建立元素
var td3 = document.createElement("td");//建立元素
var chbox = document.createElement("input");//建立元素
chbox.setAttribute("type","checkbox");//設定屬性
chbox.setAttribute("class","checkbox1");//設定屬性
var name = document.createTextNode(userName.value);//建立文字節點
var age = document.createTextNode(age.value);//建立文字節點
//獲取選中的省
var Index = place.selectedIndex;
var text = place.options[Index].text;
//獲取選中的市
var Index1 = place1.selectedIndex;
var text1 = place1.options[Index1].text;
var place = document.createTextNode(text+text1);//建立文字節點
td.appendChild(chbox);//新增子元素
td1.appendChild(name);//新增子元素
td2.appendChild(age);//新增子元素
td3.appendChild(place);//新增子元素
tr.setAttribute("class","tr");//設定屬性
tr.appendChild(td);//新增子元素
tr.appendChild(td1);//新增子元素
tr.appendChild(td2);//新增子元素
tr.appendChild(td3);//新增子元素
table.appendChild(tr);//新增子元素
}
//隔行換色
function changeColor(){
var trDom = document.getElementsByClassName("tr");//獲取class為tr的元素組
for (var i=0;i<trDom.length;i++) {
if(i%2==0){
trDom[i].style.backgroundColor="green";//設定背景顏色
}
else if(i%2==1){
trDom[i].style.backgroundColor="greenyellow";//設定背景顏色
}
}
}
//地方切換
var hnArray = ["長沙市","衡陽市","益陽市"];
var hbArray = new Array("黃岡","武漢","襄陽");
var gxArray =["桂林市","南寧市","欽州市"];
function changePlace(s){
var pResult = s.value;
var Dom = document.getElementById("place1");
Dom.innerHTML="<option value='000'>請選擇</option>";//重置市名稱
if(pResult=="001"){
for (var i=0;i<hnArray.length;i++) {
Dom.innerHTML+="<option value="+i+">"+hnArray[i]+"</option>";//追加插入市陣列內容
}
}else if(pResult=="002"){
for (var i=0;i<hbArray.length;i++) {
Dom.innerHTML+="<option value="+i+">"+hbArray[i]+"</option>";
}
}else if(pResult=="003"){
for (var i=0;i<gxArray.length;i++) {
Dom.innerHTML+="<option value="+i+">"+gxArray[i]+"</option>";
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return checkuser()">
姓名：<input id="userName" type="text" size="10"/ onblur="checkUserName()"><!--失焦onblur-->
<span style="display: none;" id="nameEmpty" ><font color="red";size="2">姓名不能為空</font> </span>
<br />
密碼：<input id="password" type="password" size="10"/onblur="checkpwd()">
<span style="display: none;" id="pwdEmpty" ><font color="red";size="2">密碼不能為空</font> </span><br />
年齡：<input id="age" type="text" size="10"/><br />
性別：<input type="radio" name="sex" />男<input type="radio" name="sex"/>女<br />
籍貫：省<select id="place" onchange="changePlace(this)"><!--onchange選項改變-->
<option value="000">請選擇</option>
<option value="001">湖南</option>
<option value="002">湖北</option>
<option value="003">廣西</option>
</select>
市<select id="place1">
<option value="000">請選擇</option>
</select><br />
<input type="submit" value="註冊" />
<input type="reset" />
</form>
<button onclick="addUser();changeColor()">新增</button>
<table id="table" border="1" width="400px" style="text-align: center;">
<tr>
<th><input type="checkbox" id="checkbox"/>全選</th>
<th>姓名</th>
<th>年齡</th>
<th>籍貫</th>
</tr>
</table>
</body>
</html>