黑馬程序員PHP培訓之HTML

更新時間:2018-06-29 來源:黑馬程序員PHP培訓學院瀏覽量:

Html介紹

Html(hyper text markup language)超文本標記語言
Html是一種標準-----w3c
超文本：在文本內(nèi)容的基礎上，添加更加的豐富的信息（圖片，動畫，聲音等）
標記（標簽）---<單詞>
              挨著<是標記
   標記通常有兩次含義：
   表型：每一個標簽都有一定表現(xiàn)形式
   表意：每一個標簽有一定的意義
語言：可以直接被瀏覽器解析，和程序語言不一樣

Html的標簽分類

雙標簽：開始標簽和結(jié)束標簽構(gòu)成，內(nèi)容放入開始標簽和結(jié)束標簽之間

語法：<標簽屬性名=”屬性值”> ……內(nèi)容…..</標簽>
屬性理解人的特征性別=”女” 體重=”45” 身高=”165”
例如 <div></div> <a></a> <html></html>

單標簽：只有開始標簽，沒有結(jié)束標簽，沒有內(nèi)容,在單標簽的后面一定要閉合

語法：<標簽屬性名=”屬性值” 屬性名=”屬性值” />
例如 <link /> <img /> <br /> <meta />

Html基本骨架結(jié)構(gòu)

<html>
<head>
<title>網(wǎng)站的標題</title>
</head>
<body>
</body>
</html>
html文件的擴展名是 XXX.html-----保存XXX.html
html結(jié)構(gòu)說明：

<html>含義：告訴瀏覽器，網(wǎng)頁的代碼用什么格式來解析
<head>含義：告訴瀏覽器網(wǎng)頁的漢子用什么字符集，使用的字符集不正確，就會出現(xiàn)亂碼 gb2312 簡體中文 ----（漢字操作系統(tǒng)默認使用的）gbk國標碼 utf-8多國語言
<title>含義：便于搜索引擎
<body>含義：網(wǎng)站的內(nèi)容，99%的內(nèi)容都放入body標簽中，只有放入該標簽，才能在窗口顯示

注意：tab鍵可以縮進

Html的書寫規(guī)范

Html不區(qū)分大小寫，但是w3c使用的是小寫 <body> 不推薦<BODY>
Html如果有標簽嵌套，順序嵌套，不能交叉
單標簽一定要閉合（/）例如 <br />
屬性：每一個標簽有沒有屬性，有多少---w3c規(guī)定好的
屬性值：雙引號引起

Html注釋

注釋的內(nèi)容不在窗口中顯示
<!—注釋內(nèi)容-->

Html文本標簽

Font 設置文本的顏色文本的字體文本的大小
設置的內(nèi)容</font>

屬性

設置文本的顏色例如color=”red” color=”#ff0000”
設置文本的大小例如 size=”5” 是以號為單位
設置文本的字體例如 face=”隸書”

需求：輸入一段文本設置該段的前五個字，文本顏色為藍色blue #0000ff,文本的大小為6號，字體為楷體

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

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

注意：一定要順序嵌套，不能交叉
需求：輸入一段內(nèi)容，最后8個字，文本顏色是綠色 green #00ff00，字體為宋體，---加粗傾斜加下劃線

Html段落的標簽

<p></p> 一段
段落的屬性
Align 取值 left center right
<h1></h1> 標題1
<h2></h2> 標題2
。。。
<h6></h6>標題6
標題的屬性
Align 取值 left center right
需求：輸入兩段內(nèi)容，在第一段的前面加一個標題二，標題二的內(nèi)容居中
Pre標記：預定義標簽，保留原有的空格和換行
Div ：是網(wǎng)站上使用的標簽最多之一，本身沒有任何意義，自己獨自一行，結(jié)合css樣式一起使用，構(gòu)成相應的效果塊標簽

Span 本身沒有任何的含義，但是也是網(wǎng)站使用最多標簽之一，結(jié)合css一起使用構(gòu)成功能，行內(nèi)標簽
塊標簽：輸入完標簽之后，自己獨占一行
那些屬于塊標簽 <h1></h1>…<h6></h6> <p></p> <div></div>
行內(nèi)標簽：輸入完標簽之后，不是自己獨占一行
那些屬于行內(nèi)標簽 <em><span><i><u>
需求輸入兩段內(nèi)容，第一段和第二段用div包裹，在第一段的前面加標題3，改標題顏色為藍色

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

效果

列表

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

無序列表

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

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

有序列表

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