怎樣簡單編寫一個html網(wǎng)頁

無雙czjpwf50f6 2019-06-26

展開全文

# 轉(zhuǎn)載請留言聯(lián)系

一個HTML的基本結(jié)構(gòu)如下：

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body></body></html>

第一行是文檔聲明，第二行“<html>”標(biāo)簽和最后一行“</html>”定義html文檔的整體，“<head>”標(biāo)簽和“<body>”標(biāo)簽是它的第一層子元素，“<head>”標(biāo)簽里面負(fù)責(zé)對網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會顯示在標(biāo)題欄，“<body>”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。

一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁。

1.標(biāo)簽

雙標(biāo)簽和單標(biāo)簽

# 雙標(biāo)記/雙標(biāo)簽
結(jié)構(gòu)格式：
   <標(biāo)簽名屬性名='屬性值' 屬性名='屬性值' ...>內(nèi)容</標(biāo)簽名>
注意：
   一個雙標(biāo)簽會兩部分，左邊叫開始標(biāo)簽，右邊的結(jié)束標(biāo)簽，結(jié)束標(biāo)簽必須在標(biāo)簽名左邊，有一個正斜杠 /
例如：<p></p>

# 單標(biāo)記/單標(biāo)簽
結(jié)構(gòu)格式：
   <標(biāo)簽名屬性名='屬性值' 屬性名='屬性值' ... />

注意：
單標(biāo)簽，最好在開始標(biāo)簽的最后，有一個正斜杠。
例如：<img />

標(biāo)題標(biāo)簽

<h1>標(biāo)題</h1>

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <title>Title</title></head><body>    <h1>標(biāo)題1</h1>    <h2>標(biāo)題2</h2>    <h3>標(biāo)題3</h3>    <h4>標(biāo)題4</h4>    <h5>標(biāo)題5</h5>    <h6>標(biāo)題6</h6>    <!--最多只有標(biāo)題6，常用的只有1-4--></body></html>

段落標(biāo)簽

<p>段落內(nèi)容</p>

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p></body></html>

通用塊容器標(biāo)簽，表示文檔中一塊內(nèi)容，具有塊元素基本特性，沒有其他默認(rèn)樣式

<div>內(nèi)容</div>

換行標(biāo)簽

<br/>

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <title>Title</title></head><body>    <p>我是第一段<br/>我是第二段<br/>我是第三段</p></body></html>

圖片標(biāo)簽

<img src='路徑?？梢允蔷W(wǎng)上的鏈接路徑，也可以是本地路徑' alt='圖片加載失敗時顯示的文字' />

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <img src='./images/123.jpg' alt='滑稽' /></body></html>

超鏈接標(biāo)簽（a鏈接）

<a href='鏈接地址'>鏈接顯示的文字或者圖片</a>

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <title>Title</title></head><body>    <a href='http://www.baidu.com'>百度</a>        <a href='http://www.baidu.com'><img src='./images/123.jpg'/></a></body></html>

注意：

1.鏈接地址一定要寫http://或者h(yuǎn)ttps://

2.src=' ' ----> 刷新當(dāng)前頁面

3.src='#' ----> 回到頁面的頂部

關(guān)于超鏈接標(biāo)簽，還有一個很常用的東西。

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <a href='http://www.baidu.com' target='_blank'>百度</a> #如果后面還有一個href='...'，只有前面的生效    </body></html>

div與span標(biāo)簽

div常用于包含其他的標(biāo)簽，用于表示，網(wǎng)頁的一整部分內(nèi)容，也就是用于進(jìn)行網(wǎng)頁的布局

span常用語包含其他的標(biāo)簽或者普通文本內(nèi)容，也是用于進(jìn)行網(wǎng)頁的內(nèi)容布局。

無意義標(biāo)簽的本身，沒有任何其他的獨特屬性。