1.HTML
1.1 HyperText Markup Language 超文本標記語言
<!DOCTYPE html> 文檔類型聲明氛堕，必須為所有HTML文件的第一行代碼
標記格式：<p>Hello World!</p>【以尖括號“<”和“>”包裹標簽，分為頭部和尾部，其中尾部加入“/”掂僵，表示結(jié)束，內(nèi)容在兩對尖括號中間】
格式要求：不同標簽之間換行后堵泽，利用兩個空格進行縮進（不使用tab鍵）椒楣。
<DOCTYPE html>
<html><!--定義html結(jié)構(gòu)-->
<head><!--必須包含標題title信息，可以包含腳本、樣式彪笼、meta信息以及其它-->
<title>The First Page!</title>
</head>
<body>
</body><!--包含文檔主題-->
</html>
1.2 HTML元素
- 標題元素
一共可以使用六級標題
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
- 段落元素
<p>...</p>
- 無序列表
<ul>
<li>...</li>
<li>...</li>
...
</ul>
- 有序列表
<ol>
<li>...</li>
<li>...</li>
...
<ol>
- 鏈接
<a target="_blank">This Is A Link.</a><!--target="_blank"钻注，打開新標簽頁-->
- 圖片
<!--alt="圖片描述"，對圖片進行描述-->
- 給圖片插入鏈接 *
<a target="_blank"></a>
- 換行符
<br/>
- 注釋符
<!--這是一段注釋配猫！-->
1.3 CSS Cascading Style Sheets 級聯(lián)樣式表
在HTML文件中定義CSS層級樣式
<head>
<title>...</title>
<style>
...<!--CSS代碼-->
</style>
</head>
處于<style>...</style>中的CSS定義可以安排在一個CSS文件中幅恋，HTML文件指向它。
即：
<head>
<title>...</title>
<!--type="text/css"泵肄，定義css樣式捆交，text是指對象為網(wǎng)頁中的文本，css是指當前指定的文本類型-->
<!--rel="stylesheet"腐巢，規(guī)定當前文檔與被鏈接文檔之間的關(guān)系品追，只有 rel 屬性的 "stylesheet" 值得到了所有瀏覽器的支持。其他值只得到了部分地支持-->
<link href="/style.css" type="text/css" rel="stylesheet">
</head>
1.4 CSS基本結(jié)構(gòu)和語法
p {
/*指向html文件中的<p>...</p>元素冯丙，對其進行裝飾*/
}
h1, p {
/*屬性和值的設(shè)置*/
font-size: 42px;
}
- 通用選擇器
* {
}
- 格式要求：選擇器和“{”之間存在一個空格诵盼，兩個規(guī)則之間空一行，使用兩個空格進行縮進银还，一個規(guī)則結(jié)束使用“;”進行风宁。 *
利用/*這是一段注釋！*/進行注釋蛹疯。
1.5 CSS顏色設(shè)置
- 前景色
color - 背景色
background-color
CSS提供的147種命名顏色的列表戒财。
三種自定義顏色方式
- rgb(red, green, blue)，16,777,216種可能捺弦；
- #09AA34饮寞，09代表紅色，AA代表綠色列吼，34代表藍色幽崩；
- HSL【Hue色調(diào) 0~360； Saturation飽和度 0~100%寞钥； Lightness亮度 0~100%慌申，默認值50%】。
- 設(shè)置透明色理郑，
rgba(red, green, blue, alpha)蹄溉，alpha value表示透明度，大小范圍0~1之間您炉。
注意
h1 {
color: rgb(3, 150, 100);
color: rgba(3, 150, 100, 0.75);
}
上述兩個顏色中柒爵，第二個是優(yōu)先顯示的，但是如果瀏覽器不支持透明色赚爵，則只選用第一個棉胀。
1.6 CSS字體設(shè)置
改變網(wǎng)頁中的字體法瑟，使用屬性font-family: Garamond;，當字體名字為多個字母組合的時候唁奢，使用雙引號括起來霎挟。
襯線字體 serif
非襯線字體 sans-serif
設(shè)置后備字體
h1 {
font-family: Garamond, Times, serif; /*Times字體在Garamond不可用的時候使用*/
}
使用外部字體
在<head>...</head>定義中使用外部鏈接的字體，<link type="text/css" rel="stylesheet" >字體大小屬性
font-size: 18px;
大小單位：px驮瞧，em氓扛，%線高度屬性
line-height: 1.5em;
其值為后一行字體底部到前一行字體底部的距離枯芬。單詞間距
word-spacing: 0.3em;字母間距
letter-spacing: 0.3em;粗體
font-weight: bold;斜體
font-style: italic;大小寫轉(zhuǎn)換
text-transform: uppercase;论笔，大寫；
text-transform: lowercase;千所，小寫狂魔。移動字體
text-align: right;;
text-align: left;;
text-align: center;;
1.7 標記HTML元素
-
唯一標識符 ID
<h1 id="botswana">Botswana</h1>對標有ID的特定元素設(shè)置CSS樣式，以“#”開頭進行選擇
#botswana {
background-color: #56ABFF;
}
- 共享標識符 Class
<h1 class="science">Scientist Discovers Important Cure</h1>
<h1 class="science">New Study Reveals The Importance of Sleep</h1>
對標有Class的特定元素設(shè)置CSS樣式淫痰，以“.”開頭進行選擇
.science {
font-family: Georgia, Times, serif;
color: #A3B4C5;
text-transform: uppercase;
}
只針對某種標簽進行設(shè)置
【針對<p>標簽進行設(shè)置breaking樣式】
p.breaking {
line-height: 1.3em;
}
- 多類選擇器
h1, p {
font-family: Garamond, serif;
}
.first, .last {
font-size: 20px;
}
- 區(qū)分類標記
<h1 class="book domestic">The Way of the Deep</h1>
<h1 class="book foreign">A Night in the Sky</h1>
.book {
font-family: Georgia, serif;
}
.domestic {
font-color: #0902CC;
}
.foreign {
font-color: #B097DD;
}
-
<div>標簽定義HTML文檔的分區(qū)或節(jié)
1.8 CSS 框
* {
border: 1px solid rgba(0, 0, 0, 0.3);
}
-
height和width屬性
height: 320px;
width: 80%; 最小與最大寬度屬性
p {
min-width: 300px;
max-width: 600px;
}
- 最小與最大高度屬性
p {
min-height: 150px;
max-height: 300px;
}
- 內(nèi)容溢出最楷，overflow屬性
p {
min-width: 300px;
max-width: 600px;
min-height: 150px;
max-height: 300px;
overflow: scroll; /*值可以為scroll或hidden*/
}
- border-style 邊框類型
div {
border-style: solid;
}
`solid`，實線邊框
`dashed`待错，虛線邊框
`dotted`籽孙，點線邊框
`double`，雙實線邊框
`groove`火俄，3D凹槽邊框
`inset`犯建，3D inset 邊框
`outset`，3D outset 邊框
`ridge`瓜客，3D 壟狀邊框
`hidden` or `none`适瓦，無邊框
- border-width 邊框?qū)挾?/li>
p {
border-style: solid;
border-width: 5px; /*thin or medium or thick*/
}
p {
border-style: solid;
border-width: 3px 1px 2px 4px; /*top: 3 pixels, right: 1 pixel, bottom: 2 pixels, left: 4 pixel*/
}
p {
border-style: solid;
border-left-width: 4px;/*border-top-width,border-right-width,border-bottom-width,border-left-width*/
}
border-color 邊框顏色
border 邊框
div.container {
border: 3px solid rgb(22, 77, 100);/*border-width: 3px,border-style: solid, border-color: rgb(22, 77, 100)*/
}
- border-radius 圓角邊框
1.9 內(nèi)容
- padding 填充【Box的內(nèi)容和邊框之間的填充】
p {
border: 3px solid #XXXXXX;
padding: 5px 10px 5px 10px;/*top: 5 pixels, right: 10 pixel, bottom: 5 pixels, left: 10 pixel*/
padding: 5px 10px;/*top and bottom: 5 pixels,left and right: 10 pixel*/
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
-
margin 外邊距
【值的設(shè)置同padding，
auto值為設(shè)置其在頁面中央】 display 顯示
li {
display: inline;
}
`inline`谱仪，內(nèi)聯(lián)元素玻熙，默認值
`block`，塊級元素
`inline-block`疯攒，行內(nèi)塊元素
`none`嗦随，不顯示元素
- visibility 可見
.future {
visibility: hidden;
}
`hidden`，設(shè)置不可見元素
`visible`敬尺，設(shè)置可見元素
1.10 更改Box
用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型
可以使用此屬性來模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為
* {
box-sizing: border-box;
}
-
position 布局
static默認值称杨，沒有定位
relative絕對定位，相對與最近的已經(jīng)定位父元素
absolute相對定位筷转，相對元素正常位置
fixed相對瀏覽器窗口是固定位置
.box-bottom {
background-color: DeepSkyBlue;
position: relative;
top: 20px;
left: 50px;
}
`top` 元素向下移動
`bottom` 元素向上移動
`left` 元素向右移動
`right` 元素向左移動
z-index 元素堆疊順序
【屏幕內(nèi)外方向上的位置】-
float 浮動
left向左浮動
right向右浮動 -
clear 不允許浮動元素
left左側(cè)不允許浮動元素
right右側(cè)不允許浮動元素
both左右兩側(cè)不允許浮動元素
none允許浮動元素姑原，默認值
1.11 添加圖像
設(shè)置長寬屬性，顯示方式呜舒，外邊距
img.leaf {
width: 300px;
height: 200px;
display: block;
margin: 0px auto;
}
- background-image 背景圖片
body {
background-image: url("https://www.example.com/leaf.jpg");
}
- background-repeat 是否重復(fù)顯示圖像
p {
background-image: url("#");
background-repeat: repeat-x;
}
`repeat` 默認锭汛。背景圖像將在垂直方向和水平方向重復(fù)
`repeat-x` 背景圖像將在水平方向重復(fù)
`repeat-y` 背景圖像將在垂直方向重復(fù)
`no-repeat` 背景圖像將僅顯示一次
- background-position 圖片顯示位置
p {
background-image: url("#");
background-repeat: no-repeat;
background-position: right center;
}
`left top` 左上角
`center top` 中心上方
`right top` 右上角
`left center` 中心左側(cè)
`center center` 中心
`right center` 中心右側(cè)
`left bottom` 左下角
`center bottom` 中心下方
`right bottom` 右下角
- 合并設(shè)置
p {
background: url("#") no-repeat right center;
}
- background-size 圖像大小
div.header {
height: 400px;
width: 100%;
background: url("#") no-repeat right center;
background-size: cover;
}
`cover` 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域，背景圖像的某些部分也許無法顯示在背景定位區(qū)域中
`contain` 把圖像圖像擴展至最大尺寸唤殴，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域
- background-attachment 是否固定圖像
p {
background: url("#") no-repeat right center;
background-attachment: fixed;
}
`scroll` 默認值般婆。背景圖像會隨著頁面其余部分的滾動而移動
`fixed` 當頁面的其余部分滾動時，背景圖像不會移動
- -webkit-linear-gradient() 顏色線性漸變變化
div.header {
height: 400px;
width: 400px;
background-image: -webkit-linear-gradient(#666CCC, #BC1324);
}
1.12 表格
<table>
<thead>/*組合 HTML 表格的表頭內(nèi)容*/
<tr>
<th>列標題</th>
...
</tr>
</thead>
<tbody>/*組合 HTML 表格的主體內(nèi)容*/
<tr>
<td>表格內(nèi)容</td>
<td colspan="2">...</td> /*按列合并單元格*/
<td rowspan="2">...</td> /*按行合并單元格*/
...
</tr>
</tbody>
<tfoot>/*組合 HTML 表格中的表注[定義表格的頁腳（腳注或表注）]內(nèi)容*/
<tr>
<td>表格內(nèi)容</td>
...
</tr>
</tfoot>
</table>
設(shè)置表格框線
table, td {
border: 1px solid black;
}
設(shè)置表格樣式
table, th, td {
border: 1px solid black;
font-family: Arial, sans-serif;
text-align: center;
}
