1.重點掌握:
html:
1.form表單:input,checkbox,seelct,radio,button,submit
2.table表格:thead-->tr-->th;tbody-->tr-->td
3.ul列表:ul-->li
css:
選擇器：
id
class
element
2.HTML：
table表格：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1"> <colgroup><!-- 定義了一個列的分組 --> <!-- 選中表格前兩列，把背景色定義為紅色 --> <col span="1" style="background: red;" /><!-- span代表選中的某些列 --> <col span="4" style="background: yellow;" /> </colgroup> <!-- 把表格外部邊框加粗，數值沒有上限，下限為0或者-1 --> <thead> <!-- 表格的標題 --> <tr> <!-- 代表了一行數據 --> <th>編號</th> <!-- 標題的內容 --> <th>名字</th> <th>年齡</th> <th>描述</th> <th>入職日期</th> <th>操作 | <a href="">新增</a> </th> </tr> </thead> <!-- tfoot是HTML5的，他定義了一個表格的底部，無論順序放在哪，總是在表格的最下面 --> <!--<tfoot> <tr> <td>總人數</td> <td>100人</td> </tr> </tfoot>--> <tbody> <!-- 表格標題對應的內容，標題和內容是一一對應的 --> <tr> <!-- 代表一行數據 --> <td>1</td> <!-- 標題的數據內容 --> <td>zhangsan</td> <td>35</td> <td>我是張三</td> <td>1999-07-05</td> <td> <a href="">修改</a> | <a href="">刪除</a> </td> </tr> <tr> <!-- 代表一行數據 --> <td>2</td> <!-- 標題的數據內容 --> <td>lisi</td> <td>30</td> <td>我是李四</td> <td>1999-07-06</td> <td> <a href="">修改</a> | <a href="">刪除</a> </td> </tr> <tr> <!-- 代表一行數據 --> <td>3</td> <!-- 標題的數據內容 --> <td>wangwu</td> <td>32</td> <td>我是王五</td> <td>1999-07-07</td> <td> <a href="">修改</a> | <a href="">刪除</a> </td> </tr> </tbody> </table> </body> <ml>
列表：
<<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <ul><!-- 無序的列表標簽 --> <ol>李四</ol> <ol>王五</ol><!----> <ol>張三</ol><!----> </ul> <!-- li標簽都不會自己使用，通常配合ol或者ul來使用 --> <ol><!-- 有序的列表，通常情況下會配合li使用 --> <li>張三<> <li>李四<> <li>王五<> </ol> <!-- 最常用 --> <ul> <li>張三<><!-- 和ul配合使用，是列表中的某一行數據，沒有順序要求，也沒有唯一要求 --> <li>李四<> <li>王五<> </ul> <hr /> <dl> <dt>汽車</dt><!-- 標題 --> <dd>奇瑞</dd><!-- 標題內容 --> <dd>帝豪</dd> <dd>吉利</dd> <dt>家具</dt> <dd>床</dd> <dd>櫃子</dd> <dd>桌子</dd> <> </body> <ml>
Test1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <acronym title="我是teacher">teacher</acronym><!-- 不會換行 --> <abbr title="我也是縮寫">我是縮寫</abbr> <bdi>我里面有東西</bdi> <span>我是span</span> <center>我是居中的元素</center> <mark>我是標記標簽</mark><!-- 自動會給文字加上一個背景色 --> <progress value="22" max="100"></progress> <strong>我是strong標簽</strong> <p>我們一般都是<time>9:00</time>上課</p> <wbr>Hello</wbr>World<!-- 換行符標簽，把寫在一起兩個單詞分離開 --> <a>我是第一個a標簽</a> <a href="#">我是第二個a標簽</a><!-- a標簽中，如果href屬性不填或者填寫#號，默認刷新頁面，也就是默認跳轉本頁面 --> <nav><!-- 定義一組連接 --> <a href="">第三個a標簽</a> | <a href="">第四個a標簽</a> </nav> </body> </html>
Test2：
<!DOCTYPE html><!-- 這里是注釋 DOC:document的簡稱 Type:類型 文檔類型：HTML:Hyper Text Mark-up language:超文本標記語言 , 就是一個頁面--> <html><!--用<a>,<html></html>,<body></body>統稱為html的標簽/元素 --> <head> <meta charset="utf-8" /><!-- 輔助標簽，最常用的地方：設置編碼 --> <title>Hello HTML</title> </head> <body><!-- 才是真正顯示頁面內容的 --> <h1>我是h1標簽</h1>----<h6>我是h6標簽</h6><!-- 標題 , 默認自動換行 --> <p>我是P標簽</p><!-- 自動換行的 --> <a href="index2.html" target="_blank">我要跳轉到index2頁面</a><!-- 超文本連接 a標簽不能自動換行， 在標簽中能控制某種效果的關鍵字就叫屬性 --><br /><!-- 強制換行標簽 --> <a href="http://www.baidu.com">我要去百度</a> <img src="img/1.jpg" alt="該圖片無法展示" /><!-- 圖片標簽 也不會自動換行 --> <a href="index2.html"> <img src="img/1.jpg" /> </a> <hr /><!-- 實現一個分割的效果 --> <font size="1">我是胖子</font><!-- size屬性最大是7，最小是1,不會自動換行 --> <b>我被加粗了</b><!-- 加粗標簽,也不會自動換行 --> <i>我是斜體字</i><!-- 斜體字，也不會自動換行 --> <em>我是強調用的</em><!-- 也不換行 --> <small>我是小號文字</small><!-- 也不換行 --> <code>測試code</code><!-- 根據自己瀏覽器和計算機自動顯示在頁面上，基本沒用過 --> 1<sub>0</sub> 2<sub>1</sub> 3<sub>2</sub><!-- 下標，不會自動換行 --> <sup>我是上標(次方)</sup> 2<sup>5</sup><!-- 不會換行 --> <del>我被廢棄了</del><!-- 不會換行 --> <ins>帶下划線</ins><!-- 不會換行 --> <pre>我有一個空格存在 我有一個空格存在</pre><!-- 用在講課，在html上寫Java代碼 --> <kbd>鍵盤輸入</kbd><!-- 都不會換行 --> <span>鍵盤輸入</span><!-- 都不會換行 --> <em>我叫定義地址</em> <address>我也是定義地址</address> </body> </html>
3.CSS（Cascading Style Sheets）層疊樣式表：
頁面布局：
為標簽定義顏色的三種方式：
Link方式插入CSS樣式表；
寫在HTML的head中的標簽定義式；
寫在內容的中的標簽定義式；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首頁</title>
<!-- 引入樣式分為3種：講究就近原則：離的越近，就先加載 -->
<!-- 使用link標簽引入的樣式，稱為引入樣式文件 -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- 第二種為一個標簽定義一個樣式 -->
<!-- 寫在html的head標簽中的樣式稱為內部樣式(頁面樣式) -->
<style> div { color:blue; font-size: 50px;
}
</style>
<!-- 第三種為一個標簽定義一個樣式 -->
<!--<link rel="stylesheet" type="text/css" href="css/index.css" /> 把需要的css樣式文件導入到頁面中，使頁面可以使用css-->
</head>
<body>
<!-- 如果給標簽添加一個樣式 ：在標簽中使用style屬性 -->
<!-- 所有定義顏色的樣式，都有兩種寫法：1.英文單詞(red,yellow,blue,purple...),2.以#開頭后面英文字母和數字組成的顏色編碼(#e0e0e0,#eee,#000000...) -->
<!-- 第一種為一個標簽定義一個樣式 style="color: #eee;" -->
<!-- 一旦行內樣式存在，其他的樣式就不再起作用 -->
<div style="color: red;">我是div1</div><!-- 直接在標簽中，以屬性的形式添加的樣式稱為行內樣式 -->
<!--<div>我是div2</div>-->
</body>
<ml>
引入的.css文件：
div {
color:yellow;
}
樣式選擇器：
id選擇器；
類選擇器；
標簽選擇器；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>樣式選擇器</title> <style> /* 標簽選擇器 */ p { color: red; } span { color: yellow; } /* id選擇器 */ #div1 { color: pink; } /* 類選擇器 */ .h { color:palegreen; } </style> </head> <body> <!-- 行內樣式是不需要選擇器的，寫在哪個標簽中就對這一個標簽起作用，不會對任何其他標簽起作用 --> <p style="color:blue;">我是p標簽1</p> <!-- 標簽選擇器 --> <p>我是p標簽2</p> <span>我是span標簽</span> <!-- id選擇器，每一個標簽中都存在一個id屬性，如果不聲明不可以使用，一個頁面中只能出現一次id的名稱，也就是id="div1"雙引號中的值(div1)必須是唯一的，不能出現重復 --> <div id="div1">我是div1</div> <div id="div1">我是div2</div> <h2 id="div1">我是h2標簽</h2> <!-- 類選擇器 --> <h3 class="h">我是h3標簽</h3> <h4 class="h">我是h4標簽</h4> <h1 class="h">我是h1標簽</h1> </body> </html>
樣式Test：
a:link,a:hover,a:visited,a:active是有順序的，如果不按照這個順序是無法正確顯示操作的樣式，注意清空瀏覽器緩存
順序為：
a:link {
color:green;
}
a:visited {
color:black;
}
a:hover{
color:red;
}
a:active {
color:yellow;
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>樣式</title> <style> body { /* background 背景*/ /*background-color: red; = background-color : red; */ /*background-image: url(img/beautiful.jpg);*/ /* 背景圖片，默認平鋪 */ /*background-repeat: no-repeat;*/ /*position:設置一個背景圖片的位置，上下左右，左上左下右上右下，中間；背景圖片一定不能平鋪 */ /*background-position:center;*/ /* no-repeat:不平鋪 repeat-x:橫向平鋪 repeat-y:縱向平鋪 */ /*background-attachment: fixed;*/ /* fixed：(以center為例)背景圖片固定不動，總是會出現屏幕的正中間 scroll:滾動，會一直在頁面的正中間*/ /* 終極版 */ /*background: url(img/beautiful.jpg) no-repeat left top scroll;*/ } .h { /* text */ /*text-align: center;*/ /* center:使文本居中 */ /*text-align: center;*/ text-align: justify; /* 就是把文本的兩端對齊 */ text-indent: 50px; /* 縮進(單位是px(像素)) */ } #a1 { text-decoration: none; /* 去掉文本的下划線 */ } span { text-decoration: line-through; } h2 { text-decoration: underline; } h3 { color: red; /* 定義一個文本字體顏色只能用color */ font-family: "楷體"; /*font-family:默認微軟雅黑(你的系統默認字體) 設置字體*/ font-style: oblique; /* 傾斜的字體和斜體沒有任何區別 */ font-size: 100%; /* 字體的極小值為0，沒有極大值 如果size的單位為百分號：100%就是默認的大小，以默認大小為基礎，進行放大和縮小*/ font-weight: 900; } /* hover 當鼠標懸浮的時候執行的一種狀態 */ /*.a2:hover { color:orange; }*/ /*hover, link, visited..只適用於a標簽*/ .a2:link { /* 在還沒有點擊a標簽的時候顯示成紫色 */ color: red; } .a2:hover { /* 當鼠標放在a標簽上的時候，顯示的顏色 */ text-decoration: none; /*color:black;*/ } .a2:visited { /* 當鼠標點擊后，顯示的顏色 */ color: brown; } .a2:active { /* 當正在點擊a標簽時，顯示的顏色 */ background-color: red; /*color:aqua;*/ } /* circle：空心圓 */ /*#ul1 { list-style-type: circle; }*/ /* square：實心正方塊 */ /*#ul1 { list-style-type: square; }*/ /* upper-roman:羅馬數字 */ /*#ul1 { list-style-type: upper-roman; }*/ /**/ /* 小寫的英文字母 */ #ul1 { list-style-type: lower-alpha; } </style> </head> <body> <h1 class="h">我是h1標簽1</h1> <h1 class="h">我是1標簽2我是h12我是h1標簽2我是h是h1標簽2我是h1標簽2我是h1標簽2我是h1標簽2我是h1標簽2我是h1標簽2我是h1標簽2我是h1標簽2我是h1標簽2</h1> <div class="h">我是div是v是div是div是diviv是div是div是div是v是div是div是div是div是div是div是div是div是div</div> <a href="index.html">我要去index</a> <a id="a1" href="http://www.baidu.com">我要去百度</a> <del>我是del標簽</del> <span>我是span標簽</span> <h2>我是h2標簽</h2> <h3>我是h3標簽</h3> <a id="a3" href="#">收藏夾</a> <a class="a2" href="#">商品分類</a> <a class="a2" href="#">賣家中心</a> <a class="a2" href="#">聯系客服</a> <ul id="ul1"> <li>張三</li> <li>李四</li> <li>王五</li> <li>趙六</li> </ul> </body> </html>
