前端：HTML学习笔记
生活随笔
收集整理的這篇文章主要介紹了
前端：HTML学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML學習筆記
學習鏈接：【狂神說Java】HTML5完整教學通俗易懂_嗶哩嗶哩_bilibili
HTML的博客筆記鏈接：https://blog.csdn.net/yalu_123456/article/details/91460792
初識HTML
什么是HTML
超文本標記語言 ( Hyper Text Markup Language )
超文本 : 文字 , 圖片 , 音頻 , 視頻 , 動畫 ,…
發展歷史：
-
-HTML2.0 --> 文字 , 特別丑的文本框
-
HTML 5 ---- > 動畫 , 渲染…
HTML的優勢：
-
所有的瀏覽器都支持
-
市場的需求—從C/S—>b/s架構
-
跨平臺
W3C標準：
萬維網聯盟( World Wide Web Consortium )
三個標準
結構化=標準—>HTML , xml等
表現=標準—>CSS
行為=標準 —> ( ECMA Script )
網頁編輯工具：
- 記事本
- Notpat++
- Hbuilder
- IDEA
- WebStorm 【前端設計者使用的這個】
- VScode
關于瀏覽器的選擇： setting 中的 Tools 中的 Web Browsers.
HTML的基本結構
成對出現的開放標簽，單個的自閉和標簽。
Html注釋 :
<!-- 注釋 --> 這是注釋的符號Html的基本結構 :
<!-- 注釋的符號--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>我的第一個網頁</title> </head> <body> 我的第一個網頁 </body> </html>對應的結構信息是：
<!--DOCTYPE聲明 : 告訴瀏覽器使用什么規范--> <!DOCTYPE html><html lang="en"><!--標簽是成對出現--> <!--head頭部標簽--> <head><meta charset="UTF-8"><!--網頁標題--><title>狂神說Java</title> </head><!--網頁主體--> <body> Hello,World! </body></html>- < title > 標簽 : 網頁的標題
- < meta > 標簽 : 關鍵字標簽。meta標簽是描述性標簽， 描述網站的一些基本信息。 一般用來做 SEO 的
網頁的基本標簽
標題標簽: h1
<!--標題標簽--> <!--H1最大 , H6最小--><h1>一級標題</h1> <h2>一級標題</h2> <h3>一級標題</h3> <h4>一級標題</h4> <h5>一級標題</h5> <h6>一級標題</h6>段落標簽: p
<!--段落標簽--> <!--p:表示段落標簽--><h1>段落標簽</h1> <p>兩只老虎 兩只老虎</p> <p>跑得快 跑得快</p> <p>一只沒有耳朵 一只沒有尾巴</p> <p>真奇怪 真奇怪</p> <p>兩只老虎 兩只老虎</p> <p>跑得快 跑得快</p> <p>一只沒有耳朵 一只沒有尾巴</p> <p>真奇怪 真奇怪</p>換行標簽: br
換行標簽是
與段落標簽 p 的區別在于， br 的顯示效果的間隙比較小。
顯示的結果：
水平線標簽: hr
<!--水平線標簽--> <!--hr表示水平線標簽--><h1>水平線標簽</h1><hr/>兩只老虎 兩只老虎<br/> 跑得快 跑得快<br/> 一只沒有耳朵 一只沒有尾巴<br/> 真奇怪 真奇怪<br/> 兩只老虎 兩只老虎<br/> 跑得快 跑得快<br/> 一只沒有耳朵 一只沒有尾巴<br/> 真奇怪 真奇怪<br/>字體標簽
<!--字體加粗 , 斜體--><!--strong : 粗體--><!--em : 斜體--><h1>字體字體樣式</h1>I love you加粗后 : <strong>I love you</strong>斜體 : <em>I love you</em>特殊符號: &**;
<!--特殊符號--><h1>特殊符號</h1><p>大于號 : > </p><p>小于號 : < </p><p>空格 : 你 好 | 你 好</p><p>引號 : ""</p><p>版權符號 : © 版權所有狂神</p><!--& + 符號字符 + 分號結束-->圖像標簽:img
圖像標簽
常見的圖像格式 :jpg/png/bmp /位圖/gif
<!--圖像標簽--><!--src = 圖片的路徑 (必填)title = 鼠標懸停顯示alt = 圖片的名字width =寬height 高-->alt = “text” 圖片的替代名字，當圖片無法顯示的時候(或者不存在) 就會使用這個 alt 中的內容 去 替代表示想要顯示的 圖片。
<!--相對路徑： 上一級路徑表示方式 ../絕對路徑 ： 不推薦使用-->代碼形式如下所示：
<img src="../resources/images/tx.jpg" title="鼠標懸停說:狂神cool" alt="狂神頭像" width="300px" height="300px">例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖像標簽學習</title></head><body><!--圖像標簽--><!--src = 圖片的路徑 (必填), 推薦使用相對地址title = 鼠標懸停顯示alt = 圖片的名字[代替圖片出現的名字 顯示信息]width =寬height 高--><img src="../resource/figure/樸信惠.jpg" alt="樸信惠圖片" name="img1"></body></html>當修改成 下面的代碼時，顯示結果為：
<img src="../resource/figure/樸信惠1.jpg" alt="樸信惠圖片" name="img1">這個就是 alt=“text" 的作用。
鏈接標簽: a
超鏈接
<!--a:表示超鏈接--><!-- href : 表示連接的地址 : 必填--><a href="https://www.baidu.com">點擊跳轉</a><!--圖像鏈接--><a href="https://www.baidu.com"> <img src="../resources/images/tx.jpg"> </a>錨鏈接
<!--錨鏈接--><!--可以從一個地方跳到錨指定的地方需要的東西: 標記 ..跳轉--><!--創建一個標記--><a name="mark">錨鏈接標記</a><!--跳轉到標記--><a href="#mark">點擊跳轉</a><a href="demo.html#top3">跳轉到demo頁標記三使用name進行標記，然后在超鏈接中使用 #標記 來實現跳轉到 name標記的地方。
demo01： 直接回到頁面頂部的 錨鏈接
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鏈接標簽學習</title></head><body><!--使用name作為標記--><a name="top">頂部</a><!--a:表示超鏈接--><!--href : 表示連接的地址 : 必填target: 表示窗口在哪里打開 _blank 是在新標簽中打開 _self 在自己的網頁中打開--><a href="https://www.baidu.com" target="_blank">點擊跳轉到百度</a><a href="1.我的第一個網頁.html">點擊我跳轉到第一個頁面</a><a href="2.基本標簽.html">點擊我跳轉到第二個頁面</a><a href="3.圖像標簽.html">點擊我跳轉到第三個頁面</a><br/><!--圖像鏈接--><a href="https://www.baidu.com"> <img src="../resource/figure/樸信惠.jpg"> </a><br><a href="#top">回到頂部</a></body></html>demo02： 跳轉到另一個頁面當中的錨鏈接
4.鏈接標簽.html 的代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鏈接標簽學習</title></head><body><!--使用name作為標記--><a name="top">頂部</a><!--a:表示超鏈接--><!--href : 表示連接的地址 : 必填target: 表示窗口在哪里打開 _blank 是在新標簽中打開 _self 在自己的網頁中打開--><a href="https://www.baidu.com" target="_blank">點擊跳轉到百度</a><a href="1.我的第一個網頁.html">點擊我跳轉到第一個頁面</a><a href="2.基本標簽.html">點擊我跳轉到第二個頁面</a><a href="3.圖像標簽.html">點擊我跳轉到第三個頁面</a><br/><!--圖像鏈接--><a href="https://www.baidu.com"> <img src="../resource/figure/樸信惠.jpg"> </a><br><!--當前頁面的跳轉--><a href="#top">回到頂部</a><a name="down">底部</a></body></html>4.1.錨鏈接標簽.html 的代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>錨鏈接標簽學習</title></head><body><!--在4.鏈接標簽.html 中定義錨標記 down，即 <a name="down">底部</a>跳轉到標記 #--><a href="4.鏈接標簽.html#down" target="_blank">點擊跳轉到4.鏈接標簽.html頁面的底部</a></body></html>功能性鏈接
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>功能性鏈接</title> </head> <body> <!--功能性鏈接 --><a href="mailto:1356207897@qq.com">發送郵件</a><!--QQ點擊聯系 地址 : https://shang.qq.com/v3/widget.html --> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1356207897:53" alt="點擊加我，免費領取好禮" title="點擊加我，免費領取好禮"/> </a><!-- target target 目標跳轉的網頁打開方式 _blank : 打開新的網頁 _self : 在本網頁打開 --> <p><a href="https://www.baidu.com" target="_blank">點擊跳轉到百度</a><a href="1.我的第一個網頁.html" target="_self">點擊我跳轉到第一個頁面</a> </p> </body> </html>行內元素和塊元素
獨占一行的標簽 : 塊標簽
- p
- h1~h6
只有自己那一部分 , 可以在行內定義多個的標簽 : 行內標簽
-
a： a表示超鏈接，
- <a href="https://www.baidu.com" target="_blank">點擊跳轉到百度</a>
-
strong：粗體
-
img：圖片
-
em
開放標簽—>閉合標簽
<p> </p> <p> </p> <p> </p> <p> </p>自閉合標簽<br/>例子：
<h1>字體字體樣式</h1>I love you加粗后 : <strong>I love you</strong>斜體 : <em>I love you </em>可以看到
-
行內元素/行標簽中的元素 就是在同一行
I love you加粗后 : <strong>I love you</strong> -
塊級元素 是單獨的一行
<h1>字體字體樣式</h1>
列表:ol/ul li
無序列表：導航，側邊欄
有序列表：試卷，問答，…
<!--無序列表--><!--<ul> -> 無序列表<li> -> 選項--><h1>無序列表</h1><ul> <li>java</li> <li>C/C++</li> <li>Linux</li> <li>Python</li></ul><hr><!--有序列表--><!--<ol> -> 有序列表<li> -> 選項--><h1>有序列表</h1><ol> <li>java</li> <li>C/C++</li> <li>Linux</li> <li>Python</li></ol><!--自定義列表--><!--<dl> -> 自定義列表<dt> -> 列表標題<dd> -> 列表選項--><h1>自定義列表</h1><dl> <dt>Java</dt> <dd>OOP</dd> <dd>Annotation</dd> <dd>Reflection</dd> <dt>Python</dt> <dd>數據分析</dd <dd>數據挖掘</dd> <dd>...</dd></dl>表格
為什么使用表格 ?
- 簡單通用
- 結構穩定
- 表格結構
基本結構：
HTML表格的創建：
<!--表格 table--><!--table : 表格tr : 行 table rowstd : 列 --><table border=1px> <tr> <!--colspan=跨列--> <td colspan="3">1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <!--colspan=跨行--> <td rowspan="3">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> <td>2-5</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <tr> <td>4-1</td> <td>4-2</td> <td>4-3</td> <td>4-4</td> </tr></table>視頻/音頻
思考 : 如何在網頁上播放視頻和音頻 ?
結論 : 應該有一個標簽控制音頻或者視頻 .
video , audio
<!--播放視頻--><!--前端要考慮問題 : 瀏覽器兼容性--><!--video標簽src -> 視頻路徑 (必填)controls -> 給視頻增加控制播放的按鈕autoplay -> 自動播放視頻w-h -> 視頻窗口大小--><video src="../resource/video/20211124-10-23.mp4" controls width="1280px" height="720px" autoplay></video><!--音頻標簽--><!--src -> 音頻路徑controls -> 給音頻增加控制播放的按鈕autoplay -> 自動播放視頻....--><audio src="../resources/video/Human%20Legacy%20-%20Ivan%20Torrent.mp3" controls autoplay></audio>網頁結構分析
頁面結構分析：
- 頭部：header
- 導航
- 主題內容
- 底部
例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>頁面結構分析</title></head><body><header> <h2>網頁頭部</h2></header><section><h2>網頁主體</h2></section><footer> <h2>網頁底部</h2></footer></body></html>內聯框架
內聯框架
iframe 內聯框架
- src:地址
- w-h: 寬度高度
- name： 框架標識名
例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>內聯框架</title></head><body><!--iframe內聯框架src:地址w-h: 寬度高度--><!--作用:在一個網頁中嵌入另外一個網頁--><!--<iframe src="https://www.bilibili.com/video/BV1x4411V75C?p=8" frameborder="0" width="960" height="540"></iframe>--> <iframe src="" name="hello" frameborder="0" width="800px" height="600px"></iframe><a href="3.圖像標簽.html" target="hello">點擊跳轉</a> </body></html>表單元素
表單語法：
什么叫表單 ?
登錄 , 注冊 …
常見表單元素
- 文本框 密碼框 按鈕 單選框 多選框 文本域 下拉框 文件域
form 表單元素：
- action : 提交地址
- method : 提交方式 : post/get
- post : 安全 效率低 能提交無限大的文件
- get : 不安全 效率高 一次請求的文件量特別小 .
- 溫馨提示 : 網頁中一般使用post方式提交
demo01 代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登錄注冊</title></head><body><h1>注冊</h1><!--form為表單元素--><!--action : 提交地址method : 提交方式 : post/get post : 安全 效率低 能提交無限大的文件 get : 不安全 效率高 一次請求的文件量特別小 . 溫馨提示 : 網頁中一般使用post方式提交--><form action="1.我的第一個網頁.html" method="get"> <!--文本框 : input type=text--> <p>用戶名 : <input type="text" name="username"> </p> <!--密碼框 : input type=password --> <p>密碼 : <input type="password" name="password"> </p> <p> <input type="submit"> <input type="reset"> </p></form></body></html>表單元素格式：
文本框與單選框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登錄注冊</title></head><body><h1>注冊</h1><!--form為表單元素--><!--action : 提交地址method : 提交方式 : post/get post : 安全 效率低 能提交無限大的文件 get : 不安全 效率高 一次請求的文件量特別小 . 溫馨提示 : 網頁中一般使用post方式提交--><form action="1.我的第一個網頁.html" method="get"> <!--文本框 : input type=text value="alzn" 默認初始值 size="5" 文本框的長度 maxlength="5" 最長能寫幾個字符 --> <p>用戶名 : <input type="text" name="username"> </p> <!--密碼框 : input type=password --> <p>密碼 : <input type="password" name="password"> </p> <!-- 單選框標簽 input type="radio" value 單選框的值 name : 表示組 --> <p>性別： <input type="radio" value="man" name="sex"> 男 <input type="radio" value="woman" name="sex">女 </p> <p> <input type="submit"> <input type="reset"> </p> </form></body></html>按鈕與多選框
<!-- checkbox多選框--><p>愛好：<!--注意事項:1. 若是要提交 , 則必須要有 name 和value屬性k=v&k=v&k=v&k=v&k=v&k=v2. name就是key 提交的鍵 , vlaue就是提交的信息--><input type="checkbox" value="movie" name="hobby"/>看電影<input type="checkbox" value="music" name="hobby"/>聽歌<input type="checkbox" value="road" name="hobby"/>壓馬路<input type="checkbox" value="code" name="hobby"/>敲代碼 </p><!-- 按鈕input type="button" 普通按鈕input type="image" 圖片按鈕input type="submit" 提交按鈕input type="reset" 重置--><p>按鈕：<input type="button" name="btn1" value="點擊邊長"><input type="image" src="../resource/figure/樸信惠.jpg"></p><p><input type="submit"><input type="reset"></p>列表框、文本框、文件域
<!--下拉框， 列表框--><!--selected 選中--><p>國家:<select name="國家"><option value="美國">美國</option><option value="中國" selected>中國</option><option value="印度">印度</option></select></p><!--文本域多行的文本框 cols="50" rows="10" 50行，10列 --><p> 反饋：<textarea name="textarea" cols="50" rows="10">文本內容</textarea></p><p><!--文件域--><input type="file" name="files"></p>搜索框滑塊和簡單驗證
簡單驗證和滑塊：
<!-- 郵箱驗證--> <p>郵箱： <input type="email" name="eamil"> </p> <!-- URL--> <p>URL: <input type="url" name="url"> </p> <!-- 數字驗證--> <!-- 數字驗證：購買商品的數量，最小是0，最大是100，每次可以增加10個，即步長為10--> <p>商品數量： <input type="number" name="num" max="100" min="0" step="10"> </p> <!-- 滑塊 input type="range" --> <!-- 例如調節音量的滑塊，同樣可以設置最小值為0，最大100， 步長為2 即每次調節音量加2--> <p>音量： <input type="range" name="voice" max="100" min="0" step="2"> </p> <!-- 搜索--> <!-- 搜索框輸入 數據，獲取后，你可以自己去數據庫里面尋找。其實名字文本框也是可以的--> <p>搜索： <input type="search" name="search"> </p>郵箱 網址 數字 滑塊 搜索框。整體的一個例子：
<!--form為表單元素--><!--action : 提交地址method : 提交方式 : post/get--><h1>注冊</h1><!--input屬性:type=類型name: 名字 , 可以重復id: 不能重復,保證全代碼唯一disabled: 禁用文本框--><!-- post : 安全 效率低 能提交無限大的文件get : 不安全 效率高 一次請求的文件量特別小 .溫馨提示 : 網頁中一般使用post方式提交--><form action="1.第一網頁.html" method="get"> <!--文本框 : input type=text--> <p>用戶名 : <input type="text" name="username"> </p> <!--密碼框 : input type=password --> <p>密碼 : <input type="password" name="password"> </p> <p>確認密碼 : <input type="password" name="password"> </p> <p> <!--文件域--> <input type="file"> </p> <p> <!--radio單選框--> <!--name:綁定同一個組--> <!--checked 默認選中--> <!--注意事項:1. 若是要提交 , 則必須要有 name 和value屬性 k=v&k=v&k=v&k=v&k=v&k=v2. name就是key 提交的鍵 , vlaue就是提交的信息 --> 性別 <input type="radio" value="boy" name="group1">男 <input type="radio" value="girl" name="group1">女 <input type="radio" value="!boygirl" name="group1">人妖 </p> <p> <!--注意事項:1. 若是要提交 , 則必須要有 name 和value屬性k=v&k=v&k=v&k=v&k=v&k=v2. name就是key 提交的鍵 , vlaue就是提交的信息--> 愛好 <!-- checkbox多選框--> <input type="checkbox" value="movie" name="hobby"/>看電影 <input type="checkbox" value="music" name="hobby"/>聽歌 <input type="checkbox" value="road" name="hobby"/>壓馬路 <input type="checkbox" value="code" name="hobby"/>敲代碼 </p> <hr/> <!--下拉框--> <!--selected 選中--> <select name="列表名稱"> <option value="選擇的值1">一</option> <option value="選擇的值2">二</option> <option value="選擇的值3" selected>三</option> </select> <select name="國家"> <option value="美國">美國</option> <option value="中國" selected>中國</option> <option value="印度">印度</option> </select> <select name="中國"> <option value="西安">西安</option> <option value="重慶">重慶</option> <option value="新疆" selected>新疆</option> </select> <p> <!--按鈕--> <input type="button" value="我的第一個button按鈕"> <!--圖片按鈕--> <!--<input type="image" src="../resources/images/tx.jpg">--> </p> <p> <!--文本域多行的文本框--> <textarea name="textarea" cols="20" rows="10"> 文本內容 </textarea> </p> <hr/> <!--郵箱表單簡單驗證--> 郵箱 : <input type="email" name="email"/> <br/> <!--url簡單驗證--> url : <input type="url" name="url"> <br/> <!--數字的簡單驗證--> 數字 : <input type="number"> <br/> <!--滑塊,值得范圍0~100--> 滑塊 : <input type="range" name="range" value="30"> <!--搜索框--> 搜索框 : <input type="search" name="search"> <!--提交按鈕 : input type=submit--> <!--重填按鈕 : type="reset"--> <!-- 提交會產生事件 , 會將表單的內容提交到action請求的地址 ,方法為method指定的方法 submit默認文字是提交 , 手動給按鈕賦值使用 value --> <p> <input type="submit"> <input type="reset"> </p></form>表單其他應用
隱藏域 , 只讀 , 禁用
- hidden : 隱藏域
- readonly : 只讀
- disabled : 禁用
demo：
-
只讀： raedonly
<p>用戶名 : <input type="text" name="username" value="alzn" readonly> </p>對于這個只讀 readonly ，value值是alzn，即默認的就是這個值，且只讀，不能被修改。
-
禁用：disabled
<p>性別： <!-- <input type="radio" value="man" name="sex"> 男--><!-- disabled 禁用的作用--><input type="radio" value="man" name="sex" disabled> 男<input type="radio" value="woman" name="sex">女</p>在這個情況下，性別只能選 女， 男的被禁用 無法選擇
-
隱藏域：hidden
<!-- hidden 隱藏域作用，不會顯示。 也可以再設置 value=123456，設置默認的密碼--><p>密碼 : <input type="password" name="password" hidden value="123456"> </p>這個時候，密碼框看不見，但是提交的時候會有默認值，且為 123456
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eBaASkyv-1644220189427)(F:%5C%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%5CHTML%5CHTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%5Cimage-20220103161638159.png)]
增強鼠標可用性
在前面的 ”用戶名“ 文字被點擊時，沒有任何的意義。可以使用 label標簽和 id 去增強鼠標可用性，在點擊文字的時候可以鎖定對應的 表單框。
demo-01：在點擊”點擊我一下試試啊“ 這個文本的時候，會直接鎖定后面的這個表單框
<!-- label 增強鼠標可用性--><!-- 前面的點擊用戶名文字是沒有反應的， 可以采用 label 標簽和 id 去鎖定指定的表單--><p><label for="mark">點擊我一下試試啊</label><input type="text" id="mark"></p>結果如下所示：
而在沒有添加這個label 標簽之前的結果是：
點擊這個文本，沒有反應。
demo-02：也可以把這個id的位置放到 搜索框，其它的想要對應的位置。
<!-- 搜索--><!-- 搜索框輸入 數據，獲取后，你可以自己去數據庫里面尋找。其實名字文本框也是可以的--><p>搜索：<input type="search" name="search" id="mark"></p><!-- label 增強鼠標可用性--><!-- 前面的點擊用戶名文字是沒有反應的， 可以采用 label 標簽和 id 去鎖定指定的表單--><p><label for="mark">點擊我一下試試啊</label><input type="text" ></p>結果如下所示：
總結
以上是生活随笔為你收集整理的前端：HTML学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 冯诺依曼原理计算机具备,冯·诺依曼计算机
- 下一篇： 仿猪八戒导航菜单