文章目錄
- Java Web概覽
- HTML核心知識點總結
- 一、HTML基礎概念
- 1.1 HTML文檔基本結構
- 1.2 HTML標籤特點
- 二、常用HTML標籤
- 2.1 文本標籤
- 2.2 鏈接與圖像
- 綜合示例
- 2.3 列表標籤
- 2.4 表格標籤
- 2.5 表單標籤
- 三、HTML5新增特性
- 3.1 語義化標籤
- 3.2 媒體標籤
- 3.3 其他新增特性
- 四、學習資源推薦
Java Web概覽
HTML核心知識點總結
一、HTML基礎概念
1.1 HTML文檔基本結構
一個標準的HTML文檔結構如下：
<!DOCTYPE html> <!--文檔類型聲明標籤 -->
<html lang="zh-CN"> <!-- 定義語言的種類 en為English zh-CN為中文 -->
<head>
<meta charset="UTF-8"> <!-- 用於保存文字，不寫會亂碼-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基礎標籤</title>
</head>
<body>
<!-- 頁面內容 -->
</body>
</html><!DOCTYPE html>：聲明文檔類型為HTML5<html>：根元素，包含整個HTML文檔<head>：包含文檔的元數據（如字符集、標題等）<body>：包含網頁的可見內容
1.2 HTML標籤特點
- 大多數標籤成對出現，如
<p></p> - 部分標籤是自閉合的，如
<img>、<input>、<br> - 標籤可以嵌套，但不能交叉嵌套
- 標籤名不區分大小寫，但推薦使用小寫
二、常用HTML標籤
2.1 文本標籤
<h1>-<h6>：標題標籤，h1級別最高，h6級別最低<p>：段落標籤<strong>/<b>：加粗文本，strong有語義強調<em>/<i>：斜體文本，em有語義強調<br>：換行標籤<hr>：水平線標籤<span>：行內元素，用於包裹部分文本，一行可以放多個 span<del>/<s>：刪除線標籤，推薦用 del<ins>/<u>：下劃線標籤，推薦用 ins ：空格符號
示例：
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<p>這是一個段落,這裏強制換行<br>包含<strong>加粗文本</strong>和<em>斜體文本</em></p>
<hr>
試驗空 格
<hr>
<!--<del>和<s>都為刪除標籤 推薦用<del>-->
我是<del>刪除線</del>
我是<s>刪除線</s>
<!--<ins>和<u>都為下劃線標籤 推薦用<ins> -->
我是<ins>下劃線</ins>
我是<u>下劃線</u>
</body>顯示效果：
2.2 鏈接與圖像
<a>：鏈接標籤，herf="跳轉目標的地址 target=“目標窗口的彈出方式”(默認為_self 當前窗口打開頁面 _blank 新窗口打開頁面)<img>：圖像標籤，src屬性指定圖像路徑，alt屬性提供替代文本(圖片無法正常顯示時會使用文本)，title屬性為設置提示文本：鼠標放到圖標上的文字，width屬性為圖像設定寬度，height屬性為圖像設定高度，border屬性為圖像設定邊框
示例：
<a href="" target="_blank">訪問CSDN</a>
<img src="../picture/背景2.jpg" alt="這是圖片無法正常顯示的替換文字" title="這是好看的風景" width="600" border="0" />顯示效果：
綜合示例
<!DOCTYPE html> <!--文檔類型聲明標籤 -->
<html lang="zh-CN"> <!-- 定義語言的種類 en為English zh-CN為中文 -->
<head>
<meta charset="UTF-8"> <!-- 用於保存文字，不寫會亂碼-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基礎標籤</title>
</head>
<body>
<!--標題標籤 一共有六級 h1到h6-->
<h1 id="top">標題標籤</h1>
<h2>二級標題</h2>1234
<!--錨點鏈接(href屬性設置為 #名字 的形式)(#對應空鏈接)，點擊後快速跳轉到對應的id標記位置 我寫在了最後面-->
<a href="#life">生活介紹</a>
<!-- <br/>為強制換行標籤（break）只會簡單另起一行，不會有間隙-->
<!--段落標籤存在間隙（段落與段落）-->
<p>大家好我是<br />
林曉然</p>
<!--<strong>或<b>標籤為加粗 更推薦用<strong>標籤-->
<p>這是一個<strong>段落</strong>標籤,加粗的<b>文字</b></p>
<!-- <em>與<i>都為傾斜標籤 推薦用<em>-->
我是<em>傾斜</em>的文字
我是傾斜的文字
我是<i>傾斜</i>的文字
<!--<del>和<s>都為刪除標籤 推薦用<del>-->
我是<del>刪除線</del>
我是<s>刪除線</s>
<!--<ins>和<u>都為下劃線標籤 推薦用<ins> -->
我是<ins>下劃線</ins>
我是<u>下劃線</u>
<!--<div>標籤來佈局，就是一個大盒子，獨佔一行，每行只能放一個<div>-->
<div>我是一個div標籤，我一個人單獨佔一行</div>123
<div>我是一個div標籤，我一個人單獨佔一行</div>
<!--<span>標籤用來佈局(division)，一行可以放多個<span>,小盒字(span--》跨度)-->
<span>我是一個span標籤</span>
<span>百度</span>
<span>新浪</span>
<span>微博</span>
<h2>圖像標籤的使用</h2>
<!--<img>標籤(單標籤)用於定義HTML頁面中的圖像 src是<img>標籤的必須屬性，用於指定圖像文件的路徑和文件名 alt圖片不能正常顯示時的替換文本(alternative) title為提示文本，鼠標放到圖標上的文字 width為圖像設定寬度 height為圖像設定高度 border為圖像設定邊框-->
<img src="img1.jpg" alt="這是圖片無法正常顯示的替換文字" title="這是好看的風景" width="350" border="100" />
<br />
<img src="img2.jpg" alt="這是圖片無法正常顯示的替換文字" title="你好" />
<!--圖片在相對html文件所在位置的下一級目錄 若為上一級目錄則用../ -->
<img src="picture/img1.jpg" height="100" />
<!--絕對路徑（不推薦）-->
<img src="E:\WebTest\img1.jpg" height="100" />
<!--網絡上圖片的絕對路徑-->
<img
src="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line/glitch.png" />
<!--超鏈接標籤<a herf="跳轉目標的地址 target="目標窗口的彈出方式"(默認為_self 當前窗口打開頁面 _blank 新窗口打開頁面)>(雙標籤)-->
<h4>外部超鏈接</h4>
<a href="http://www.qq.com" target="_blank">騰訊</a>
<!--內部超鏈接-->
<h4>內部超鏈接(網站內部之間的相互連接)</h4>
<a href="web2/web2.html" target="_blank"> 內部跳轉</a>
<!--空鏈接 用#代替地址(用於開發時先搭建好框架，先不考慮具體地址)-->
<a href="#" target="_blank">公司地址</a>
<!--下載連接 如果href裏面的地址是一個文件或者壓縮包，會下載這個文件-->
<a href="img1.zip">下載鏈接</a>
<!--其他網頁元素也可以進行超鏈接-->
<a href="http://baidu.com" target="_blank"><img src="img1.jpg" width="100" /></a>
<br />
<!--空格符號 小於號< 大於號 >-->
試驗空 格和<大於小於">>符號
<!--錨點連接 使用id進行標記-->
<h3 id="life">這是林曉然的生活簡介，噼裏啪啦一大堆省略。。。</h3>
<a href="#top">返回頂部</a>
</body>
</html>顯示效果：
2.3 列表標籤
<ul>：無序列表<ol>：有序列表<li>：列表項
示例：
<!-- 無序列表 -->
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>顯示效果：
2.4 表格標籤
<table>：表格容器<tr>：表格行 (table row)<td>：表格單元格 (行中的每個單元格(數據)table data)<th>：表頭單元格 (table head)<thead>、<tbody>、<tfoot>：表格結構分區cellpadding屬性規定單元邊沿與其內容之間的空白，默認1像素cellspacing屬性規定單元格之間的空白，默認2像素border屬性表示表格邊框的厚度align表示整個表格的排放位置：left靠左，center居中,right靠右
示例：
<table align="left" border="10" cellpadding="20" cellspacing="0" width="300" height="50">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>立夏</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>肖奈</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>顯示效果：
2.5 表單標籤
<form>：表單容器，會把它範圍內的表單元素提交給服務器
其核心屬性説明：
action：指定表單數據提交的 URL 地址method：提交方式，主要有get和post兩種：get：數據會顯示在 URL 中，會暴露信息，適合簡單查詢（有長度限制）；post：數據在請求體中傳輸，適合提交敏感信息或大量數據
type的常用屬性值：
|
type屬性值
|
説明/功能
|
典型應用場景
|
關鍵屬性示例
|
|
text
|
單行文本輸入（默認類型）
|
用户名、姓名等普通文本輸入
|
placeholder=“請輸入用户名”
|
|
password
|
密碼輸入（內容加密顯示）
|
密碼、驗證碼輸入
|
minlength=“6”
|
|
number
|
僅允許輸入數字
|
年齡、數量、身高體重等數值輸入
|
min=“0” max=“120” step=“1”
|
|
radio
|
單選按鈕（同組name值需相同）
|
性別、單選題等互斥選項選擇
|
name=“gender” checked
|
|
checkbox
|
複選框（可多選）
|
愛好、興趣等多選項選擇
|
name=“hobby” value=“reading”
|
|
date
|
日期選擇器（年/月/日）
|
生日、預約日期等日期輸入
|
——
|
|
file
|
文件上傳控件
|
頭像、文檔等文件上傳
|
accept=“image/*” multiple
|
|
email
|
郵箱格式輸入（自帶格式驗證）
|
郵箱地址輸入
|
placeholder=“example@mail.com”
|
|
submit
|
表單提交按鈕
|
提交表單數據
|
value=“提交”
|
|
reset
|
表單重置按鈕
|
清空表單內容
|
value=“重置”
|
|
select
|
下拉選擇框（需配合 |
城市、學歷等固定選項選擇
|
size=“1” multiple
|
|
textarea
|
多行文本輸入（當輸入內容可能過多時，就改text為textarea）
|
個人簡介、備註等長文本輸入
|
rows=“5” cols=“30” maxlength=“500”
解釋： rows=“初始顯示的行數”
cols=“每行中的字符數”
|
|
button
|
普通按鈕
|
一般是結合JavaScript啓動腳本
|
value=“獲取驗證碼”
|
注意：
- 選擇類控件（radio/checkbox）需設置value值，提交時會將選中項的value發送到後端
- 同一組單選按鈕name值必須相同，才能實現互斥效果；複選框要設置相同name，提交時會以數組形式傳遞勾選的數據。
示例：
<form action="/submit" method="get" name="name1">
<!-- text 文本框，可以輸入任何文字 此處的value值為input元素的初始默認值，會出現在文本框中 maxlength為文本框可輸入的最大長度-->
用户名：<input type="text" name="username" value="請輸入用户名" maxlength="7" />
<br />
<!-- label標籤用於綁定一個表單元素，當點擊<label>標籤綁定的文本時，瀏覽器會自動將光標轉到或者選擇到對應的表單元素上，來增加用户體驗 -->
<!-- label 裏用for="..."來指向對應的標籤 ， 而標籤的創建則用id="。。。" -->
label標籤測試--》
<label for="aaa">用户名2</label><input type="text" id="aaa" />
<label for="man">男士</label><input type="radio" id="man" />
<br />
<!-- password 密碼框，用户看不見輸入的密碼 -->
密碼：<input type="password" />
<br />
<!-- radio 單選框（圓形）， 注意name(表單元素的名字)的值要設置為一樣的才可實現單選 -->
<!-- 此處的value 並不會出現在頁面中，主要作用是用户勾選並提交後將用户勾選的結果發送到後台 -->
<!-- 還有屬性checked(屬性值只能為checked)，它針對單選按鈕和複選框，作用為一打開界面就默認選中某個表單元素 -->
男<input type="radio" name="sex" value="男" checked="checked" /> 女<input type="radio" name="sex" value="女" />
<br />
<!-- checkbox 複選框(正方形，可以單個用)， 注意name的值也要設置為一樣 -->
性格:活潑<input type="checkbox" name="personality" value="活潑" /> 開朗<input type="checkbox" name="personality" value="開朗"
checked="checked" />陽光<input type="checkbox" name="personality" value="陽光" />
<br />
<!-- 普通按鈕 button ，一般是結合javaScript啓動腳本-->
<input type="button" value="獲取驗證碼" />
<br />
<!-- file 實現選擇文件上傳功能 -->
上傳頭像：<input type="file" />
<br />
<!-- <select>為下拉列表 其至少包含一對<option> 在<option>中定義selected="selected"是，當前項即為默認選項 -->
籍貫:
<select>
<option>山東</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">廣東</option>
<option>福建</option>
</select>
<br />
<!-- textarea標籤是用於定義多行文本輸入的控件，當輸入內容可能過多時，就改text為textarea -->
<!-- rows="初始顯示的行數" cols="每行中的字符數" 瞭解即可，在實際開發中不會使用，都是用CSS來改變大小-->
反饋留言:
<textarea rows="3" cols="20">我知道這個反饋留言是用textarea來做的</textarea>
<br />
<!-- 當點擊提交按鈕(submit的默認顯示文字為提交，可通過value更改顯示的文字)時，會把表單數據發送到服務端 -->
<input type="submit" value="火箭提交" />
<!-- reset重置按鈕(默認顯示文字為 重置，也可通過value修改、) -->
<input type="reset" />
</form>顯示效果：
三、HTML5新增特性
HTML5帶來了許多新特性，增強了網頁的功能和語義化：
3.1 語義化標籤
<header>：頁面頭部<nav>：導航欄<main>：主要內容<article>：獨立文章內容<section>：內容區塊<aside>：側邊欄<footer>：頁腳
語義化標籤的優勢：
- 提高代碼可讀性
- 有利於SEO優化
- 方便屏幕閲讀器等輔助技術解析
3.2 媒體標籤
<video>：視頻播放<audio>：音頻播放
示例：
<audio src="..\music\鄧壬鑫 - 這一秒只想在愛裏沉溺（治癒《戀愛の資格》日語唸白-溯 (Reverse).feat.mp3" controls width="400"></audio>顯示效果：
3.3 其他新增特性
- 本地存儲（localStorage、sessionStorage）
- Canvas繪圖
- 地理定位
- 拖放API
- 新的表單類型（如date、time、number等）
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。