整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML 代碼約定
很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對于 HTML5 ，我們應該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個元素都要添加關(guān)閉標簽。
不推薦:
<section>
<p>這是一個段落。
<p>這是一個段落。
</section>
推薦:
<section>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：
我們可以這么寫：
<meta charset="utf-8">
也可以這么寫：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面，使用這種風格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時使用大小寫是非常不好的習慣。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
混合風格不推薦的，建議統(tǒng)一風格。
屬性值使用引號易于閱讀。
以下實例屬性值包含空格，沒有使用引號，所以不能起作用:
<table class=table striped>
以下使用了雙引號，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時可以預留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器，左右滾動代碼是不方便的。
每行代碼盡量少于 80 個字符。
空行和縮進
不要無緣無故添加空行。
為每個邏輯功能塊添加空行，這樣更易于閱讀。
縮進使用兩個空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進。
不必要的空行和縮進:
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程，學的不僅是技術(shù)，更是夢想。
菜鳥教程，學的不僅是技術(shù)，更是夢想。
菜鳥教程，學的不僅是技術(shù)，更是夢想,
菜鳥教程，學的不僅是技術(shù)，更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學的不僅是技術(shù)，更是夢想。
菜鳥教程，學的不僅是技術(shù)，更是夢想。
菜鳥教程，學的不僅是技術(shù)，更是夢想。
菜鳥教程，學的不僅是技術(shù)，更是夢想。</p>
</body>
表格實例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表實例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。
以下 HTML5 文檔是正確的:
實例:
<!DOCTYPE html>
<head>
<title>頁面標題</title>
</head>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標簽。
<html> 元素是文檔的根元素，用于描述頁面的語言：
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會發(fā)生錯誤。
省略 <head>?
在標準 HTML5 中， <head>標簽是可以省略的。
默認情況下，瀏覽器會將 <body> 之前的內(nèi)容添加到一個默認的 <head> 元素上。
實例
<!DOCTYPE html>
<html>
<title>頁面標題</title>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
嘗試一下 ?
| 現(xiàn)在省略 head 標簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:
<title>菜鳥教程</title>
標題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫：
<!--
這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
-->
長評論第一個字符縮進兩個空格，更易于閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結(jié)尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。
| 在逗號和分號后添加空格是常用的一個規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個糟糕的 HTML 格式可能會導致 JavaScript 執(zhí)行錯誤。
以下兩個 JavaScript 語句會輸出不同結(jié)果:
實例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問 JavaScript 代碼規(guī)范。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務(wù)器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統(tǒng)一的風格，我們建議統(tǒng)一使用小寫的文件名。
文件擴展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會把它們當作 HTML 文件來處理。
區(qū)別在于：
.htm 應用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個字符。
在 Unix 系統(tǒng)中后綴沒有特別限制，一般用 .html。
技術(shù)上區(qū)別
如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常服務(wù)器可以設(shè)置多個默認文件，你可以根據(jù)需要設(shè)置默認文件嗎。
不管怎樣，HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
HTML代表超文本標記語言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁的標記語言。HTML文件包含一組標簽，這些標簽用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標記中的指示呈現(xiàn)網(wǎng)頁內(nèi)容。
HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。
每個HTML文檔都應該遵循以下基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁標題</title>
</head>
<body>
<!-- 內(nèi)容在這里 -->
</body>
</html>
讓我們逐步解釋這個結(jié)構(gòu)：
HTML標簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標簽通常成對出現(xiàn)，有一個開始標簽和一個結(jié)束標簽。例如：
<p>這是一個段落。</p>
<p>是開始標簽，</p>是結(jié)束標簽，文本位于兩個標簽之間。標簽定義了元素的類型和結(jié)構(gòu)。
有些HTML標簽是自封閉的，不需要結(jié)束標簽，例如<img>用于插入圖像。
在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用<!--開頭和-->結(jié)尾，如下所示：
<!-- 這是一個注釋 -->
注釋通常用于添加文檔說明、調(diào)試代碼或標記未來的修改。
HTML中的文本通常包含在段落、標題、列表等元素中。以下是一些常見的文本元素：
示例：
<p>這是一個段落。</p>
<h1>這是一個標題</h1>
<p><strong>這是強調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網(wǎng)站</a></p>
要在網(wǎng)頁中插入圖像，可以使用<img>標簽。它是一個自封閉標簽，需要指定圖像的src屬性來指定圖像文件的路徑。
示例：
htmlCopy code
<img src="image.jpg" alt="圖像描述">
通過使用<a>標簽，可以在網(wǎng)頁中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標URL。
示例：
<a href="https://www.example.com">訪問示例網(wǎng)站</a>
HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。
無序列表使用<ul>標簽定義，每個列表項使用<li>標簽。
示例：
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
有序列表使用<ol>標簽定義，每個列表項使用<li>標簽。
示例：
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
定義列表使用<dl>標簽定義，每個定義項目使用<dt>標簽定義術(shù)語，使用<dd>標簽定義描述。
示例：
<dl>
<dt>術(shù)語1</dt>
<dd>描述1</dd>
<dt>術(shù)語2</dt>
<dd>描述2</dd>
</dl>
HTML表單允許用戶與網(wǎng)頁進行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：
<form>元素用于創(chuàng)建表單，可以包含文本字段、復選框、單選按鈕、下拉列表等。
示例：
<form action="submit.php" method="post">
<!-- 表單元素在這里 -->
</form>
輸入字段用于接收用戶輸入的數(shù)據(jù)，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復選框等。
文本框使用<input>標簽，type屬性設(shè)置為"text"。
示例：
<input type="text" name="username" placeholder="用戶名">
密碼框使用<input>標簽，type屬性設(shè)置為"password"。
示例：
htmlCopy code
<input type="password" name="password" placeholder="密碼">
單選按鈕使用<input>標簽，type屬性設(shè)置為"radio"。
示例：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
復選框使用<input>標簽，type屬性設(shè)置為"checkbox"。
示例：
<input type="checkbox" name="subscribe" value="yes">訂閱新聞
下拉列表使用<select>和<option>標簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項。
示例：
<select name="country">
<option value="us">美國</option>
<option value="ca">加拿大</option>
<option value="uk">英國</option>
</select>
HTML用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。
可以在HTML元素內(nèi)部使用style屬性來定義內(nèi)聯(lián)樣式。
示例：
<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>
外部樣式表將樣式規(guī)則保存在獨立的CSS文件中，并通過<link>標簽將其鏈接到HTML文檔。
示例（style.css）：
/* style.css */
p {
color: blue;
font-size: 16px;
}
在HTML中鏈接外部樣式表：
<link rel="stylesheet" type="text/css" href="style.css">
這使得可以在整個網(wǎng)站上共享相同的樣式。
HTML是構(gòu)建現(xiàn)代網(wǎng)頁的基礎(chǔ)。通過學習HTML的基本語法和元素，你可以創(chuàng)建吸引人且功能強大的網(wǎng)頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現(xiàn)內(nèi)容和實現(xiàn)用戶交互。
這篇文章提供了HTML的基礎(chǔ)知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網(wǎng)頁。繼續(xù)學習和實踐，你將成為一個熟練的網(wǎng)頁開發(fā)者。
HTML（HyperText Markup Language，中文：超文本標記語言）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標記語言。它由一系列標簽組成，這些標簽描述了網(wǎng)頁中的各個元素和其它相關(guān)信息。通過使用HTML標簽和屬性，開發(fā)人員可以定義文本、圖像、鏈接、表格、表單等元素，并控制它們的外觀和行為。本文主要介紹HTML的基本概念、歷史背景和用途。
參考文檔：https://www.cjavapy.com/article/3297/
HTML實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>HTML文檔的后綴名可以是.html或.htm，都可以使用，沒有區(qū)別。
注意：對于中文網(wǎng)頁需要使用<meta charset="utf-8"> 聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器(如 360 瀏覽器)會設(shè)置 GBK 為默認編碼，則你需要設(shè)置為<meta charset="gbk"> 。
1）標簽（Tag）
HTML使用標簽來定義網(wǎng)頁中的各個元素。標簽通常以尖括號< >的形式出現(xiàn)，如<p>表示段落，<img>表示圖像等。標簽可以包含屬性，用于提供額外的信息或控制元素的行為。
2）元素（Element）
一個完整的HTML元素由開始標簽、內(nèi)容和結(jié)束標簽組成。例如，<p>這是一個段落</p>就是一個完整的段落元素。
3）屬性（Attribute）
HTML標簽可以具有屬性，用于提供元素的額外信息或控制元素的行為。屬性以鍵值對的形式出現(xiàn)，例如<img src="image.jpg">中的src屬性指定了圖像的源文件。
4）文檔結(jié)構(gòu)
一個HTML文檔由<html>、<head>和<body>等標簽組成。其中，<html>標簽用于定義整個HTML文檔的根元素，<head>標簽用于定義文檔的頭部信息，如標題和樣式表鏈接，<body>標簽用于定義文檔的主體內(nèi)容。
5）塊級元素和內(nèi)聯(lián)元素
HTML元素可以被分類為塊級元素和內(nèi)聯(lián)元素。塊級元素以塊的形式顯示，獨占一行或一塊空間，如<p>、<div>等。內(nèi)聯(lián)元素以行內(nèi)的方式顯示，不會獨占一行，如<span>、<a>等。
6）嵌套
HTML元素可以嵌套在其他元素內(nèi)部，形成一個層次結(jié)構(gòu)。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。
7）<!DOCTYPE> 聲明
HTML文檔的開頭通常會包含一個DOCTYPE聲明，用于指定文檔的HTML版本。
例如：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>HTML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標記語言，而Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于顯示和解釋HTML文檔的應用程序。Web瀏覽器通過解析HTML文檔，將其轉(zhuǎn)換為可視化的網(wǎng)頁。瀏覽器會讀取HTML文檔中的標簽和內(nèi)容，并根據(jù)這些標簽和內(nèi)容的定義，渲染出網(wǎng)頁的結(jié)構(gòu)和樣式。HTML提供了各種標簽和屬性，用于定義文本、圖像、鏈接、表格、表單等在網(wǎng)頁中的展示和交互方式。瀏覽器在解析HTML時，會根據(jù)標簽和屬性的定義，將文本顯示為段落、標題或其他格式，顯示圖像、鏈接，并響應用戶的交互操作。
通過HTML和Web瀏覽器的結(jié)合，用戶可以在瀏覽器中訪問和瀏覽各種網(wǎng)頁內(nèi)容，包括網(wǎng)頁文本、圖像、視頻、音頻等多媒體元素，并與網(wǎng)頁進行交互，如點擊鏈接、填寫表單、提交數(shù)據(jù)等。
大部分瀏覽器中，直接輸出中文會出現(xiàn)中文亂碼的情況，需要在頭部將字符聲明為 UTF-8 或 GBK。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
頁面標題</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>HTML有多個版本，每個版本都有不同的特性和改進。
版本 | 發(fā)布時間 |
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2014 |
1）HTML 1.0
HTML 1.0是最早的HTML版本，于1993年發(fā)布。它只包含一些基本的標簽和屬性，用于創(chuàng)建簡單的文本和鏈接。HTML 1.0的目標是定義一種通用的超文本標記語言。
2）HTML 2.0
HTML 2.0于1995年發(fā)布，是對HTML 1.0的改進和擴展。它引入了一些新的標簽和屬性，如圖像標簽和表格標簽，以支持更豐富的內(nèi)容展示。
3）HTML 3.2
HTML 3.2于1997年發(fā)布，是對HTML 2.0的進一步改進。它引入了一些新的標簽和屬性，如表單標簽和框架標簽，以支持交互性和頁面布局。
4）HTML 4.01
HTML 4.01于1999年發(fā)布，是對HTML 3.2的修訂和擴展。它引入了更多的標簽和屬性，如層標簽和樣式表，以支持更靈活的頁面設(shè)計和樣式控制。
5）XHTML 1.0
XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年發(fā)布，它嚴格遵循XML的語法規(guī)則，要求所有標簽和屬性都要正確嵌套和閉合。
6）HTML5
HTML5是HTML的最新版本，于2014年正式發(fā)布。HTML5引入了許多新的特性和API，如語義化標簽、多媒體支持、Canvas繪圖、本地存儲等。HTML5還支持響應式設(shè)計，以適應不同設(shè)備和屏幕尺寸。
HTML是構(gòu)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的基礎(chǔ)語言，它提供了豐富的標簽和屬性，使得開發(fā)者可以創(chuàng)建各種類型的網(wǎng)頁，并實現(xiàn)不同的功能和效果。HTML用于定義網(wǎng)頁的整體結(jié)構(gòu)，包括標題、段落、列表、標題、導航菜單等元素。通過使用不同的HTML標簽和屬性，可以將文本、圖像、音頻、視頻等內(nèi)容組織起來，并構(gòu)建頁面的層次結(jié)構(gòu)。HTML可以用于展示文本內(nèi)容和多媒體元素，如圖像、音頻和視頻。通過使用適當?shù)腍TML標簽和屬性，可以插入和顯示各種類型的媒體內(nèi)容，從而使網(wǎng)頁更加豐富和吸引人。HTML提供了創(chuàng)建表單的標簽和元素，可以用于收集用戶的輸入數(shù)據(jù)。通過使用表單元素如文本框、復選框、單選按鈕和下拉列表等，用戶可以輸入數(shù)據(jù)并提交給服務(wù)器進行處理。
參考文檔：https://www.cjavapy.com/article/3297/
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
