HTML5的基礎(chǔ)知識(shí)（01）
摘要：本系列HTML5主題的技術(shù)帖的目的不是學(xué)會(huì)編寫復(fù)雜的網(wǎng)頁，而是為了讀懂別人的網(wǎng)頁，以及嘗試編寫簡單的網(wǎng)頁。最終的目的是了解網(wǎng)頁技術(shù)，為爬取網(wǎng)絡(luò)信息作準(zhǔn)備。學(xué)習(xí)HTML5的最重要概念是：標(biāo)記。
00 什么是HTML
HTML的中文全稱是超文本標(biāo)記語言：超文本也是文本，超的意思是點(diǎn)擊一個(gè)文本可以跳到另一個(gè)文本，指網(wǎng)頁文件之間可以實(shí)現(xiàn)鏈接；標(biāo)記的意思是指，與普通文本相比，該類文本被做了標(biāo)記；語言則是指HTML可以被看作是一種編程語言，不過這種語言很特別，不像我們所了解的編程語言C，Java等。
01 為什么會(huì)有HTML5
面對日新月異的計(jì)算機(jī)技術(shù)，HTML5在HTML4基礎(chǔ)上發(fā)展而來，主要在應(yīng)用程序處理和多媒體上有了巨大進(jìn)步。
02 HTML5與XML的區(qū)別
同樣是前端語言，XML的X表示可擴(kuò)展性，因?yàn)閄ML允許用戶自定義標(biāo)記；XHTML其實(shí)就是用XML實(shí)現(xiàn)的HTML，所以XHTML和HTML在功能上基本相似，但XHTML具有可擴(kuò)展性，所以有更豐富的功能。曾經(jīng)人們認(rèn)為XHTML會(huì)替代HTML4，成為新的潮流，但事實(shí)告訴了我們，代替HTML4的是HTML5。為什么呢？筆者認(rèn)為，復(fù)雜性阻礙事物普及，互通性促進(jìn)事物普及。
03 HTML5的標(biāo)準(zhǔn)格式
比如，查看技術(shù)鄰頁面的html文件；
開頭；
其中的meta和script也是經(jīng)常出現(xiàn)在head之間的定義，后面會(huì)介紹。
結(jié)束；
04 HTML5的文本
標(biāo)記<title>指定網(wǎng)頁標(biāo)題；
標(biāo)記<meta>的功能有很多：可以定義關(guān)鍵字，讓人們在搜索網(wǎng)頁的時(shí)候，更容易發(fā)現(xiàn)該網(wǎng)頁；當(dāng)改變原網(wǎng)頁的URL時(shí)，可以重定位到新頁面；可以標(biāo)記網(wǎng)頁的字符編碼方式，比如純英文頁面可能會(huì)出現(xiàn)utf-8。
標(biāo)記<h1>~<h6>定義網(wǎng)頁內(nèi)容的標(biāo)題；
標(biāo)記<i>表示文字斜體，<b>表示文字粗體；
標(biāo)記<sup>表示文本在上標(biāo)，<sub>表示文本在下標(biāo)；
<kbd>表示文本固定寬度；
<blockquote>表示文本的引文縮進(jìn)；
<ol>表示有序列表，<li>封裝列表的一行，<ul>表示無序列表；
列表也可以進(jìn)行嵌套，有序列表內(nèi)部嵌套無序列表；
在這里要提一點(diǎn)，每個(gè)標(biāo)記內(nèi)部都可以定義其屬性，比如改變有序列表的編號(hào)方式，從3開始編號(hào)，強(qiáng)制標(biāo)為5等，不勝枚舉。
還有一種特殊的列表，稱為定義列表(dl, definition list)，標(biāo)記如下；
網(wǎng)頁顯示效果如下；
文本中特殊字符的寫法，注意沒有符號(hào)<>；
<hr>可以在網(wǎng)頁中插入水平分割線；
為整個(gè)網(wǎng)頁指定顏色，可以通過定義<body>的屬性，以下三種定義等效；
也可以定義網(wǎng)頁上字體的顏色；
為網(wǎng)頁指定背景圖片；
<a>定義超文本鏈接（一個(gè)網(wǎng)頁轉(zhuǎn)跳到另一個(gè)網(wǎng)頁），標(biāo)記如下；
效果如下，在Microsoft.com上定義了超鏈接，點(diǎn)擊該文字就可以觸發(fā)href后面的網(wǎng)址；
如果需要在新窗口瀏覽所鏈接網(wǎng)頁，可以設(shè)置屬性；
當(dāng)然也可以鏈接到郵箱；
也可以鏈接到當(dāng)前網(wǎng)頁的某個(gè)位置，這需要在目標(biāo)位置定義錨；
定義錨，也是標(biāo)記<a>；
定義超文本鏈接；
其實(shí)超文本鏈接可以指向任何文件，比如；
文本的標(biāo)記還有很多，無法盡舉；
05 HTML5的表格
<table>在網(wǎng)頁中插入表格，<tr>定義表格的行，<td>定義單元格；
可以指定表格的大小；
可以指定單元格的寬度；
表格還可以定義其它屬性，就像EXCEL一樣，花樣百出，這里無法盡舉。
與表格相似的還有表單，用于網(wǎng)頁訪問者反饋，標(biāo)記<form>用于封裝表單；
標(biāo)記<input>定義表單中的文本框；
標(biāo)記<textarea>定義表單中的多行文本框；
表單中的常見按鈕也可以通過<input>來定義；
按鈕顯示效果；
還有其它形式的反饋表單，比如菜單式可以用標(biāo)記<select>和<option>；
其它不盡舉
06 HTML5的圖片
標(biāo)記<img>在網(wǎng)頁中插入圖像；
在屬性中定義圖像的位置；
調(diào)整圖像尺寸；
調(diào)整圖像內(nèi)邊距，外邊距；
為圖像添加超文本鏈接；
可以在插入圖片的同時(shí)，在屬性中添加文本，如果某設(shè)備的瀏覽器不支持圖片瀏覽，就會(huì)顯示該文本；
<figure>,<figurecaption>給圖片添加標(biāo)題；
圖片標(biāo)記還有有很多，無法盡舉。
07 HTML5的媒體文件
<vedio>插入視頻；
<audio>插入音頻；
其它各種標(biāo)記及其屬性，無法盡舉；
08 HTML5的網(wǎng)頁布局
標(biāo)記<div>定義網(wǎng)頁的分區(qū)，非常常見；
<header>，<footer>，<article>，<aside>，<section>也可以實(shí)現(xiàn)頁面布局的功能；
在屬性中還可以指定分區(qū)的位置和格式等。
09 HTML5的頁面導(dǎo)航
<nav>定義導(dǎo)航欄；
網(wǎng)頁顯示效果；
很顯然，也可以將導(dǎo)航欄的按鈕換成圖片；
也可以為圖片的某個(gè)區(qū)域定義超鏈接；
工程師必備
- 項(xiàng)目客服
- 培訓(xùn)客服
- 平臺(tái)客服
TOP
