|
1、 網(wǎng)頁的組成部分 2、HTML 簡介 3、HTML 文件的書寫規(guī)范 <html> 表示整個 html 頁面的開始 <head> 頭信息 <title>標(biāo)題</title> 標(biāo)題 </head> <body> body 是頁面的主體內(nèi)容 頁面主體內(nèi)容 </body> </html> 表示整個 html 頁面的結(jié)束 Html 的代碼注釋 <!-- 這是 html 注釋，可以在頁面右鍵查看源代碼中看到 --> 4、HTML 標(biāo)簽介紹 （1）標(biāo)簽的格式:
<標(biāo)簽名>封裝的數(shù)據(jù)</標(biāo)簽名>
（2）標(biāo)簽名大小寫不敏感。
（3）標(biāo)簽擁有自己的屬性。
i. 分為基本屬性： bgcolor="red" 可以修改簡單的樣式效果
ii. 事件屬性： onclick="alert('你好！');" 可以直接設(shè)置事件響應(yīng)后的代碼。
（4）標(biāo)簽又分為，單標(biāo)簽和雙標(biāo)簽。
i. 單標(biāo)簽格式： <標(biāo)簽名 /> br 換行 hr 水平線
ii. 雙標(biāo)簽格式: <標(biāo)簽名> ...封裝的數(shù)據(jù)...</標(biāo)簽名>
（5）標(biāo)簽的語法：
<!-- ①標(biāo)簽不能交叉嵌套 -->
正確：<div><span>早安</span></div>
錯誤：<div><span>早安</div></span>
<hr />
<!-- ②標(biāo)簽必須正確關(guān)閉 -->
<!-- i.有文本內(nèi)容的標(biāo)簽： -->
正確：<div>早安</div>
錯誤：<div>早安
<hr />
<!-- ii.沒有文本內(nèi)容的標(biāo)簽： -->
正確：<br />
錯誤：<br>
<hr />
<!-- ③屬性必須有值，屬性值必須加引號 -->
正確：<font color="blue">早安</font>
錯誤：<font color=blue>早安</font>
錯誤：<font color>早安</font>
<hr />
<!-- ④注釋不能嵌套 -->
正確：<!-- 注釋內(nèi)容 --> <br/>
錯誤：<!-- <!-- 這是錯誤的 html 注釋 --> -->
<hr />
注意事項：
html 代碼不是很嚴謹。有時候標(biāo)簽不閉合，也不會報錯。
5、常用標(biāo)簽介紹 文檔：w3cschool.CHM 5.1 font字體標(biāo)簽 <body> <!-- 字體標(biāo)簽 需求 1 ：在網(wǎng)頁上顯示 我是字體標(biāo)簽 ，并修改字體為 宋體，顏色為紅色。 font 標(biāo)簽是字體標(biāo)簽 , 它可以用來修改文本的字體 , 顏色 , 大小 ( 尺寸 ) color 屬性修改顏色 face 屬性修改字體 size 屬性修改文本大小 --> <font color="red" face=" 宋體" size="7">我是字體標(biāo)簽</font> </body> 5.2 特殊字符 常用特殊字符表：
? ? ?其他特殊字符：
<body> <!-- 特殊字符 需求 1 ：把 <br> 換行標(biāo)簽 變成文本 轉(zhuǎn)換成字符顯示在頁面上 常用的特殊字符 : < ===>>>> < > ===>>>> > 空格 ===>>>> --> 我是<br>標(biāo)簽<br/> hello 大家好啊! </body> 5.3 標(biāo)題標(biāo)簽 標(biāo)題標(biāo)簽是 h1 到 h6依次由大到小 <body> <!-- 標(biāo)題標(biāo)簽 需求 1 ：演示標(biāo)題 1 到 標(biāo)題 6 的 h1 - h6 都是標(biāo)題標(biāo)簽 h1 最大 h6 最小 align 屬性是對齊屬性 left 左對齊 ( 默認 ) center 劇中 right 右對齊 --> <h1 align="left">標(biāo)題 1</h1> <h2 align="center">標(biāo)題 2</h2> <h3 align="right">標(biāo)題 3</h3> <h4>標(biāo)題 4</h4> <h5>標(biāo)題 5</h5> <h6>標(biāo)題 6</h6> <h7>標(biāo)題 7</h7> </body> 5.4、超鏈接 （在網(wǎng)頁中所有點擊之后可以跳轉(zhuǎn)的內(nèi)容都是超連接） <body> <!-- a 標(biāo)簽是 超鏈接 href 屬性設(shè)置連接的地址 target 屬性設(shè)置哪個目標(biāo)進行跳轉(zhuǎn) _self 表示當(dāng)前頁面 ( 默認值 ) _blank 表示打開新頁面來進行跳轉(zhuǎn) --> <a >百度</a><br/> <a target="_self">百度_self</a><br/> <a target="_blank">百度_blank</a><br/> </body> 5.5、列表標(biāo)簽 、列表標(biāo)簽 無序列表 、 有序列表 <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 標(biāo)簽 標(biāo)簽 img 標(biāo)簽可以在 html 頁面上顯示圖片 <body> <!-- 需求 1 ：使用 img 標(biāo)簽顯示一張美女的照片。并修改寬高，和邊框?qū)傩?img 標(biāo)簽是圖片標(biāo)簽 , 用來顯示圖片 src 屬性可以設(shè)置圖片的路徑 width 屬性設(shè)置圖片的寬度 height 屬性設(shè)置圖片的高度 border 屬性設(shè)置圖片邊框大小 alt 屬性設(shè)置當(dāng)指定路徑找不到圖片時 , 用來代替顯示的文本內(nèi)容 在 JavaSE 中路徑也分為相對路徑和絕對路徑 . 相對路徑 : 從工程名開始算 絕對路徑 : 盤符 :/ 目錄 / 文件名 在 web 中路徑分為相對路徑和絕對路徑兩種 相對路徑 : . 表示當(dāng)前文件所在的目錄 .. 表示當(dāng)前文件所在的上一級目錄 文件名 表示當(dāng)前文件所在目錄的文件 , 相當(dāng)于 ./ 文件名 ./ 可以省略 絕對路徑 : 正確格式是 : 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?、表格標(biāo)簽? <body> <!-- 需求 1：做一個 帶表頭的 ，三行，三列的表格，并顯示邊框 需求 2：修改表格的寬度，高度，表格的對齊方式，單元格間距。 table 標(biāo)簽是表格標(biāo)簽 border 設(shè)置表格標(biāo)簽 width 設(shè)置表格寬度 height 設(shè)置表格高度 align 設(shè)置表格相對于頁面的對齊方式 cellspacing 設(shè)置單元格間距 tr 是行標(biāo)簽 th 是表頭標(biāo)簽 td 是單元格標(biāo)簽 align 設(shè)置單元格文本對齊方式 b 是加粗標(biāo)簽 --> <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 跨行列標(biāo)簽 <body> <!-- 需求 1： 新建一個五行，五列的表格， 第一行，第一列的單元格要跨兩列， 第二行第一列的單元格跨兩行， 第四行第四列的單元格跨兩行兩列。 colspan 屬性設(shè)置跨列 rowspan 屬性設(shè)置跨行 --> <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 框架標(biāo)簽 ifarme 標(biāo)簽它可以在一個 html 頁面上,打開一個小窗口,去加載一個單獨的頁面. <body> 我是一個單獨的完整的頁面<br/><br/> <!--ifarme 標(biāo)簽可以在頁面上開辟一個小區(qū)域顯示一個單獨的頁面 ifarme 和 a 標(biāo)簽組合使用的步驟: 1 在 iframe 標(biāo)簽中使用 name 屬性定義一個名稱 2 在 a 標(biāo)簽的 target 屬性上設(shè)置 iframe 的 name 的屬性值 --> <iframe src="3. 標(biāo)題標(biāo)簽.html" width="500" height="400" name="abc"></iframe> <br/> <ul> <li><a href="0- 標(biāo)簽語法.html" target="abc">0-標(biāo)簽語法.html</a></li> <li><a href="1.font 標(biāo)簽.html" target="abc">1.font 標(biāo)簽.html</a></li> <li><a href="2. 特殊字符.html" target="abc">2.特殊字符.html</a></li> </ul> </body> 5.10 表單標(biāo)簽 什么是表單? <body> <!--需求 1:創(chuàng)建一個個人信息注冊的表單界面。包含用戶名，密碼，確認密碼。性別（單選），興趣愛好（多選），國籍（下拉列表）。 隱藏域，自我評價（多行文本域）。重置，提交。--> <!-- form 標(biāo)簽就是表單 input type=text 是文件輸入框 value 設(shè)置默認顯示內(nèi)容 input type=password 是密碼輸入框 value 設(shè)置默認顯示內(nèi)容 input type=radio 是單選框 name 屬性可以對其進行分組 checked="checked"表示默認選中 input type=checkbox 是復(fù)選框 checked="checked"表示默認選中 input type=reset 是重置按鈕 value 屬性修改按鈕上的文本 input type=submit 是提交按鈕 value 屬性修改按鈕上的文本 input type=button 是按鈕 value 屬性修改按鈕上的文本 input type=file 是文件上傳域 input type=hidden 是隱藏域 當(dāng)我們要發(fā)送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏域（提交的 時候同時發(fā)送給服務(wù)器） select 標(biāo)簽是下拉列表框 option 標(biāo)簽是下拉列表框中的選項 selected="selected"設(shè)置默認選中 textarea 表示多行文本輸入框 （起始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容是默認值） rows 屬性設(shè)置可以顯示幾行的高度 cols 屬性設(shè)置每行可以顯示幾個字符寬度 --> <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 標(biāo)簽是表單標(biāo)簽 action 屬性設(shè)置提交的服務(wù)器地址 method 屬性設(shè)置提交的方式 GET(默認值)或 POST 表單提交的時候，數(shù)據(jù)沒有發(fā)送給服務(wù)器的三種情況： 1、表單項沒有 name 屬性值 2、單選、復(fù)選（下拉列表中的 option 標(biāo)簽）都需要添加 value 屬性，以便發(fā)送給服務(wù)器 3、表單項不在提交的 form 標(biāo)簽中 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 其他標(biāo)簽 <body> <!--需求 1：div、span、p 標(biāo)簽的演示 div 標(biāo)簽 默認獨占一行 span 標(biāo)簽 它的長度是封裝數(shù)據(jù)的長度 p 段落標(biāo)簽 默認會在段落的上方或下方各空出一行來（如果已有就不再空） --> <div>div 標(biāo)簽 1</div> <div>div 標(biāo)簽 2</div> <span>span 標(biāo)簽 1</span> <span>span 標(biāo)簽 2</span> <p>p 段落標(biāo)簽 1</p> <p>p 段落標(biāo)簽 2</p> </body> 6、CSS 6.1 CSS 是「層疊樣式表單」。是用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 6.2 語法規(guī)則
? 選擇器：瀏覽器根據(jù)“選擇器”決定受 CSS 樣式影響的 HTML 元素（標(biāo)簽）。 ?例如： p{
color:red;
font-size:30px;
}
注：一般每行只描述一個屬性，CSS 注釋：/*注釋內(nèi)容*/ 6.3 css的嵌入方式 第一種： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--需求 1：分別定義兩個 div、span 標(biāo)簽，分別修改每個 div 標(biāo)簽的樣式為：邊框 1 個像素，實線，紅色。--> <div style="border: 1px solid red;">div 標(biāo)簽 1</div> <div style="border: 1px solid red;">div 標(biāo)簽 2</div> <span style="border: 1px solid red;">span 標(biāo)簽 1</span> <span style="border: 1px solid red;">span 標(biāo)簽 2</span> </body> </html> 這種方式的缺點： 第二種 在 head 標(biāo)簽中，使用 style 標(biāo)簽來定義各種自己需要的 css 樣式。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style 標(biāo)簽專門用來定義 css 樣式代碼-->
<style type="text/css">
/* 需求 1：分別定義兩個 div、span 標(biāo)簽，分別修改每個 div 標(biāo)簽的樣式為：邊框 1 個像素，實線，紅色。*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div 標(biāo)簽 1</div>
<div>div 標(biāo)簽 2</div>
<span>span 標(biāo)簽 1</span>
<span>span 標(biāo)簽 2</span>
</body>
</html>
這種方式的缺點。 第三種 把 css 樣式寫成一個單獨的 css 文件，再通過 link 標(biāo)簽引入即可復(fù)用。 （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 標(biāo)簽專門用來引入 css 樣式代碼--> <link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <div>div 標(biāo)簽 1</div> <div>div 標(biāo)簽 2</div> <span>span 標(biāo)簽 1</span> <span>span 標(biāo)簽 2</span> </body> </html> 6.4 CSS 選擇器 標(biāo)簽名選擇器的格式是： <!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 標(biāo)簽上修改字體顏色為藍色，字體大小 30 個像素。邊框為 1 像素黃色實線。
并且修改所有 span 標(biāo)簽的字體顏色為黃色，字體大小 20 個像素。邊框為 5 像素藍色虛線。
-->
<div>div 標(biāo)簽 1</div>
<div>div 標(biāo)簽 2</div>
<span>span 標(biāo)簽 1</span>
<span>span 標(biāo)簽 2</span>
</body>
</html>
（1）id 選擇器 （2）class 選擇器（類選擇器） （3）組合選擇器 6.5 常用樣式 （1）字體顏色 （2）寬度 width:19px; （3）高度 height:20px; （4）背景顏色 background-color:#0F2D4C （5）字體樣式： （6）紅色 1 像素實線邊框 <!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 標(biāo)簽</div>
</body>
</html>
來源：https://www./content-4-742451.html
|
|
|
