前端攻城獅---html基礎(chǔ)標(biāo)簽

最近對(duì)前端特有興趣 索性就學(xué)起了前端 通過(guò)視頻和培訓(xùn)機(jī)構(gòu) 不過(guò)自己感覺(jué)這個(gè)培訓(xùn)機(jī)構(gòu)是真的好 哈哈 等我學(xué)成歸來(lái) 再來(lái)大波廣告。

開(kāi)發(fā)工具

對(duì)于前端的開(kāi)發(fā)工具 目前我選擇sublime 加上安裝些插件 開(kāi)發(fā)如魚(yú)得水 如 Emmet jQuery 等等

認(rèn)識(shí)html結(jié)構(gòu)

什么叫html？ 它的全拼叫Hyper Text Markup Language(超文本標(biāo)記語(yǔ)言)
本來(lái)這就是個(gè)標(biāo)記的語(yǔ)言，但卻有找過(guò)了它本來(lái)的含義，名字取得非常的巧妙。
我們先來(lái)看看一個(gè)基本的html結(jié)構(gòu)吧 以下html4.01 Transitonal的結(jié)構(gòu)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

DTD的認(rèn)識(shí)

我們先來(lái)看看第一行 非常長(zhǎng)的一大段 <!DOCTYPE....>簡(jiǎn)稱DTD(文檔類型聲明)，類型那一共有7種，DTD決定了這個(gè)html骨架用的是哪個(gè)版本，能使用哪些語(yǔ)法。

一共有以下7種

html4.01分三個(gè)小版本
  • html4.01 Strict (嚴(yán)格版):一些老的語(yǔ)法標(biāo)簽不能使用( 如< br/>)
  • html4.01 Transitonal(過(guò)渡版):就是可以使用一些老的語(yǔ)法標(biāo)簽
  • html4.01 Frameset(框架集版):就是可以使用框架集
XHTML 擴(kuò)展的html
  • XHTML Strict (嚴(yán)格版)
    *XHTML Transitonal(過(guò)渡版)
  • XHTML Frameset(框架集版)
html5

一共以上7種
html5主要那個(gè)移動(dòng)端web開(kāi)發(fā)，那么xhtml和html4.01的主要區(qū)別就是，xhtml對(duì)語(yǔ)法標(biāo)簽的格式要求更加嚴(yán)格，XHTML1.0 規(guī)定標(biāo)簽必須要小寫

head的認(rèn)識(shí)

head 里面我們來(lái)認(rèn)識(shí)一下meta 和 title

meta

1.主要的可以用來(lái)設(shè)置整個(gè)html的字符集，通過(guò)meta的content的屬性來(lái)設(shè)置(注:如果說(shuō)網(wǎng)頁(yè)只在國(guó)內(nèi)的話 可以吧utf-8改成gbk/gb-2312,因?yàn)檎加玫淖止?jié)不同可以起到優(yōu)化的作用)優(yōu)化1
2.可以用來(lái)優(yōu)化搜索引擎
如 :<meta name="keywords" content="電器 數(shù)碼 衣服 ">

title

主要是表示頁(yè)面的名字

body

body就是用來(lái)填寫整個(gè)界面的界面和內(nèi)容。

html的特點(diǎn)

  • html對(duì)換行 縮進(jìn) 空格特別的不敏感：我們可以將全部的代碼縮進(jìn)成一行，程序也能照樣編寫，所以在發(fā)布正式的項(xiàng)目的時(shí)候，我們需要去掉所有的空格 回車等可以說(shuō)這么做起到優(yōu)化的作用 優(yōu)化2
  • 空白折疊 ：<p>1 1</p>兩個(gè)1之間無(wú)論加了多少個(gè)空格多少個(gè)回車，最后都只壓縮到一個(gè)空格

標(biāo)簽的認(rèn)識(shí)

  • 單標(biāo)簽 <img />
  • 雙標(biāo)簽 <p></p> <div></div> <h1></h1> ...

標(biāo)簽的使用角度 又可以分成 1.文本級(jí)標(biāo)簽和容器級(jí)標(biāo)簽

  • 容器級(jí)標(biāo)簽
    里面啥都可以裝 甚至可以裝自己
    <div>
    <div></div>
    </div>
  • 文本級(jí)標(biāo)簽
    放文字、圖片、表單元素或其他文本級(jí)標(biāo)簽
    <p><span></span></p>

常見(jiàn)標(biāo)簽

  • <img/>
    <img src="路徑" alt="圖片加載失敗后的文字提示" title="鼠標(biāo)懸停時(shí)候的提示" />
    如 <img src="images/haha.png" alt="圖片加載失敗后的文字提示" title="鼠標(biāo)懸停時(shí)候的提示" />
  • <a></a>超鏈接
    <a title="鼠標(biāo)懸停的時(shí)候提示文字" target="_blank">百度</a>
    target="_blank" 表示點(diǎn)擊后彈出新的界面
    超鏈接錨點(diǎn)的使用 
無(wú)數(shù)的文字無(wú)數(shù)的文字<a name="maodian"></a>無(wú)數(shù)的文字  無(wú)數(shù)的文字無(wú)數(shù)的文字無(wú)數(shù)的文字
<a href="#maodian"/>點(diǎn)擊我 我會(huì)跳轉(zhuǎn)到錨點(diǎn)的位置</a>

我們來(lái)認(rèn)識(shí)一下 第一個(gè)超鏈接的作用就是錨點(diǎn)，當(dāng)它被一大堆文字包裹的時(shí)候，內(nèi)容多到網(wǎng)頁(yè)都可以出現(xiàn)上下輪動(dòng)了，那么我們點(diǎn)擊第二個(gè)超鏈接，就會(huì)跳轉(zhuǎn)到第一個(gè)超鏈接所在的位置。

  • 列表
  1. 有序列表
<ul>
          <li> </li>
          <li></li>
          <li></li>
</ul>
  1. 無(wú)需列表
<ol>
       <li></li>
        <li></li>
</ol>
  1. 自定義列表
<dl>
              <dt></dt>//標(biāo)題
              <dd></dd>//內(nèi)容
</dl>
  • 表單
<input type="text" />
<input type="file" />
<input type="password" />
<input type="radio"  />
<input type="checkbox"/>
<select name="" id="">
    <option value=""></option>
</select>
<textarea cols="40" rows="20">這家伙很懶 啥都沒(méi)留下</textarea>
<input type="button" value="俺很普通"/>
<input type="submit" value="提交" />
<input type="reset"  value="重置"/>

*表格

<table border="1">
            <caption>標(biāo)題</caption>
        <!-- tr表示行-->
        <tr>
            <!--td單元格-->
            <th>國(guó)家</th>
            <th>人口</th>
            <th>所屬洲</th>
        </tr>
        <tr>
            <td>中國(guó)</td>
            <td>14億</td>
            <!--rowspan表示橫跨兩行,行合并-->
            <td rowspan="2">亞洲</td>
        </tr>
        <tr>
            <td>韓國(guó)</td>
            <td>6億</td> 
        </tr>
        <tr>
            <td>法國(guó)</td>
            <td>4億</td>
            <td>歐洲</td>
        </tr>
        <tr>
            <!--colspan表示占據(jù)2列，列合并-->
            <td colspan="2">澳大利亞5億</td>
            <td>澳洲</td>
        </tr>
    </table>

大家可以把以上代碼加入body中，去跑跑看看效果，便于理解

  • div span
    div span 都是沒(méi)有語(yǔ)義的標(biāo)簽，可以把它們理解成容器，div可以防止任何標(biāo)簽的容器，span一般是來(lái)存放語(yǔ)義標(biāo)簽的容器
  • 字符實(shí)體
    大家也知道<a>這是一個(gè)超文本標(biāo)簽，但是如果我們想要在p標(biāo)簽中顯示<a>這樣的內(nèi)容，如果是直接<p><a></p>,那么肯定是識(shí)別不了，html會(huì)把<a>當(dāng)成標(biāo)簽來(lái)識(shí)別而不是內(nèi)容，這個(gè)時(shí)候我們需要使用字符實(shí)體。
    <p>&lta&gt</p> 這樣最終在網(wǎng)頁(yè)上顯示的是<p><a></p>
  1. &字母;
  2. & lt; <
  3. & gt; >
  4. & copy; 版權(quán)
  5. & nbsp; 空格

html的基礎(chǔ)已經(jīng)講完，接下來(lái)會(huì)來(lái)講css2.1的樣式，如有表達(dá)錯(cuò)的請(qǐng)諒解和提出錯(cuò)的點(diǎn)，大家共同進(jìn)步。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容