什么是html
html不是一種編程語言,它是一種標(biāo)記語言,用于要告訴你的瀏覽器如何顯示你訪問的網(wǎng)頁.
html是由一系列的元素組成的,例:我們將下行文字加一個段落元素
- my cat is very grumpy
>```html
2. <p>my cat is very grumpy</p>
html元素的剖析
讓我們進(jìn)一步來分析這個段落元素
元素的主要組成部分:
- 開始標(biāo)簽: 有尖括號包裹住標(biāo)簽名,表示元素開始或開始生效
- 結(jié)束標(biāo)簽: 也是用尖括號包裹住標(biāo)簽名,不過要在標(biāo)簽名前加上反斜杠"/",這表示元素結(jié)束的位置.
- 內(nèi)容: 這是重要元素,在這種情況下僅僅是元素的內(nèi)容.
- 元素: 開始標(biāo)簽+結(jié)束標(biāo)簽+內(nèi)容=元素
元素也可以具有屬性,如圖:
屬性包含你不希望在實(shí)際內(nèi)容中顯示的信息.這里,class是屬性的名稱,editor-note是屬性值.
屬性應(yīng)始終包含:
- 它與元素名稱之間的空格
- 屬性名稱,后跟一個"="號
- 屬性值用雙引號""包裹
嵌套元素
元素中的元素稱為嵌套.如果我們想描述,貓的脾氣非常暴躁,我們可以用"strong"元素包裹"非常",這意味著這個詞要特別強(qiáng)調(diào):
<p>my cat is <strong>very</strong>grumpy</p>
我們要保證正確的嵌套: 在上例,我們先寫`<p>`元素然后再寫`<strong>`元素.因此我們要結(jié)束`<strong>`元素,然后再是`<p>`元素,下面是錯誤的寫法:
>```html
<p>my cat is <strong>very grumpy.</p></strong>
元素必須正確的打開和關(guān)閉,如果像上面一樣,瀏覽器無法對內(nèi)容做出正確的解釋
空元素
有些元素沒有內(nèi)容,所以稱為空元素,例如<img>:
這包括兩個屬性,但沒有閉合標(biāo)簽,也沒有包裹內(nèi)容.這是因?yàn)閳D像元素不會包裹元素對其產(chǎn)生影響,它的目的是在HTML頁面中嵌入一個圖像
####html文檔的解剖
現(xiàn)在我們來看看將各個元素組成一個完整的html頁面
>```html
<!doctype html>
<html>
<head>
<meat charset="utf-8"/>
<title>my test page</title>
</head>
<body>
</body>
</html>
-
<!doctype html>: !doctype聲明位于文檔中的最前面的位置，處于標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。指定了 HTML文檔遵循的文檔類型定義(DTD)。 -
<html></html>; 包裹整個頁面,有時稱為根元素 -
<head></head>:頭里的內(nèi)容不顯示給用戶,其中包括文件引用(css,js),seo優(yōu)化,字符集的聲明... -
<body></body>:<body>體包含了你想要呈現(xiàn)給用戶的內(nèi)容,包括文字 圖片 流媒體,或任何其他內(nèi)容 -
<meta charset="utf-8"/>: 設(shè)置字符集為utf-8 -
<title></title>: 設(shè)置你的頁面標(biāo)題,常用于瀏覽器書簽
圖片
讓我們再次關(guān)注圖像元素:
- `src`: 圖像路徑
- `alt`: 替代文本
####標(biāo)記文字
本節(jié)將介紹一些關(guān)于標(biāo)記文字的基本html元素
**標(biāo)題**
標(biāo)題元素允許你指定內(nèi)容的某些部分是你的內(nèi)容的標(biāo)題或副標(biāo)題.html包含6個標(biāo)題級別,`<h1>-<h6>`,最多用到3-4.
>```html
<h1>這是一個標(biāo)題</h1>
<h2>這是一個標(biāo)題</h2>
<h3>這是一個標(biāo)題</h3>
<h4>這是一個標(biāo)題</h4>
任務(wù):在圖像下嘗試添加合適的標(biāo)題
段落
如上所述,<p>元素是包含文本的段落,在標(biāo)記常規(guī)文字內(nèi)容時會頻繁使用:
<p>這是一個段落</p>
任務(wù): 添加一個段落,放在圖像下文
**列表**
很多web上內(nèi)容都是列表.要標(biāo)記列表通常包括兩個元素.最常用的列表類型是有序列表和無序列表
1. *無序列表* 中項(xiàng)目的順序并不重要,就像購物列表,這些內(nèi)容被包括在`<ul>`元素里
2. *無序列表* 中項(xiàng)目的順序很重要,就像一個食譜.這些內(nèi)容被包括在一個`<ol>`元素里
列表內(nèi)的每個項(xiàng)目被包括在一個`<li>`元素里
所以,如果我們想要將下面的段落碎片改成一個列表
>```html
<p>關(guān)于水果,我們有蘋果 香蕉 梨子 菠蘿...</p>
我們可以這樣做
<p>關(guān)于水果,我們有</p>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>梨子</li>
<li>菠蘿</li>
<ul>
任務(wù): 嘗試添加一個有序列表和無序列表到你的示例頁面
####鏈接
鏈接非常重要,要植入一個鏈接,我們需要使用`<a>`標(biāo)簽,a是"anchor"(錨)的縮寫.那么怎樣添加鏈接呢,如下:
>```html
<a >簡書</a>
href這個名字是hypertext reference 的縮寫
任務(wù):為你的頁面添加一個鏈接
總結(jié)
曬一下學(xué)習(xí)成果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<h1>好多水果</h1>
<p>關(guān)于水果</p>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>梨子</li>
<li>菠蘿</li>
</ul>
<a >簡書</a>
</body>
</html>
如下圖
