我的IT夢——web前端開發之HTML,CSS（一）
HTML
- HTML全稱HyperText Markup Language（超文本標記語言）
- 標簽成對出現
<!DOCTYPE html>文檔類型定義- < > 標記||標簽
charset=UTF-8字符編碼集，萬國碼<head></head>頭部<body></body>內容<!-- -->註釋- 標題
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6> - 無序排列
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li></ul> - 有序排列
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li></ol> - 定義列表
<dl>
<dt>第一項</dt>
<dd>第二項</dd></dl> <p></p>文章段落<br/>換行 空格- 引用
<blockquote></blockquote><q></q> - 超鏈接
<a href="" target=""></a> - 插入圖片
<img src="圖片所在地址" alt="自己命名，方便查找"> - 粗體
<strong></strong>（強調）<b></b> - 斜體
<em></em><i></i> - 劃分區塊
<div></div>
HTML,CSS,JavaScript三者的關系
- html 結構，決定網頁的結構和內容
- css 表現（樣式），設定網頁的表現方式
- Js 行為，控制網頁的行為
HTML標簽
定義縮寫
<abbr title="Hyper Text Markup language">html</abbr>
定義“定義”對圖片的一個闡述
figure>
<img src="img/151209173849244246.jpg" alt="米奇"/>
<figcaption>米奇</figcaption>
</figure>
視頻
<video src="img/movie.mp4" controls autoplay loop></video>
音頻
<audio src="img/Mrbaluoke.wav" controls autoplay loop></audio>
表格
<table border="1">
<caption>學生登記表</caption>
<tr>
<th>姓名</th>表頭
<th>年齡</th>
<th>班級</th>
<th>備註</th>
</tr>
<tr>
<td>張三</td>
<td>6</td>
<td>1-1</td>
<td>無</td>
</tr>
<tr>
<td>李四</td>
<td>6</td>
<td>1-1</td>
<td>無</td>
</tr>
<tr>
<td>王五</td>
<td>7</td>
<td>2-1</td>
<td>無</td>
</tr>
<tr>
<td colspan="4">由XX學校</td>
</tr>
</table>
表單
- action 提交的路徑地址 method 提交方式 get || post
<form action="#" method="post"></form> - 文本框
<input type="text" placeholder="請輸入賬號" name="username"/> - 密碼框
<input type="password" maxlength="6" name="user_password"/> - 純情按鈕
<input type="button" value="搜索"/> - 提交按鈕
<input type="submit"/> <button>我是新的按鈕</button> - 多選框
足球 <input type="checkbox" name="sport"/>頭球 <input type="checkbox" name="sport"/>手球 <input type="checkbox" name="sport" checked/> -
單選框
男 <input type="radio" name="sex"/>女 <input type="radio" name="sex"/> -
label for 一個 id id具有唯一性
<label for="football">足球</label><input type="checkbox" name="sport" id="football"/> -
下拉框
<select name="" id=""><option value="beijing">北京</option><option value="tianjing">天京</option><option value="dongjing">東京</option></select> - 多行文字框
<textarea name="" id=""></textarea> - post 相對 get 更安全 id 具有唯一性 對前臺而言可快速找到元素、修改樣式等操作 name 對於後臺獲取數據有用
內聯框架
`<iframe src="http://www.baidu.com" width="700" height="500" frameborder="0"></iframe>`
CSS
語法規則
選擇器
{
聲明;
屬性:屬性值;
}
通配符
{
margin: 0;
padding: 0; }
標記||標簽||元素
h3{
color: #00D600;
font-size: 30px;
font-family: "黑體","Microsoft Yahei",sans-serif; }
id選擇器
#test_h4_id{ color: blue; }
類選擇器 復用
.test_class{ color: #eea236; }
屬性選擇器
input[type="text"]{ border: 1px solid red; }
偽類選擇器
a 顏色 a:link{ color: #000; }
訪問後 a:visited{ color: #ccc; }
鼠標移入||鼠標懸停 a:hover{ color: red; }
a點擊時 一瞬間 a:active{ font-size: 20px; }
後代選擇器
p span{ color: red;border: 1px solid red; }
子級選擇器
p>span{ color: red; border: 1px solid red; }
並集選擇器
h1,h2,h3,h4,h5,h6{ font-weight: normal; }
偽元素選擇器
.testa:before{ content: "前前前"; }
.testa:after{ content: "反正有大把時光"; }
div{ width: 200px; border: 1px solid; }
div:first-letter{ font-size: 30px; }
div:first-line{ }
權重
！importent>style>id>class>元素>通配符
樣式繼承
子級的樣式不是顯示聲明，從父級繼承，但子級可以單獨聲明樣式不影響父級，文字的樣式會繼承。
不被繼承的：margin，padding，boeder，background
我的IT夢——web前端開發之HTML,CSS（一）