「HTML4」HTML入門

簽

標(biāo)簽：又稱元素，是HTML的基本組成單位雙標(biāo)簽（絕大多數(shù)都是雙標(biāo)簽）：<標(biāo)簽名>標(biāo)簽體</標(biāo)簽名>第一個(gè)標(biāo)簽叫起始標(biāo)簽，第二個(gè)標(biāo)簽叫結(jié)束標(biāo)簽例：<marquee>尚硅谷，讓天下沒有難學(xué)的技術(shù)！</marquee>單標(biāo)簽：<標(biāo)簽名/>/可以省略例：<input>
標(biāo)簽名不區(qū)分大小寫，但推薦小寫，因?yàn)樾懜?guī)范
標(biāo)簽之間的關(guān)系：并列關(guān)系、嵌套關(guān)系，可以使用 tab 鍵進(jìn)行縮進(jìn)
1
2
3
4
5
<marquee>
尚硅谷，讓天下沒有難學(xué)的技術(shù)！
<input>
</marquee>
<input>

標(biāo)簽屬性

用于給標(biāo)簽提供附加信息
可以寫在起始標(biāo)簽或單標(biāo)簽中，形式如下：<標(biāo)簽名屬性名="屬性值" 屬性名="屬性值">
1
2
<marquee loop="1" bgcolor="orange">尚硅谷，讓天下沒有難學(xué)的技術(shù)！</marquee>
<input type="password">
有些特殊的屬性，沒有屬性名，只有屬性值，如：<input disabled>

不同的標(biāo)簽，有不同的屬性；也有一些通用屬性（在任何標(biāo)簽內(nèi)都能寫）屬性名、屬性值不能亂寫，都是W3C規(guī)定好的屬性名、屬性值，都不區(qū)分大小寫，但推薦小寫雙引號(hào)，也可以寫成單引號(hào)，甚至不寫，但推薦寫雙引號(hào)標(biāo)簽中不要出現(xiàn)同名屬性，否則后寫的會(huì)失效，例如：<input type="text" type="password">

基本結(jié)構(gòu)

想要呈現(xiàn)在網(wǎng)頁中的內(nèi)容寫在body標(biāo)簽中
head標(biāo)簽中的內(nèi)容不會(huì)出現(xiàn)在網(wǎng)頁中
head標(biāo)簽中的title標(biāo)簽可以指定網(wǎng)頁的標(biāo)題
1
2
3
4
5
6
7
8
<html>
<head>
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
......
</body>
</html>

注釋

特點(diǎn)：注釋的內(nèi)容會(huì)被瀏覽器所忽略，不會(huì)呈現(xiàn)到頁面中，但源代碼中依然可見
作用：對(duì)代碼進(jìn)行解釋和說明
寫法
1
2
3
4

<marquee loop="1">尚硅谷</marquee>

<marquee>尚硅谷123</marquee>
注釋不可以嵌套

文檔聲明

作用：告訴瀏覽器當(dāng)前網(wǎng)頁的版本
寫法

舊寫法：要依網(wǎng)頁所用的HTML版本而定，寫法有很多參考：W3C QA - 可在 Web 文檔中使用的 Doctype 聲明的推薦列表
新寫法：W3C 推薦使用 HTML 5 的寫法
1
2
3
4
5
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

文檔聲明必須在網(wǎng)頁的第一行，且在html標(biāo)簽的外側(cè)

字符編碼

計(jì)算機(jī)對(duì)數(shù)據(jù)的操作存儲(chǔ)時(shí)，對(duì)數(shù)據(jù)進(jìn)行：編碼讀取時(shí)，對(duì)數(shù)據(jù)進(jìn)行：解碼
編碼、解碼，會(huì)遵循一定的規(guī)范 —— 字符集
常見的字符集ASCII：大寫字母、小寫字母、數(shù)字、一些符號(hào)，共計(jì)128個(gè)ISO 8859-1：在 ASCII 基礎(chǔ)上，擴(kuò)充了一些希臘字符等，共計(jì)是256個(gè)GB2312：繼續(xù)擴(kuò)充，收錄了 6763 個(gè)常用漢字、682個(gè)字符GBK：收錄了的漢字和符號(hào)達(dá)到 20000+ ，支持繁體中文UTF-8 ：包含世界上所有文字與符號(hào)
為了讓瀏覽器在渲染html文件時(shí)，不犯錯(cuò)誤，可以通過meta標(biāo)簽配合charset屬性指定字符編碼
1
2
3
<head>
<meta charset="UTF-8"/>
</head>

設(shè)置語言

主要作用讓瀏覽器顯示對(duì)應(yīng)的翻譯提示有利于搜索引擎優(yōu)化
具體寫法：<html lang="zh-CN">
lang屬性的編寫規(guī)則語言-國家/地區(qū)zh-CN ：中文-中國大陸（簡體中文）zh-TW ：中文-中國臺(tái)灣（繁體中文）zh ：中文en-US ：英語-美國en-GB ：英語-英國語言—具體種類（已不推薦使用）zh-Hans ：中文—簡體zh-Hant ：中文—繁體W3School 上的說明：《語言代碼參考手冊(cè)》、《國家/地區(qū)代碼參考手冊(cè)》 W3C官網(wǎng)上的說明：《Language tags in HTML》

標(biāo)準(zhǔn)結(jié)構(gòu)

HTML標(biāo)準(zhǔn)結(jié)構(gòu)如下
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>

</body>

</html>

VSCode 刪除行快捷鍵：Ctrl+Shift+K

輸入!，隨后回車即可快速生成標(biāo)準(zhǔn)結(jié)構(gòu)
配置VScode 的內(nèi)置插件 emmet ，可以對(duì)生成結(jié)構(gòu)的屬性進(jìn)行定制
在存放代碼的文件夾中，存放一個(gè) favicon.ico 圖片，可配置網(wǎng)站圖標(biāo)

TML5以HTML4為基礎(chǔ)，對(duì)HTML4進(jìn)行了大量的修改。

介紹HTML5對(duì)HTML4到底進(jìn)行了哪些修改？它們之間比較大的區(qū)別是什么？

1　語法的改變

HTML5的語法變化

HTML5中，語法發(fā)生了很大的變化。或許有人會(huì)抱著異常驚訝和不安地問“HTML普及到何種程度”“根本的語法發(fā)生了變化，會(huì)有多大影響”。

只是，HTML5的“語法變化”和其他編程語言所謂的語法變更意義有所不同。為什么這么說呢？原因比較特殊，因?yàn)橐郧暗腍TML幾乎沒有遵循規(guī)范實(shí)現(xiàn)的Web瀏覽器。

　現(xiàn)有瀏覽器與規(guī)范背離

HTML的語法是在SGML（Standard Generalized Markup Language）語言的基礎(chǔ)上來規(guī)定的。但是由于SGML的語法非常復(fù)雜，文檔結(jié)構(gòu)解析程序的開發(fā)也不太容易，多數(shù)Web瀏覽器不作為SGML解析器運(yùn)行。由此，HTML規(guī)范中雖然要求“應(yīng)遵循SGML的語法”，但實(shí)際情況卻是遵循規(guī)范實(shí)現(xiàn)的Web瀏覽器幾乎不存在。

　規(guī)范向?qū)崿F(xiàn)靠攏

如上所述，HTML5中提高Web瀏覽器間的兼容性是重大的目標(biāo)之一。要確保兼容性，必須消除規(guī)范與實(shí)現(xiàn)的背離。因此HTML5以近似現(xiàn)有的實(shí)現(xiàn)，重新定義了新的HTML語法，使規(guī)范向?qū)崿F(xiàn)靠攏。由于文檔結(jié)構(gòu)解析的算法也有著詳細(xì)的記載，使得Web瀏覽器開發(fā)者可以專注于遵循規(guī)范去進(jìn)行實(shí)現(xiàn)工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已經(jīng)內(nèi)置了遵循HTML5規(guī)范的解析器。IE（Internet Explorer）和Opera也為了能夠提供更好的兼容性實(shí)現(xiàn)而緊鑼密鼓地努力著。

2　可編輯列表實(shí)例

將<div>、<table>元素轉(zhuǎn)換成可編輯狀態(tài)。

3　可編輯的div和table元素

designMode屬性

designMode屬性用來指定整個(gè)頁面是否可編輯，當(dāng)頁面可編輯時(shí)，頁面中任何支持上文所述的contentEditable屬性的元素都變成了可編輯狀態(tài)。designMode屬性只能在JavaScript腳本里被編輯修改。該屬性有兩個(gè)值——on與off。當(dāng)屬性被指定為on時(shí)，頁面可編輯；被指定為off時(shí)，頁面不可編輯

打開designMode屬性

說明絕大部分瀏覽器都已支持designMode屬性，如Internet Explorer9、Chrome、Firefox、Opera和Safari等瀏覽器都可支持designMode屬性。

hidden屬性

hidden屬性類似于aria-hidden，它告訴瀏覽器這個(gè)元素的內(nèi)容不應(yīng)該以任何方式顯示。但是元素中的內(nèi)容還是瀏覽器創(chuàng)建的，也就是說頁面裝載后允許使用JavaScript腳本將該屬性取消，取消后該元素變?yōu)榭梢姞顟B(tài)，同時(shí)元素中的內(nèi)容也即時(shí)顯示出來。hidden屬性是一個(gè)布爾值的屬性，當(dāng)設(shè)為true時(shí)，元素處于不可見狀態(tài)；當(dāng)設(shè)為false時(shí)，元素處于可見狀態(tài)。

說明

hidden屬性可以代替CSS樣式中的display屬性，設(shè)置hidden="tru

tabindex是一個(gè)舊的概念，是指用戶使用鍵盤導(dǎo)航一個(gè)頁面時(shí)（通常使用Tab鍵，但某些瀏覽器，如著名的Opera，可能使用不同的鍵組合來導(dǎo)航），控制頁面上的元素獲得焦點(diǎn)的順序。

當(dāng)站點(diǎn)使用深度嵌套的布局表格來構(gòu)建時(shí)，這個(gè)屬性非常常用，但是如今這已經(jīng)不再那么常用了。默認(rèn)的標(biāo)簽頁順序是由元素出現(xiàn)在標(biāo)記中的順序來決定的，因此順序正確和結(jié)構(gòu)良好的文檔應(yīng)該不再需要額外的標(biāo)簽頁順序來提示。

002_HTML_操作系統(tǒng)和軟件_尚學(xué)堂_嗶哩嗶哩_bilibili

01HTML4常用元素講解

02HTML5新增通用屬性

03HTML表單元素講解

04HTML5新增元素和表單

05css基礎(chǔ)及選擇器講解

06css3新增選擇器

07字體與文本相關(guān)屬性

08背景、邊框、補(bǔ)丁相關(guān)屬性

09大小定位與輪廓相關(guān)屬性

10盒模型及布局相關(guān)屬性

11表格與列表相關(guān)屬性及響應(yīng)式布局

12CSS3變形與動(dòng)畫相關(guān)屬性

今日微語：

雞湯再有理，終究是別人的總結(jié)。故事再勵(lì)志，也只是別人的經(jīng)歷，別總想著依賴或者尋求精神寄托，其實(shí)你很清楚，只有你自己才能改變自己，不求多成功，但愿少遺憾。

喜歡請(qǐng)關(guān)注！

在線咨詢

上一篇：大潤發(fā)超市線上優(yōu)惠購買的方法
下一篇：Web 性能優(yōu)化：使用 CSS font-display 控制字體加載和替換

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商