HTML知識概括

GeorgeLin98發表於2020-12-31
HTML

HTML知識概括

HTML簡介

HTML簡介：

  • HTML的註釋，註釋中的內容會被瀏覽器所忽略，不會在網頁中直接顯示， 但是可以在原始碼中檢視註釋，註釋用來對程式碼進行解釋說明的開發中一定要養成良好的編寫註釋的習慣，註釋要求簡單明瞭
  • 註釋還可以將一些不希望顯示的內容隱藏
  • 註釋不能巢狀
  • 標籤一般成對出現，但是也存在一些自結束標籤

標籤的屬性：

  • 屬性，在標籤中（開始標籤或自結束標籤）還可以設定屬性
  • 屬性是一個名值對（x=y）
  • 屬性用來設定標籤中的內容如何顯示
  • 屬性和標籤名或其他屬性應該使用空格隔開
  • 屬性不能瞎寫，應該根據文件中的規定來編寫，有些屬性有屬性值，有些沒有。如果有屬性值，屬性值應該使用引號引起來

網頁的基本結構：

  • 迭代
    ①網頁的版本HTML4X，HTML2.0。HTML5，…

  • 文件宣告（doctype）：文件宣告用來告訴瀏覽器當前網頁的版本
    ①html5的文件宣告
    <!doctype html>
    <!Doctype HTML>

舉例：

<!-- 文件宣告，宣告當前網頁的版本 -->
<!doctype html>

<!-- html的根標籤（元素），網頁中的所有內容都要寫根元素的裡邊 -->
<html>

	<!-- head是網頁的頭部，head中的內容不會在網頁中直接出現，主要用來幫助瀏覽器或搜尋引擎來解析網頁 -->
	<head>

		<!-- meta標籤用來設定網頁的後設資料，這裡meta用來設定網頁的字符集，避免亂碼問題 -->
		<meta charset="utf-8">
		
		<!-- title中的內容會顯示在瀏覽器的標題欄，搜尋引擎會主要根據title中的內容來判斷網頁的主要內容 -->
		<title>網頁的標題</title>

	</head>

	<!-- body是html的子元素，表示網頁的主體，網頁中所有的可見內容都應該寫在body裡 -->
	<body>

		<!-- h1網頁的一級標題 -->
		<h1>網頁的大標題</h1>

	</body>

</html>

HTML語法

實體：

  • 在網頁中編寫的多個空格預設情況會自動被瀏覽器解析為一個空格
  • 在HTML中有些時候，我們不能直接書寫一些特殊符號。比如：多個連續的空格，比如字母兩側的大於和小於號
  • 如果我們需要在網頁中書寫這些特殊的符號，則需要使用html中的實體（轉義字元）
  • 實體的語法：
    &實體的名字;
    &nbsp; 空格
    &gt; 大於號
    &lt; 小於號
    &copy; 版權符號

head標籤：

  • <head> 標籤包含了所有的頭部標籤元素。在 <thead>標籤中你可以插入指令碼（scripts）,
    樣式檔案（CSS），及各種meta資訊。
  • 可以新增在頭部區域的元素標籤為: <title>, <style>, <meta>,<link>, <script>, <base>。
    ①base標籤描述了基本的連結地址/連結目標，該標籤作為HTML文件中所有的連結標籤的預設連結:
    ②link標籤定義了文件與外部資源之間的關係。（包括網路或者本地），<link>標籤通常用於連結到樣式表。
    ③style標籤定義了HTML文件的樣式檔案引用地址，在<style> 標籤中你也可以直接新增樣式來渲染 HTML 文件。
    ④script標籤既可包含指令碼語句，也可以通過 “src” 屬性指向外部指令碼檔案。（包括網路或者本地），<script> 標籤用於定義客戶端指令碼，比如 JavaScript。
    ⑤title標籤定義了不同文件的標題，<title> 在 HTML/XHTML 文件中是必須的。
    <1>title標籤定義了瀏覽器工具欄的標題。
    <2>當網頁新增到收藏夾時，顯示在收藏夾中的標題。
    <3>顯示在搜尋引擎結果頁面的標題。

meta標籤：

  • meta主要用於設定網頁中的一些後設資料，後設資料不是給使用者看
    ①charset 指定網頁的字符集
    ②name 指定的資料的名稱
    ③content 指定的資料的內容
  • keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,京東"/>
<meta name="keywords" content="網購,網上購物,線上購物,網購網站,網購商城,購物網站,網購中心,購物中心,卓越,亞馬遜,卓越亞馬遜,亞馬遜中國,joyo,amazon">
  • description 用於指定網站的描述
    ① 網站的描述會顯示在搜尋引擎的搜尋的結果中
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>
  • title標籤的內容會作為搜尋結果的超連結上的文字顯示

語義化標籤：

  • 在網頁中HTML專門用來負責網頁的結構，所以在使用html標籤時，應該關注的是標籤的語義，而不是它的樣式。
  • 標題標籤：
    ①h1 ~ h6 一共有六級標題
    ②從h1~h6重要性遞減，h1最重要，h6最不重要
    ③h1在網頁中的重要性僅次於title標籤，一般情況下一個頁面中只會有一個h1
    ④一般情況下標題標籤只會使用到h1~h3，h4~h6很少用
  • 標題標籤都是塊元素
  • 在頁面中獨佔一行的元素稱為塊元素（block element）
  • hgroup標籤用來為標題分組，可以將一組相關的標題同時放入到hgroup
<hgroup>
    <h1>回鄉偶書二首</h1>
    <h2>其一</h2>
</hgroup>
  • p標籤表示頁面中的一個段落，p也是一個塊元素。
  • em標籤用於表示語音語調的一個加重。在頁面中不會獨佔一行的元素稱為行內元素（inline element）。也就是斜體。
  • strong表示強調，重要內容！也就是粗體。
  • blockquote 表示一個長引用，也就是換行加連個tab鍵。
  • q表示一個短引用，也就是雙引號。
  • br標籤表示頁面中的換行，直接換一行。

塊元素與行內元素詳解：

  • 塊元素（block element）：在網頁中一般通過塊元素來對頁面進行佈局
  • 行內元素（inline element）：行內元素主要用來包裹文字
  • 一般情況下會在塊元素中放行內元素，而不會在行內元素中放塊元素
  • 塊元素中基本上什麼都能放
  • p元素中不能放任何的塊元素
  • 瀏覽器在解析網頁時，會自動對網頁中不符合規範的內容進行修正。比如：
    ①標籤寫在了根元素的外部
    ②p元素中巢狀了塊元素
    ③根元素中出現了除head和body以外的子元素
    ④…

佈局標籤（結構化語義標籤）：

  • header 表示網頁的頭部

  • main 表示網頁的主體部分(一個頁面中只會有一個main)

  • footer 表示網頁的底部

  • nav 表示網頁中的導航

  • aside 和主體相關的其他內容（側邊欄）

  • article 表示一個獨立的文章

  • section 表示一個獨立的區塊，上邊的標籤都不能表示時使用section

  • div沒有語義，就用來表示一個區塊，目前來講div還是我們主要的佈局元素

  • span行內元素，沒有任何的語義，一般用於在網頁中選中文字

列表：

  • 在html中也可以建立列表，html列表一共有三種：
    1、有序列表
    2、無序列表
    3、定義列表
  • 有序列表，使用ol標籤來建立無序列表
    ①使用li表示列表項
  • 無序列表，使用ul標籤來建立無序列表
    ①使用li表示列表項
  • 定義列表，使用dl標籤來建立一個定義列表
    ①使用dt來表示定義的內容
    ②使用dd來對內容進行解釋說明
  • 列表之間可以互相巢狀

超連結：

  • 超連結可以讓我們從一個頁面跳轉到其他頁面，或者是當前頁面的其他的位置。
  • 使用 a 標籤來定義超連結
    ①屬性：href 指定跳轉的目標路徑
    <1>值可以是一個外部網站的地址
    <2>也可以寫一個內部頁面的地址
  • 超連結是也是一個行內元素，在a標籤中可以巢狀除它自身外的任何元素
  • target屬性，用來指定超連結開啟的位置
    ①可選值：
    <1>_self 預設值 在當前頁面中開啟超連結
    <2> _blank 在一個新的要麼中開啟超連結
  • 可以直接將超連結的href屬性設定為#，這樣點選超連結以後，頁面不會發生跳轉，而是轉到當前頁面的頂部的位置。
  • 可以跳轉到頁面的指定位置，只需將href屬性設定 #目標元素的id屬性值，id屬性（唯一不重複的）。
  • 可以使用 javascript:; 來作為href的屬性，此時點選這個超連結什麼也不會發生。
  • 每一個標籤都可以新增一個id屬性
  • id屬性就是元素的唯一標識，同一個頁面中不能出現重複的id屬性

相對路徑：

  • 當我們需要跳轉一個伺服器內部的頁面時，一般我們都會使用相對路徑
  • 相對路徑都會使用.或..開頭。
    ①./
    ②../
  • ./可以省略不寫，如果不寫./也不寫…/則就相當於寫了./
  • ./表示當前檔案所在的目錄
  • ../表示當前檔案所在目錄的上一級目錄

圖片標籤：

  • 圖片標籤用於向當前頁面中引入一個外部圖片
    ①使用img標籤來引入外部圖片，img標籤是一個自結束標籤
    ②img這種元素屬於替換元素（塊和行內元素之間，具有兩種元素的特點）
  • 屬性：src 屬性指定的是外部圖片的路徑（路徑規則和超連結是一樣的）
  • alt 圖片的描述，這個描述預設情況下不會顯示，有些瀏覽器會圖片無法載入時顯示
    ①搜尋引擎會根據alt中的內容來識別圖片，如果不寫alt屬性則圖片不會被搜尋引擎所收錄
  • width 圖片的寬度 (單位是畫素)
  • height 圖片的高度
    ①寬度和高度中如果只修改了一個，則另一個會等比例縮放
  • 注意：
    ①一般情況在pc端，不建議修改圖片的大小，需要多大的圖片就裁多大
    ②但是在移動端，經常需要對圖片進行縮放（大圖縮小）
  • 圖片的格式：
    ①jpeg(jpg)
    <1>支援的顏色比較豐富，不支援透明效果，不支援動圖
    <2>一般用來顯示照片
    ②gif
    <1>支援的顏色比較少，支援簡單透明，支援動圖
    <2>顏色單一的圖片，動圖
    ③png
    <1>支援的顏色豐富，支援複雜透明，不支援動圖
    <2>顏色豐富，複雜透明圖片（專為網頁而生）
    ④webp
    <1>這種格式是谷歌新推出的專門用來表示網頁中的圖片的一種格式
    <2>它具備其他圖片格式的所有優點，而且檔案還特別的小
    <3>缺點：相容性不好
  • base64
    ①將圖片使用base64編碼，這樣可以將圖片轉換為字元，通過字元的形式來引入圖片
    ②一般都是一些需要和網頁一起載入的圖片才會使用base64
  • 總結：
    ①效果一樣，用小的
    ②效果不一樣，用效果好的

內聯框架：

  • 內聯框架，用於向當前頁面中引入一個其他頁面
    ①src 指定要引入的網頁的路徑
    ②frameborder 指定內聯框架的邊框

音訊和視訊：

  • audio 標籤用來向頁面中引入一個外部的音訊檔案的。音視訊檔案引入時，預設情況下不允許使用者自己控制播放停止
  • 屬性：
    ①controls 是否允許使用者控制播放
    ②autoplay 音訊檔案是否自動播放
    <1>如果設定了autoplay 則音樂在開啟頁面時會自動播放，但是目前來講大部分瀏覽器都不會自動對音樂進行播放
    ③loop 音樂是否迴圈播放
<audio src="...mp3" controls autoplay loop></audio>
  • 除了通過src來指定外部檔案的路徑以外，還可以通過source來指定檔案的路徑
<audio controls>
    <!--瀏覽器不支援播放音訊，請升級瀏覽器！-->
    <source src="../music/WinterWithoutYou.mp3">
    <source src="../music/WiterWithoutYou.mp3">
    <source src="../music/WinterWithoutYou.mp3">
    <embed src="../music/WinterWithoutYou.mp3" >
</audio>
  • embed標籤：比較老的版本使用，音視訊都可以，預設自動播放。
    ①type指定音訊檔案的型別
    ②width height 需要說明高度
<embed src="../music/WinterWithoutYou.mp3" type="audio/mp3" width="300" height="100">
  • video標籤：向網頁引入一個視訊，使用方式和audio基本一樣。

表格標籤

table表示表格標籤。

  • tr（table row）表示表格的一行
  • td（table data cell）表示表格的一行中的一個單元格
  • th（table head）與td同級，表示行頭
  • 其中的文字還可以用 b（blod 加粗） i （italic 斜體的）修飾
  • 其中的邊距還可以用 cellspacing （單元間隔） 修飾單元格之間的距離與cellpadding（單元填充）修飾 單元格與文字之間的距離

表單標籤

form表示表單標籤，其中重要的表單項有

  • text輸入框
  • password密碼框
  • radio（收音機按鈕）單選框
  • checkbox核取方塊
  • reset 重置按鈕
  • sumbit 提交按鈕
  • button 按鈕
  • file 檔案上傳域
  • hidden 隱藏域
  • select 下拉框
  • textarea多行文字輸入層

表單提交的細節：

  • form 標籤是表單標籤

  • action 屬性設定提交的伺服器地址

  • method 屬性設定提交的方式 GET(預設值)或 POST 表單提交的時候

資料沒有傳送給伺服器的三種情況：

  • 表單項沒有 name 屬性值

  • 單選、複選（下拉選單中的 option 標籤）都需要新增 value 屬性，以便傳送給伺服器

  • 表單項不在提交的 form 標籤中

GET 請求的特點是：

  • 瀏覽器位址列中的地址是：action 屬性[+?+請求引數] 請求引數的格式是：name=value&name=value

  • 不安全 3、它有資料長度的限制

POST 請求的特點是：

  • 瀏覽器位址列中只有 action 屬性值

  • 相對於 GET 請求要安全

  • 理論上沒有資料長度的限制

行內元素,塊級元素, 空元素

簡介：

  • 根據CSS規範的規定，每一個網頁元素都有一個 display屬性，用於確定該元素的型別，每一個元素都有預設的display屬性值，比如div元素， 它的預設display屬性值為“block”，稱為“塊級”元素(block-level)；
  • 而span元素的預設display屬性值為“inline”，稱為“行內”元素。
  • 在HTML元素中，沒有內容的 HTML 元素被稱為空元素。

注意：

  • 塊級元素，會自動佔據一定空間，可以通過設定高度、寬度、內外邊距等屬性，來調整樣子；
  • 與之相反，行內元素，則沒有自己的獨立空間，它是依附於其他塊級元素存在的，因此，對行內元素設定高度、寬度、內外邊距等屬性，都是無效的。
  • CSS中的塊級元素、行內元素和空元素
1、行內元素:預設寬度就是它本身內容的寬度
a - 錨點
abbr - 縮寫
acronym - 首字
b - 粗體 ( 不推薦 )
bdo - bidi override
big - 大字型
br - 換行
cite - 引用
code - 計算機程式碼 ( 在引用原始碼的時候需要 )
dfn - 定義欄位
em - 強調
font - 字型設定 ( 不推薦 )
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文字
label - 表格標籤
q - 短引用
s - 中劃線 ( 不推薦 )
samp - 定義範例計算機程式碼
select - 專案選擇
small - 小字型文字
span - 常用內聯容器，定義文字內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文字輸入框
tt - 電傳文字
u - 下劃線
var - 定義變數

2、塊元素 (block element):寬度預設是容器的100%
address - 地址
blockquote - 塊引用
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級容易，也是 css layout 的主要標籤
dl - 定義列表
fieldset - form控制組
form - 互動表單
h3-大標題
h4 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
isindex - input prompt
menu - 選單列表
noframes - frames可選內容，（對於不支援 frame 的瀏覽器顯示此區塊內容
noscript - ）可選指令碼內容（對於不支援 script 的瀏覽器顯示此內容）
ol - 排序表單
p - 段落
pre - 格式化文字
table - 表格
ul - 非排序列表

3、可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
applet - java applet
button - 按鈕
del - 刪除文字
iframe - inline frame
ins - 插入的文字
map - 圖片區塊 (map)
object - object物件
script - 客戶端指令碼

4、空元素 ( 在 HTML[1] 元素中，沒有內容的 HTML 元素被稱為空元素 )
<br/> //換行
<hr> //分隔線
<input> //文字框等
<img> //圖片
<link> <meta>

相關文章