HTML 簡(jiǎn)介
什么是 HTML？
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
- HTML 指的是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language)
- HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
- HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱(chēng)為 HTML 標(biāo)簽 (HTML tag)。
- HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
- HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
- 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
- 開(kāi)始和結(jié)束標(biāo)簽也被稱(chēng)為開(kāi)放標(biāo)簽和閉合標(biāo)簽
標(biāo)簽解釋
- <html> 與 </html> 之間的文本描述網(wǎng)頁(yè)
- <body> 與 </body> 之間的文本是可見(jiàn)的頁(yè)面內(nèi)容
- <h1> 與 </h1> 之間的文本被顯示為標(biāo)題
- <p> 與 </p> 之間的文本被顯示為段落
<html>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
我的第一個(gè)html
HTML 基礎(chǔ)
HTML 標(biāo)題
HTML 標(biāo)題（Heading）是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
h1到h6分別是一級(jí)標(biāo)題到六級(jí)標(biāo)題
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>請(qǐng)僅僅把標(biāo)題標(biāo)簽用于標(biāo)題文本。不要僅僅為了產(chǎn)生粗體文本而使用它們。請(qǐng)使用其它標(biāo)簽或 CSS 代替。</p>
</body>
</html>
HTML 標(biāo)題
HTML 段落
HTML 段落是通過(guò) <p> 標(biāo)簽進(jìn)行定義的。
<p>This is a paragraph.</p>
HTML 鏈接
HTML 鏈接是通過(guò) <a> 標(biāo)簽進(jìn)行定義的。
在 href 屬性中指定鏈接的地址
<html>
<body>
<a href="http://www.itdecent.cn/p/013cabae8b27">這是一個(gè)鏈接</a>
</body>
</html>
HTML 鏈接
HTML 圖像
1.HTML 圖像是通過(guò) <img> 標(biāo)簽進(jìn)行定義的。
2.圖像的名稱(chēng)和尺寸是以屬性的形式提供的
3.width調(diào)整圖片寬度
4.height調(diào)整圖片高度
<html>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532401218&di=effcc7db796ae05e3e0a9240d9ef2374&imgtype=jpg&er=1&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140415%2F0005018701019570_b.jpg" width="304" height="352" />
</body>
</html>
HTML 圖像
HTML 元素
HTML 文檔是由HTML元素定義的。
<br/> 表示換行
<html>
<body>
<b>
hhhhhhhhhh<br/>ddddaaaa
</b>
</body>
</html>
換行演示
HTML 屬性
- 屬性為HTML 元素提供附加信息。
- 屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn)，比如：name="value"。
- 屬性總是在 HTML 元素的開(kāi)始標(biāo)簽中規(guī)定。
屬性實(shí)例
- HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定
<a >This is a link</a>
- <h1> 定義標(biāo)題的開(kāi)始。
<h1 align="center"> 擁有關(guān)于對(duì)齊方式的附加信息
<html>
<body>
<h1 align ='center'>
標(biāo)題
</h1>
<b>
hhhhhhhhhh<br/>ddddaaaa
</b>
</body>
</html>
標(biāo)題居中
- <body> 定義 HTML 文檔的主體。
<body bgcolor="yellow"> 擁有關(guān)于背景顏色的附加信息。
<html>
<body style='background-color: yellow'>
<h1 align ='center'>
標(biāo)題
</h1>
</body>
</html>
背景色
HTML水平線
- HTML 水平線
<hr /> 標(biāo)簽在 HTML 頁(yè)面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容
使用水平線 (<hr> 標(biāo)簽) 來(lái)分隔文章中的小節(jié)是一個(gè)辦法（但并不是唯一的辦法）。
<html title='我的'>
<body style='background-color: yellow'>
<h1 align ='center'>
標(biāo)題
<hr/>
</h1>
</body>
</html>
水平線
HTML 注釋
- 可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會(huì)忽略注釋?zhuān)膊粫?huì)顯示它們。
- 開(kāi)始括號(hào)之后（左邊的括號(hào)）需要緊跟一個(gè)嘆號(hào)，結(jié)束括號(hào)之前（右邊的括號(hào)）不需要。
注釋是這樣寫(xiě)的：
<!-- This is a comment -->
HTML 樣式實(shí)例 - 背景顏色
background-color 屬性為元素定義了背景顏色
<html>
<body style='background-color: yellow'>
<h1 style = 'background-color:red'>
標(biāo)題1
</h1>
<h2 style = 'background-color:green'>
標(biāo)題2
</h2>
</body>
</html>
背景色
HTML 樣式實(shí)例 - 字體、顏色和尺寸
1、font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸
2、style 屬性淘汰了舊的 <font> 標(biāo)簽。
<html>
<body style='background-color: yellow'>
<h1 style = 'background-color:red;color:green;font-size:70px'>
標(biāo)題1
</h1>
<h2 style = 'background-color:green'>
標(biāo)題2
</h2>
</body>
</html>
字體顏色
HTML 樣式實(shí)例 - 文本對(duì)齊
text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式
<html>
<body style='background-color: yellow'>
<h1 >
標(biāo)題1
</h1>
<h2 style = 'background-color:green;text-align:center'>
標(biāo)題2
</h2>
</body>
</html>
文本對(duì)齊
