溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5學(xué)習(xí)筆記(一）

發(fā)布時(shí)間：2020-06-03 18:05:27 來源：網(wǎng)絡(luò) 閱讀：549 作者：qe2592008 欄目：移動(dòng)開發(fā)

HTML5是一個(gè)嶄新的標(biāo)記語言。

HTML5提供許多新的標(biāo)簽，這些標(biāo)簽其實(shí)大多數(shù)在我們以往的網(wǎng)頁設(shè)計(jì)中已經(jīng)經(jīng)常用到了，只是HTML5將其標(biāo)準(zhǔn)化了而已。所以我們的設(shè)計(jì)理念方法其實(shí)還是不變的，只是將需要替換的標(biāo)簽進(jìn)行替換即可，當(dāng)然HTML5還提出了不少新的理念，這些個(gè)內(nèi)容則需要我們認(rèn)真去研究一下了，所以我們學(xué)習(xí)HTML5，其實(shí)就是在學(xué)習(xí)這些新的設(shè)計(jì)理念。

    下面我就來研究一下HTML5

1、關(guān)于申明

    老版的HTML（HTML4.01、XHTML1.0）開頭的申明語句內(nèi)容極為豐富，豐富到我看著就哆嗦的地步，太長(zhǎng)了，我是記不住，每次就是網(wǎng)站復(fù)制。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    HTML5中對(duì)網(wǎng)站申明進(jìn)行了大改革，短短一句

<!DOCTYPE HTML>

道盡了一切，精簡(jiǎn)的語句會(huì)令整個(gè)代碼顯得非常整潔。

2、文檔編碼

    這個(gè)文檔編碼同樣也獲得了精簡(jiǎn)的權(quán)利，此后僅僅需要在<head></head>之間加上一句

<meta charset=”utf-8”>

，同樣非常簡(jiǎn)單。

  附：原文檔編碼：
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

3、語義性標(biāo)簽

    HTML5讓人津津樂道的一個(gè)方面就是她新增的諸多語義性標(biāo)簽，這些標(biāo)簽極大地規(guī)范了代碼的意義。

首先我先搭建一個(gè)簡(jiǎn)單地、標(biāo)準(zhǔn)的HTML5頁面代碼：

<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
</head>
<body>
<header>
<nav>導(dǎo)航</nav>
</header>
<section>
<article>文章</article>
<aside>側(cè)邊欄</aside>
</section>
<footer>結(jié)尾</footer>
</body>
</html>


    從上面的代碼中可以很輕松的看出來他與以前的代碼的區(qū)別：以前的許多許多的<div class=””><div id=””>沒有了，取而代之的是語義更為明確的標(biāo)簽，強(qiáng)大的語義標(biāo)簽幾乎可以控制整個(gè)頁面，因?yàn)樗麄冎С智短祝粋€(gè)頁面有開頭、內(nèi)容、結(jié)尾，這其中的內(nèi)容、結(jié)尾同樣可以擁有自己的開頭、內(nèi)容、結(jié)尾，而且還可以持續(xù)嵌套下去，也就是說，幾乎每一個(gè)標(biāo)簽的開合就會(huì)形成一個(gè)閉合的空間，在這個(gè)空間的內(nèi)部可以衍生出完美的事物（即語義標(biāo)簽在一個(gè)網(wǎng)頁中并不是只能出現(xiàn)一次，他不僅可以出現(xiàn)多次，而且在不同的空間中時(shí)互相之間并不干擾，她只為他所在的空間服務(wù)）。

語義標(biāo)簽

序號(hào)
標(biāo)簽
意義


1
nav
定義導(dǎo)航


2
header
定義文檔頁眉


3
section
定義文檔區(qū)域


4
article
定于一篇文章


5
aside
定義側(cè)邊欄或相關(guān)內(nèi)容


6
footer
定義文檔頁尾


接上所述，上文曾提到，每個(gè)語義標(biāo)簽都可以形成一個(gè)獨(dú)立的自我空間，其內(nèi)部的一切皆由該語義標(biāo)簽來限定，即其內(nèi)部的一切并不會(huì)影響該標(biāo)簽外部的區(qū)域，這樣就有了這樣一個(gè)例子，以前我們使用<h2>~<h7>標(biāo)簽時(shí)，通常遵循這樣的慣例：一個(gè)HTML文檔內(nèi)部有且只能有一個(gè)<h2>標(biāo)簽，用于定義該網(wǎng)頁的主標(biāo)題，而其余的各個(gè)標(biāo)題則使用<h3>或<h4>標(biāo)簽來定義，以突出主標(biāo)題的重要性，為網(wǎng)頁的SEO提供條件；然而現(xiàn)在，我們有了HTML5，我們可以在每個(gè)獨(dú)立的空間內(nèi)利用<h2>來定義自己的主標(biāo)題，利用<h3>或<h4>來定義副標(biāo)題，由于每個(gè)語義標(biāo)簽的獨(dú)立性，其內(nèi)部的<h2>將不會(huì)影響到主頁面的主標(biāo)題的權(quán)重。如下面的例子所示：

<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
</head>
<body>
<header>
<nav>導(dǎo)航</nav>
</header>
<h2>主頁面標(biāo)題</h2>
<section>
<h2>區(qū)域1標(biāo)題</h2>
<article>
<h2>文章1標(biāo)題</h2>
<p>文章1內(nèi)容</p>
</article>
<article>
<h2>文章2標(biāo)題</h2>
<p>文章2內(nèi)容</p>
</article>
</section>
<section>
<h2>區(qū)域2標(biāo)題</h2>
<article>
<h2>文章3標(biāo)題</h2>
<p>文章3內(nèi)容</p>
</article>
<article>
<h2>文章4標(biāo)題</h2>
<p>文章4內(nèi)容</p>
</article>
</section>
<aside>側(cè)邊欄</aside>
<footer>結(jié)尾</footer>
</body>
</html>




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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手