h5小總結(jié)

之前看過了h5的視頻,做了一些筆記,但是做起網(wǎng)頁來還是比較困難,就是布局的一些東西沒有太懂;又重新開始看,先記錄一部分:

XHTML的元素語法標(biāo)簽所有瀏覽器都支持英文網(wǎng)頁

元素必須正確嵌套

元素必須始終關(guān)閉

元素必須小寫

文檔必須有一個根元素

XHTML的屬性語法規(guī)則

屬性必須使用小寫

屬性值必須用引號包圍

屬性最小化也是禁止的(不能簡寫)



<html lang="zh">中文網(wǎng)頁

&nbsp? 空格

<br/>換行

<meta charset="UTF-8">設(shè)置的編碼為UTF-8可以設(shè)置其他屬性

style? 規(guī)定元素的樣式

title? 規(guī)定元素的額外信息

meta name="description" content="這里是網(wǎng)頁的描述,是給搜索引擎看的,搜索引擎根據(jù)這個描述進(jìn)行收錄排名,一般是網(wǎng)頁內(nèi)的關(guān)鍵字。"

注釋<!--注釋內(nèi)容-->或<comment>...</comment>

塊元素 :h1-h6,p,hr

行內(nèi)元素 :img,a

區(qū)別? :? ? ? ? 1.塊元素獨占一行,行內(nèi)元素在同一行顯示;? ? ? ? 2.塊元素可以嵌套,行內(nèi)一般不嵌套? ? ? ? 3.塊元素寬度默認(rèn)100%,行內(nèi)元素由內(nèi)容撐開

布局:

所謂H5布局,說簡單點,就是用H5特有的新標(biāo)簽(語義化)來替代傳統(tǒng)布局方式。幾點注意如下:

1)css寫法不變,比如你定義標(biāo)簽,那css里就要這樣寫header{}。另外,H5標(biāo)簽也是可以加class或id的,css寫法沒啥區(qū)別,比如,.樣式名{} ?#樣式名{}

2)移動端網(wǎng)站H5標(biāo)簽(包括css3)是支持的,放心大膽去弄。如果是單純PC網(wǎng)站,建議傳統(tǒng)div方式布局比較合適;

3)響應(yīng)式網(wǎng)站,技術(shù)強(qiáng)迫癥,必須要用H5來做,那html5shiv.js或modernizr.js是不錯的IE兼容解決方案。注意:ie8以下是沒辦法的,可以頁面頂部彈出提醒升級你的IE,算友好體驗的一部分吧。

4)bootstrap。

H5布局標(biāo)簽如何選擇?

全局:

<header><header>:相當(dāng)于<div class="header"></div>

<footer></footer>:相當(dāng)于<div class="footer"></div>

<section></section>:相當(dāng)于<div></div>,以前習(xí)慣的div改為section,當(dāng)然你繼續(xù)用div也一樣

<aside></aside>:相當(dāng)于<div class="sidebar"></div>,比如常見的側(cè)邊欄

導(dǎo)航或者分頁:

<nav></nav>:<div class="nav"><ul></ul></div>

文章、帖子或者其它獨立的頁面:

<article></article>:相當(dāng)于<div class="article"></div>

<time></time>:日期時間什么的放里面就好了,相當(dāng)于<div class="time">2016-05-21 15:43:21</div>,支持pubdate屬性,表示為發(fā)布日期

<summary></summary>:標(biāo)簽包含 details 元素的標(biāo)題,”details” 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息。”summary” 元素應(yīng)該是 “details” 元素的第一個子元素。<details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

其它新標(biāo)簽:

<audio></audio>:標(biāo)簽定義聲音,比如音樂或其他音頻流。HTML5:<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>

<video></video>:標(biāo)簽定義視頻,比如電影片段或其他視頻流。<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>

<source>:標(biāo)簽為媒介元素(比如 <video> 和 <audio>)定義媒介資源。<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

<datalist></datalist>:標(biāo)簽定義可選數(shù)據(jù)的列表。與 input 元素配合使用,就可以制作出輸入值的下拉列表。

<figure> 標(biāo)簽用于對元素進(jìn)行組合。使用 <figcaption> 元素為元素組添加標(biāo)題。<figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>(是不是類似dl dt dd)

<mark></mark>:主要用來在視覺上向用戶呈現(xiàn)那些需要突出的文字。<mark>標(biāo)簽的一個比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。傳統(tǒng)如<span></span>

<hgroup></hgroup>:標(biāo)簽用于對網(wǎng)頁或區(qū)段(section)的標(biāo)題進(jìn)行組合。

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

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

  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)》時,所整理的筆記。筆記內(nèi)容為根據(jù)個人需求所...
    墨荀閱讀 2,475評論 0 7
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,955評論 0 0
  • 課程目標(biāo): 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握C...
    繁華退卻閱讀 1,804評論 0 0
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,668評論 1 32
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,729評論 0 6

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