HTML
標記語言為非編程語言
負責完成頁面的結構
組成：
標簽：被<>包裹的由字母開頭，可以結合合法字符（ -|數字 ），能被瀏覽器解析的特殊符號，標簽有頭有尾
指令：被<>包裹的由 ! 開頭
轉義字符：
空格 < : < > ： >
頁面模板
<!doctype html> <!--頁面開始--> <html> <!--頭--> <head> <!--字符編碼--> <meta charset="utf-8"> <!--頁面標簽的標題--> <title>頁面</title> <!--內部或外部的css樣式 | js腳本 | 頁面其他設置 --> </head> <!--身體--> <body> <!--存放給展示用戶的內容--> xx </body> <!--頁面結束--> </html>
常用標簽
最常用標簽:沒有語義，也沒有特殊功能，也沒有特殊樣式
<div></div>
換行標簽: <br> 標題標簽: h1 - h6 段落標簽: <p>xxx</p> 段落與段落之間間隔很大
文本標簽：同行顯示
span 文本標簽
i 斜體
em 斜體方式強調
b 加粗
strong 加粗方式強調
sup 上角標
sub 下角標
超鏈接標簽：a
<a href="連接地址" target="_blank">超鏈接</a> href="連接地址" arget="_blank/_self" 屬性表示新開一個窗口
錨點：快速定位到頁面指定位置
<a name='top'></a> 通過 a 的 name 設置錨點
<a href='#top'>返回Top</a> 再通過 a 的 href 屬性轉跳到錨點位
圖片標簽
<img src="圖片地址" alt="資源加載失敗顯示的文字" title="鼠標懸浮顯示文字提示">
列表標簽： ul ol
有序： <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 無序： <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
表格標簽 table
border: 表格邊框寬度
cellspacing: 單元格之間的距離
rules: all(全部) | groups(組線) | rows(行線) | cols(列線)
cellpadding: 內容距上距左的距離
<table border="10" width="500" height="300" cellspacing="0" rules="all" cellpadding="20">
<caption>表格標題</caption>
<thead>
<tr>
<!--th{標題}*3-->
<th>標題</th>
<th>標題</th>
<th>標題</th>
</tr>
</thead>
<tbody>
<!--(tr>td{單元格}*3)*2-->
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</tbody>
<tfoot>
<!--tr>td{單元格}*3-->
<tr>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</tfoot>
</table>
了解
分割線： <hr> （了解） 顯示文本：<pre></pre>
標簽分類
單標簽 br hr img meta link 功能具體，不需要內容，設置為單標簽 eg:<link rel="stylesheet" href="">
雙標簽 h1 p span div 具有子標簽，包含內容 eg:<h1>內容</h1>
css
負責頁面的風格設計
選擇器：由標簽，類，id單獨組合出現
作用域：一組打括號包含的區域
樣式塊：滿足css連接語法的眾多樣式
css的三種引入方式
1.行間式
樣式塊寫在標簽的style的屬性中 屬性 與 屬性 間用 ; 分號隔開 <div style="color: red"></div>
2.內聯式
寫在style標簽中 用選擇器與html建立連接 <style type="text/css"> .farther div { color: red; font-size: 100px; float: right; } </style>
3.外聯式
css外式完全與html文件脫離，形成單獨的.css文件，樣式書寫在.css文件中 用 link 標簽將css文件與 html 建立連接 < link rel="stylesheet" href="" > rel="stylesheet" 表示連接什么樣的文件，樣式連接表
三種引入方式的執行順序：
外聯 < 內聯 < 行間 行間式最后執行