HTML，字型/列表/圖形/超連結/表格/表單/其它(標籤)，CSS，CSS與HTML結合方式，CSS選擇器，CSS擴充套件選擇器
阿新 • • 發佈：2018-12-31
一、HTML
1.html的簡介
（1）什麼是html？HyperText Mark-up Language ，超文字標記型語言，是網頁的語言。 * 超文字：超出文字的範疇 * 標記：理解為標籤，html中所有的操作都是通過標籤來實現的 * html是做網頁。 * 第一個html程式 程式碼 <font color="red" size="5">這是我的第一個html程式</font> （2）html程式遵循一定的規範 第一個：html程式以<html>開始，同時</html>結束 * 比如建立java裡面方法，public void add() { 方法體 } 第二個：html程式包含兩部分內容：head和body * <html> <head>設定頁面資訊</head> <body>顯示到頁面上的內容</body> </html> 第三個：html的標籤有開始標籤，同時也要結束標籤 第四個：html的程式碼不區分大小寫的 第五個：有些標籤沒有結束標籤，需要在標籤內結束 <br/> * 實現換行的操作，使用標籤實現的<br>, 沒有</br> （3）html的操作思想 * 在網頁中可能有很多的資料，不同的資料可能需要不同的顯示效果，這個時候需要使用標籤把要操作的資料包起來（封裝），通過修改標籤的屬性值來實現標籤內資料樣式的變化。標籤相當於一個容器，通過修改容器的屬性值，實現容器內資料樣式的變化。
2.字型標籤
（1）文字標籤 <font> * <font color="設定文字顏色" size="文字的大小">要操作的文字的內容</font> ** 常用兩個屬性 *** color：設定文字的顏色 **** 有三種表示方式 第一種：直接使用英文單詞進行表示 red green yellow...... 第二種：使用十六進位制數字進行表示 #ffffff， ** 通過RGB 第三種：使用RGB顏色值配置 rgb(255,0,0) *** size：設定文字的大小 **** 文字大小值範圍：1-7，如果值超過了7，使用還是7的效果 （2）標題標籤 * <h1></h1> <h2></h2>.......<h6></h6> ** 標題標籤可以自動換行，從h1到h6字型的大小依次變小的 （3）水平線標籤 * <hr/> * 屬性 ** color：表示設定水平線顏色 ** size：設定水平線的粗細，範圍1-7 （4）註釋標籤 * 在java裡面有幾類註釋？三類註釋 ** 單行註釋，多行註釋，文件註釋 * 在html中註釋 <!-- 註釋的內容 --> ** 使內容不在html頁面中進行顯示 （5）特殊字元 * 實現空格的操作
3.列表標籤
（1）想要實現： MythMayor集團 A公司 B公司 C公司 * 首先需要使用 <dl></dl>: 定義列表的範圍 * 之後在dl標籤裡面，<dt></dt>: 定義上層內容 * 在dl標籤裡面， <dd></dd>: 定義下層內容 ** 程式碼 <dl> <dt>MythMayor集團</dt> <dd>技術部</dd> <dd>人事部</dd> <dd>產品部</dd> </dl> （2）有序列表標籤 1.技術部 2.人事部 3.產品部 a.技術部 b.人事部 c.產品部 i.技術部 ii.人事部 iii.產品部 * 使用 <ol></ol>: 定義有序列表的範圍 ** ol標籤上面有屬性 type：排序的方式 ** type屬性裡面的值 1 a i * 之後在ol標籤裡面：<li></li>: 封裝具體的內容 ** 程式碼 <ol> <li>技術部</li> <li>人事部</li> <li>產品部</li> </ol> （3）無序列表標籤 （特殊符號）技術部 （特殊符號）人事部 （特殊符號）產品部 * 首先使用標籤 <ul></ul>: 定義無序列表的範圍 ** ul標籤上面有屬性 type：設定特殊符號 ** type屬性裡面的值 disc circle square * 之後在ul標籤裡面： <li></li>: 封裝具體的內容 ** 程式碼 <ul> <li>技術部</li> <li>人事部</li> <li>產品部</li> </ul>
4.圖形標籤
（1）在html中顯示圖片
（2）標籤：<img src="圖片的路徑名稱"/>
（3）屬性：
* src：圖片的路徑名稱
* width：圖片寬度
* height：圖片的高度
* border：圖片的邊框的粗細
* alt: 顯示在圖片上面的內容
** 滑鼠移動到圖片上面，稍等片刻出現文字
** 如果圖片找不到，顯示alt的內容
*** 這個屬性在某些瀏覽器不能顯示的
5.超連結標籤
（1）什麼是超連結：點選開啟新的內容
（2）標籤：<a href="連結到的地址">顯示在頁面上的內容</a>
* 程式碼 <a href="hello.html">顯示在頁面上的內容</a>
（3）屬性
* href：連結到地址
* target：超連結的開啟方式
** 在預設的情況下，開啟方式在當前的頁面開啟
** target裡面的值：_self,當前頁面開啟； _blank，在新標籤頁開啟
6.表格標籤
操作技巧：
首先數表格裡面有多少行，數每行裡面有多少個單元格
（1）什麼是表格：對資料進行格式化，使資料顯示更加清晰，結構分明
（2）標籤
* 首先定義表格的範圍：<table></table>
** 屬性
*** border：設定表格線
*** bordercolor：設定表格線的顏色
*** cellspacing: 設定單元格之間的距離
*** cellpadding: 設定文字和單元格之間的距離
*** width: 設定表格的寬度
*** height：設定表格的高度
* 在table標籤裡面表示行： <tr></tr>
** 屬性
*** align：設定對齊方式，值 left center right
* 在tr標籤裡面表示列： <td></td>
** 屬性
*** align：設定某個單元格對齊方式
* 在tr標籤裡面也可以表示單元格：<th></th>
** 實現居中和加粗的效果
（3）合併單元格
* 是在td標籤上面進行的操作，使用兩個屬性
** rowspan：跨行
*** 程式碼 <th rowspan="4">人員資訊3人</th>
** colspan：跨列
*** 程式碼 <td colspan="3">統計資訊3人</td>
（4）標題標籤：<caption>標題內容</caption>
7.表單標籤
（1）什麼是表單？把輸入的資料提交到伺服器上（存到伺服器），這個過程稱為表單
（2）使用表單標籤實現資料提交到伺服器上這個過程
（3）form 標籤：如果寫表單，首先定義表單的範圍
* 屬性
** action：提交的伺服器的地址
** method：表單的提交方式（有很多種，常見的有兩種 get和post）
*** 程式碼
<form action="hello.html" method="get"></form>
** get和post提交，在預設情況下，提交方式是get提交
*** get提交方式會在位址列攜帶資料，安全性很差，資料有大小的限制
*** post提交方式位址列不會攜帶資料，安全性比較高，資料在請求體裡面（講到http協議時候詳細說），資料沒有大小的限制
（4）輸入項：可以輸入內容或者選擇內容的地方
** 要求1：輸入項裡面必須要有name屬性
** 要求2：在單選輸入項和複選輸入項以及下拉選擇輸入項裡面
都需要有屬性value，設定的值
* 輸入項需要寫到form標籤裡面
* 大部分輸入項是通過標籤input進行封裝操作的
** <input type="輸入項的型別"/>
第一個：普通輸入項 <input type="text"/>
第二個：密碼輸入項 <input type="password"/>
第三個：單選輸入項 <input type="radio"/>
** 要求：單選輸入項裡面必須有name屬性，同時name的屬性值必須要相同
** 設定預設選中，使用屬性 checked="checked"
第四個：複選輸入項 <input type="checkbox"/>
** 要求：單選輸入項裡面必須有name屬性，同時name的屬性值必須要相同
** 設定預設選中，使用屬性 checked="checked"
第五個：檔案輸入項，上傳檔案的。<input type="file"/>
第六個：隱藏項，這個值不會顯示在頁面上，但是提交表單也可以提交到伺服器上
<input type="hidden"/>
第七個：普通按鈕 <input type="button"/>
*** 可以寫value屬性，設定輸入項的預設值
（5）下面的兩個輸入項不是使用input標籤進行封裝的
第八個：下拉選擇輸入項
* <select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
* 使用屬性 selected="selected" 預設選中
第九個：文字域
* <textarea cols="10" rows="5"></textarea>
（6）提交按鈕和其他的按鈕
* 提交按鈕： <input type="submit"/>
** 屬性 value：設定提交按鈕顯示的內容
** 點選提交按鈕：地址發生了變化
file:///C:/Users/asus/Desktop/javaweb/程式碼/hello.html ?sex=on&love=on&love=on
** 在輸入項上面寫name屬性之後，提交表單
file:///C:/Users/asus/Desktop/javaweb/程式碼/hello.html
?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在單選框、複選框和下拉選擇框裡面設定了value之後，提交表單
file:///C:/Users/asus/Desktop/javaweb/day01/程式碼/hello.html
?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按鈕：<input type="reset"/>
** 屬性 value：設定重置按鈕顯示的內容
** 不是做清空表單輸入項的操作，使表單輸入項回到初始狀態
* 使用圖片進行提交：<input type="image" src="圖片路徑"/>
8.其他的標籤的使用
（1）pre：原樣輸出
p：段落標籤
s：刪除線
u: 下劃線
b：加粗
i：斜體
（2）div : 自動換行
span：在一行進行顯示
9.案例：註冊頁面
（1）如果單元格里面沒有內容，使用佔位符替代（使用空格 ）
（2）想要一個超連結沒有效果，在href屬性值寫成#
二、CSS
1.css的簡介
（1）什麼是css？層疊樣式表
* 樣式表：有很多的屬性和屬性值，來設定內容樣式
* 層疊：一層一層的，樣式的優先順序。
** 優先順序: 最終以誰的樣式為準
* 使用css目的是：把網頁的內容和樣式進行分離，利於程式碼的維護。
* 想要使用css，不能單獨使用，要和html結合使用
* css和html的如何結合使用。
2.css和html的結合方式
（1）css和html有四種結合方式
第一種：使用html標籤裡面的屬性 style="css的程式碼"
* 程式碼 <div style="background-color:red;color:blue;">
第二種：使用html的標籤
* <style type="text/css">
css的程式碼;
</style>
* 程式碼
<style type="text/css">
div {
background-color:red;
color:black;
}
</style>
第三種：使用html標籤實現 link，寫在head裡面
* 首先建立css檔案，在css檔案裡面寫css程式碼
* 在html中使用link標籤引入css檔案
* 程式碼 <link rel="stylesheet" type="text/css" href="1.css"/>
第四種：使用html的style標籤，在標籤裡面使用語句樣式操作
* 首先建立css檔案，在css檔案裡面寫css程式碼
* 寫style標籤，在標籤裡面 @import url(css路徑);
3.css的選擇器
（1）css優先順序
* 在一般情況下，優先順序是後加載的優先順序高
（2）格式規範： 屬性名稱1:屬性值1;屬性名稱2:屬性值2;
（3）選擇器：作用在哪個標籤上（要對哪個標籤裡面的內容進行操作）
* css有三個基本選擇
第一個：標籤選擇器
** 使用標籤名稱作為選擇器
div {
background-color: red;
}
第二個：class選擇器
** 每個html標籤上面都有一個屬性class，通過設定class屬性的值
** 程式碼
.haha {
background-color:red;
}
第三個：id選擇器
** 每個html標籤都有一個屬性id，通過設定id的屬性值
** 程式碼
#hehe {
background-color:green;
}
（4）選擇器的優先順序
* style > id選擇器 > class選擇器 > 標籤選擇器
4.css的擴充套件選擇器
（1）關聯選擇器
* 設定巢狀標籤的樣式
** 程式碼
div p {
background-color:red;
}
（2）組合選擇器
* 設定不同的標籤具有相同的樣式
* 程式碼
div,p {
background-color:green;
}
（3）偽元素選擇器
* 比如超連結為例，
* 狀態：原始狀態、滑鼠放上去的狀態、點選狀態、點選之後的狀態
:link :hover :active :visited