前端技能-HTML篇

發(fā)布時(shí)間：2020-06-16 01:56:11 來(lái)源：網(wǎng)絡(luò) 閱讀：424 作者：xccvista 欄目：移動(dòng)開(kāi)發(fā)

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

下面我來(lái)解釋一下

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

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

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

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

一.HTML聲明

<!DOCTYPE HTML>

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

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

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

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

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

過(guò)渡文件類(lèi)型描述是向嚴(yán)格的文件類(lèi)型描述過(guò)渡的緩沖。

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

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

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

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

<dtd聲明>

<html>

<head>

</head>

</html>

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

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

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

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

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

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

<div>Hello world!</div>

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

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

前一陣子有個(gè)朋友跟我提起除了塊級(jí)元素,內(nèi)聯(lián)元素還有別的分類(lèi),就是把table,ul等具有清晰語(yǔ)義化的元素從塊級(jí)元素中分類(lèi)出來(lái).因?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ǔ)義化,這塊說(shuō)起來(lái)還是比較復(fù)雜的.要清晰的知道每個(gè)常用元素的作用并正確的應(yīng)用.

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

<!DOCTYPE html>
<htmlang = "en">
<head>
  <!--meta多用于頁(yè)面的初始化中的參數(shù)說(shuō)明,常用的有字符串編碼,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>前端入門(mén)</h2>
    <!--標(biāo)題2-->
    <h3>web程序開(kāi)發(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>今天來(lái)講講html的一些知識(shí)<br/>
    這個(gè)文檔結(jié)構(gòu)就是目前比較激進(jìn)一點(diǎn)的前端采用的語(yǔ)義化布局方式
    如何使用傳統(tǒng)布局,這個(gè)在下面將css的時(shí)候會(huì)說(shuō)到.
  </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è)文檔布局,沒(méi)有使用任何樣式修飾,用了常用的一些標(biāo)簽.表現(xiàn)的還算不錯(cuò).至少看起來(lái)不是亂糟糟的.

四.網(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="圖片說(shuō)明">
<a href="/" title="鏈接說(shuō)明">鏈接詞</a>
<strong>重點(diǎn)關(guān)鍵詞強(qiáng)調(diào)</strong>

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

向AI問(wèn)一下細(xì)節(jié)

前端技能-HTML篇

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽