當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端：HTML学习笔记

發布時間：2024/1/1 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了前端：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 html><html lang="en">  <head><meta charset="UTF-8"><title>狂神說Java</title> </head> <body> Hello,World! </body></html>

< title > 標簽 : 網頁的標題
< meta > 標簽 : 關鍵字標簽。meta標簽是描述性標簽，描述網站的一些基本信息。一般用來做 SEO 的

<meta charset="UTF-8"> gb2312 ----> 包含全部的中文字符 utf-8 ---->包含了全世界所有地方的文字和符號 <meta name="keywords" content="狂神,Java,Python,linux,大數據"> <meta name="description" content="狂神有點cool!">

網頁的基本標簽

標題標簽: h1

<h1>一級標題</h1> <h2>一級標題</h2> <h3>一級標題</h3> <h4>一級標題</h4> <h5>一級標題</h5> <h6>一級標題</h6>

段落標簽: p

<h1>段落標簽</h1> <p>兩只老虎兩只老虎</p> <p>跑得快跑得快</p> <p>一只沒有耳朵一只沒有尾巴</p> <p>真奇怪真奇怪</p> <p>兩只老虎兩只老虎</p> <p>跑得快跑得快</p> <p>一只沒有耳朵一只沒有尾巴</p> <p>真奇怪真奇怪</p>

換行標簽: br

換行標簽是
與段落標簽 p 的區別在于， br 的顯示效果的間隙比較小。

<h1>換行標簽</h1>兩只老虎兩只老虎<br/>跑得快跑得快<br/>一只沒有耳朵一只沒有尾巴<br/>真奇怪真奇怪<br/>兩只老虎兩只老虎<br/>跑得快跑得快<br/>一只沒有耳朵一只沒有尾巴<br/>真奇怪真奇怪<br/>

顯示的結果：

水平線標簽: hr

<h1>水平線標簽</h1><hr/>兩只老虎兩只老虎<br/> 跑得快跑得快<br/> 一只沒有耳朵一只沒有尾巴<br/> 真奇怪真奇怪<br/> 兩只老虎兩只老虎<br/> 跑得快跑得快<br/> 一只沒有耳朵一只沒有尾巴<br/> 真奇怪真奇怪<br/>

字體標簽

<h1>字體字體樣式</h1>I love you加粗后 : <strong>I love you</strong>斜體 : <em>I love you</em>

特殊符號: &**;

圖像標簽:img

圖像標簽

常見的圖像格式 :jpg/png/bmp /位圖/gif

alt = “text” 圖片的替代名字，當圖片無法顯示的時候(或者不存在) 就會使用這個 alt 中的內容去替代表示想要顯示的圖片。

代碼形式如下所示：

例子：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖像標簽學習</title></head><body><img src="../resource/figure/樸信惠.jpg" alt="樸信惠圖片" name="img1"></body></html>

當修改成下面的代碼時，顯示結果為：

這個就是 alt=“text" 的作用。

鏈接標簽: a

超鏈接

<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><a name="top">頂部</a><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 的代碼如下：

4.1.錨鏈接標簽.html 的代碼如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>錨鏈接標簽學習</title></head><body><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> <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> <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

無序列表：導航，側邊欄

有序列表：試卷，問答，…

<h1>無序列表</h1><ul> <li>java</li> <li>C/C++</li> <li>Linux</li> <li>Python</li></ul><hr><h1>有序列表</h1><ol> <li>java</li> <li>C/C++</li> <li>Linux</li> <li>Python</li></ol><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 border=1px> <tr>  <td colspan="3">1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr>  <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="../resource/video/20211124-10-23.mp4" controls width="1280px" height="720px" autoplay></video><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：框架標識名

<iframe name="markup" src="" frameborder="0"></iframe><a href="https://www.baidu.com" target="markup">test</a><a href="2.HTML的標簽.html" target="markup">test</a><a href="3.圖像標簽.html" target="markup">test</a><a href="4.超鏈接.html" target="markup">test</a><iframe src="//player.bilibili.com/player.html?aid=54171171&cid=95552484&page=17" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

例子：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>內聯框架</title></head><body> <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="1.我的第一個網頁.html" method="get">  <p>用戶名 : <input type="text" name="username"> </p>  <p>密碼 : <input type="password" name="password"> </p>  <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>

按鈕與多選框

<p>愛好：<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><p>按鈕：<input type="button" name="btn1" value="點擊邊長"><input type="image" src="../resource/figure/樸信惠.jpg"></p><p><input type="submit"><input type="reset"></p>

列表框、文本框、文件域

<p>國家:<select name="國家"><option value="美國">美國</option><option value="中國" selected>中國</option><option value="印度">印度</option></select></p><p> 反饋：<textarea name="textarea" cols="50" rows="10">文本內容</textarea></p><p><input type="file" name="files"></p>

搜索框滑塊和簡單驗證

簡單驗證和滑塊：

<p>郵箱： <input type="email" name="eamil"> </p>  <p>URL: <input type="url" name="url"> </p>   <p>商品數量： <input type="number" name="num" max="100" min="0" step="10"> </p>   <p>音量： <input type="range" name="voice" max="100" min="0" step="2"> </p>   <p>搜索： <input type="search" name="search"> </p>

郵箱網址數字滑塊搜索框。整體的一個例子：

<h1>注冊</h1><form action="1.第一網頁.html" method="get">  <p>用戶名 : <input type="text" name="username"> </p>  <p>密碼 : <input type="password" name="password"> </p> <p>確認密碼 : <input type="password" name="password"> </p> <p>  <input type="file"> </p> <p>     性別 <input type="radio" value="boy" name="group1">男 <input type="radio" value="girl" name="group1">女 <input type="radio" value="!boygirl" name="group1">人妖 </p> <p>  愛好  <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/>   <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按鈕">   </p> <p>  <textarea name="textarea" cols="20" rows="10"> 文本內容 </textarea> </p> <hr/>  郵箱 : <input type="email" name="email"/> <br/>  url : <input type="url" name="url"> <br/>  數字 : <input type="number"> <br/>  滑塊 : <input type="range" name="range" value="30">  搜索框 : <input type="search" name="search">    <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="woman" name="sex">女</p>
在這個情況下，性別只能選女，男的被禁用無法選擇
隱藏域：hidden
<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：在點擊”點擊我一下試試啊“ 這個文本的時候，會直接鎖定后面的這個表單框

<p><label for="mark">點擊我一下試試啊</label><input type="text" id="mark"></p>

結果如下所示：

而在沒有添加這個label 標簽之前的結果是：

點擊這個文本，沒有反應。

demo-02：也可以把這個id的位置放到搜索框，其它的想要對應的位置。

<p>搜索：<input type="search" name="search" id="mark"></p><p><label for="mark">點擊我一下試試啊</label><input type="text" ></p>