HTML
1. HTML文件結構
<html>
<head>...</head>
<body>...</body>
</html>
- <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。
- <head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。
<head>
<title>...</title> // 顯示網頁的標題信息
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
- 在<body>和</body>標簽之間的內容是網頁的主要內容，如 h1, p, a, img 等網頁內容標簽。
2. 標簽
- p標簽：段落標簽，顯示段落文字，常用于文章正文中
- h標簽：h1-h6代表不同大小文字的標題
- strong: 加粗文本， em: 斜體文本
- span：設置單獨樣式的文本, 例如設置藍色字體
<style>
span{
color:blue;
}
</style>
- q標簽：引用文字，顯示為添加引號
- blockquote標簽：長文本引用標簽，單獨形成一段
- br：換行標簽
- hr：分割線
-  : 文本中添加空格
- address：地址標簽，用于地址，郵件等
- code標簽：代碼標簽，用于顯示代碼
- pre：顯示多行代碼
- ul-li：無序列表
- ol-li：有序列表
- div：容器
- talbe：表格標簽
<table>
<tbody>
<tr>
<th>班級</th>
<th>學生數</th>
<th>平均成績</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
</tbody>
</table>
- caption：為表格添加標題
- a：鏈接標簽，在新頁面中打開鏈接添加 target="_blank", 如果是鏈接到郵箱，在href內容中添加 mailto，添加subject郵件主題，body郵件內容
<a href = "http://www.lxweimin.com" target = "_blank">簡書</a>
<a href="mailto:18840839565@163.com ?subject=觀了不起的蓋茨比 &body=你好，對此評論有些看法">對此影評有何感想，發送郵件給我</a>
- img：圖片標簽,src 可以是本地文件也可以是網址
- form：表單 / 下拉列表框
/// 傳送方式為post/get， action：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面
<form method="傳送方式" action="服務器文件">
所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在 <form></form> 標簽之間
- input：由type決定形式
<form action="post" method="save.php">
<!--
type: text 可以輸入文本內容 / password 輸入密文 / submit 提交按鈕 / reset 重置按鈕 / radio 單選框
checkBox：復選框 value：提交數據到服務器的值（后臺程序PHP使用） name：為控件命名，以備后臺程序 ASP、PHP 使用
checked：當設置 checked="checked" 時，該選項被默認選中
-->
賬戶：
<input type="text" name="usrname" id="usrname" value="" />
<br>
密碼：
<input type="password" name="pas" id="pas" value=""/>
<input type="submit" value="submit"/>
<input type="reset" name="reset" id="reset" value="reset" />
<input type="radio" name="單選框" id="" value="" />
<input type="checkbox" name="復選框" id="" value="" />
</form>
表單中添加標簽：
<label for="male">男</label>
- textarea：多行文本輸入
- selected-option: 選擇框，默認為單選，添加mutible是為復選框
<select>
<option value="shanxi">山西</option>
<option value="liaoning">遼寧</option>
<option value="shanghai">上海</option>
</select>
// 復選框用這個：<select multiple="multiple">
CSS
1.基本樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。
- 基本樣式，包括字體、顏色、邊界等內容
font-size:12px; /*設置文字字號*/
color:red; /*設置文字顏色*/
font-weight:bold; /*設置字體加粗*/
border:1px solid red /*邊框 1px，實現，紅色*/
- 選擇器：標簽選擇器、類選擇器、ID選擇器、子選擇器、包含（后代）選擇器、通用選擇器、偽類選擇符、分組選擇符。
- 標簽選擇器，權值為1
/* 標簽名+{} */
p{}
- 類選擇器， 權值為10
/* . + 自定義類名 + {}*/
.customStyle { color: purple; }
- ID選擇器，權值最高 為100
/* # + id + {} */
#testSytle {color: orange;}
- 子選擇器，定義當前類下的第一個對應的子元素
/* . + class + > + 子元素 */
.customStyle>div{ background-color: purple; } /* customStyle 類下的第一個div的背景色為紫色 */
- 包含（后代）選擇器，定義當前類下所有對應子元素的樣式
/* . + class + space + 子元素 */
.customSpan span{ color: white; } /* 定義當前類下所有的span 顏色為白色 */
- 通用選擇器
/* * + {} */
* { color: red } /* 匹配所有元素 設置顏色為紅色, 權值最低 */
- 偽類選擇符
a:hover{ color: pink; } /* 常用的就這一種，當鼠標滑過是顯示字體顏色為pink */
- 分組選擇符
/* 多種選擇器之間用逗號隔開 */
.customSpan,span,#lol{color: white;} /* 類選擇器 + 標簽選擇器 + ID選擇器*/
- 標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100，分組選擇器權值為個選擇器權值之和，權值越高，優先級別越高，當兩者權值相同時，取后者。對應的：內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
- 當希望增加某個標簽的重要性是，使用 “ !important ”
p{color:red!important;}
2.格式化排版
- 字體
font-family: "微軟雅黑";
- 字號，顏色
font-size:12px;color:#666；
- 粗體
font-weight:bold;
- 斜體
font-style:italic;
- 下劃線
text-decoration:underline;
- 刪除線
text-decoration:line-through;
- 縮進
text-indent:2em; /* 縮進2個字符 */
- 行間距
line-height:1.5em; /* 1.5倍行間距 */
- 字間距
letter-spacing:50px;
word-spacing:50px
- 對齊
text-align:center;
text-align:left;
text-align:right;
3.盒模型
- 塊級元素
diaplay:block;
- 內聯元素
display:inline;
- 內聯塊元素
display:inline-block;
- 邊界
/* 設置各個方向 */
border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
/* 統一設置 */
border:1px solid red;
- 寬度和高度，一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
margin:10px; /* border向外 */
border-bottom:1px dotted #ccc; /* border */
padding:10px; /* border向內 */
width:200; /* 內容寬度 */
/* 填充, 上右下左順時針順序 */
padding:20px 10px 15px 30px;
/* 邊界，上右下左順序 */
margin:20px 10px 15px 30px;
4.部局模型
- 流動模型
網頁元素默認為Flow布局：塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%，內聯元素會在所處的包含元素內從左到右水平分布顯示。 - 浮動模型
任何元素默認是不能浮動的，但可以添加下面代碼來進行設置
float:left;
float:right;
層模型
層模型有三種形式：
1、絕對定位(position: absolute)： 將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口；
2、相對定位(position: relative)：相對于自身原來的位置進行移動；
3、固定定位(position: fixed)：固定位置，不會隨著頁面滾動位置進行變化；定寬元素居中
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
- 不定寬元素居中
margin:0 auto;
/* 利用相對位置進行偏移 */
position:relative;
left:50%;
/* 設置為內聯元素 */
display:inline;
