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實體字符
實體字符也成為特殊字符，用于顯示一些特殊符號 如：<>&空格等
語法：
&實體字符的名稱；
常用實體字符；
<； < 小于號 less than
>； > 大于號 great than
 ； 空格 space 在html中對于連續的空白字符 （空格、縮進、換行等）
&； & 與
"； “ 雙撇號
©； 版權符號 copyright
®； 注冊符號 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.定義描點（標記）
<a name="描點名稱">目標位置</a>2.鏈接描點
<a href="描點名稱">鏈接文本</a>3.3頁面間的錨鏈接
<a href="目標頁面#描點名稱">鏈接文本</a>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列
步驟：
注意：必須要保證每行的實際列數是相同的，否則表格可能會出現錯亂
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.基本語法
語法：
<iframe src=""></iframe>常用屬性：
- src屬性：引用的界面
- frameborder屬性：是否顯示邊框，1（yes）、0（no）
- scrolling屬性：是否顯示滾動條，yes、no、auto（自動）
- width/height屬性：寬度、高度、百分比、像素比
3.在框架中打開超鏈接
<iframe name="hello"></iframe><a href="鏈接地址" target="hello"><鏈接的文本或圖像</a>八.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
<meta charset="UTF-8"><title>HTML學習</title> welcome to html!  2.你好，html 你好，HTML welcome to html!  3.標簽的組成 標簽的組成 < 標簽的組成html從入門到精通<hr><h1>第一課</h1><hr><h2>二級標簽</h2><h1>哈哈</h1>呵呵<hr><span>嘿嘿</span>吼吼 </body>  4.注釋 <meta charset ="UTF-8"><title>Document</title></head><body><!--第一個注釋--></body>
5.實體標簽的字符
Document 圖書：<<HTML從入口到精通>>北京???上海????廣州
在html中用<表示<小于號
"HTML語言"或者 "HTML語言 "
版權所有 ?2000-2020高焦培訓
®&time;關閉符合&aMp;實體字符名稱嚴格區分大小寫，即大小寫敏感  6.常用標簽1 hello world
welcome to html！
HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
<p>超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。 </p> <hr> <h1>一級標題</h1> <h2>二級標題</h2> <h3>四級標題</h3> <h6>六級標題</h6>  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>  8.常用標簽3 Document
2020年網絡游戲排行榜
可愛的同學們
<h3>術語的解釋</h3> <dl><dt>LOL</dt><dd>它是騰訊公司代理的一款游戲，中文名稱叫英雄聯盟</dd><dd>可以分為PC端和移動端</dd><dt>HTML</dt><dd>是一種用來制作網頁的標記語言</dd><dt>JAVA</dt><dd>是一種跨平臺編程語言</dd> </dl>  9.常用標簽4 Document
 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>  11.常用標簽6 Document welcome to HTML!
welcome to HTML!
welcome to 上海市南京東路
HTML從 入門到精通！
HTML從 入門到精通！
原價： 188元，優惠價， 98元
主講： wwwww
水分子的表達式：H 20
2 3=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.頭部標簽
 13.標簽嵌套 Document
hello
</div> </p>   14.超鏈接 Document 百度
百度
b.html
c.html
d  15.錨鏈接 Document
簡介
<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（出品公司：微軟）：其中所見即所得軟件與半所見即所得的軟件相比，開發速度更快，效率更高，且直觀的表現更強。任何地方進行修改只需要刷新即可顯示。缺點是生成的代碼結構復雜，不利于大型網站的多人協作和精準定位等高級功能的實現。
<a href="mailto:439988614@qq.com">聯系我們</a>  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>  19.合并單元格 <meta charset="UTF-8"><title>Document</title> <!-- table>(tr>td{hello$}*4)*4 --><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>  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>
(2) foot.html
<meta charset="UTF-8"><title>Document</title> <p>底部和版權</p>  26.HTML5新增結構相關標簽 <meta charset="UTF-8"><title>Document</title> <article><header>標題</header><section>第一段</section><section>第二段</section><footer>腳注</footer></article><aside>廣告</aside> <br><figure><figcaption>log標識</figcaption><img src="../../image/google.png" alt=""><img src="../../image/facebook.png" alt=""> </figure><nav><ul><li>網頁</li><li>咨詢</li><li>視頻</li><li>圖片</li><li>知道</li><li>貼吧</li> </ul> </nav>  27.HTML5新增語義相關標簽 <meta charset="UTF-8"><title>Document</title> welcome <mark>to</mark> html!<hr>我在<time datetime="2020年3月14日">情人節</time>有個會！<hr><details><summary>HTML簡介</summary><p>HTML是一門用來制作網頁的標簽語言</p><p>HTML可以包含文本、圖像、音頻、視頻等各種多媒體信息</p> </details> <meter max="100" min="1" value="30"></meter> <hr> <meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter> <hr> <meter max="100" min="1" value="5" high="60" low="20" optimum="10"></meter> <hr> <meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter> <hr><meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter> <hr> <meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter> <hr> <meter max="100" min="1" value="15" high="60" low="20" optimum="65"></meter> <hr> <meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter> <meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="90" high="60" low="20" optimum="15"></meter> <hr> <meter max="100" min="1" value="40" high="60" low="20" optimum="65"></meter><meter max="100" min="1" value="10" high="60" low="20" optimum="65"></meter><meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter> <hr><progress value="20" max="50"></progress>  28.HTML5新增表單相關 <meta charset="UTF-8"><title>Document</title> <form action="" autocomplete="on" id="myform"><label for="email">郵箱</label><input type="text" name="email" id="email"><br><label for="home">個人主頁:</label> <input type="url" name="home" id="home"> <br> <label for="phone">電話</label> <input type="tel" name="phone" id="phone"> <br> <label for="keyword">關鍵字</label> <input type="search" name="keyword" id="keyword"> <br> <label for="num">數字</label> <input type="number" name="num" id="num" min="2" max="10" step="2"> <br> <label for="birthday">出生日期：</label> <input type="month" name="birthday" id="birthday"> <br> <label for="color">顏色:</label> <input type="color" name="color" id="color"> <br> <label for="username">用戶名:</label> <input type="text" name="name" id="username" placeholder="請輸入用戶名" required="" autocomplete="off" autofocus=""> <br> <label for="age">年齡：</label> <input type="text" name="age" id="age" pattern="\d{1,2}"> <br> <label for="city">城市</label> <input type="text" name="city" id="ciity"> <datalist id="citylist"><option value="beijing">北京</option><option value="nanjing">南京</option><option value="shanghai">上海</option><option value="tianjin">天津</option> </datalist></form> <hr> <input type="submit" form="myform">  29.HTML5新增多媒體相關 <meta charset="UTF-8"><title>Document</title> <!-- <audio src="../../audio/water.mp3" controls loop muted preload="metadata"></audio> --><audio><source src="../../audio/earth.ogg"><source src="../../audio/water.mp3">您的瀏覽器不支持！</audio><video src="../../video/volcano.mp4" controls width="600px" poster="../../image/p1.jpg"></video> 總結
- 上一篇： i78700k配什么显卡好_八代i7 8
- 下一篇： 前端渲染框架NUXT + UI组件 ve