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

HTML

HTML5 学习笔记

發布時間：2023/12/1 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5 學習筆記

前言

該學習筆記的相關學習視頻：【狂神說Java】HTML5完整教學通俗易懂
目前筆記只有簡單的例子和框架，將來在實踐中會進一步學習和補充內容

HTML5 學習筆記
- 前言
- 網頁基本信息
- 網頁基本標簽
- - 標題標簽
  - 段落標簽
  - 換行標簽
  - 水平線標簽
  - 字體樣式標簽
  - 注釋和特殊符號
- 圖像標簽
- 鏈接標簽
- - 頁面間鏈接
  - 錨鏈接
  - 功能性鏈接
- 行內元素塊元素
- - 行內元素（行級標簽）
  - 塊元素（塊級標簽）
- 列表標簽
- - 有序標簽
  - 無序標簽
  - 自定義標簽
- 表格標簽
- 媒體元素
- 頁面結構分析
- iframe內聯框架
- 表單
- - 文本框
  - 單選框
  - 多選框
  - 按鈕
  - 下拉框
  - 文本域
  - 文件域
  - 其他組件
  - - 郵箱
    - 網址
    - 數字
    - 滑塊
    - 搜索框
  - 表單的應用
  - - 只讀
    - 隱藏域
    - 禁用
    - 表單元素的標注
  - 表單的初級驗證
  - - placeholder 提示信息
    - required 必填項
    - pattern 正則表達式

網頁基本信息

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="keywords" content="HTML5 Study"><meta name="description" content="One day"><title>My First Webpage</title> </head> <body>Hello，Web！</body></html>

網頁基本標簽

標題標簽

段落標簽

<h1>北京歡迎你</h1> <p>北京歡迎你，有夢想誰都了不起！</p> <p>有勇氣就會有奇跡。</p>

換行標簽

<h1>北京歡迎你</h1> <p>北京歡迎你，有夢想誰都了不起！<br/>有勇氣就會有奇跡。<br/>北京歡迎你，為你開天辟地。<br/> </p>

水平線標簽

<h1>北京歡迎你</h1>  <hr/> <p>北京歡迎你，有夢想誰都了不起！<br/>有勇氣就會有奇跡。<br/>北京歡迎你，為你開天辟地。<br/> </p>

字體樣式標簽

<strong>徐志摩人物簡介</strong> <p><em>1910</em>年入杭州學堂<br/><em>1918</em>年赴美國克拉大學學習銀行學<br/> </p>

注釋和特殊符號

特殊符號字符實體

注釋	<!-- -->
空格
大于號	>
小于號	<
引號	"
版權符號	©

圖像標簽

圖片地址可傳入 絕對路徑 和 相對路徑

絕對路徑從盤號開始，例如：C:/…

相對路徑由當前 html文件的目錄開始，通過 “…/” 查找上一級內容，連用”…/"可查找更上級的內容

鏈接標簽

頁面間鏈接

<a href="https://www.baidu.com">點擊我跳轉到百度</a> <br/> <a href="https://www.baidu.com"><img src="../resources/image/img.png" alt="dog" title="this is a dog" height="640" width="640"/> </a>

鏈接入口可以以文本或圖片的形式展示

target指定鏈接在那個窗口打開

<a href="https://www.baidu.com" target="_blank">點擊我跳轉到百度</a> <a href="https://www.baidu.com" target="_self">點擊我跳轉到百度</a>

_blank 表示在新的窗口頁面打開
_self 表示在本窗口頁面打開

target 默認值為_self

錨鏈接

錨鏈接可以跳轉到頁面的指定位置（需先標記該位置）

跳轉到其他頁面時也可指定跳轉的位置

<a href="My%20First%20Webpage.html#down">跳轉某頁面到底部</a> <a name="down">底部</a>

功能性鏈接

發送電子郵件

<a href="mailto:1328540878@qq.com">點擊聯系我</a>

行內元素塊元素

行內元素（行級標簽）

行內元素可以排在同一行，例如：
（a、strong、em…）

塊元素（塊級標簽）

塊元素獨占一行，例如：
（p、h1-h6…）

列表標簽

有序標簽

<ol><li>Java</li><li>Python</li><li>C/C++</li><li>HTML5</li><li>CSS3</li> </ol>

無序標簽

<ul><li>Java</li><li>Python</li><li>C/C++</li><li>HTML5</li><li>CSS3</li> </ul>

自定義標簽

<dl><dt>Lesson</dt> <dd>Java</dd><dd>Python</dd><dd>Linux</dd><dd>C</dd><dt>City</dt> <dd>北京</dd><dd>西安</dd><dd>成都</dd><dd>上海</dd> </dl>

表格標簽

<table border="1px"><tr><td colspan="3">學習成績</td></tr><tr><td rowspan="2">張三</td><td>Chinese</td><td>100</td></tr><tr><td>Math</td><td>100</td></tr><tr><td rowspan="2">李四</td><td>Chinese</td><td>60</td></tr><tr><td>Math</td><td>60</td></tr> </table>

border 指定表格邊框的寬度
colspan 表示擴列
rowspan 表示擴行

媒體元素

controls 代表顯示控制條
autoplay 代表自動播放

頁面結構分析

元素名描述

header	標題頭部區域的內容
footer	標記腳部區域的內容
section	Web頁面中的一塊獨立區域
article	獨立的文章內容
aside	相關內容或應用（常用于側邊欄）
nav	導航類輔助內容

iframe內聯框架

src：引用頁面地址
name：框架標識名

<iframe name="mainFrame"></iframe>  <a href="https://www.baidu.com/" target="mainFrame">加載</a>

target 表示以何種方式打開鏈接

表單

action：表示表單提交的位置，可以是網址、請求處理地址
method： post / get 兩種提交方式
get方式提交：可以在URL中看到提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件

文本框

input type = “text”

賬號：<input type="text" name="username" value="id" maxlength="12" size="15">

name：文本框名稱(必填)
value：文本框初始值
size：文本框長度
maxlength：文本框可輸入最多字符

單選框

input type = “radio”

性別： <input type="radio" value="male" name="sex" checked/>男 <input type="radio" value="female" name="sex"/>女

name：單選框名稱(必填)，一組的名稱需要相同
checked：初始單選按鈕選中狀態
value：單選框的值

多選框

input type = “checkbox”

愛好： <input type="checkbox" value="sleep" name="hobby"/>睡覺 <input type="checkbox" value="code" name="hobby"/>敲代碼 <input type="checkbox" value="chat" name="hobby"/>聊天 <input type="checkbox" value="game" name="hobby" checked/>游戲

name：復選框名稱(必填)，一組的名稱需要相同
checked：初始復選按鈕選中狀態
value：復選框的值

按鈕

<input type="reset" name="butReset" value="reset按鈕">  <input type="submit" name="butSubmit" value="submit按鈕">  <input type="button" name="butButton" value="button按鈕"/>  <input type="image" src="images/login.gif" />

圖片按鈕類似于圖片鏈接

下拉框

國家： <select name="nation"><option value="China" selected>中國</option><option value="Japan" >日本</option><option value="US" >美國</option> </select>

文本域

反饋： <textarea name="textarea" cols="40" rows="20">（文本內容）</textarea>

文件域

input type = “file”

其他組件

郵箱

郵箱： <input type="email" name="email"/>

提交時會檢測輸入的郵箱內容：

必須含有 ‘@’ 字符
‘@’ 前后必須有內容

網址

請輸入你的網址:<input type="url" name="userUrl"/>

提交時會檢測URL地址格式是否正確

數字

請輸入數字: <input type="number" name="num" min="0" max="100" step="10"/>

min/max : 可以限定閾值
step ：可以指定步長（固定每次的增量）

滑塊

音量： <input type="range" name="voice" min="0" max="10" step="2"/>

與數字框同理

搜索框

請輸入搜索的關鍵詞: <input type="search" name="sousuo"/>

表單的應用

只讀

readonly

賬號： <input type="text" name="username" value="admin" readonly>

隱藏域

hidden

密碼： <input type="password" name="pwd" hidden>

禁用

disabled

表單元素的標注

增強鼠標的可用性，自動將焦點轉移到與該標注相關的表單元素上

<label for="user">你點我試試</label> <p>賬號：<input type="text" name="username" id="user"> </p>

對應的 id 要一致

表單的初級驗證

如果用戶填寫的表單內容不進行驗證就發給服務器，那么服務器發現填寫的不合法，或是沒有填寫，就會返回響應給用戶，用戶重新填寫再提交，如此多次持續直到用戶輸入正確。它們之間的通信是通過網絡進行的，如果網絡很差，那么注冊一個賬號就得花很長時間，對用戶來說是非常煩的，對服務器來說也增加了其工作壓力。要是有惡意的用戶向服務器發送病毒或是有害于服務器安全的程序就更危險了。

表單驗證的好處：

減輕服務器的壓力
保證數據的可行性和安全性。

placeholder 提示信息

賬號： <input type="text" name="username" placeholder="請輸入用戶名">

required 必填項

規定文本框填寫內容不能為空，否則不允許用戶提交表單

pattern 正則表達式

用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單

總結

以上是生活随笔為你收集整理的HTML5 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

学习笔记

上一篇：反串剧情介绍
下一篇： web安全---浏览器解析提交数据的过程