1 網頁介紹
靜態網頁與動態網頁：
靜態網頁：我們寫好的html內容在瀏覽器中顯示出來的效果始終都一樣，不管進行多少次訪問，如果想內容改變必須修改源代碼。
動態網頁：頁面的內容是由服務器端程序控制輸出，比如不同的人使用相同的網站，但是顯示的當前用戶是不一樣的。
兩者區別：靜態就是我們寫什麼就顯示什麼，而動態通過程序的控制輸出內容。
2 第一個html網頁
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
3 超鏈接標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>超鏈接</h3>
<!-- blank表示另起一頁打開空白，_self表示在本頁打開 不過默認在本頁打開-->
<a href="hello.html" target="_self">點我啊</a>
</body>
</html>4 圖片標籤
必須屬性:
alt text 規定圖像的替代文本。 STF
src URL 規定顯示圖像的 URL。 STF
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--利用圖片做超鏈接-->
<a href="hello.html" target="_self"><img src="images/110.png" alt="孫悟空大戰奧特曼" title="師姐第三" border="5"/></a>
<img src="images/three.jpg" alt="孫悟空大戰奧特曼" title="師姐第三" border="10" width="500" height="400"/>
</body>
</html>5 列表標籤
有序列表:
列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
無序列表:
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於 <ul> 標籤。每個列表項始於 <li>。
定義列表:
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--有序鏈表-->
四大美女
<!-- 1數字A字母a字母，I數字V i是vi -->
<ol type="I">
<li>西施</li>
<li>王昭君</li>
<li>貂蟬</li>
<li>楊玉環</li>
</ol>
<!--無序鏈表-->
四大美女
<!-- square方塊，circle圓圈 默認是點 -->
<ul type="circle">
<li>西施</li>
<li>王昭君</li>
<li>貂蟬</li>
<li>楊玉環</li>
</ul>
<!--定義鏈表-->
<dl>
<dt>四大妹妹</dt>
<dd>西施</dd>
<dd>王昭君</dd>
<dd>貂蟬</dd>
<dd>楊玉環</dd>
</dl>
<!--自定義的嵌套列表-->
<dl>
<dt>java</dt>
<dd>javaSE</dd>
<dd>
<dl>
<dt>javaEE</dt>
<dd>Strus2</dd>
<dd>Hibernate</dd>
<dd>Spring</dd>
</dl>
</dd>
<dd>javaME</dd>
<dt>html漢語</dt>
</dl>
</body>
</html>6 表格標籤
每個表格由 table 標籤開始。
每個表格行由 tr 標籤開始。
每個表格數據由 td 標籤開始。
<table> 定義表格
<caption> 定義表格標題。
<th> 定義表格的表頭。
<tr> 定義表格的行。
<td> 定義表格單元。
<thead> 定義表格的頁眉。
<tbody> 定義表格的主體。
<tfoot> 定義表格的頁腳。
他們三的作用:就算被打亂了還是從thead,tbody,tfoot這個順序,可以增加用戶體驗,及時緩衝出表頭跟尾巴這些重要信息<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- width佔瀏覽器的80% padding單元格邊距 spacing單元格間距 -->
<table border="1" width="80%" cellpadding="0" cellspacing="0">
<!-- 表名 -->
<caption>學生列表</caption>
<thead>
<tr style="background: gray">
<th>id</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tfoot>
<!-- center居中顯示 -->
<tr align="center">
<td colspan="4"><a href="">首頁</a><a href="">上一頁</a><a href="">下一頁</a><a
href="">尾頁</a> 第4/6頁 總共有46條數據</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10</td>
<td>喬峯</td>
<td>30</td>
<td>男</td>
</tr>
<tr style="background: yellow;">
<td>20</td>
<td>西門</td>
<td>28</td>
<td>男</td>
</tr>
<tr>
<td>30</td>
<td>蓮蓮</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>8 表單標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>用戶註冊</h3>
<!-- form:表單域，可以包含多個input元素（輸入框/下拉列表/單選框/複選框...）
屬性：
action:把表中的數據提交給哪一個資源來做處理
method：單元的提交方式：get(缺省)，post
enctype:表示表單的編碼規範，文件上傳時的時候使用二進制編碼，其他情況不變
-->
<form action="#" method="get">
</form>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>用戶註冊</h3>
<form action="#" method="get">
<!-- hidden是隱藏值 -->
<input type="hidden" name="id" value="123456"/>
<!-- readonly只讀 disabled="disabled"灰色不可用的 只要跟前面的相同可以只用一個單詞就行-->
賬號：<input type="text" name="username" value="默認值"/><br/>
密碼：<input type="password" name="password"/><br/>
<!-- checked默認選中的 -->
性別：<input type="radio" name="gender" value="boy" checked/>男
<input type="radio" name="gender" value="boy"/>女
<input type="radio" name="gender" value="boy"/>保密<br/>
愛好:<input type="checkbox" name="hoby" checked/>java
<input type="checkbox" name="music"/>聽歌
<input type="checkbox" name="boll"/>打籃球
<input type="checkbox" name="games"/>LOL
<input type="checkbox" name="phonegames"/>海島奇兵<br/>
頭像：
<input type="file" name="headImg"/> <br/><hr/>
城市：<!-- value設置"gz"最上面的網址行顯示的是gz-->
<!-- multiple可以同時選擇多個選項 size同時顯示幾個值-->
<select name="city" multiple size="1">
<option value="gz">廣州</option>
<option>佛山</option>
<option>深圳</option>
<option>湛江</option>
</select><br/>
簡介：
<!-- 有30個列,可以寫5行 -->
<textarea name="intro" row="30" cols="30">個人簡介</textarea>
<br/>
<!-- <input type="image" src="images/110.png"/> -->
<input type="button" value="普通按鈕" onclick="alert(1)"/>
<input type="submit" value="朕要註冊" />
<input type="reset" value="重置"/>
</form>
</body>
</html>html5新特性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>用戶註冊</h3>
<form action="#" method="get">
<!-- required必填屬性
date格式
數字模式
最大最小
佔位符關鍵字
顏色
-->
賬號：<input type="text" name="username" required/><br/>
郵箱：<input type="email" name="email" required/><br/>
年齡：<input type="date" name="age"/><br/>
手機：<input type="number" name="tel"/><br/>
<!-- max="10" min="1" 屬性值最大最小值-->
<input type="search" name="keyword" placeholder="關鍵字"/>
<input type="color">
<br/>
<input type="submit" value="朕要註冊"/>
</form>
</body>
</html>9 框架標籤
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="15%,*,5%">
<frame src="top.html"/>
<frameset cols="300,*">
<frame src="menu.html" noresize/>
<frame src="welcome.html" name="main"/>
</frameset>
<frame src="foot.html"/>
</frameset>
<noframes>
<body>
瀏覽器版本過低，請升級
</body>
</noframes>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>菜單信息</h3>
四大美女
<ul type="square">
<li><a href="xishi.html" target="main">西施</a></li>
<li><a href="zhaojun.html" target="main">王昭君</a></li>
<li><a href="">貂蟬</a></li>
<li><a href="">楊玉環</a></li>
</ul>
</body>
</html>10 CSS概述
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* css代碼*/
div{
background-color:green;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div style="background-color: yellow">DIV1</div>
<div style="background-color: orange">DIV2</div>
<div style="font-size: 30px; color: red;">DIV3</div>
</body>
</html>調用下面的index.css代碼
/*全局的樣式信息*/
div{
background-color:green;
}標籤選擇器,類別選擇器,id選擇器…
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
<!--標籤選擇器-->
div{
background-color:red;
}
p{
background-color:yellow;
font-size:30px;
color:white;
}
<!--類別選擇器-->
.haha{
background-color:green;
}
<!--id選擇器-->
#div1{
background-color:black;
}
</style>
</head>
<body>
<div class="haha" id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div>DIV3</div>
<p class="haha">p1</p>
<p>p2</p>
<apan>span</apan>
</body>11 JS 概述
/*要求:
* 1.定義變量
* 2.定義函數/調用函數
* 3.獲取指定id的元素
* 4.提交表單
*/
index.html文件
<body>
你好
<a href="javascript:alert(22)">點我</a>
<div id="div1">DIV1的內容</div>
<div>DIV2的內容</div>
<div>DIV3的內容</div>
<form action="#" id="xx">
<input type="text" name="username"/>
<input type="button" value="提交" onclick="submitForm()"/>
</form>
</body>index.js文件
function show(){
alert("哈哈,函數");
}
show();
function show(name){
alert("你好"+name);
}
show("喬峯");
show("阿朱");
function getSun(x,y){
return x+y;
}
var ret = getSun(2,5);
console.debug("結果="+ret);
function submitForm(){
//提交表單的代碼
//獲取表單對象
//var form = document.forms[0];
var form = document.getElementById("xx");
//提交表單
form.submit();
}