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

HTML

【HTML】HTML学习笔记（全）

發布時間：2023/12/20 HTML 27 豆豆

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

HTML5

認識WEB

**「網頁」**主要是由文字、圖像和超鏈接等元素構成，當然除了這些元素，網頁中還可以包括音頻、視頻以及Flash等。

**「瀏覽器」**是網頁顯示、運行的平臺。

「瀏覽器內核」(排版引擎、解釋引擎、渲染引擎)

負責讀取網頁內容，整理訊息，計算網頁的顯示方式并顯示頁面。

瀏覽器內核備注

IE	Trident	IE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefox	Gecko	可惜這幾年已經沒落了，打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。
Safari	webkit	現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了）。蘋果感覺像被別人搶了媳婦，都哭暈在廁所里面了。
chrome	Chromium/Blink	在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。大部分國產瀏覽器最新版都采用Blink內核。二次開發
Opera	blink	現在跟隨chrome用blink內核。

Web標準

**「構成」**👉 結構標準，表現標準和行為標準

結構標準用于對網頁元素進行整理和分類(HTML)
表現標準用于設置網頁元素的版式、顏色、大小等外觀屬性(CSS)
行為標準用于對網頁模型的定義及交互的編寫(JavaScript)

**「Web標準的優點」**👇

易于維護：只需更改CSS文件，就可以改變整站的樣式
頁面響應快：HTML文檔體積變小，響應時間短
可訪問性：語義化的HTML（結構和表現相分離的HTML）編寫的網頁文件，更容易被屏幕閱讀器識別
設備兼容性：不同的樣式表可以讓網頁在不同的設備上呈現不同的樣式
搜索引擎：語義化的HTML能更容易被搜索引擎解析，提升排名

HTML初識

「HTML」(Hyper Text Markup Language): 超文本標記語言

「所謂超文本，有2層含義：」

因為它可以加入圖片、聲音、動畫、多媒體等內容（超越文本限制）
不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本）。

「HTML骨架格式」

<html><head> <title></title> </head><body></body> </html>

「團隊約定大小寫」

HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫

「HTML元素標簽分類」

常規元素(雙標簽)
空元素(單標簽)

常規元素(雙標簽)<標簽名> 內容 </標簽名> 比如<body>我是文字</body>空元素(單標簽)<標簽名 /> 比如 <br />或<br>

「HTML標簽關系」

嵌套關系父子級包含關系
并列關系兄弟級并列關系
- 如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位（一個tab是4個空格）。如果是并列關系，最好上下對齊。

文檔類型< !DOCTYPE >

**「文檔類型」**用來說明你用的XHTML或者HTML是什么版本。< !DOCTYPE html>告訴瀏覽器按照HTML5標準解析頁面。

頁面語言lang

lang指定該html標簽內容所用的語言

<html lang="en"> en 定義語言為英語 zh-CN定義語言為中文

「lang的作用」

根據根據lang屬性來設定不同語言的css樣式，或者字體
告訴搜索引擎做精確的識別
讓語法檢查程序做語言識別
幫助翻譯工具做識別
幫助網頁閱讀程序做識別

字符集

「字符集」(Character set)是多個字符的集合,計算機要準確的處理各種字符集文字，需要進行字符編碼，以便計算機能夠識別和存儲各種文字。

UTF-8是目前最常用的字符集編碼方式
讓 html 文件是以 UTF-8 編碼保存的，瀏覽器根據編碼去解碼對應的html內容。

「meta viewport的用法」
通常viewport是指視窗、視口。瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域。在移動端和pc端視口是不同的，pc端的視口是瀏覽器窗口區域，而在移動端有三個不同的視口概念：布局視口、視覺視口、理想視口

meta有兩個屬性name 和 http-equiv

name屬性的取值

keywords(關鍵字) 告訴搜索引擎，該網頁的關鍵字
description(網站內容描述) 用于告訴搜索引擎，你網站的主要內容。
viewport(移動端的窗口)
robots(定義搜索引擎爬蟲的索引方式) robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引
author(作者)
generator(網頁制作軟件）
copyright(版權)

http-equiv有以下參數

http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容

content-Type 設定網頁字符集(Html4用法，不推薦)
Expires(期限) ,可以用于設定網頁的到期時間。一旦網頁過期，必須到服務器上重新傳輸。
Pragma(cache模式),是用于設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定后一旦離開網頁就無法從Cache中再調出
Refresh(刷新),自動刷新并指向新頁面。
cache-control（請求和響應遵循的緩存機制）

HTML標簽的語義化

方便代碼的閱讀和維護，樣式丟失的時候能讓頁面呈現清晰的結構。
有利于SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
方便其他設備解析，如盲人閱讀器根據語義渲染網頁

「拓展」 標簽：規定頁面上所有鏈接的默認 URL 和設置整體鏈接的打開狀態

<head><base href="http://www.baidu.com" target="_blank"><base target="_self"> </head> <body><a href="">測試</a> 跳轉到百度 </body>

HTML常用標簽

排版標簽

主要和css搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽。

標題標簽h(h1~h6)
段落標簽<p> </p>,可以把 HTML 文檔分割為若干段落
<p>paragraph段落標簽</p>
- 文本在一個段落中會根據瀏覽器窗口大小自動換行
- 段落和段落之間有空格
換行標簽<br />
- break
- <br />是個單標簽
- <br />標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
div和span標簽:是沒有語義的,是我們網頁布局最主要的2個盒子。
- div是division縮寫，表示分割，分區。span意為跨度、跨距。
- <div>標簽用來布局，但是一行只能放一個<div>。（會自動換行）。大盒子
- <span>標簽用來布局，一行可以多個<span>。小盒子

「排版標簽」

b和strong 文字以粗體顯示
i和em 文字以斜體顯示
s和del 文字以加刪除線顯示
u和ins 文字以加下劃線顯示

標簽屬性(行內式)

使用HTML制作網頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設置。

<標簽名屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名> <手機顏色="紅色" 大小="5寸"> </手機>

圖像標簽

image的縮寫。單標簽。

src是<img>標簽的必須屬性，他用于指定圖像文件的路徑和文件名
- 屬性：簡單理解是屬于這個圖像標簽的特性

屬性屬性值描述

src	URL	圖像的路徑
alt	文本	圖像不能顯示時的替換文本
title	文本	鼠標懸停時顯示的內容
width	像素	設置圖像的寬度
height	像素	設置圖像的高度
border	數字	設置圖像邊框的寬度

寬度和高度一般只修改一個，另外一個自動。

注意：

標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
采取鍵值對的格式 key=“value” 的格式

路徑

相對路徑：圖片相對于HTML頁面的位置

相對路徑分類符號說明

同一級路徑		圖像文件位于HTML文件同一級如<img src="baidu.gif" />
下一級路徑	/	圖像文件位于HTML文件下一級如<img src="images/img.jpg" />
上一級路徑	../	圖像文件位于HTML文件上一級如<img src="../2.png" />

絕對路徑：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑。\

超鏈接標簽

超鏈接語法格式

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a> target="_self" 默認窗口彈出方式 target="_blank" 新窗口彈出

anchor 錨

屬性作用

href	用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能
target	用于指定鏈接頁面的打開方式，其取值有_ self和 _ blan兩種，其中_ self為默認值，_blank為在新窗口中打開方式。

鏈接分類

外部鏈接

例如<a href="http://www.qq.com" target="_blank">騰訊</a>

內部鏈接

網站內部之間的相互鏈接，直接鏈接內部頁面名稱即可。

例如<a href="index.html">首頁</a>

<h4>內部鏈接：網站內部頁面之間的相互鏈接</h4> <a href="inner.html" target="_blank">內部鏈接</a>

空鏈接

如果當時沒有確定鏈接目標時， <a herf="#">首頁</a>

下載鏈接

如果href里面地址是一個文件或者壓縮包，會下載這個文件。

網頁元素鏈接

在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接

例如：給圖片添加超鏈接

<h4>網頁元素鏈接</h4><a href="http://www.baidu.com"><img src="img.jpg" /></a>

錨點鏈接

點擊鏈接可以快速定位到頁面中的某個位置

(1). 在鏈接文本的href屬性中，設置屬性值為#名字的形式，如<a href="#two">第2集</a>

(2). 找到目標位置標簽，里面添加一個id屬性=剛才的名字，如<h3 id="two">第2集介紹</h3>

1. 使用<a href="#id名">鏈接文本</a>創建鏈接文本（被點擊的） <a href="#two"> 2. 使用相應的id名標注跳轉目標的位置。 (目標位置) <h3 id="two">第2集</h3>

返回頂部

注釋標簽

快捷鍵：Ctrl+/

特殊字符

空格：  牛逼space

小于號：< less than

大于號：> more than

表格

現在還是較為常用的一種標簽，但不是用來布局，常見顯示、展示表格式數據。因為它可以讓數據顯示的非常的規整，可讀性非常好。特別是后臺展示數據的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。

表格基本語法

<table> <tr> <td>單元格內的文字</td> ... </tr> ...</table>

table、tr、td，他們是創建表格的基本標簽，缺一不可

table用于定義一個表格標簽。
tr標簽用于定義表格中的行，必須嵌套在 table標簽中。
td 用于定義表格中的單元格，必須嵌套在< tr>< /tr>標簽中。
字母 td 指表格數據（table data），即數據單元格的內容，現在我們明白，表格最合適的地方就是用來存儲數據的。td像一個容器，可以容納所有的元素。

表頭單元格標簽

table head ——> <th>。表頭單元格里面的文本加粗并且居中顯示。

表格屬性

這些屬性要寫到標簽table里面去

三參為0，平時開發的我們這三個參數 border cellpadding cellspacing 為 0

屬性名屬性值描述

align	left、center、right	規定表格相對周圍元素的對齊方式
border	“1"或”"	規定表格單元是否擁有邊框，默認為""，表示沒有邊框
cellpadding	像素值	規定單元邊沿與其內容之間的空白，默認1像素
cellspacing	像素值	規定單元格之間的空白，默認2像素
width	像素值或百分比	規定表格的寬度
height	像素值或百分比	規定表格的高度

表格結構標簽

<thead>標簽：表格的頭部區域。<thead>內部必須擁有<tr>標簽，一般是位于第一行。

<tbody>標簽：表格的主體區域，主要用于放數據本體。

對于比較復雜的表格，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注，這樣更好的分清表格結構。

注意：
1、< thead>< /thead>：用于定義表格的頭部。用來放標題之類的東西。< thead> 內部必須擁有< tr> 標簽！

2、< tbody>< /tbody>：用于定義表格的主體。放數據本體。

3、< tfoot>< /tfoot>放表格的腳注之類。
4、以上標簽都是放到table標簽中。

合并單元格

合并的順序我們按照先上后下先左后右的順序 ,合并完之后需要刪除多余的單元格。

跨行合并：rowspan="合并單元格的個數"
跨列合并：colspan="合并單元格的個數"

目標單元格：(寫合并代碼)

跨行：最上側單元格為目標單元格，寫合并代碼
跨列：最左側單元格為目標單元格，寫合并代碼

合并單元格三部曲：

先確定跨行還是跨列合并
找到目標單元格，寫上合并方式=合并的單元格數量。比如：<td colspan="2"></td>
刪除多余的單元格

表格總結

標簽名定義說明

< table>< /table>	表格標簽	就是一個四方的盒子
< tr>< /tr>	表格行標簽	行標簽要再table標簽內部才有意義
< td>< /td>	單元格標簽	單元格標簽是個容器級元素，可以放任何東西
< th>< /th>	表頭單元格標簽	它還是一個單元格，但是里面的文字會居中且加粗
< caption>< /caption>	表格標題標簽	表格的標題，跟著表格一起走，和表格居中對齊
clospan 和 rowspan	合并屬性	用來合并單元格的

列表

布局。

**「列表ul」**容器里面裝載著結構，樣式一致的文字或圖表的一種形式，叫列表。

列表最大的特點就是整齊、整潔、有序，跟表格類似，但是它可組合自由度會更高。

無序列表ul (重點)

< ul>< /ul>中只能嵌套< li>< /li>，直接在< ul>< /ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
< li>與< /li>之間相當于一個容器，可以容納所有元素。

有序列表ol

< ol>標簽中的type屬性值為排序的序列號，不添加type屬性時，有序列表默認從數字1開始排序。
常用的type屬性值分別為是1，a，A，i，I
< ol reversed=“reversed”>中的reversed屬性能夠讓有序列表中的序列倒序排列。
< ol start=“3”>中的start屬性值為3，有序列表中的第一個序列號將從3開始排列。

自定義列表dl

定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。

父親 - 大哥 - 弟弟

表單

在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。

表單目的是為了收集用戶信息。

表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

提示信息：
一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

表單域：
它相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。

表單域

收集的用戶信息怎么傳遞給服務器？
- 通過form表單域
目的：
- 在HTML中，form標簽被用于定義表單域，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。

<form action="url地址" method="提交方式" name="表單域名稱"> 各種表單元素控件</form>

常用屬性：

每個表單都應該有自己表單域。后面學 ajax 后臺交互的時候，必須需要form表單域。

屬性屬性值作用

action	url地址	用于指定接收并處理表單數據的服務器程序的url地址。
method	get/post	用于設置表單數據的提交方式，其取值為get或post。
name	名稱	用于指定表單的名稱，以區分同一個頁面中的多個表單。

表單控件（表單元素）

input 控件

input 輸入的意思
< input />標簽為單標簽
type屬性設置不同的屬性值用來指定不同的控件類型
除了type屬性還有別的屬性

radio、checkbox按鈕name值要一樣！！！

性別：男 <input type="radio" name="radio"> 女 <input type="radio" name="radio"> <br> 愛好：吃飯<input type="checkbox" name="hobby"> 睡覺<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"><br>

submit屬性

<input type="submit" value="免費注冊">

點擊了提交按鈕，可以把表單域form 里面的表單元素里面的值提交到后臺服務器

reset屬性

重置按鈕還原表單初始默認狀態

button屬性

普通按鈕

file屬性

上傳頭像：<input type="file">

value屬性

value 默認的文本值。有些表單想剛打開頁面就默認顯示幾個文字，就可以通過這個value 來設置。
name和value是每個元素都有的屬性值，主要給后臺人員使用

用戶名:<input type="text" name="username" value="請輸入用戶名">

name屬性

name表單的名字，這樣，后臺可以通過這個name屬性找到這個表單。頁面中的表單很多，name主要作用就是用于區別不同的表單。
- name屬性后面的值，是我們自己定義的。
- radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦
- name屬性，我們現在用的較少，但是，當我們學ajax 和后臺的時候，是必須的。

checked屬性

表示默認選中狀態。較常見于單選按鈕和復選按鈕。

input 屬性小結

屬性說明作用

type	表單類型	用來指定不同的控件類型
value	表單值	表單里面默認顯示的文本
name	表單名字	頁面中的表單很多，name主要作用就是用于區別不同的表單。
checked	默認選中	表示那個單選或者復選按鈕一開始就被選中了

label標簽

label 標簽為 input 元素定義標注（標簽）。
label標簽主要目的是為了提高用戶體驗。為用戶提高最優秀的服務。

**作用：**用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。

如何綁定元素呢

第一種用法就是用label標簽直接包含input表單，適合單個表單選擇
第二種用法 for 屬性規定 label 與哪個表單元素綁定(通過id)。

第一種 <label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label> 第二種 <label for="sex">男</label> <input type="radio" name="sex" id="sex">

栗子

select下拉列表

如果有多個選項讓用戶選擇，為了節約空間，我們可以使用select控件定義下拉列表。
在option 中定義selected =" selected "時，當前項即為默認選中項。
我們實際開發會用的比較少

栗子

籍貫: <select> <option>山東</option> <option>北京</option> <option selected="selected">外星球</option> </select>

textarea控件(文本域)

通過textarea控件可以輕松地創建多行文本輸入框.
cols=“每行中的字符數” rows=“顯示的行數” 我們實際開發不用

栗子

今日反饋: <textarea cols="50" rows="5">我知道這個反饋留言是textarea寫的. </textarea>

總結

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

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