前端技能-HTML篇

HTML是前端的核心基礎(chǔ)技能之一,掌握HTML是前端所必須的.

玉田網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

下面我來解釋一下

HTML是誕生于1980年,是一種有tag的標(biāo)記語(yǔ)言,關(guān)于這玩意的歷史,我就不贅述了,有興趣了解的可以看維基百科,下面給出鏈接:

http://zh.wikipedia.org/wiki/HTML

這里面容易混淆幾個(gè)概念,HTML,DHTML,XHTML,XML,.dtd文件

這邊我不做過多說明,維基百科有詳細(xì)的解釋.有興趣可以詳細(xì)的了解

一.HTML聲明

<!DOCTYPE HTML>

  • 此聲明說明這個(gè)文件是HTML5。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                        "http://www.w3.org/TR/html4/strict.dtd">

  • 這個(gè)聲明說明文檔服從HTML 4.01的嚴(yán)格文件類型描述，這個(gè)標(biāo)準(zhǔn)是嚴(yán)格結(jié)構(gòu)化的，使用CSS來做格式化。有時(shí)是否存在一個(gè)合適的文件類型描述會(huì)影響一個(gè)瀏覽器顯示網(wǎng)頁(yè)的方式。

除了HTML 4.01的嚴(yán)格文件類型描述之外，HTML 4.01也提供“過渡”和“框架集”文件類型描述。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                        "http://www.w3.org/TR/html4/loose.dtd">

  • 過渡文件類型描述是向嚴(yán)格的文件類型描述過渡的緩沖。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
                        "http://www.w3.org/TR/html4/frameset.dtd">

以上幾種dtd的聲明,是一定要寫的,放在html文件的第一行,供瀏覽器解析,一般是只寫一種.

為什么要把dtd拉出來單獨(dú)說,是因?yàn)樵贗E6-8中,不嚴(yán)格的dtd聲明會(huì)引起很多css樣式問題.這個(gè)在解決多瀏覽器兼容問題的時(shí)候,是首先要看的一個(gè)注意點(diǎn).

二.HTML基本結(jié)構(gòu)

<dtd聲明>

<html>

<head>

   <title>文檔的標(biāo)題</title>

</head>

<body>文檔的內(nèi)容... ... </body>

</html>

   

   head標(biāo)簽:<base>, <link>, <meta>, <script>, <style>, 以及 <title>

   具體的作用可以點(diǎn)開鏈接看一看,我就不一一的去寫每個(gè)的作用了,看看w3c就蠻好的

   

   body標(biāo)簽:這個(gè)里面的內(nèi)容就是比較重要的一些東西,上面的東西可以記住就可以了,body里面的東西需要靈活運(yùn)用.

 

三.標(biāo)簽元素及其語(yǔ)義化

   從標(biāo)簽的解析表現(xiàn)形式來看,標(biāo)簽大致可以分兩種,行內(nèi)元素(內(nèi)聯(lián)元素),塊級(jí)元素,當(dāng)然還有隱式的元素.比如style,跟script

   html表現(xiàn)形式簡(jiǎn)單的說,是標(biāo)簽包裹文字,或者其他的信息例如:

   <div>Hello world!</div>

   行內(nèi)元素簡(jiǎn)單的說,是在文檔解析流中,不會(huì)主動(dòng)換行的.而塊級(jí)元素是主動(dòng)換行的.

   這個(gè)特性是非常重要的點(diǎn),就像寫文章的段落化一樣.一篇文章只有句段分明才能清晰表達(dá)文章中心思想.Html也是一樣的.

   前一陣子有個(gè)朋友跟我提起除了塊級(jí)元素,內(nèi)聯(lián)元素還有別的分類,就是把table,ul等具有清晰語(yǔ)義化的元素從塊級(jí)元素中分類出來.因?yàn)檫@些元素本身就具有相關(guān)的表現(xiàn)能力,不應(yīng)該放在籠統(tǒng)的塊級(jí)元素中.

   組織html標(biāo)簽最重要的一點(diǎn)就是語(yǔ)義化.這也是所有前端一致認(rèn)可的首要原則.一旦發(fā)生樣式表分離的異常,html能以較好的表現(xiàn)形式呈現(xiàn).

   關(guān)于標(biāo)簽,這塊我就不一一的去解釋了,多翻翻w3c的html標(biāo)簽列表,體會(huì)每個(gè)標(biāo)簽的意義,然后try it.多練練就知道.

   如何做好語(yǔ)義化,這塊說起來還是比較復(fù)雜的.要清晰的知道每個(gè)常用元素的作用并正確的應(yīng)用.

寫個(gè)簡(jiǎn)單的例子:

<!DOCTYPE html>
<htmlang = "en">
<head>
  <!--meta多用于頁(yè)面的初始化中的參數(shù)說明,常用的有字符串編碼,http鏈接頭信息等-->
<meta charset = "utf-8">
<!--頁(yè)面標(biāo)題現(xiàn)實(shí)在瀏覽器窗口欄處-->
<title>HTML5布局的demo</title>
</head>
<body>
    <!--html5中的新標(biāo)簽header,一般用于網(wǎng)站的頭部信息-->
<header>
    <!--標(biāo)題組,參考o(jì)ffice中的標(biāo)題-->
  <hgroup>
    <!--標(biāo)題1-->
    <h2>前端入門</h2>
    <!--標(biāo)題2-->
    <h3>web程序開發(fā)</h3>
  </hgroup>
</header>
<!--導(dǎo)航部分-->
<nav>
  <!--列表-->
  <ul>
    <li>我是列表內(nèi)容1</li>
    <li>我是列表內(nèi)容2</li>
  </ul>
</nav>
<!--這個(gè)標(biāo)簽多用于文檔塊區(qū)段等-->
<section>
  <article>今天來講講html的一些知識(shí)<br/>
    這個(gè)文檔結(jié)構(gòu)就是目前比較激進(jìn)一點(diǎn)的前端采用的語(yǔ)義化布局方式
    如何使用傳統(tǒng)布局,這個(gè)在下面將css的時(shí)候會(huì)說到.
  </article>
  <br/>
  <h5>一個(gè)簡(jiǎn)單的表格信息</h5>
  <table border=1px>
    <thead>
      <tr>
        <th>序號(hào)</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
        <th>年級(jí)</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td>1</td>
          <td>王小丫</td>
          <td>18</td>
          <td>女</td>
          <td>幼兒班</td>
        </tr>
        <tr>
          <td>2</td>
          <td>王二丫</td>
          <td>18</td>
          <td>女</td>
          <td>小班</td>
        </tr>
        <tr>
          <td>3</td>
          <td>王小蛋</td>
          <td>18</td>
          <td>女</td>
          <td>大班</td>
        </tr>
    </tbody>
  </table>
</section>
<br/>
<br/>
<br/>
<!--腳部信息-->
<footer>我是腳部,可以放授權(quán)信息,聯(lián)系方式等等</footer>
</body>

預(yù)覽效果:

前端技能-HTML篇

   

這個(gè)文檔布局,沒有使用任何樣式修飾,用了常用的一些標(biāo)簽.表現(xiàn)的還算不錯(cuò).至少看起來不是亂糟糟的.

四.網(wǎng)站的seo優(yōu)化

   如果你有了良好的語(yǔ)義化標(biāo)簽組織的意識(shí),這時(shí)候再去了解搜索引擎在抓取網(wǎng)頁(yè)的時(shí)候,權(quán)重比就可以很輕松掌握相關(guān)的技巧.以下是SEO權(quán)重比較大的幾個(gè)標(biāo)簽.具體可以找?guī)灼嚓P(guān)的介紹頁(yè)面看看.也就明白了,其實(shí)比較簡(jiǎn)單的.

<title>頁(yè)面標(biāo)題</title>
<meta name="description" content="網(wǎng)站描述">
<meta name="keywords" content="關(guān)鍵詞">
<h2>頁(yè)面內(nèi)容標(biāo)題</h2>
<h3>頁(yè)面相關(guān)性標(biāo)題</h3>
<img src="xxx.jpg" alt="圖片說明">
<a href="/" title="鏈接說明">鏈接詞</a>
<strong>重點(diǎn)關(guān)鍵詞強(qiáng)調(diào)</strong>

ps:學(xué)習(xí)前端不是一日的功夫就可以成功的,基礎(chǔ)要打牢.以上雖然看著比較簡(jiǎn)單,但是之后的內(nèi)容,會(huì)越來越深入的剖析.

網(wǎng)站題目：前端技能-HTML篇
轉(zhuǎn)載源于：http://muchs.cn/article26/ijdjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、軟件開發(fā)、微信小程序、Google、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司