首頁技術文章正文

黑馬程序員PHP培訓之HTML

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

Html介紹

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

Html的標簽分類

  • 雙標簽:開始標簽和結束標簽構成,內(nèi)容放入開始標簽和結束標簽之間
語法:<標簽 屬性名=”屬性值”>    ……內(nèi)容…..</標簽>
 屬性理解人的特征  性別=”女” 體重=”45” 身高=”165”
  例如 <div></div>  <a></a>  <html></html>
  • 單標簽:只有開始標簽,沒有結束標簽,沒有內(nèi)容,在單標簽的后面一定要閉合
  語法:<標簽 屬性名=”屬性值” 屬性名=”屬性值” />
   例如 <link />  <img /> <br />  <meta />

Html基本骨架結構

<html>
  <head>
    <title>網(wǎng)站的標題</title>
  </head>
  <body>
  </body>
</html>
html文件的擴展名是 XXX.html-----保存XXX.html
 html結構說明:
  • <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文本標簽

  1. Font 設置文本的顏色 文本的字體  文本的大小
  2. 設置的內(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)站上使用的標簽最多之一,本身沒有任何意義,自己獨自一行,結合css樣式一起使用,構成相應的效果 塊標簽

Span 本身沒有任何的含義,但是也是網(wǎng)站使用最多標簽之一,結合css一起使用構成功能,行內(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ā)生了什么?


自定義列表

<dl>
   <dt>自定義列表標題</dt>
   <dd>對該標題進行描述</dd>
</dl>

特殊字符

&nbsp;一個空格,代表一個字符,一個漢字占兩個字符
&copy;版權
&lt;  <
&gt;>
&yen;  ¥





本文版權歸黑馬程序員PHP培訓學院所有,歡迎轉載,轉載請注明作者出處,謝謝!
作者:黑馬程序員PHP培訓學院
首發(fā):http://php.itheima.com/
分享到:
在線咨詢 我要報名
和我們在線交談!