HTML 教程

image.png

什么是 HTML?

  • HTML 是用來描述網(wǎng)頁的一種語言。
  • HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
  • HTML 不是一種編程語言,而是一種標(biāo)記語言 (markup language)
  • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
  • HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

HTML的操作思想

網(wǎng)頁中有很多數(shù)據(jù),不同數(shù)據(jù)可能需要不同的顯示效果,這個(gè)時(shí)候需要使用標(biāo)簽把要操作的數(shù)據(jù)包起來(封裝起來),通過修改這些標(biāo)簽的屬性值實(shí)現(xiàn)數(shù)據(jù)樣式的變化;一個(gè)標(biāo)簽相當(dāng)于一個(gè)容器,想要修改容器內(nèi)的數(shù)據(jù)樣式,只需要修改容器的屬性值,就可以實(shí)現(xiàn)容器內(nèi)的數(shù)據(jù)樣式的變化


一個(gè)簡單的 HTML 長什么樣

 <!DOCTYPE html>
 <html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML頭部

1.<head>元素

  • <head> 元素包含了所有的頭部標(biāo)簽元素
  • 在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息
  • 可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

2.<title>元素

  • <title> 標(biāo)簽定義了不同文檔的標(biāo)題
  • 在 HTML/XHTML 文檔中是必須的。
    1>定義了瀏覽器工具欄的標(biāo)題
    2>當(dāng)網(wǎng)頁添加到收藏夾時(shí),顯示在收藏夾中的標(biāo)題
    3>顯示在搜索引擎結(jié)果頁面的標(biāo)題

3.<link>元素

  • 標(biāo)簽定義了文檔與外部資源之間的關(guān)系
    <link> 標(biāo)簽通常用于鏈接到樣式表,例如,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4.<style> 元素

  • <style> 標(biāo)簽定義了HTML文檔的樣式文件引用地址,例如,
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

5.<meta>標(biāo)簽

  • 為搜索引擎定義關(guān)鍵詞:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 為網(wǎng)頁定義描述內(nèi)容:
    <meta name="description" content="免費(fèi) Web & 編程 教程">
  • 定義網(wǎng)頁作者:
    <meta name="author" content="Runoob">
  • 每30秒中刷新當(dāng)前頁面
    <meta http-equiv="refresh" content="30">

HTML 標(biāo)簽

  • HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
  • HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,比如 <html>
  • HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如
    和</br>
  • 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
  • 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽

幾個(gè)常用的HTML標(biāo)簽

1.HTML 標(biāo)題(Heading)是通過 <h1>-<h6>等標(biāo)簽進(jìn)行定義的。
實(shí)例

<h1>Hello</h1>
<h2>HTML</h2>

2.HTML 段落是通過<p> 標(biāo)簽進(jìn)行定義的。
實(shí)例

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

3.HTML 鏈接是通過 <a>標(biāo)簽進(jìn)行定義的。
實(shí)例

<a >This is a link</a>

4.HTML 圖像是通過<img>標(biāo)簽進(jìn)行定義的。
實(shí)例

![](w3school.jpg)

5.HTML <table> 標(biāo)簽
實(shí)例
一個(gè)簡單的 HTML 表格,包含兩行兩列:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table

簡單的 HTML 表格由 table 元素以及一個(gè)或多個(gè) tr、th 或 td 元素組成。
tr 元素定義表格行,th 元素定義表頭,td 元素定義表格單元。
更復(fù)雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

6.HTML 列表
1)無序列表
無序列表是一個(gè)項(xiàng)目的列表,此列項(xiàng)目使用粗體圓點(diǎn)(典型的小黑圓圈)進(jìn)行標(biāo)記。
無序列表始于<ul>標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

2)有序列表
同樣,有序列表也是一列項(xiàng)目,列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。
有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。
實(shí)例

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML區(qū)塊

1.內(nèi)聯(lián)元素(inline element)
內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始
例如<b>, <td>,<a>,<img>
2.塊狀元素(block level element)
塊級(jí)元素在瀏覽器顯示時(shí),通常會(huì)以新行來開始(和結(jié)束)。
例如<h1>,<p>,<ul>, <table>
3.<div>元素
<div> 元素是塊級(jí)元素,它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行。
如果與 CSS 一同使用,<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個(gè)常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
4.<span>元素
<span> 元素是內(nèi)聯(lián)元素,可用作文本的容器。
<span> 元素也沒有特定的含義。
當(dāng)與 CSS 一同使用時(shí),<span> 元素可用于為部分文本設(shè)置樣式屬性。


注:想更多了解HTML相關(guān)標(biāo)簽,請(qǐng)點(diǎn)擊http://www.w3school.com.cn/tags/tag_table.asp
想更多了解HTML教程,可點(diǎn)擊http://www.imooc.com/learn/9 觀看視頻教學(xué)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,126評(píng)論 1 92
  • 導(dǎo)語: HTML(Hyper Text Markup Language 超文本標(biāo)識(shí)語言)是一種用來制作超文本文檔的...
    夢(mèng)巷_n閱讀 7,708評(píng)論 0 0
  • Tips HTML標(biāo)簽對(duì)大小寫不敏感- 每個(gè)尖括號(hào)<>都被視為一個(gè)html元素- 沒有內(nèi)容的HTML內(nèi)容被稱為空元...
    Francis__閱讀 435評(píng)論 0 0
  • 1.頭部標(biāo)簽 HTML 元素 元素包含了所有的頭部標(biāo)簽元素。在 元素中你可以插入腳本(scripts), ...
    價(jià)值投機(jī)168閱讀 362評(píng)論 0 2
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,527評(píng)論 1 41

友情鏈接更多精彩內(nèi)容