Html介紹
Html(hyper text markup language)超文本標(biāo)記語言
Html是一種標(biāo)準(zhǔn)-----w3c
超文本:在文本內(nèi)容的基礎(chǔ)上,添加更加的豐富的信息(圖片,動(dòng)畫,聲音等)
標(biāo)記(標(biāo)簽)---<單詞>
挨著<是標(biāo)記
標(biāo)記通常有兩次含義:
表型:每一個(gè)標(biāo)簽都有一定表現(xiàn)形式
表意:每一個(gè)標(biāo)簽有一定的意義
語言:可以直接被瀏覽器解析,和程序語言不一樣
Html的標(biāo)簽分類
- 雙標(biāo)簽:開始標(biāo)簽和結(jié)束標(biāo)簽構(gòu)成,內(nèi)容放入開始標(biāo)簽和結(jié)束標(biāo)簽之間
語法:<標(biāo)簽 屬性名=”屬性值”> ……內(nèi)容…..</標(biāo)簽>
屬性理解人的特征 性別=”女” 體重=”45” 身高=”165”
例如 <div></div> <a></a> <html></html>
- 單標(biāo)簽:只有開始標(biāo)簽,沒有結(jié)束標(biāo)簽,沒有內(nèi)容,在單標(biāo)簽的后面一定要閉合
語法:<標(biāo)簽 屬性名=”屬性值” 屬性名=”屬性值” />
例如 <link /> <img /> <br /> <meta />
Html基本骨架結(jié)構(gòu)
<html>
<head>
<title>網(wǎng)站的標(biāo)題</title>
</head>
<body>
</body>
</html>
html文件的擴(kuò)展名是 XXX.html-----保存XXX.html
html結(jié)構(gòu)說明:
- <html>含義:告訴瀏覽器,網(wǎng)頁的代碼用什么格式來解析
- <head>含義:告訴瀏覽器網(wǎng)頁的漢子用什么字符集,使用的字符集不正確,就會(huì)出現(xiàn)亂碼 gb2312 簡體中文 ----(漢字操作系統(tǒng)默認(rèn)使用的)gbk國標(biāo)碼 utf-8多國語言
- <title>含義:便于搜索引擎
- <body>含義:網(wǎng)站的內(nèi)容,99%的內(nèi)容都放入body標(biāo)簽中,只有放入該標(biāo)簽,才能在窗口顯示
注意:tab鍵可以縮進(jìn)
Html的書寫規(guī)范
- Html不區(qū)分大小寫,但是w3c使用的是小寫 <body> 不推薦<BODY>
- Html如果有標(biāo)簽嵌套,順序嵌套,不能交叉
- 單標(biāo)簽一定要閉合(/)例如 <br />
- 屬性:每一個(gè)標(biāo)簽有沒有屬性,有多少---w3c規(guī)定好的
- 屬性值:雙引號引起
Html注釋
注釋的內(nèi)容不在窗口中顯示
<!—注釋內(nèi)容-->
Html文本標(biāo)簽
- Font 設(shè)置文本的顏色 文本的字體 文本的大小
- 設(shè)置的內(nèi)容</font>
屬性
- 設(shè)置文本的顏色 例如color=”red” color=”#ff0000”
- 設(shè)置文本的大小 例如 size=”5” 是以號為單位
- 設(shè)置文本的字體 例如 face=”隸書”
需求:輸入一段文本設(shè)置該段的前五個(gè)字,文本顏色為藍(lán)色blue #0000ff,文本的大小為6號,字體為楷體
<b></b>加粗
<strong></strong>加粗 加強(qiáng)語氣
<i></i>傾斜
<em></em>傾斜 加強(qiáng)語氣
<u></u> 下劃線
<ins></ins>插入的是文本
<sup></sup>上標(biāo)
<sub></sub>下標(biāo)
需求:輸入一段文本,要求前六個(gè)字文本顏色為藍(lán)色,加粗 ,傾斜,加下劃線
注意:一定要順序嵌套,不能交叉
需求:輸入一段內(nèi)容,最后8個(gè)字,文本顏色是綠色 green #00ff00,字體為宋體,---加粗 傾斜 加下劃線
Html段落的標(biāo)簽
<p></p> 一段
段落的屬性
Align 取值 left center right
<h1></h1> 標(biāo)題1
<h2></h2> 標(biāo)題2
。。。
<h6></h6>標(biāo)題6
標(biāo)題的屬性
Align 取值 left center right
需求:輸入兩段內(nèi)容,在第一段的前面加一個(gè)標(biāo)題二,標(biāo)題二的內(nèi)容居中
Pre標(biāo)記:預(yù)定義標(biāo)簽,保留原有的空格和換行
Div :是網(wǎng)站上使用的標(biāo)簽最多之一,本身沒有任何意義,自己獨(dú)自一行,結(jié)合css樣式一起使用,構(gòu)成相應(yīng)的效果 塊標(biāo)簽
Span 本身沒有任何的含義,但是也是網(wǎng)站使用最多標(biāo)簽之一,結(jié)合css一起使用構(gòu)成功能,行內(nèi)標(biāo)簽
塊標(biāo)簽:輸入完標(biāo)簽之后,自己獨(dú)占一行
那些屬于塊標(biāo)簽 <h1></h1>…<h6></h6> <p></p> <div></div>
行內(nèi)標(biāo)簽:輸入完標(biāo)簽之后,不是自己獨(dú)占一行
那些屬于行內(nèi)標(biāo)簽 <em><span><i><u>
需求 輸入兩段內(nèi)容,第一段和第二段用div包裹,在第一段的前面加標(biāo)題3,改標(biāo)題顏色為藍(lán)色
注意:下面的寫法不推薦使用,通常塊標(biāo)簽里面包括行內(nèi)標(biāo)簽效果
列表
就是若干個(gè)相似的內(nèi)容進(jìn)行排列
無序列表
就是若干個(gè)相似的內(nèi)容進(jìn)行排列,沒有先后順序
語法:
<ul>
<li>搜狗</li>
<li>輸入法</li>
<li>瀏覽器</li>
</ul>
· 搜狗
· 輸入法
· 瀏覽器
Ul的屬性
type 類型 設(shè)置列表前面符號的樣式 取值 circle disc默認(rèn) square
有序列表
若干個(gè)相似的內(nèi)容進(jìn)行排列有先后順序
語法:
<ol>
<li>
誰在鼓吹2017年房價(jià)下跌?</li>
<li>趙海均:明星并購價(jià)值有幾何</li>
<li> 股市暴跌,到底發(fā)生了什么?</li>
</ol>
1
誰在鼓吹2017年房價(jià)下跌?2趙海均:明星并購價(jià)值有幾何
3股市暴跌,到底發(fā)生了什么?
自定義列表
<dl>
<dt>自定義列表標(biāo)題</dt>
<dd>對該標(biāo)題進(jìn)行描述</dd>
</dl>
特殊字符
 ;一個(gè)空格,代表一個(gè)字符,一個(gè)漢字占兩個(gè)字符
©;版權(quán)
< <
>>
¥ ¥