html
hper text markup language --超文本標記語言
純文本 123 hello 你好
定義網頁的內容和結構
css
層疊樣式表 級聯樣式表
定義網頁的樣式
靜態網頁 --沒有功能的網頁
javascript
網頁的功能於行爲
html基本結構
html是由標籤（標記,網頁元素,markup,element）組成的
單標記
<br/>
<input/>
<標籤名 屬性名=“屬性值”/>
雙標記
<p></p>
<a></a>
<div></div>
<標籤名 屬性名=“屬性值>文本</標籤名>
<html>
<head>
定義網頁的屬性
</head>
<body>
編寫代碼
</body>
</html>
h4常用標籤
p:段落,前後自動空行
img:圖片
重要屬性: src='圖片的路徑' alt='圖片不能正常顯示時出現的文字'
width='寬px' height='高px'
注意:寬和高只能設置其中一個
a:超鏈接
重要屬性 : href='要跳轉的頁面的地址'
br: 換行
h1~h6 :大綱級標題
embed:多媒體標籤
h5標籤: video audio
表格
表格的基本結構
表單
文本框 密碼框 當選框 複選框
下拉列表 提交按鈕 一般按鈕
有序列表於無序列表
標籤之間是相互嵌套的
<form>
<input/>
</form>
css選擇器
css的作用是定義標籤的樣式?
它必須首先要找到對應的標籤,通過什麼？選擇器
內聯樣式
寫在標籤內部,style屬性中
內部樣式 外部樣式
選擇器(找標籤)
元素選擇器(html選擇器，標籤選擇器)
標籤名{
屬性名:屬性值;...
}
a{ ...} 找到頁面上所有的a 加樣式
id選擇器 (只能選取一個頁面元素)
#標籤的id值{
屬性名:屬性值;...
}
類選擇器(可以給多個頁面標籤加樣式)
.標籤的類名{
屬性名:屬性值;...
}
派生 (父子選擇器)
父選擇器 子選擇器{
屬性名:屬性值;...
}
羣組選擇器
p,a,#d1,div form{屬性名:屬性值;... }
求多個選擇器的並集
通配符選擇器
*{屬性名:屬性值;... }
選中頁面上所有的元素加樣式
*{margin:0;padding:0}
僞類選擇器
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF;font-size:50px;} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
僞元素
:first-letter:給文本的第一個字符加樣式
:first-line:給文本的第一行加樣式
背景 邊框 字體 文本 列表
h1~h6 p img a video/audio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<!--
h1~h6 大綱級標題
-->
<h1 style='color:#ffaaaa'>hello world</h1>
<h2 style='color:#aaffaa'>hello world</h2>
<h3 style='color:#aaaaff'>hello world</h3>
<h4 style='color:#ffbbbb'>hello world</h4>
<h5 style='color:#bbffbb'>hello world</h5>
<h6 style='color:#bbbbff'>hello world</h6>
段落前 <p>我是一個段落</p>段落後
<img alt="美女" src="images/lanrenzhijia21.jpg" width="300px" /> <br/>
這是一個美女<br/>
<a href='welcome.html'>點我</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 視頻 -->
<video src="video/1.mp4" controls="controls" autoplay="autoplay">
</video>
<!-- 音頻 -->
<audio src="music/海闊天空.mp3" controls="controls" autoplay="autoplay">
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 style='color:pink;'>歡迎光臨</h1>
<a href='hello.html'>回去</a>
</body>
</html>
ol/li/ul/border(solid/dotted)/ 內聯樣式、內部樣式、外部樣式/派生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 有序列表
軟件開發的流程
ol order list
-->
<ol>
<li>需求分析</li>
<li>概要設計</li>
<li>詳細設計</li>
<li>編碼</li>
<li>測試</li>
<li>實施</li>
<li>更新於維護</li>
</ol>
<ul>
<li>java</li>
<li>android</li>
<li>ios</li>
<li>.net</li>
<li>php</li>
</ul>
</body>
</html>
demo.CSS
@CHARSET "UTF-8";
/*
在外部文件中編寫css稱爲外部樣式
*/
p{
border:3px solid pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
/*
寫在style標記中的稱爲內部樣式
*/
a{
font-size:36px;
}
</style>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
寫在標籤內部 style屬性中的樣式稱爲
內聯樣式
-->
<a href='#'>點我</a>
<a href='#'>Click Me</a>
<p style='color:red;'>you can you up</p>
<p>你好,世界</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
color:red;
}
.txt{
border: 3px dotted red;
}
.hello{
color:green;
}
</style>
</head>
<body>
<div id='d1' class="txt">you can you up</div>
<p class="txt" >you can you up</p>
<a href="#" class='hello'>點我</a>
<input type="text" value="hello" class="hello"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
border:2px solid green;
}
/*派生選擇器*/
div p{
font-size:30px;
color:red;
}
</style>
</head>
<body>
<p>一個超然的段落</p>
<div>
<p>一個有爹的段落</p>
</div>
</body>
</html>
表格 文本框/密碼框/單選框/......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 表格
emp表 員工表
table 根標記
thead 表頭
tr 加入以行
th 在行中加入一個單元格
-->
<!--
<table border="3" width='600px' align='center'>
<thead>
<tr>
<th>員工編號</th>
<th>員工姓名</th>
<th>員工性別</th>
<th>員工年齡</th>
<th>員工薪資</th>
<th>部門</th>
</tr>
</thead>
<tbody align="center">
<tr >
<td>001</td>
<td >熊大</td>
<td>男</td>
<td>22</td>
<td>20000</td>
<td>java開發部</td>
</tr>
<tr>
<td>002</td>
<td>熊二</td>
<td>男</td>
<td>20</td>
<td>18000</td>
<td>java開發部</td>
</tr>
<tr>
<td>003</td>
<td>張三</td>
<td>女</td>
<td>20</td>
<td>17000</td>
<td>前端開發部</td>
</tr>
</tbody>
</table>
-->
<!--
簡約風格
-->
<table border="3" align='center' width='600px'>
<tr>
<th>員工編號</th>
<th>員工姓名</th>
<th>員工性別</th>
<th>員工年齡</th>
<th>員工薪資</th>
<th>部門</th>
</tr>
<tr >
<td>001</td>
<td >熊大</td>
<td>男</td>
<td>22</td>
<td>20000</td>
<td>java開發部</td>
</tr>
<tr>
<td>002</td>
<td>熊二</td>
<td>男</td>
<td>20</td>
<td>18000</td>
<td>java開發部</td>
</tr>
<tr>
<td>003</td>
<td>張三</td>
<td>女</td>
<td>20</td>
<td>17000</td>
<td>前端開發部</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
文本框 密碼框 單選框 複選框
下拉列表 提交按鈕 一般按鈕
action="後臺的地址"
-->
<form action="aaa" method="post" >
用戶:<input type="text" name="username"/> <br/>
密碼:<input type="password" name="pwd" /> <br/>
性別:
<label>
<input type="radio" name="sex" value="M" checked/> 男
</label>
<label>
<input type="radio" name="sex" value="F"/> 女
</label>
<br/>
興趣愛好:
<label>
<input type="checkbox" name="hobby" value="ball"/> 籃球
</label>
<label>
<input type="checkbox" name="hobby" value="swimming"/> 游泳
</label>
<label>
<input type="checkbox" name="hobby" value="reading"/> 閱讀
</label>
<label>
<input type="checkbox" name="hobby" value="coding"/> 編程
</label>
<br/>
您是從何處知曉本網站的信息?
<select name="info" >
<option value="-1">---請選擇---</option>
<option value="baidu">百度</option>
<option value="51job">前程無憂</option>
<option value="school">學校推薦</option>
<option value="sina">新浪網</option>
</select>
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="自定義" onclick="alert('hello world')"/>
</form>
</body>
</html>
超鏈接/僞類選擇器/僞元素first-letter/div盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p,a{
color:red;
}
</style>
</head>
<body>
<p>hello</p>
<a href="#">click me</a>
<div>123</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF;font-size:50px;} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
div{
width:200px;
height:200px;
background-color:red;
}
div:hover{
width:600px;
height:600px;
background-color:green;
}
</style>
</head>
<body>
<a href="#">ClickMe</a>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p:first-letter{
font-size:50px;
color:red;
}
</style>
</head>
<body>
<p>
好好學習，天天向上
努力，不亞於任何人的努力
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
/* 寬高是指盒子內容的寬和高*/
width:100px;
height:100px;
background:red;
padding:20px;
border:3px solid green;
margin:200px;
}
</style>
</head>
<body>
<!--
盒子模型
-->
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:600px;
height:600px;
border:1px solid red;
/*
background-image: url(../web/images/zb0.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;*/
background: url(../web/images/zb0.jpg) no-repeat 10% 10%;
}
</style>
</head>
<body >
<div></div>
</body>
</html>
