前端語言基礎：HTML5 & CSS
(一) HTML5：超文本標記語言
(1) 基本概念
- 是由一系列成對出現的元素標簽（標記）嵌套組合而成 ( XML也是標簽構成的 )
- 這些標簽以<標簽名稱>的形式出現，用於標記文本內容的含義
- 瀏覽器通過元素標簽解析文本內容並將結果顯示在網頁上，而元素標簽本身並不會被瀏覽器顯示出來
(2) 基本結構
HTML5元素的內容一般以起始標簽<元素名>開始，以結束標簽</元素名>終止
<!Doctype html>
<html>
<head>
<title>網頁標題</title>
......
</head>
<body>
主體內容
</body>
</html>
DOCTYPE是Document Type的簡寫，含義為文檔類型。
HTML5文檔基礎結構中第一行就是HTML5的DOCTYPE聲明
<html> </html> Html文件開始標簽和結束的標簽——文檔的根標簽
<head> </head> 指定html文檔的一些屬性，例如頁面標題，字符集和關鍵字等-
<title> </title>網頁標題標簽，即被收藏以及搜索引擎中搜索出的名稱<meta.../>元數據標簽，不顯示，但是機器可讀，常用於搜索引擎索引(SEO優化)- 字符集聲明（網頁編碼聲明）
<meta charset="utf-8"> - 關鍵詞聲明
<meta name="keywords" content="Xx,Xx,Xx" /> - 頁面描述聲明
<meta name="description" content="This is a page about html5" />
- 字符集聲明（網頁編碼聲明）
<style> </style>- 可用於定義文檔中指定區域的字體風格、背景顏色、對 齊方式等各類樣式信息
- Eg：
<style> p{color:read} </style>
<link.../>鏈接標簽- 標簽用於連接外部資源和當前HTML5文檔，它只出現在首部標簽
<head> </head>中，通常用於連接外部樣式表 - Eg：
<head> <link rel="stylesheet" hred="test.css"/> </head>
- 標簽用於連接外部資源和當前HTML5文檔，它只出現在首部標簽
<script> </script>- 此標簽為可選，取決於當前頁面是否需要使用腳本內容，比如JavaScript。該標簽可以直接引用外部腳本文件，也可以直接將腳本命令寫在
<script> </script>標簽中 <head> <script src="test.js"></script> </head>
- 此標簽為可選，取決於當前頁面是否需要使用腳本內容，比如JavaScript。該標簽可以直接引用外部腳本文件，也可以直接將腳本命令寫在
<body> </body> 顯示在頁面上的內容都寫在body里面
(3) 基本規范
-
HTML5使用
<!--...-->標簽為文檔進行注釋 （多行或者單行） -
早期的HTML規范中，標簽的大小寫是不敏感的，可能存在大寫標簽的情況
萬維網聯盟（W3C）明確規定了在新版本HTML5中必須使用小寫格式，包括元素標簽本身和其中可能出現的屬性均需要遵守此規范
-
一些標簽，沒有結束標簽 ，在標簽內結束
- 比如 換行
<br/>（一般來說加上/更加標准） - XML規范中，所有的標簽都必須有結束標簽
- 比如 換行
-
在HTML5文檔中存在一些特殊字符無法直接使用。例如小於符號（<）和大於符號（>）是無法直接輸出的，因為它們會被誤認為是元素標簽的組成部分；而連續空格也無法正確顯示，會被瀏覽器縮減為單個空格。存在此類情況的一系列特殊字符在HTML5中稱為字符實體（Character Entities）
html的操作思想 （理解即可）
網頁中有很多數據，不同的數據可能需要不同的顯示效果，這個時候需要使用標簽把要操作的數據包起來（封裝起來），通過修改標簽的屬性值實現標簽內數據樣式的變化
一個標簽相當於一個容器，想要修改容器內數據的樣式，只需要改變容 器的屬性值，就可以實現容器內數據樣式的變化
(4) 常用標簽
1. 文字標簽：修改文字樣式
<font> </font>
屬性：
size: 文字的大小 取值范圍 1-7,超出了7，默認還是7
face: <font face="字體名稱:">文字</font>
color: 文字顏色 （兩種表示方式）
英文單詞：red green blue black white yellow
使用十六進制數表示 #ffffff : RGB
2. 標題標簽、段落標簽、換行標簽、水平線標簽和特殊字符
A：標題標簽
<!-- h1 到 h6 大小依次變小，同時自動換行-->
<h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
B：段落標簽
p元素有多種屬性，比較常用的是對齊方式align屬性
<P align="center">一段居中的文字</P>
<P align="right">一段居右的文字</P>
C：換行標簽
<br>
換行標簽<br>用於在當前位置產生一個換行，相當於一次回車鍵所 產生的效果。該標簽單獨使用，無結束標簽
建議使用該標簽代替回車鍵，因為回車鍵所產生的多個連續換行會被瀏覽器自動省略
<br>標簽每次只能換一行，如需多次換行，必須寫多個<br>標簽
D：水平線標簽
<hr/>
代碼
<hr size="5" color="blue"/>
屬性
<hr align="對齊方式" width="寬度" size="高度" color="顏色" noshade>
align屬性值：left（左對齊）、center（居中）、right（右對齊）
width：表示寬度，可以使用百分數，也可以用像素表示
size：表示高度，其值是數字 取值范圍 1-7
color：代表顏色，默認黑色
noshade：代表不顯示陰影，默認情況是顯示陰影
D：特殊字符**
< <
> >
空格
& &
3. 文本格式標簽
A. 字體標簽 <font>
B. 斜體字標簽 <i>
C. 粗體字標簽 <b> 和 <strong>
D. 上標標簽、下標標簽 <sup> 和 <sub>
E. 修訂標簽 <del> 和 <ins>
F. 預格式化標簽 <pre>
4. 列表標簽
<!-- 無序列表 -->
<ul>
<li>無序列表項1</li>
<li>無序列表項2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表項1</li>
<li>有序列表項2</li>
</ol>
| TYPE取值 | 設置的符號樣式 |
|---|---|
| 1 | 以數字進行排列 ，系統默認 |
| a | 以小寫字母排列 |
| A | 以大寫字母排列 |
| i | 以小寫的羅馬數字排列 |
| I | 以大寫的羅馬數字排列 |
| disc | 圓點符號，系統默認 |
| circle | 空心原點 |
| square | 空心方塊 |
<!-- 定義列表 -->
<dl>
<dt>第一個詞條
<dd>第一個詞條的定義
......
</dt>
</dl>
5. 圖像標簽
<img src="圖片的路徑"/>
語法結構為：
<img src="url" alt="替代文本" name="名字" width="寬度" height="高度" border="邊框” >
src:圖片的路徑
width： 圖片的寬度
height：圖片的高度
alt: 圖片上顯示的文字，把鼠標移動到圖片上，停留片刻顯示內容
有些瀏覽器下不顯示（沒有效果）
6. 絕路徑和相對路徑
| 相對位置 | 輸入方法 | 舉例 |
|---|---|---|
| 同一目錄 | 直接輸入鏈接的文件 | a.html |
| 鏈接上一目錄 | 先輸出 “../” 再輸入文件名 | ../b.html |
| 鏈接下一目錄 | 輸入目錄和文件名，之間以 “/" 分隔 | test/c.html |
7. 超鏈接標簽
A: 鏈接資源
<a href="鏈接到資源的路徑"> 顯示在頁面上的內容 </a>
href: 鏈接的資源的地址
target：設置打開的方式 ，默認是在當前頁打開
可以取四個值
| 屬性值 | 表示的含義 |
|---|---|
| _parent | 在上一級窗口打開（常在框架頁面中使用） |
| _blank | 新建一個窗口打開 |
| _self | 在同一窗口打開，是默認取值 |
| _top | 忽略所有的框架結構，在瀏覽器的整個窗口打開 |
B: 定位資源
<!-- 如果想要定位資源：定義一個位置 -->
<a name="top">頂部</a>
<!-- 回到這個位置 -->
<a href="#top">回到頂部</a>
8. 移動文字標簽
<marquee>移動文字內容</marquee>
| 屬性 | 功能說明 | 屬性取值 | 各屬性值的功能 |
|---|---|---|---|
| behavior | 設置文字的移動方式 | Scroll、Slide、alternate | 循環移動、移動一次停止、來回交替移動 |
| direction | 設置文字的移動方向 | left、right、up、down | 從右向左移動、從左向右移動、從下向上移動、從上向下移動 |
| bgcolor | 設置文字的背景顏色 | 英文顏色名稱 | 表示所用顏色 |
| width | 設置文字背景的寬 | 數字 (或者百分比) | 設置背景的絕對寬度 |
| heigth | 設置文字背景的高 | 數字 (或者百分比) | 設置背景的絕對高度 |
| hspace和vspace | 設置文字背景和周圍其他元素的空白間距 | 數字 | 設置文字背景和周圍其他元素的空白間距的絕對值 |
| loop | 設置移動文字的循環次數 | infinite、正整數 | 文字移動無限次、文字移動n次 |
| sscrollmount | 設置移動文字每次移動的距離 | 數字（默認單位px） | 文字每次移動的距離 |
| scrolldelay | 設置移動文字每次移動后的間歇時間 | 數字（默認單位px） | 文字每次移動后的間歇時間 |
9. 表格標簽
可以對數據進行格式化，使數據顯示更加清晰，可用於靜態頁面和動態頁面的排版
<table></table>: 表示表格的范圍
width：寬度
border：邊框
cellpadding：定義內容和單元格的距離
cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
bgcolor：背景色
align：對齊方式
tr：定義行
bgcolor：背景色
align：對齊方式
td：定義單元格
colspan：合並列
rowspan：合並行
<caption></caption>:表格的標題
10. 表單標簽
概念：用於采集用戶輸入的數據，用於和服務器交互，例如登錄或者注冊界面
<form></form>: 定義一個表單的范圍
屬性
action 指定提交數據的URL，默認提交到當前頁面
method 指定表單提交方式，常用的有兩種，get(默認)和post
簡單說一說： get和post區別？
1、get請求地址欄會攜帶提交的數據，post不會攜帶
2、get請求安全級別較低，post較高
3、get請求數據大小的限制，post沒有限制
輸入項：可以輸入內容或者選擇內容的部分
大部分的輸入項 使用 <input type="輸入項的類型"/>
在輸入項里面需要有一個name屬性
普通輸入項：<input type="text"/>
密碼輸入項：<input type="password"/>
單選輸入項：<input type="radio"/>
復選輸入項：<input type="checkbox"/>
<!--
在里面需要屬性 name
name的屬性值必須要相同
必須有一個value值
實現默認選中的屬性
checked="checked"
-->
文件輸入項 <input type="file"/> （后面上傳時候用到）
下拉輸入項 （不是在input標簽里面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默認選擇
selected="selected"
文本：<textarea cols="10" rows="10"></textarea>
隱藏項（不會顯示在頁面上，但是存在於html代碼里面）：<input type="hidden" />
提交按鈕：<input type="submit"/>
<input type="submit" value="注冊"/>
使用圖片提交：<input type="image" src="圖片路徑"/>
重置按鈕： 回到輸入項的初始狀態：<input type="reset"/>
普通按鈕：<input type="button" value=""/>
11. 容器標簽
A. <div>標簽
標簽<div>可將網頁頁面分割成不同的獨立部分，通常用於定義文檔中的區域或節。
該標簽是一個塊級元素（block level element），瀏覽器會自動在<div>和</div>所標記的 區域前后自動放置一個換行符。每個標簽可有一個獨立的id號。
同樣屬於塊級元素的還有段落標簽<p>、表格標簽<table>、標題標簽<h1>-<h6>等。
B. <span>標簽
標簽<span>通常作為文本的容器，它沒有特定的含義和樣式，只有與CSS同時使用才可以為指定文本設置樣式屬性。
該標簽是一個內聯元素（inline element），與塊級元素相反，內聯元素不會自動在前后自動放置換行符，因此內聯元素會默認在同一行顯示。
(二) 層疊樣式表
多個樣式可以作用在同一個html元素上，使得頁面效果更加好，CSS將網頁內容和顯示樣式進行分離，降低耦合度，提高了開發效率
(1) CSS和html結合的方式
-
內聯樣式
在每個html標簽上面都有一個屬性 style，把css和html結合在一起
<div style="background-color:red; color:green;">
-
內部樣式
使用html的一個標簽實現
<style>標簽，寫在head里面
<style type = "texy/css">
div{
background-color:blue;
color:red;
}
</style>
-
補充樣式
style標簽里面 使用語句（在某些瀏覽器下不起作用）
<style type="text/css">
@import uel(div.css);
</style>
-
外部樣式
使用頭標簽 link，引入外部css文件，第一步 ，創建一個css文件
<link rel="stylesheet" type="text/css" href="css文件的路徑"/>
一般使用第四種方式
優先級（一般情況）
由上到下，由外到內。優先級由低到高。
后加載的優先級高
(2) CSS的基本選擇器
含義：要對哪個標簽里面的數據進行操作
(1) 標簽選擇器
使用標簽名作為選擇器的名稱
div {
background-color:gray;
clolr:white;
}
(2) class選擇器（div.ideal）
每個html標簽都有一個屬性 class
<div class="ideal">test</div>
.ideal {
background-color:orange;
}
(3) id選擇器 (div#ideal)
每個html標簽上面有一個屬性 id
<div id="ideal">test</div>
#ideal {
background-color:#333300;
}
優先級：style > id選擇器 > class選擇器 > 標簽選擇器
(3) CSS的擴展選擇器
(1) 關聯選擇器（調用加空格）
<div><p>test</p></div>
設置div標簽里面p標簽的樣式，嵌套標簽里面的樣式
div p {
background-color:orange;
}
(2) 組合選擇器
<div>aaa</div>
<p>bbb</p>
把div和p標簽設置成相同的樣式，把不同的標簽設置成相同的樣式
div,p {
background-color:orange;
}
(4) CSS的盒子模型
在進行布局前需要把數據封裝到一塊一塊的區域內（div）
(1) 邊框
border: 2px solid blue;
border：統一設置
上 border-top
下 border-bottom
左 border-left
右 border-right
(2) 內邊距
padding:20px;
使用padding統一設置
也可以分別設置
上下左右四個內邊距
(3) 外邊距
margin: 20px;
可以使用margin統一設置
也可以分別設置
上下左右四個外邊距
(4) float：浮動
left：文本流向對象的右邊
right：文本流向對象的左邊
(5) 布局定位
position：
屬性值
absolute ：
將對象從文檔流中拖出
可以是top、bottom等屬性進行定位
relative ：
不會把對象從文檔流中拖出
可以使用top、bottom等屬性進行定位
結尾：
如果內容中有什么不足，或者錯誤的地方，歡迎大家給我留言提出意見, 蟹蟹大家 ！_
如果能幫到你的話，那就來關注我吧！（系列文章均會在公眾號第一時間更新）
在這里的我們素不相識，卻都在為了自己的夢而努力 ❤
一個堅持推送原創Java技術的公眾號：理想二旬不止
