黑馬程序員PHP培訓(xùn)之HTML

更新時間:2018-06-29 來源:黑馬程序員PHP培訓(xùn)學(xué)院瀏覽量:

Html介紹

Html(hyper text markup language)超文本標(biāo)記語言
Html是一種標(biāo)準(zhǔn)-----w3c
超文本：在文本內(nèi)容的基礎(chǔ)上，添加更加的豐富的信息（圖片，動畫，聲音等）
標(biāo)記（標(biāo)簽）---<單詞>
              挨著<是標(biāo)記
   標(biāo)記通常有兩次含義：
   表型：每一個標(biāo)簽都有一定表現(xiàn)形式
   表意：每一個標(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)頁的漢子用什么字符集，使用的字符集不正確，就會出現(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 />
屬性：每一個標(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è)置該段的前五個字，文本顏色為藍(lán)色blue #0000ff,文本的大小為6號，字體為楷體

<b></b>加粗
<strong></strong>加粗加強語氣
<i></i>傾斜
<em></em>傾斜加強語氣

<u></u> 下劃線
<ins></ins>插入的是文本
<sup></sup>上標(biāo)
<sub></sub>下標(biāo)
需求：輸入一段文本，要求前六個字文本顏色為藍(lán)色，加粗，傾斜，加下劃線

注意：一定要順序嵌套，不能交叉
需求：輸入一段內(nèi)容，最后8個字，文本顏色是綠色 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)容，在第一段的前面加一個標(biāo)題二，標(biāo)題二的內(nèi)容居中
Pre標(biāo)記：預(yù)定義標(biāo)簽，保留原有的空格和換行
Div ：是網(wǎng)站上使用的標(biāo)簽最多之一，本身沒有任何意義，自己獨自一行，結(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)簽之后，自己獨占一行
那些屬于塊標(biāo)簽 <h1></h1>…<h6></h6> <p></p> <div></div>
行內(nèi)標(biāo)簽：輸入完標(biāo)簽之后，不是自己獨占一行
那些屬于行內(nèi)標(biāo)簽 <em><span><i><u>
需求輸入兩段內(nèi)容，第一段和第二段用div包裹，在第一段的前面加標(biāo)題3，改標(biāo)題顏色為藍(lán)色

注意：下面的寫法不推薦使用，通常塊標(biāo)簽里面包括行內(nèi)標(biāo)簽

效果

列表

就是若干個相似的內(nèi)容進(jìn)行排列

無序列表

就是若干個相似的內(nèi)容進(jìn)行排列，沒有先后順序
語法：
<ul>
      <li>搜狗</li>
      <li>輸入法</li>
      <li>瀏覽器</li>
</ul>
· 搜狗
· 輸入法
· 瀏覽器

Ul的屬性
type 類型設(shè)置列表前面符號的樣式取值 circle disc默認(rèn) square

有序列表

若干個相似的內(nèi)容進(jìn)行排列有先后順序
語法：
   <ol>
      <li>誰在鼓吹2017年房價下跌？</li>
      <li>趙海均:明星并購價值有幾何</li>
<li> 股市暴跌，到底發(fā)生了什么?</li>
   </ol>
1 誰在鼓吹2017年房價下跌？
2趙海均:明星并購價值有幾何
3股市暴跌，到底發(fā)生了什么?