怎樣簡單編寫一個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>”標簽和最后一行“</html>”定義html文檔的整體,，“<head>”標簽和“<body>”標簽是它的第一層子元素,，“<head>”標簽里面負責(zé)對網(wǎng)頁進行一些設(shè)置以及定義標題，設(shè)置包括定義網(wǎng)頁的編碼格式,，外鏈css樣式文件和javascript文件等,，設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標題的內(nèi)容會顯示在標題欄,，“<body>”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容,。

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

1.標簽

雙標簽和單標簽

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

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

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

標題標簽

<h1>標題</h1>

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

段落標簽

<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>

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

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

換行標簽

<br/>

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

圖片標簽

<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>

超鏈接標簽（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://或者https://

2.src=' ' ----> 刷新當前頁面

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

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

<!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>