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

HTML

HTML（总）

發布時間：2023/12/15 HTML 36 豆豆

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

一，HTML簡介：

1，HTML是什么？

HTML ：hyper text markup language從外部標簽語言。

各種標簽組成，用來制作網頁，告訴瀏覽器如何顯示。

2，作用

制作網頁，控制網頁和內容的顯示

插入圖片，音樂，視頻動畫等多媒體

通過鏈接檢索信息

使用表單獲取用戶數據，實現互通

3，HTML 版本

W3C：World Wide web consortium 互聯網聯盟，制定web技術的相關標準和規范的組織，HTML就是由W3C制定的標準

兩個版本：HTML4.0.1，HTML5.0——常稱h5 官網：https://www.w3school.com.cn

4，擴展名

HTML文件的擴展名是以html或htm結尾

eg:hello.html

—typoa

<head><title>第一個HTML學習</title><meta charset = "UTF-8"></head><body>歡迎學習HTML網頁技術！</body>

二.HTML 文檔結構

1，基本結構

1.1簡介

html標簽是由尖括號的關鍵詞，如，通常標簽都是成對出現的
以為根標簽，包含頭部和主體部分
頭部提供關于網頁的相關信息，如標題，文檔類型，字符編碼，關鍵字
摘要信息提供網頁要顯示的內容，真正顯示頁面中的
合理的縮進
標簽區不區分大小寫，但一般小寫

1.2開發工具

記事本，notepad，sublime，notepad++，Dreamweaver，vscode，webstorm等

使用步驟：

1，新建文件保存指定擴展名

2，編寫html代碼

3.在瀏覽器中打開文件進行驗證效果

1.3瀏覽器

常見的瀏覽器 IE微軟，chrome谷歌，firefox火狐，Safari蘋果

瀏覽器作用：讀取html文件，以網頁形式顯示

瀏覽器不會直接顯示html標簽，而是使用標簽來解釋網頁的內容

2.標簽

2.1 標簽的組成

完整html標簽的組成

<標簽名屬性名-“屬性值”>內容</標簽名>

屬性值要用引號引起來，一般使用雙引號

2.2 標簽的分類

根據標簽是否關閉，分為：關閉型和非關閉型

關閉型：又開始標簽，也有結束標簽，一般是成對出現的

(1)標題

(2)主體

(3)

一級標題

非關閉型標簽：只有開始標簽，沒有結束標簽

(1)

(2)

(3)

跟據標簽是否獨占一行，分為：塊級標簽和行級標簽

塊級標簽：顯示為塊狀，獨占一行

(1)

(2)

行級標簽：在行內顯示，可以與其他文本內容

eg:

標簽的組成 </head><<body bgcolor ="red" text="blue">標簽的組成<hr>html從入門到精通<hr><h1>第一課</h1><hr><h2>二級標簽</h2><h1>哈哈</h1>呵呵<hr><span>嘿嘿</span>吼吼 </body>

2.3注釋

注釋在瀏覽器中不會顯示，是用來標注解釋html語句，但通過查看源代碼可以看到

2.4實體字符

實體字符也成為特殊字符，用于顯示一些特殊符號如：<>&空格等

語法：

&實體字符的名稱；

常用實體字符；

&lt； < 小于號 less than

&gt； > 大于號 great than

&nbsp；空格 space 在html中對于連續的空白字符（空格、縮進、換行等）

&amp； & 與

&quot； “ 雙撇號

&copy；版權符號 copyright

&reg；注冊符號 register

&time；關閉符號

注意：實體字符是嚴格區分大小寫，即大小寫敏感

2.5文檔類型

在HTML文檔的第一行，使用聲明html文檔的類型

用來告訴瀏覽器頁面的html文檔類型，簡單來說，用來指定使用的html版本規范

目前基本上都是用的是html5，

三.常用標簽

1.基本表格

標簽含義說明

換行標簽非關閉型標簽

段落標簽關閉型標簽，快型標簽，前后段落之間有明顯的距離
h1 h2…h6 標題標簽標題h1到h6逐漸變小，塊級標簽，加粗顯示預格式化標簽保留編碼時的格式 div 分區標簽常用容器來使用，一般用于頁面布局劃分，塊級標簽 span 范圍標簽默認情況沒有任何效果，一般用來設置行內的特殊格式ol、li 有序列表有順序的項目列表 ul、li 無序列表無順序的項目列表

dl、dt、dd 定義列表對術語、圖片等就行描述和定義的列表
hr 水平線標簽非關閉型標簽，塊級標簽
img 圖像標簽非關閉型標簽，行級標簽

1.1有序列表

ol:ordered list

li:list item

默認情況下使用阿拉伯數字，從1開始標記，可以通過屬性進行修改

type屬性:設置列表前的符合標記，取值，數字1（默認）字母a或A 羅馬數字i或I
start屬性:設置起始值，值必須是數字

1.2無序列表

ul：unodered list

li：list item

默認使用實心圓作為符合標記，可以通過屬性進行修改

type屬性：設置列表前面的符合標記，取值；disc實心圓（默認）、circle空心圓、square正方形、none不顯示符合

1.3定義列表

dl：definition list

dt：definition title

dd：definition description

1.4水平線標簽

hr:horizontal

常用屬性

color顏色
兩種寫法：
顏色名稱：如red、green、blue、white、black、pink、orange等
16進制的RGB：Red Green Blue 用法：#RGBRGBRGB 每種顏色的取值范圍0-255轉換為16進制00-FF
eg：#FF0000紅色、#00FF00綠色、#0000FF藍色、#000000黑色、#CCCCCC、#FF7300
size表示粗細，數值
width寬度
兩種寫法：
像素：絕對值（固定值）
百分比：相對值，相當于該標簽所在的父容器的寬度的百分比
align對齊
取值：默認center left right

1.5圖像標簽

img：image

常見的圖片格式：jpg png gif bmp

常見屬性：

src:source指定圖片的路徑（來源），必選參數

如果圖片與html源代碼在同一個文件夾中，可以直接書寫圖片的名稱

習慣上，會將多個圖片存放到一個單獨的文件夾中，如project\image,此時，需要在圖片名稱的前面添加路徑

路徑的分類：

相對路徑
表示： ./當前路徑
…/當前位置的上一級文件夾
提示：…/image
alt:當圖片無法正常顯示時提示的信息
title:當鼠標停留在圖片上時顯示的提示信息
width/height:設置圖片的寬度和高度
默認情況下原始尺寸顯示如果只設置其中一個，則另一個按比例自動縮放如果同時設置寬和高，可能會導致圖片變形
兩種寫法：像素：絕對值（固定值）
百分比，相對值，相對該標簽所在的上一級父容器的寬度的百分比

2.其他標簽

標簽含義說明 <i></i> 斜體 italic <em></em> 強調的內容在瀏覽器中顯示的為斜體地址在瀏覽器中顯示一般為斜體，塊級標簽加粗 bold 強調的內容在瀏覽器中顯示一般為粗體刪除線 delete 下劃線下標上標設置文本方向通過屬性dir="ltr"(left to right) "rtl"(right to left)從右到左設置文本縮寫通過title屬性設置當前鼠標停留在文字上時顯示的提示信息相當于當前其他文本的字號減小一號相當于當前其他文本的字號增大一號

為了更好的語義化

3.頭部標簽

mata定義網頁的摘要信息，如字符編碼，關鍵字，描述，作者等信息
title定義網頁的標題
style定義內部的CSS樣式
link引用外部的CSS樣式
script定義或引用腳本
base定義基礎路徑
默認以當前頁面文件的所在位置為相對路徑的參照

4.標簽嵌套

一個標簽中嵌套另外一個標簽

標簽不能亂嵌套，如以下標簽的嵌套是錯誤的

<p style="width:300px;height:300px;background:green"> <div style="width:200px;height:200px;background:blue"> world </div> </p>

瀏覽器渲染后顯示的頁面代碼與編碼時有所不同

chrome瀏覽器提供的開發工具：用來幫助開發人員查看和調試頁面的

如何打開：

在頁面中右鍵單擊–>檢查/審查元素/查看元素
按F12

常用工具：

Elements:從瀏覽器的角度來看頁面，瀏覽器渲染頁面時的結構
console:控制臺，顯示各種警告和錯誤信息
network:查看網絡請求信息，瀏覽器向服務器請求了哪些資源、資源大小、加載資源所共費的時間

四、超鏈接

1.簡介

使用超鏈接可以從一個界面跳轉到另一個頁面，實現頁面之間的跳轉

當前鼠標移動到超鏈接文本時，鼠標箭頭會變成一個小手

超鏈接有三種類型：

普通鏈接/頁面鏈接：跳轉到另一個頁面
錨鏈接：跳轉到描點（同一個頁面的某個位置）
功能鏈接：實現特殊功能（發郵件，下載）

2.基本用法

使用標簽創建超鏈接

語法格式：

<a href-"鏈接地址" target="鏈接打開的位置">鏈接文本或圖像</a>

常見屬性：

herf鏈接地址或路徑：鏈接地址

target鏈接打開的位置：取值

_self自身，當前，默認值； _blank新的，空白，新的頁面 _parent父層框架 _top頂層框架，自定義

路徑分類：

相對路徑
相對于當前頁面所在的路徑為參照，不是以根開始的
./當前路徑
…/表示上級路徑
絕對路徑：以根開始的路徑
file://d:/software/b.html
http://www.baidu.com

3.超鏈接

3.1簡介

點擊鏈接后跳轉到頁面的指定位置（描點anchor）

超鏈接的分類：

頁面內的錨鏈接
頁面間的錨鏈接

3.2頁面內的錨鏈接

步驟：1.定義描點（標記）

2.鏈接描點

3.3頁面間的錨鏈接

4.功能標簽

5.URL

5.1簡介

URL: uniform resource locator 統一資源定位器，用來定位資源所在的位置

1.https://www.baidu.com/img/bd_logo1.pngname=tom&age=2&sex=male 2.https://www.w3school.com.cn/html/html_quotation_elements.asp 3.file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html 4.http://www.sxgjpx.net/ 5.ftp://10.255.254.253/

5.2 組成

1.https://www.w3school.com.cn/html5/index.asp 2.http://www.sxgjpx.net 3.file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8 E%A5.html 4.ftp://10.255.254.253/ 5.https://www.baidu.com/img/bd_logo1.png

一個完整的URL由8個部分組成：

協議：prococol 如
http:超文本傳輸協議，用來訪問web網站Hyper text Transter protocol
https:更加安全的協議，SSL安全套接子層
ftp：文件傳輸協議，用來訪問服務器上的文件，實現文件的上傳和下載file Transter protocol
file：文件協議，用來訪問本地協議
主機名hostname服務器地址或服務器netbios名稱，如www.baidu.com ftp://10.255.254.254
端口：port位于主機名的后面，使用冒號進行分隔
不同的協議使用不同的端口，如http使用80端口，https使用的443端口，ftp使用20和21
如果使用的是默認端口，則端口可以省略
如果使用的不是默認端口，則必須制定端口http://59.49.32.213:7070/
路徑：path目標文件所在的路徑結構，如https://www.bilibli.com/video/av93425449//
資源：resource要訪問的目標文件，如bd_logo1.png
查詢字符串：query string也稱為參數
在資源后面使用？開頭的一組名稱/值
名稱和值之間以=分隔，多個表達式之間用&分隔，如：name=tom&age=2&sex=male
錨點anchor，在資源后面使用#開頭的文本，如#6
身份認證：authentication.指定身份信息，如ftp://賬戶:密碼@ftp.bbshh010.com

五、表格

1.簡介

表格是一個規則的行列結構，每個表格是由若干行組成的，每行是由若干個單元格組成

table、row、column

2.基本結構

2.1 table標簽

用來定義表格

常用屬性：

border :邊框，默認值為0
width/height寬度/高度
align對齊方式取值：left，center，right
bordercolor：邊框顏色
bgcolor：背景顏色
background：背景圖片
cellspacing：間距，單元格與單元格之間的距離
cellpadding：邊距，單元格內容與邊界之間的距離

2.2 tr標簽

用來定義行：table row

2.3 td標簽

用來定義單元格：table data

常用屬性：align、valign、bgcolor、background

3.合并單元格

合并單元格也稱為表格的跨行和跨列

兩個屬性：

rowspan
設置單元格所跨的行數，如rowspan=“2” 表示所跨行數為2
colspan
設置單元格所跨的列數，如colspan=“4” 表示跨越4列

步驟：

在跨值得單元格中設置rowspan/colspan屬性

將被跨越的單元格刪除
注意：必須要保證每行的實際列數是相同的，否則表格可能會出現錯亂

4.高級標簽

4.1caption標簽

表格的標題標簽

4.2thead標簽

表格的頭部table head

4.3th標簽

表格的頭部標簽table head title

一般在thead中，設置頭部標簽，替代td標簽，與td的區別，加粗和居中對齊

4.4 tbody標簽

表格的主體 table body

4.5 tfoot標簽

表格的底部 table foot

六.表單

1.簡介

表單是一個包含若干個表單元格的區域，用于獲取不同類型的用戶信息

表單元素是允許用戶在表單元格中輸入信息的元素，如：文本框，密碼框，單選按鈕，復選框，下拉列表，按鈕等

2.表單結構

2.1表單的語法

<form action="" mehtod="">多個表單元素 </form>

2.2form標簽

用來定義表單，可以包含多個表單元素

常用屬性：

action提交數據給處理，即處理數據的程序，默認為當前頁面，并且以查詢字符串的形式來表現
method提交數據的方式，取值：get（默認）、post
get和post的區別：
get以查詢字符串形式提交，在地址欄中能夠看到，長度有限制，不安全
post以表單數據組形成提交，在地址欄中看不到，長度無限制，安全
enctype提交數據的編碼，取值：application/x-www-form-urlencoded(默認)，multipart/form-data（文件上傳）

3.表單元素

大多數表單元素都是使用標簽來定義，通過設置type屬性來定義不同的表單元素

<input type="表單元素的類型" name="名稱" value="默認值" size="寬度"

表單元素的類型含義說明
text 單行文本框省略時默認就是text
password 密碼框輸入時以點顯示，安全
radio 單選按鈕只能選擇其中一個
CheckBox 復選框同時選擇多個
submit 提交按鈕提交表單數據
reset 重置按鈕重置表單元素的初始值
image 圖像按鈕可以使用圖片作為按鈕，也具有提交功
button 普通按鈕默認情況下無功能
file 文件選擇器選擇要上傳的文件
hidden 隱藏域在頁面上不顯示，但是會提交，可以用來存儲數據

3.1單行文本框

常用屬性：

name屬性：名稱，很重要，如果沒有指定name，則表單元素的數據是無法提交的
value屬性：當用戶沒有輸入數據時，文本框中的默認值
size文本框顯示寬度
maxlength最大字符數，默認是沒有限制的
readonly只讀readonly=“readonly”，可以簡寫readonly，即只寫屬性名
disabled屬性：不可用，禁用。disabled=“disabled”，也可直接寫disabled完全被禁用
readonly和disable的區別：前者的數據會提交，后者數據不會被提交

3.2 單選按鈕

常用屬性：

name屬性：名稱，多個radio的name屬性必須相同，這樣才可以實現互斥（單選）
value屬性：值，
checked：是否被選中，有兩種狀態，選中與未選中，<checked=“checked”>簡寫

3.3復選框

常用屬性：與radio相同

3.4文件選擇器

常用屬性：

name屬性：名稱
accept屬性：設置可選的文件類型，用來限制上傳文件的類型
使用MIME格式字符串對資源類型進行限制
常見MIME類型：
純文本：text/plain text/html text/xml
圖像：image/png、image/gif、image/jpeg

4.特殊表單元素

表單元素含義說明
select 下拉列表
option 列表的選項
optgroup 選項組用來對option進行分組
textarea 文本域/多行文本框用于創建一個多行文本框

4.1下拉列表

select常用屬性：

name屬性，名稱
size下拉列表所顯示的行數，同時顯示多個選項
multiple，允許同時選擇多個

option常用屬性：

value選項值
selected，設置默認選住的項

4.2文本域

常用屬性：

name屬性：
rows屬性：行數
cols屬性：列數

5.其他表單元素

5.1label標簽

為表單元素提供一個標簽，當選中label標簽中的文本時會自動切換到與之相關聯的表單元素中

常用屬性：

for屬性：必須將該屬性的值設置為與之相關聯的表單元素的ID屬性值相同

注意：幾乎所有的HTML標簽所有ID屬性，且ID屬性值必須統一

5.2button標簽

也表示按鈕，與input按鈕類似

語法：

<button type="按鈕類型">按鈕文本或圖像</input>

常用屬性：

type按鈕的類型：取值submit（默認）、reset、button

5.3filedset和legend標簽

filedset標簽：對表單元素進行分組

legend標簽：對分組添加標簽

七、內嵌框架

1.簡介

使用iframe可以在一個頁面中引用另一個頁面，實現頁面代碼的復用、靈活

2.基本語法

語法：

常用屬性：

src屬性：引用的界面
frameborder屬性：是否顯示邊框，1（yes）、0（no）
scrolling屬性：是否顯示滾動條，yes、no、auto（自動）
width/height屬性：寬度、高度、百分比、像素比

3.在框架中打開超鏈接

八.HTML簡介

1.發展

W3C于1992年12月發布了HTML4.0.1標準

W3C于2014年10月發布了HTML5標準

2.特點：

取消了過時的標簽，如foot、center等，它們僅限于展示外觀
增加了一些更加具有語義化的標簽，如header、footer、aside
增加了一些功能標簽，如audio、video、canvas等
增加了一些表單控制，如email、date、time、url、search等
增加了本地存儲的功能

3.兼容性

http://canluse.com

提供了個瀏覽器版本對HTML5和CSS3規范的支持度

九.HTML5新增內容

1.結構相關的標簽

用來進行頁面的布局，本身無無任何特殊樣式，需要使用CSS進行央視設置

article定義一個獨立的內容，完整的文章
section定義文檔的章節段落
header文章的頭部、頁面、標題
footer文章的底部、頁腳、標注
aside定義側邊欄
figure圖片區域
figcaption圖片標題
nav導航

2.語義相關的標簽

2.1mark標簽

標記、用來突出顯示文本，默認會添加黃色的底紋或背景

2.2time標簽

定義日期和時間

2.3details和summary標簽

默認顯示summary中的內容，點擊后顯示details中的內容

注：并不是所有的瀏覽器都兼容，Chrome、Opera支持，Firefox不支持

2.4meter標簽

計數儀，表示度量

常用屬性：

max定義最大值，默認為1
min定義最小值，默認為0
value定義當前值
high定義限定為高的值
low定義為低的值
optimum定義最佳值

規則：

1.如果optimum大于high時，則表示越大越好

當value值大于high時為綠色

當value值在high和low之間為黃色

當value值小于low時為紅色

2.如果optimum小于high時，則表示越小越好

當value值小于low時為綠色

當value值在high和low之間為黃色

當value值大于high時為紅色

3.當optimum介于low和high之間時，則表示值在low和high之間最好

當value在low和high之間為綠色，不在為黃色

2.5progress標簽

表示進度條，運行中的進度

常用屬性：

value：定義當前的值
max：定義完成的值

3.表單相關

3.1新增表單元素

新增以下type類型：

email：接受郵箱
url：接受url（統一接受資源器）
tel：接受電話號碼，目前只在移動設備上有效
search：搜索文本框
number/range（范圍）：接受數字/數字滑塊，包含min、max、step屬性
date/month/week/time/datetime：表示日期，但兼容性不太好
color：顏色拾取

作用：

具有格式校驗的功能
可以與移動設備的鍵盤進行關聯

3.2 新增表單屬性

form標簽屬性：

autocomplete：是否啟用表單的自動完成功能，取值on（默認）、off
novialidate：提交表單時不進行校驗、默認會進行表單校驗

3.3新增表單元素屬性

新增表單元素屬性：input/select/textarea等

placeholder：提示文字
required：是否必填
autocomplete：是否啟用該表單元素的自動完成功能
autofocus：設置初始焦點元素
pattern：使用正確的表達式（RegExp后面會講解），進行數據校驗
list：使文本元素具有下拉列表的功能，需要配置datalist和option標簽一起使用
form：可以將表單元素寫在form標簽的外部，然后通過該屬性來關聯到指定的表單

4.多媒體標簽

4.1audio 標簽

在頁面上插入音頻，不同的瀏覽器對音頻格式的支持不一致

audio常用標簽：

src：音頻文件的來源
controls：是否顯示控制面板，默認不顯示
autoplay：是否自動播放，默認不自動播放
loop：是否循環播放
muted：是否靜音
preload：是否預加載。取值：none不預加載、auto預加載（默認）、metadata只加載元數據
如果設置了autoplay屬性，則該屬性無效

可以結合source標簽使用，指定多個音頻文件，瀏覽器會檢測并使用第一個可用的音頻文件

4.2video標簽

在頁面中插入視頻，不同的瀏覽器對視頻格式的支持不一樣

用法與audio標簽基本相同，增加屬性：

width/height：視頻播放器的寬度/高度
poster：在視頻加載前顯示的圖片

1.歡迎來到html

html從入門到精通<hr><h1>第一課</h1><hr><h2>二級標簽</h2><h1>哈哈</h1>呵呵<hr><span>嘿嘿</span>吼吼 </body> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322123646114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 4.注釋 <meta charset ="UTF-8"><title>Document</title></head><body></body>

5.實體標簽的字符

Document 圖書：<<HTML從入口到精通>>

北京???上海????廣州

在html中用<表示<小于號

"HTML語言"或者 "HTML語言 "

®&time;關閉符合&aMp;實體字符名稱嚴格區分大小寫，即大小寫敏感 ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322123757200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 6.常用標簽1 hello world
welcome to html！

HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

<p>超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。 </p> <hr> <h1>一級標題</h1> <h2>二級標題</h2> <h3>四級標題</h3> <h6>六級標題</h6> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322123948399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 7.常用標簽2 Document HTML從入門到精通主講：hector

<div style="width: 400px;height:100px;background: red">導航部分</div> <div style="width: 400px;height:500px ;background: yellow">導航部分</div> <div style="width: 400px;height:100px ;background: blue">導航部分</div>iphone XR,不要8888，不要1888，只要<span style="font-size: 50px;color: red">98元</span> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124103823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 8.常用標簽3 Document

2020年網絡游戲排行榜

吃雞

王者農藥

LOL

WOW

可愛的同學們

張三

李四

小五

小六

<h3>術語的解釋</h3> <dl><dt>LOL</dt><dd>它是騰訊公司代理的一款游戲，中文名稱叫英雄聯盟</dd><dd>可以分為PC端和移動端</dd><dt>HTML</dt><dd>是一種用來制作網頁的標記語言</dd><dt>JAVA</dt><dd>是一種跨平臺編程語言</dd> </dl> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124316800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 9.常用標簽4 Document

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124645153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 10.常用標簽5 Document

<img src="../image/mac.jpg" width="400px" height="100px"> <hr><img src="../image/mac.jpg" width="50%"> <hr> <div style="width: 800px;height: 800px;background:red;"><img src="../image/mac.jpg" width="50%"> </div> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322124804978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 11.常用標簽6 Document welcome to HTML!

welcome to HTML!

welcome to 上海市南京東路

HTML從入門到精通！

原價： 188元，優惠價， 98元
主講： wwwww

水分子的表達式：H ₂0
2 ³=8

<bdo dir="rtl">welcome to html!</bdo> <br> <bdo dir="rtl">上海自來水來自海上</bdo> <hr><abbr title="Hyper Markup Language">HTML</abbr> <br> <span title="Hyper Markup Language">HTML</span> <hr>HTML從<small>入門到精通</small><br> HTML從<big>入門到精通</big>

12.頭部標簽

<title>Document</title>  <style>body{color:red;}</style>  <link rel="stylesheet" href="CSS文件的路徑">   <base href="../image/"> IT教育，全國計算機等級考試

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125027507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 13.標簽嵌套 Document

hello

</div> </p>

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125101955.png) ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125117490.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 14.超鏈接 Document 百度
百度

b.html

c.html
d ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125206847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 15.錨鏈接 Document

簡介

HTML版本

特點

編輯方式

整理結構

相關要求

簡介

<P> HTML的英文全稱是 Hypertext Marked Language，即超文本標記語言。HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現在所見到的網頁。 </p> <p> 自1990年以來，HTML就一直被用作WWW的信息表示語言，使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種建立網頁文件的語言，通過標記式的指令(Tag)，將影像、聲音、圖片、文字動畫、影視等內容顯示出來。事實上，每一個HTML文檔都是一種靜態的網頁文件，這個文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，非常簡單。HTML的普遍應用就是帶來了超文本的技術―通過單擊鼠標從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面，與世界各地主機的文件鏈接超文本傳輸協議規定了瀏覽器在運行HTML文檔時所遵循的規則和進行的操作。HTTP協議的制定使瀏覽器在運行超文本時有了統一的規則和標準。 </P> <p><a name="second">HTML版本</a></p> <p>HTML是用來標記Web信息如何展示以及其他特性的一種語法規則，它最初于1989年由GERN的Tim Berners-Lee發明。HTML基于更古老一些的語言SGML定義，并簡化了其中的語言元素。這些元素用于告訴瀏覽器如何在用戶的屏幕上展示數據，所以很早就得到各個Web瀏覽器廠商的支持。 </p> <p>HTML歷史上有如下版本： ①HTML 1.0：在1993年6月作為互聯網工程工作小組(IETF)工作草案發布。<br> ②HTML 2.0：1995年1 1月作為RFC 1866發布，于2000年6月發布之后被宣布已經過時。 <br> ③HTML 3.2：1997年1月14日，W3C推薦標準。 <br> ④HTML 4.0：1997年12月18日，W3C推薦標準。<br> ⑤HTML 4.01（微小改進）：1999年12月24日，W3C推薦標準。<br> ⑥HTML 5：HTML5是公認的下一代Web語言，極大地提升了Web在富媒體、富內容和富應用等方面的能力，被喻為終將改變移動互聯網的重要推手。<br> </p><p><a name="three">特點</a></p> <p> 超級文本標記語言文檔制作不是很復雜，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特點如下： [4] 簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。 [4] 可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 [4] 平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。 [4] 通用性：另外，HTML是網絡的通用語言，一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。 </p><p><a name="four">編輯方式</a></p> <p> HTML其實是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：

基本文本、文檔編輯軟件，使用微軟自帶的記事本或寫字板都可以編寫，當然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣就方便瀏覽器認出直接解釋執行了。 [7]
半所見即所得軟件，如：FCK-Editer、E-webediter等在線網頁編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開發，Sublime Text2收費但可以無限期試用）。 [7]
所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網頁，如：AMAYA（出品單位：萬維網聯盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。Microsoft Visual Studio（出品公司：微軟）：其中所見即所得軟件與半所見即所得的軟件相比，開發速度更快，效率更高，且直觀的表現更強。任何地方進行修改只需要刷新即可顯示。缺點是生成的代碼結構復雜，不利于大型網站的多人協作和精準定位等高級功能的實現。

<p><a name="five">整體結構</a></p> <p> 一個網頁對應多個HTML文件，超文本標記語言文件以.htm（磁盤操作系統DOS限制的外語縮寫）為擴展名或.html（外語縮寫）為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產生超文本標記語言文件，只用修改文件后綴即可。標準的超文本標記語言文件都具有一個基本的整體結構，標記一般都是成對出現（部分標記除外例如：<br/>），即超文本標記語言文件的開頭與結尾標志和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用于頁面整體結構的確認。 [10] 標記符<html>，說明該文件是用超文本標記語言（本標簽的中文全稱）來描述的，它是文件的開頭;而</html>，則表示該文件的結尾，它們是超文本標記語言文件的開始標記和結尾標記。 </p><p><a name="six">相關要求</a></p> <p> 在編輯超文本標記語言文件和使用有關標記符時有一些約定或默認的要求。 [9] 文本標記語言源程序的文件擴展名默認使用htm（磁盤操作系統DOS限制的外語縮寫為擴展名）或 html（外語縮寫為擴展名），以便于操作系統或程序辨認，除自定義的漢字擴展名。在使用文本編輯器時，注意修改擴展名。而常用的圖像文件的擴展名為gif和jpg。 [9] 超文本標記語言源程序為文本文件，其列寬可不受限制，即多個標記可寫成一行，甚至整個文件可寫成一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標記指定除外）；對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號（實體符）“&nbsp（注意此字母必須小寫，方可空格）”表示非換行空格；表示文件路徑時使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。 [9] 標記符中的標記元素用尖括號括起來，帶斜杠的元素表示該標記說明結束；大多數標記符必須成對使用，以表示作用的起始和結束；標記元素忽略大小寫，即其作用相同，但完整的空格可使用特殊符號“&nbsp（注意此字母必須小寫，方可空格）”；許多標記元素具有屬性說明，可用參數對元素作進一步的限定，多個參數或屬性項說明次序不限，其間用空格分隔即可；一個標記元素的內容可以寫成多行。 [9] 標記符號，包括尖括號、標記元素、屬性項等必須使用半角的西文字符，而不能使用全角字符。 [9] HTML注釋由"“結束結束，例如。注釋內容可插入文本中任何位置。任何標記若在其最前插入驚嘆號，即被標識為注釋，不予顯示。 </p></body> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125327540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 16.頁面間的錨鏈接 Document

簡介

HTML版本

特點

編輯方式

整理結構

相關要求

![在這里插入圖片描述](https://img-blog.csdnimg.cn/2020032212535969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 17.功能鏈接 Document 點擊此處下載鏈接
<a href="mailto:439988614@qq.com">聯系我們</a> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125442202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 18.表格 <meta charset="UTF-8"><title>Document</title> <table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../image/bg.gif" cellspacing="0" cellpadding="0px" ><tr align="right" valign="top"><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr><tr align="center" valign="middle" bgcolor="blue"><td>hello</td><td bgcolor="yellow" valign="bottom">hello</td><td>hello</td><td>hello</td></tr><tr valign="bottom" background="../../image/qq.jpg"><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr></table> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125517676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 19.合并單元格 <meta charset="UTF-8"><title>Document</title> <table border="1" width="500px" height="300px"><tr><td colspan="4" align="center">hello</td></tr><tr><td rowspan="3">hello1</td><td>hello2</td><td>hello3</td> <td>hello4</td></tr><tr><td>hello2</td><td rowspan="2" colspan="2">hello3</td></tr><tr><td>hello2</td></tr></table> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125549333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 20.表格的高級標簽 Document <caption><h2>基本信息表</h2></caption><thead><th>學號</th><th>姓名</th><th>年齡</th><th>性別</th></thead><tbody bgcolor="cyan" align="left"><tr><td>1101</td><td>王五</td><td>19</td><td>男</td></tr><tr><td>1102</td><td>李四</td><td>19</td><td>男</td></tr><tr><td>1103</td><td>張三</td><td>20</td><td>男</td></tr><tr><td>1104</td><td>馬六</td><td>20</td><td>男</td></tr></tbody>

<tr><td width="40%">總計人數</td><td colspan="3">4</td></tr> </table> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322125627288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 21.表格的基本用法 <meta charset="UTF-8"><title>Document</title> <h2>用戶注冊</h2><form action="" method="get" enctype="application/x-www-form-urlencoded">用戶名：<input type="text" name="user_name" value="無名氏" ><br>密碼：<input type="text" name="pwd" size="20" maxlength="6"><br>年齡：<input type="text" name="age" disabled><br><input type="submit" value="確認"></form> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322130503666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 22.表單的基本用法2 <meta charset="UTF-8"><title>Document</title> <h2>用戶注冊</h2><form action="" method="get" enctype="application/x-www-form-urlencoded">用戶名：<input type="text" name="user_name" value="無名氏" ><br>密碼：<input type="text" name="pwd" size="20" maxlength="6"><br>年齡：<input type="text" name="age" ><br>性別：<input type="radio" name="sex" value="male"><input type="radio" name="sex" value="remale" checked><br>愛好：<input type="checkbox" name="hobby" value="eat">吃飯 <input type="checkbox" name="hobby" value="sleep">睡覺 <input type="checkbox" name="hobby" value="doudou">打豆豆 <br>頭像：<input type="file" name="head" accept="image/jpeg"><input type="hidden" name="usr_id" value="9528"> <hr><input type="submit" value="注冊"><input type="reset" value="重置"><hr><input type="image" src="../../image/submit.gif"> <input type="image" src="../../image/reset.gif"> <hr><input type="button" value="普通按鈕"> </form> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322130559848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 23.特殊的表單元素 <meta charset="UTF-8"><title>Document</title> <form action="">學歷：<select name="degree"><option value="0">--請選擇學歷--</option><option value="dazhuan">大專</option><option value="benke" selected>本科</option><option value="yanjiusheng">研究生</option><option value="shuoshi">碩士</option></select> 城市： <select name="city" > <optgroup lable="山西省"><option value="taiyuan">太原</option><option value="datong">大同</option> </optgroup> <optgroup lable="山東省"><option value="qingdao">青島</option><option value="jinan">濟南</option> </optgroup> <optgroup lable="江蘇省"><option value="nanjing">南京</option><option value="yangzhou">揚州</option> </optgroup> </select> <br> 個人簡介： <textarea name="intrduce" rows="10" cols="20" endonly>請遵守本網站的相關協議和國家的法律法規請遵守本網站的相關協議和國家的法律法規請遵守本網站的相關協議和國家的法律法規請遵守本網站的相關協議和國家的法律法規請遵守本網站的相關協議和國家的法律法規請遵守本網站的相關協議和國家的法律法規請遵守本網站的相關協議和國家的法律法規 </textarea> <hr> <input type="submit"> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322130846255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 24.其他表單元素 <meta charset="UTF-8"><title>Document</title> <legend>個人信息</legend><lable for="">用戶名：</lable><input type="text" name="usrname" id="name"><br><lable for="">郵箱：</lable><input type="text" name="email" id="email"> <hr><input type="submit" value="提交按鈕"><input type="reset" value="重置按鈕"> <input type="image" src="../../image/submit.gif"> <input type="button" value="普通按鈕"><hr><button type="submit">提交按鈕</button> <button type="reset">重置按鈕</button> <button type="button">普通按鈕</button> <button><img src="../../image/submit.gif" alt=""></button> <legend>院校信息</legend>學號：<input type="text" name="stuID"><br>學校：<input type="text" name="stuSchool"><br>專業：<input type="text" name="stuMajor"><br> ![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200322131019682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdxYXp3c3hlZGM=,size_16,color_FFFFFF,t_70) 25.內嵌框架 <meta charset="UTF-8"><title>Document</title> <iframe src="top.html" width="100%" height="250" frameborder="0" scrolling=""></iframe><h3>主體部分</h3><hr><a href="01.表格.html" target="hello">01.html</a> <a href="02.合并單元格.html" target="hello">02.html</a> <br><iframe src="./foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe> (1) top.html <meta charset="UTF-8"><title>Document</title> <ul><li>網頁</li><li>咨詢</li><li>視頻</li><li>圖片</li><li>知道</li><li>貼吧</li></ul>

(2) foot.html

總結

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

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

html

上一篇： i78700k配什么显卡好_八代i7 8
下一篇：省份、区域（华南，华北...）自定义颜色