第一次接觸 HTML 設(shè)計(jì)的可以先看看前面幾期的內(nèi)容:《HTML簡介》 、《HTML的標(biāo)簽和屬性》、《HTML的常用標(biāo)簽和屬性(2)》,這里是 HTML 基礎(chǔ)教程的最后一期(沒錯(cuò),一共就四期,所以你不用覺得它有多難)。
<!DOCTYPE html> //文檔類型聲明
<html xmlns=”http://www.w3.org/1999/xhtml> //xmlns 命名空間
<head> //頁面頭部起始標(biāo)簽
<meta charset="UTF-8"> //charset 編碼格式
<title>Document</title> //頁面標(biāo)題欄
</head> //頁面頭部閉合標(biāo)簽
<body> //頁面內(nèi)容起始標(biāo)簽
//這里是寫網(wǎng)頁內(nèi)容代碼的位置
</body> //頁面內(nèi)容閉合標(biāo)簽
</html> //html閉合標(biāo)簽
<!DOCTYPE> 標(biāo)簽
<!DOCTYPE> 聲明指的是該頁面是使用哪個(gè) HTML 版本進(jìn)行編寫的。
這里的 html 后面沒有版本號所以默認(rèn)的就是最新版本。
<html>標(biāo)簽
告知瀏覽器其自身是一個(gè) HTML 文檔。
xmlns 屬性可以在文檔中定義一個(gè)或多個(gè)可供選擇的命名空間。
其中的 xmlns=”http://www.w3.org/1999/xhtml 表態(tài)本頁面所有的代碼都是以這個(gè)網(wǎng)站為標(biāo)準(zhǔn)的。
<head>標(biāo)簽
用于定義文檔的頭部,它是所有頭部元素的容器。頁面的標(biāo)題等內(nèi)容都寫在這個(gè)標(biāo)簽里。
<meta>標(biāo)簽
<meta> 元素可提供有關(guān)頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
charset 屬性規(guī)定在外部腳本文件中使用的字符編碼。
這里規(guī)定頁面文字編碼格式是 UTF-8
<title>標(biāo)簽
網(wǎng)頁標(biāo)題。
<body>標(biāo)簽
定義文檔的主體。
網(wǎng)頁中的所有內(nèi)容代碼都寫在這里。
注釋
<!-- 這里用來寫注釋內(nèi)容 --> ,注釋的內(nèi)容不會在網(wǎng)頁里顯示
段落
<p> 這里用來寫段落里的代碼 </p>
換行
<br /> 這個(gè)標(biāo)簽不是成對的
粗體
<b> 這里用來寫想要加粗字體的內(nèi)容 </b>
斜體
<i> 這里用來寫想要傾斜字體的內(nèi)容 </i>
下劃線
<u> 這里用來寫想要加下劃線字體的內(nèi)容 </u>
刪除線
<s> 這里用來寫想要加刪除線字體的內(nèi)容 </s>
上標(biāo)
<sup> 這里用來寫想要目標(biāo)字體效果的內(nèi)容 </sup>
下標(biāo)
<sub> 這里用來寫想要下標(biāo)字體效果的內(nèi)容 </sub>
下面我們根據(jù)前幾期所講過的內(nèi)容:HTML簡介 、HTML的標(biāo)簽和屬性、HTML的常用標(biāo)簽和屬性(2)及上面所提到的內(nèi)容及來寫一個(gè)標(biāo)準(zhǔn)的 HTML 文件。
代碼:
<!DOCTYPE html>
<html lang="zh-cmn">
<head>
<meta charset="UTF-8">
<title>留言本</title>
</head>
<body>
<!-- 發(fā)表留言區(qū) -->
<div>
<textarea cols="50" rows="5"></textarea>
<br/>
<input type="text"/>
<input type="submit" value="發(fā)表留言"/>
</div>
<!-- 顯示留言區(qū) -->
<div>
<div>
用戶名1、留言時(shí)間1
<br/>
留言內(nèi)容1
</div>
<div>
用戶名2、留言時(shí)間2
<br/>
留言內(nèi)容2
</div>
</div>
</body>
</html>
lang="zh-cmn" 表示聲明元素內(nèi)容的語言為簡體中文
cols="50" rows="5" 表示多行文本輸入框的長和寬
效果:
到這里 HTML 的基本語法就算是基本完了。
關(guān)于 HTML 語言中的其它代碼寫法跟我們這幾期所講到的基本類似,所不同的就只是 HTML 的元素、屬性及屬性值的作用不同而已。
所以現(xiàn)在大家已經(jīng)具備基本的前端 HTML 開發(fā)能力了。
如果想要深入學(xué)習(xí)也只需要自行去 http://www.w3school.com.cn 查詢并了解相關(guān)元素、屬性及屬性值的作用就行了。
更多分享
0 基礎(chǔ)教程丨PHP 網(wǎng)站開發(fā)
MAC 系統(tǒng)怎么搭建自帶的 PHP 開發(fā)環(huán)境
HTML丨基本結(jié)構(gòu)與常用格式標(biāo)簽
效率工具
小眾電影
0 基礎(chǔ)教程丨小程序開發(fā)
聯(lián)系客服