1、 網(wǎng)頁的組成部分
頁面由三部分內(nèi)容組成！
分別是內(nèi)容（結(jié)構(gòu)）、表現(xiàn)、行為。
內(nèi)容（結(jié)構(gòu)），是我們在頁面中可以看到的數(shù)據(jù)。我們稱之為內(nèi)容。一般內(nèi)容 我們使用
html 技術來展示。
表現(xiàn)，指的是這些內(nèi)容在頁面上的展示形式。比如說。布局，顏色，大小等等。一般使用
CSS 技術實現(xiàn)
行為，指的是頁面中元素與輸入設備交互的響應。一般使用 javascript 技術實現(xiàn)。
2、HTML 簡介
Hyper Text Markup Language （超文本標記語言） 簡寫：HTML
HTML 通過標簽來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，
通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫
面如何安排，圖片如何顯示等）
3、HTML 文件的書寫規(guī)范
<html> 表示整個 html 頁面的開始 <head> 頭信息 <title>標題</title> 標題 </head> <body> body 是頁面的主體內(nèi)容 頁面主體內(nèi)容 </body> </html> 表示整個 html 頁面的結(jié)束 Html 的代碼注釋 <!-- 這是 html 注釋，可以在頁面右鍵查看源代碼中看到 -->
4、HTML 標簽介紹
（1）標簽的格式:
<標簽名>封裝的數(shù)據(jù)</標簽名>
（2）標簽名大小寫不敏感。
（3）標簽擁有自己的屬性。
i. 分為基本屬性： bgcolor="red" 可以修改簡單的樣式效果
ii. 事件屬性： onclick="alert('你好！');" 可以直接設置事件響應后的代碼。
（4）標簽又分為，單標簽和雙標簽。
i. 單標簽格式： <標簽名 /> br 換行 hr 水平線
ii. 雙標簽格式: <標簽名> ...封裝的數(shù)據(jù)...</標簽名>
（5）標簽的語法：
<!-- ①標簽不能交叉嵌套 -->
正確：<div><span>早安</span></div>
錯誤：<div><span>早安</div></span>
<hr />
<!-- ②標簽必須正確關閉 -->
<!-- i.有文本內(nèi)容的標簽： -->
正確：<div>早安</div>
錯誤：<div>早安
<hr />
<!-- ii.沒有文本內(nèi)容的標簽： -->
正確：<br />
錯誤：<br>
<hr />
<!-- ③屬性必須有值，屬性值必須加引號 -->
正確：<font color="blue">早安</font>
錯誤：<font color=blue>早安</font>
錯誤：<font color>早安</font>
<hr />
<!-- ④注釋不能嵌套 -->
正確：<!-- 注釋內(nèi)容 --> <br/>
錯誤：<!-- <!-- 這是錯誤的 html 注釋 --> -->
<hr />
注意事項：
html 代碼不是很嚴謹。有時候標簽不閉合，也不會報錯。
5、常用標簽介紹 文檔：w3cschool.CHM
5.1 font字體標簽
<body> <!-- 字體標簽 需求 1 ：在網(wǎng)頁上顯示 我是字體標簽 ，并修改字體為 宋體，顏色為紅色。 font 標簽是字體標簽 , 它可以用來修改文本的字體 , 顏色 , 大小 ( 尺寸 ) color 屬性修改顏色 face 屬性修改字體 size 屬性修改文本大小 --> <font color="red" face=" 宋體" size="7">我是字體標簽</font> </body>
5.2 特殊字符
常用特殊字符表：
?
?
?其他特殊字符：
<body> <!-- 特殊字符 需求 1 ：把 <br> 換行標簽 變成文本 轉(zhuǎn)換成字符顯示在頁面上 常用的特殊字符 : < ===>>>> < > ===>>>> > 空格 ===>>>> --> 我是<br>標簽<br/> hello 大家好啊! </body>
5.3 標題標簽
標題標簽是 h1 到 h6依次由大到小 <body> <!-- 標題標簽 需求 1 ：演示標題 1 到 標題 6 的 h1 - h6 都是標題標簽 h1 最大 h6 最小 align 屬性是對齊屬性 left 左對齊 ( 默認 ) center 劇中 right 右對齊 --> <h1 align="left">標題 1</h1> <h2 align="center">標題 2</h2> <h3 align="right">標題 3</h3> <h4>標題 4</h4> <h5>標題 5</h5> <h6>標題 6</h6> <h7>標題 7</h7> </body>
5.4、超鏈接 （在網(wǎng)頁中所有點擊之后可以跳轉(zhuǎn)的內(nèi)容都是超連接）
<body> <!-- a 標簽是 超鏈接 href 屬性設置連接的地址 target 屬性設置哪個目標進行跳轉(zhuǎn) _self 表示當前頁面 ( 默認值 ) _blank 表示打開新頁面來進行跳轉(zhuǎn) --> <a >百度</a><br/> <a target="_self">百度_self</a><br/> <a target="_blank">百度_blank</a><br/> </body>
5.5、列表標簽 、列表標簽
無序列表 、 有序列表 <body> <!-- 需求 1 ：使用無序，列表方式，把東北 F4 ，趙四，劉能，小沈陽，宋小寶，展示出來 ul 是無序列表 type 屬性可以修改列表項前面的符號 li 是列表項 --> <ul type="none"> <li>張三</li> <li>李四</li> <li>王麻子</li> <li>黑客</li> </ul> <ol type="none"> <li>張三</li> <li>李四</li> <li>王麻子</li> <li>黑客</li> </ol> </body>
5.6 、img 標簽 標簽
img 標簽可以在 html 頁面上顯示圖片 <body> <!-- 需求 1 ：使用 img 標簽顯示一張美女的照片。并修改寬高，和邊框?qū)傩?img 標簽是圖片標簽 , 用來顯示圖片 src 屬性可以設置圖片的路徑 width 屬性設置圖片的寬度 height 屬性設置圖片的高度 border 屬性設置圖片邊框大小 alt 屬性設置當指定路徑找不到圖片時 , 用來代替顯示的文本內(nèi)容 在 JavaSE 中路徑也分為相對路徑和絕對路徑 . 相對路徑 : 從工程名開始算 絕對路徑 : 盤符 :/ 目錄 / 文件名 在 web 中路徑分為相對路徑和絕對路徑兩種 相對路徑 : . 表示當前文件所在的目錄 .. 表示當前文件所在的上一級目錄 文件名 表示當前文件所在目錄的文件 , 相當于 ./ 文件名 ./ 可以省略 絕對路徑 : 正確格式是 : http://ip:port/ 工程名 / 資源路徑 錯誤格式是 : 盤符 :/ 目錄 / 文件名 --> <img src="1.jpg" width="200" height="260" border="1" alt=" 美女找不到"/> <img src="../2.jpg" width="200" height="260" /> <img src="../imgs/3.jpg" width="200" height="260" /> <img src="../imgs/4.jpg" width="200" height="260" /> <img src="../imgs/5.jpg" width="200" height="260" /> <img src="../imgs/6.jpg" width="200" height="260" /> </body>
5.7?、表格標簽?
<body> <!-- 需求 1：做一個 帶表頭的 ，三行，三列的表格，并顯示邊框 需求 2：修改表格的寬度，高度，表格的對齊方式，單元格間距。 table 標簽是表格標簽 border 設置表格標簽 width 設置表格寬度 height 設置表格高度 align 設置表格相對于頁面的對齊方式 cellspacing 設置單元格間距 tr 是行標簽 th 是表頭標簽 td 是單元格標簽 align 設置單元格文本對齊方式 b 是加粗標簽 --> <table align="center" border="1" width="300" height="300" cellspacing="0"> <tr> <th>1.1</th> <th>1.2</th> <th>1.3</th> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> </body>
5.8 跨行列標簽
<body> <!-- 需求 1： 新建一個五行，五列的表格， 第一行，第一列的單元格要跨兩列， 第二行第一列的單元格跨兩行， 第四行第四列的單元格跨兩行兩列。 colspan 屬性設置跨列 rowspan 屬性設置跨行 --> <table width="500" height="500" cellspacing="0" border="1"> <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table> </body>
5.9 iframe 框架標簽
ifarme 標簽它可以在一個 html 頁面上,打開一個小窗口,去加載一個單獨的頁面.
<body> 我是一個單獨的完整的頁面<br/><br/> <!--ifarme 標簽可以在頁面上開辟一個小區(qū)域顯示一個單獨的頁面 ifarme 和 a 標簽組合使用的步驟: 1 在 iframe 標簽中使用 name 屬性定義一個名稱 2 在 a 標簽的 target 屬性上設置 iframe 的 name 的屬性值 --> <iframe src="3. 標題標簽.html" width="500" height="400" name="abc"></iframe> <br/> <ul> <li><a href="0- 標簽語法.html" target="abc">0-標簽語法.html</a></li> <li><a href="1.font 標簽.html" target="abc">1.font 標簽.html</a></li> <li><a href="2. 特殊字符.html" target="abc">2.特殊字符.html</a></li> </ul> </body>
5.10 表單標簽
什么是表單?
表單就是 html 頁面中,用來收集用戶信息的所有元素集合.然后把這些信息發(fā)送給服務器.
<body> <!--需求 1:創(chuàng)建一個個人信息注冊的表單界面。包含用戶名，密碼，確認密碼。性別（單選），興趣愛好（多選），國籍（下拉列表）。 隱藏域，自我評價（多行文本域）。重置，提交。--> <!-- form 標簽就是表單 input type=text 是文件輸入框 value 設置默認顯示內(nèi)容 input type=password 是密碼輸入框 value 設置默認顯示內(nèi)容 input type=radio 是單選框 name 屬性可以對其進行分組 checked="checked"表示默認選中 input type=checkbox 是復選框 checked="checked"表示默認選中 input type=reset 是重置按鈕 value 屬性修改按鈕上的文本 input type=submit 是提交按鈕 value 屬性修改按鈕上的文本 input type=button 是按鈕 value 屬性修改按鈕上的文本 input type=file 是文件上傳域 input type=hidden 是隱藏域 當我們要發(fā)送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏域（提交的 時候同時發(fā)送給服務器） select 標簽是下拉列表框 option 標簽是下拉列表框中的選項 selected="selected"設置默認選中 textarea 表示多行文本輸入框 （起始標簽和結(jié)束標簽中的內(nèi)容是默認值） rows 屬性設置可以顯示幾行的高度 cols 屬性設置每行可以顯示幾個字符寬度 --> <form> 用戶名稱：<input type="text" value=" 默認值"/><br/> 用戶密碼：<input type="password" value="abc"/><br/> 確認密碼：<input type="password" value="abc"/><br/> 性別：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/> 興趣愛好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input type="checkbox" />C <br/> 國籍：<select> <option>--請選擇國籍--</option> <option selected="selected">中國</option> <option>美國</option> <option>小日本</option> </select><br/> 自我評價：<textarea rows="10" cols="20">我才是默認值</textarea><br/> <input type="reset" value="abc" /> <input type="submit"/> </form> </body>
表單格式優(yōu)化：
<form> <h1 align="center">用戶注冊</h1> <table align="center"> <tr> <td> 用戶名稱：</td> <td> <input type="text" value=" 默認值"/> </td> </tr> <tr> <td> 用戶密碼：</td> <td><input type="password" value="abc"/></td> </tr> <tr> <td>確認密碼：</td> <td><input type="password" value="abc"/></td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex"/>男 <input type="radio" name="sex" checked="checked" />女 </td> </tr> <tr> <td> 興趣愛好：</td> <td> <input type="checkbox" checked="checked" />Java <input type="checkbox" />JavaScript <input type="checkbox" />C </td> </tr> <tr> <td>國籍：</td> <td> <select> <option>--請選擇國籍--</option> <option selected="selected">中國</option> <option>美國</option> <option>小日本</option> </select> </td> </tr> <tr> <td>自我評價：</td> <td><textarea rows="10" cols="20">我才是默認值</textarea></td> </tr> <tr> <td><input type="reset" /></td> <td align="center"><input type="submit"/></td> </tr> </table> </form> </body>
表單提交：
<body> <!-- form 標簽是表單標簽 action 屬性設置提交的服務器地址 method 屬性設置提交的方式 GET(默認值)或 POST 表單提交的時候，數(shù)據(jù)沒有發(fā)送給服務器的三種情況： 1、表單項沒有 name 屬性值 2、單選、復選（下拉列表中的 option 標簽）都需要添加 value 屬性，以便發(fā)送給服務器 3、表單項不在提交的 form 標簽中 GET 請求的特點是： 1、瀏覽器地址欄中的地址是：action 屬性[ ? 請求參數(shù)] 請求參數(shù)的格式是：name=value&name=value 2、不安全 3、它有數(shù)據(jù)長度的限制 POST 請求的特點是： 1、瀏覽器地址欄中只有 action 屬性值 2、相對于 GET 請求要安全 3、理論上沒有數(shù)據(jù)長度的限制 --> <form action="http://localhost:8080" method="post"> <input type="hidden" name="action" value="login" /> <h1 align="center">用戶注冊</h1> <table align="center"> <tr> <td> 用戶名稱：</td> <td> <input type="text" name="username" value=" 默認值"/> </td> </tr> <tr> <td> 用戶密碼：</td> <td><input type="password" name="password" value="abc"/></td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex" value="boy"/>男 <input type="radio" name="sex" checked="checked" value="girl" />女 </td> </tr> <tr> <td> 興趣愛好：</td> <td> <input name="hobby" type="checkbox" checked="checked" value="java"/>Java <input name="hobby" type="checkbox" value="js"/>JavaScript <input name="hobby" type="checkbox" value="cpp"/>C </td> </tr> <tr> <td>國籍：</td> <td> <select name="country"> <option value="none">--請選擇國籍--</option> <option value="cn" selected="selected">中國</option> <option value="usa">美國</option> <option value="jp">小日本</option> </select> </td> </tr> <tr> <td>自我評價：</td> <td><textarea name="desc" rows="10" cols="20">我才是默認值</textarea></td> </tr> <tr> <td><input type="reset" /></td> <td align="center"><input type="submit"/></td> </tr> </table> </form> </body>
5.11 其他標簽
<body> <!--需求 1：div、span、p 標簽的演示 div 標簽 默認獨占一行 span 標簽 它的長度是封裝數(shù)據(jù)的長度 p 段落標簽 默認會在段落的上方或下方各空出一行來（如果已有就不再空） --> <div>div 標簽 1</div> <div>div 標簽 2</div> <span>span 標簽 1</span> <span>span 標簽 2</span> <p>p 段落標簽 1</p> <p>p 段落標簽 2</p> </body>
6、CSS
6.1 CSS 是「層疊樣式表單」。是用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。
6.2 語法規(guī)則
?
選擇器：瀏覽器根據(jù)“選擇器”決定受 CSS 樣式影響的 HTML 元素（標簽）。
屬性 (property) 是你要改變的樣式名，并且每個屬性都有一個值。屬性和值被冒號分開，并
由花括號包圍，這樣就組成了一個完整的樣式聲明（declaration），例如：p {color: blue}
多個聲明：如果要定義不止一個聲明，則需要用分號將每個聲明分開。雖然最后一條聲明的
最后可以不加分號(但盡量在每條聲明的末尾都加上分號)
?例如：
p{
color:red;
font-size:30px;
}
注：一般每行只描述一個屬性，CSS 注釋：/*注釋內(nèi)容*/
6.3 css的嵌入方式
第一種：
在標簽的 style 屬性上設置”key:value value;”，修改標簽樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--需求 1：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框 1 個像素，實線，紅色。--> <div style="border: 1px solid red;">div 標簽 1</div> <div style="border: 1px solid red;">div 標簽 2</div> <span style="border: 1px solid red;">span 標簽 1</span> <span style="border: 1px solid red;">span 標簽 2</span> </body> </html>
這種方式的缺點：
1.如果標簽多了。樣式多了。代碼量非常龐大。
2.可讀性非常差。
3.Css 代碼沒什么復用性可方言。
第二種
在 head 標簽中，使用 style 標簽來定義各種自己需要的 css 樣式。
格式如下：
xxx {
Key : value value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style 標簽專門用來定義 css 樣式代碼-->
<style type="text/css">
/* 需求 1：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框 1 個像素，實線，紅色。*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div 標簽 1</div>
<div>div 標簽 2</div>
<span>span 標簽 1</span>
<span>span 標簽 2</span>
</body>
</html>
這種方式的缺點。
1.只能在同一頁面內(nèi)復用代碼，不能在多個頁面中復用 css 代碼。
2.維護起來不方便，實際的項目中會有成千上萬的頁面，要到每個頁面中去修改。工作量太大了
第三種
把 css 樣式寫成一個單獨的 css 文件，再通過 link 標簽引入即可復用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 標簽 導入 css 樣
式文件
（1）css 文件內(nèi)容
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
（2）html文件代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--link 標簽專門用來引入 css 樣式代碼--> <link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <div>div 標簽 1</div> <div>div 標簽 2</div> <span>span 標簽 1</span> <span>span 標簽 2</span> </body> </html>
6.4 CSS 選擇器
標簽名選擇器的格式是：
標簽名{
屬性：值;
}
標簽名選擇器，可以決定哪些標簽被動的使用這個樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 選擇器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--
需求 1：在所有 div 標簽上修改字體顏色為藍色，字體大小 30 個像素。邊框為 1 像素黃色實線。
并且修改所有 span 標簽的字體顏色為黃色，字體大小 20 個像素。邊框為 5 像素藍色虛線。
-->
<div>div 標簽 1</div>
<div>div 標簽 2</div>
<span>span 標簽 1</span>
<span>span 標簽 2</span>
</body>
</html>
（1）id 選擇器
id 選擇器的格式是：
#id 屬性值{
屬性：值;
}
id 選擇器，可以讓我們通過 id 屬性選擇性的去使用這個樣式。
（2）class 選擇器（類選擇器）
class 類型選擇器的格式是：
. class 屬性值{
屬性：值;
}
class 類型選擇器，可以通過 class 屬性有效的選擇性地去使用這個樣式。
（3）組合選擇器
組合選擇器的格式是：
選擇器 1，選擇器 2，選擇器 n{
屬性：值;
}
組合選擇器可以讓多個選擇器共用同一個 css 樣式代碼。
6.5 常用樣式
（1）字體顏色
color：red；
顏色可以寫顏色名如：black, blue, red, green 等
顏色也可以寫 rgb 值和十六進制表示值：如 rgb(255,0,0)，#00F6DE，如果寫十六進制值必
須加#
（2）寬度
width:19px;
寬度可以寫像素值：19px；
也可以寫百分比值：20%；
（3）高度
height:20px;
高度可以寫像素值：19px；
也可以寫百分比值：20%；
（4）背景顏色
background-color:#0F2D4C
（5）字體樣式：
color：#FF0000；字體顏色紅色
font-size：20px; 字體大小
（6）紅色 1 像素實線邊框
border：1px solid red;
（7）DIV 居中
margin-left: auto;
margin-right: auto;
（8）文本居中：
text-align: center;
（9）超連接去下劃線
text-decoration: none;
（10）表格細線
table {
border: 1px solid black; /*設置邊框*/
border-collapse: collapse; /*將邊框合并*/
}
td,th {
border: 1px solid black; /*設置邊框*/
}
（11）列表去除修飾
ul {
list-style: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css 常用樣式.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
td{
border: 1px red solid;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a >百度</a>
<div>我是 div 標簽</div>
</body>
</html>
來源：https://www.icode9.com/content-4-742451.html
