河南省住房和城鄉(xiāng)建設(shè)廳官方網(wǎng)站上海培訓(xùn)機構(gòu)白名單
文章目錄
- 基礎(chǔ)知識
- 什么是HTML
- W3C標(biāo)準(zhǔn)
- 在IDEA中創(chuàng)建一個html文件
- HTML的基本結(jié)構(gòu)
- 網(wǎng)頁基本信息
- 網(wǎng)頁的基本標(biāo)簽
- 圖像標(biāo)簽
- 鏈接標(biāo)簽
- 文本鏈接
- 圖片鏈接
- 圖片格式
- 錨鏈接
- 功能性鏈接
- 其他基本標(biāo)簽
- 塊元素和行內(nèi)元素
- 標(biāo)簽對照表
- 列表
- HTML3種列表
- 有序列表
- 無序列表
- 定義列表
- HTML學(xué)習(xí)中的誤區(qū)
- 表格
- 標(biāo)簽
- 基本結(jié)構(gòu)
- 補充
- 表格完整結(jié)構(gòu)
- 表單
- input標(biāo)簽表單
- textarea標(biāo)簽表單
- select和option
- 多媒體
- 插入音頻、視頻和flash
- 插入背景音樂
- 表單的應(yīng)用
- 補充:增強鼠標(biāo)可用性
- 表單的初級驗證
- 頁面結(jié)構(gòu)分析
- 內(nèi)聯(lián)框架
- 設(shè)置浮動框架是否顯示滾動條scrolling
- 進階
- HTML、XHTML和HTML5
- div和span
- id和class
- 瀏覽器標(biāo)題欄小圖標(biāo)
- 語義化
- (一)簡介
- (二)標(biāo)題語義化
- (三)圖片語義化
- (四)表格語義化
- (五)表單語義化
- (六)其他語義化
- (七)語義化驗證
- HTML5舍棄的標(biāo)簽
- HTML5
- 一、什么是 HTML5
- 二、HTML5 新增標(biāo)簽
- 多媒體音頻標(biāo)簽
- 多媒體視頻標(biāo)簽
- 多媒體標(biāo)簽總結(jié)
- 新增 input 標(biāo)簽
- 新增表單屬性
基礎(chǔ)知識
什么是HTML
Hyper Text Markup Language(超文本標(biāo)記語言)
W3C標(biāo)準(zhǔn)
W3C:World Wide Web Consortium(萬維網(wǎng)聯(lián)盟)
W3C標(biāo)準(zhǔn)包括:
- 結(jié)構(gòu)化標(biāo)準(zhǔn)語言(Html、Xml)
- 表現(xiàn)標(biāo)準(zhǔn)語言(CSS)
- 行為標(biāo)準(zhǔn)(DOM、ECMASript)
在IDEA中創(chuàng)建一個html文件
1、首先可以將創(chuàng)建好的工程中的src文件夾刪除
2、新建一個Directory(即文件夾),起名
3、在其中,new一個html文件
4、右上角的瀏覽器標(biāo)識,點擊可以用對應(yīng)的瀏覽器打開我們寫的代碼對應(yīng)的網(wǎng)頁(如果安裝了顯示的瀏覽器)
HTML的基本結(jié)構(gòu)
網(wǎng)頁基本信息
1、添加注釋的快捷鍵:crtl+/
2、所有網(wǎng)頁內(nèi)容必須寫在<html><html><html>中
3、【補充】SEO定義:在掌握搜索引擎規(guī)則的前提下,對網(wǎng)站進行內(nèi)部以及外部的調(diào)整以及優(yōu)化,使網(wǎng)站在搜索引擎中的關(guān)鍵詞排名靠前,獲取更多的流量。
<!--DOCTYPE:告訴瀏覽器,我們要使用什么規(guī)范 --><!DOCTYPE html>
<html lang="en">
<!--head標(biāo)簽代表網(wǎng)頁頭部-->
<head>
<!-- meta是描述性標(biāo)簽,用來描述網(wǎng)站的一些信息 -->
<!-- meta一般用來做SEO--><meta charset="UTF-8"><meta name="keywords" content="狂神說Java"><meta name="description" content="學(xué)習(xí)Java">
<!-- title標(biāo)簽代表網(wǎng)頁標(biāo)題--><title>Title</title>
</head>
<body></body>
</html>
網(wǎng)頁的基本標(biāo)簽
- 標(biāo)題標(biāo)簽
<h1>一級標(biāo)簽</h1>
<h2>二級標(biāo)簽</h2>
<h3>三級標(biāo)簽</h3>
<h4>四級標(biāo)簽</h4>
<h5>五級標(biāo)簽</h5>
<h6>六級標(biāo)簽</h6>
樣式:
- 段落標(biāo)簽
<!--一個p標(biāo)簽就是一段-->
<p>Hello</p>
<p>world</p>
可以通過先輸入一個p,之后按Tab鍵,就可以補全p標(biāo)簽
- 換行標(biāo)簽
<!--雖然換行了,但還是同一段。是自閉合標(biāo)簽-->
Hello <br/>
world <br/>
和段落標(biāo)簽樣式的區(qū)別:
- 水平線標(biāo)簽
<hr/>
- 字體樣式標(biāo)簽
<!--粗體、斜體-->
粗體:<strong>I love you.</strong>
斜體:<em>I love you.</em>
- 特殊符號
<!--特殊符號-->
空格
大于號>
小于號<
版權(quán)符號©
<!--
多行
注釋
-->
<br/>
空 格
<br/>
空>格
<br/>
空<格
<br/>
空©格
樣式:
空格符號記憶方式:以&開始,以;結(jié)尾,可以通過提示查看
圖像標(biāo)簽
BMP:位圖
圖像的替代文字:如果圖像沒加載出來,顯示的文字
鼠標(biāo)懸停提示文字:把鼠標(biāo)放在圖片上顯示的文字
先創(chuàng)建一個文件夾,起名為resources,用于存儲相關(guān)資源,在其中又新建了一個image文件夾,用于存儲圖片資源
- 地址
用 …/ 代表上一級目錄
<img src="../resources/image/1.jpg" alt="吉大照片"title="懸停文字"width="300"height="500">
加載失敗時:
其中src和alt是必填的
鏈接標(biāo)簽
文本鏈接
<!--
a標(biāo)簽
herf:必填,表示要跳轉(zhuǎn)到哪個頁面
target:表示窗口在哪里打開_blank 在新標(biāo)簽頁打開_self 在當(dāng)前頁面打開_parent_top
-->
<a href="圖像標(biāo)簽學(xué)習(xí).html">點擊我跳轉(zhuǎn)到圖片</a>
<a href="https://www.bilibili.com/">點擊我跳轉(zhuǎn)到bilibili</a>
圖片鏈接
圖片格式
雖然圖片格式這一節(jié)知識比較多,大部分我們只需要了解就可以了,我們只需要掌握.jpg、.png和.gif三種圖片格式的區(qū)別即可。
1、JPG可以很好處理大面積色調(diào)的圖像,如相片、網(wǎng)頁一般的圖片。
2、PNG格式圖片體積小,而且無損壓縮,能保證網(wǎng)頁的打開速度。最重要的是PNG格式圖片支持透明信息。PNG格式圖片可以稱為“網(wǎng)頁設(shè)計專用格式”。
3、GIF格式圖片圖像效果很差,但是可以制作動畫。
<!--
src:圖片地址
alt:加載失敗時顯示
title:鼠標(biāo)懸停時的文字
width:寬度
height:高度
-->
<img src="../Resources/image/Cover.jpg" alt="A-SOUL" title="Cover" width="1000">
<!--這段代碼的意思是:創(chuàng)建了一個圖片鏈接,跳轉(zhuǎn)到firstweb.html這個界面-->
<a href="firstweb.html"><img src="../resources/image/1.jpg" alt="吉大照片"title="懸停文字"width="300"height="500">
</a>
錨鏈接
<!--
1.需要一個錨標(biāo)記
2.跳轉(zhuǎn)到標(biāo)記
3.符號#后面加要轉(zhuǎn)轉(zhuǎn)的標(biāo)記
-->
<a name="top">頂部</a><br>
<a href="#top">回到頂部</a>
<a name="down">底部</a>
<a href="鏈接標(biāo)簽.html#down">回到鏈接標(biāo)簽底部</a>
ctrl+d表示復(fù)制這行內(nèi)容到下一行
功能性鏈接
郵件鏈接: mailto:郵箱地址
QQ推廣鏈接
<a href="mailto:2273038475@qq.com">點擊聯(lián)系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273038475&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2273038475:53" alt="點擊這里給我發(fā)消息" title="點擊這里給我發(fā)消息"/>
</a>
其他基本標(biāo)簽
head標(biāo)簽代表頁面的“頭”,定義一些特殊內(nèi)容,這些內(nèi)容往往都是“不可見內(nèi)容”(在瀏覽器不可見)。
- head內(nèi)部標(biāo)簽
- body標(biāo)簽
body標(biāo)簽代表頁面的“身”,定義網(wǎng)頁展示內(nèi)容,這些內(nèi)容往往都是“可見內(nèi)容”(在瀏覽器可見)。
后續(xù)課程講解的標(biāo)簽都是在標(biāo)簽內(nèi)部的各種標(biāo)簽。
塊元素和行內(nèi)元素
(1)、HTML元素根據(jù)瀏覽器表現(xiàn)形式分為兩類:①塊元素;②行內(nèi)元素;
(2)、塊元素特點:
- 獨占一行,排斥其他元素跟其位于同一行,包括塊元素和行內(nèi)元素;
- 塊元素內(nèi)部可以容納其他塊元素或行元素;
常見塊元素有:h1~h6、p、hr、div等。
(3)、行內(nèi)元素特點:
- 可以與其他行內(nèi)元素位于同一行;
- 行內(nèi)內(nèi)部可以容納其他行內(nèi)元素,但不可以容納塊元素,不然會出現(xiàn)無法預(yù)知的效果;
常見行內(nèi)元素有:strong、em、span等。
標(biāo)簽對照表
列表
HTML3種列表
列表有3種:有序列表、無序列表和定義列表。
有序列表和無序列表都比較常用,而定義列表比較少用。在實際應(yīng)用中,最常用的是無序列表,請大家重點掌握。
目錄列表和菜單列表已經(jīng)被廢除,大家可以直接忽略這兩種列表。
有序列表
<!--有序ordered列表list-->
<ol><li>JAVA</li><li>Python</li><li>C++</li><li>C#</li>
</ol>
屬性type
- 可以通過type屬性對前面的序號樣式進行調(diào)整
無序列表
無序列表是三個列表中最為重要的列表。
語法:
<ul type="列表項符號"><li>無序列表項</li><li>無序列表項</li><li>無序列表項</li></ul>
屬性type:
<!--無序unordered列表list-->
<!--
應(yīng)用范圍:導(dǎo)航、側(cè)邊欄
-->
<ul><li>高等數(shù)學(xué)</li><li>大學(xué)英語</li><li>高級語言程序設(shè)計</li><li>思想道德與法治</li>
</ul>
定義列表
語法:
<dl><dt>定義名詞</dt><dd>定義描述</dd>……</dl>
說明:
< dl>即“definition list(定義列表)”,< dt>即“definition term(定義名詞)”,而< dd>即“definition description(定義描述)”。
在該語法中,< dl>標(biāo)記和< /dl>標(biāo)記分別定義了定義列表的開始和結(jié)束,< dt>后面添加要解釋的名詞,而在< dd>后面則添加該名詞的具體解釋。
<!--自定義defined列表list-->
<!--
dl:標(biāo)簽
dt:列表名稱
dd:列表內(nèi)容
應(yīng)用范圍:公司網(wǎng)站底部
-->
<dl><dt>學(xué)科</dt><dd>JAVA</dd><dd>Python</dd><dd>C++</dd><dd>C#</dd><dt>城市</dt><dd>北京</dd><dd>上海</dd><dd>天津</dd><dd>深圳</dd>
</dl>
HTML學(xué)習(xí)中的誤區(qū)
學(xué)習(xí)HTML的目的就是在你需要的地方用到符合語義的標(biāo)簽,把標(biāo)簽用“對”這才是HTML學(xué)習(xí)的目的。例如一段文字,應(yīng)該使用p標(biāo)簽,而不是使用div標(biāo)簽或者其他標(biāo)簽。
網(wǎng)頁語義結(jié)構(gòu)良好,對于搜索引擎來說也是極為重要的一點。
表格
標(biāo)簽
- 表格基本標(biāo)簽
- 表格結(jié)構(gòu)標(biāo)簽
基本結(jié)構(gòu)
< table>、< tr>和< td>是HTML表格最基本的3個標(biāo)簽,其他標(biāo)題標(biāo)簽< caption>、表頭單元格< th>可以沒有,但是這3者必須要有。
語法:
<table><tr><td>單元格1</td><td>單元格2</td></tr><tr><td>單元格1</td><td>單元格2</td></tr></table>
說明:
< table>和< /table>標(biāo)記著表格的開始和結(jié)束,< tr>和< /tr>標(biāo)記著行的開始和結(jié)束,在表格中包含幾組< tr>< /tr>就表示該表格為幾行。< td>和< /td>標(biāo)記著單元格的開始和結(jié)束。
補充
1、邊框——border
2、合并行和合并列
合并行使用td標(biāo)簽的rowspan屬性,而合并列則用到td標(biāo)簽的colspan屬性。
語法:
< td rowspan=“跨度的行數(shù)”>
< td colspan=“跨度的列數(shù)”>
<!--表格table-->
<!--
行(row) tr
列 td
border:邊框
-->
<table border="1"><tr><!--colspan 跨列--><td>1.1</td><td colspan="2">1.2</td></tr><tr><!--rowspan 跨行--><td rowspan="2">2.1</td><td>2.2</td><td>2.3</td></tr><tr><td>3.2</td><td>3.3</td></tr>
</table>
表格完整結(jié)構(gòu)
表格完整結(jié)構(gòu)應(yīng)該包括表格標(biāo)題(caption)、表頭(thead)、表身(tbody)和表腳(tfoot)4部分。
表格語義化之后,使得代碼更清晰和更利于后期維護。
<table><caption>表格標(biāo)題</caption><!--表頭--><thead><tr><th>表頭單元格1</th><th>表頭單元格2</th></tr></thead><!--表身--><tbody><tr><td>標(biāo)準(zhǔn)單元格1</td><td>標(biāo)準(zhǔn)單元格2</td></tr><tr><td>標(biāo)準(zhǔn)單元格1</td><td>標(biāo)準(zhǔn)單元格2</td></tr></tbody><!--表腳--><tfoot><tr><td>標(biāo)準(zhǔn)單元格1</td><td>標(biāo)準(zhǔn)單元格2</td></tr></tfoot></table>
說明:
< thead>、< tbody>和< tfoot>這三個標(biāo)簽分別表示表頭、表身、表腳。th表示表頭單元格,th表示表身單元格。每一對“< tr>< /tr>”表示一行。
表單
表單(form)標(biāo)簽共有4個:< input>、< textarea>、< select>和< option>。其中< select>和< option>是配合使用的。
在< form>和< /form>中間添加其他內(nèi)容,form標(biāo)簽中的參數(shù)method和action是必填的
參數(shù):
- action:表示向何處發(fā)送表單數(shù)據(jù)(可以是網(wǎng)站,也可以是一個請求處理地址)
- method:規(guī)定如何發(fā)送表單數(shù)據(jù)(提交方式)
- get:可以在url中看到提交的信息,不安全但高效,不能傳輸大文件;
- post:無法在url中看到提交的信息,比較安全,可以傳輸大文件。
<form action="test01.html" method="get">
input標(biāo)簽表單
大部分表單都是用input標(biāo)簽完成的。
語法:
< input type=“表單類型”/>
參數(shù):
- value:默認(rèn)初始值
- maxlength:最多能輸入幾個字符
- size:文本框長度
<p>賬號:<input type="text" name="username" value="admin" maxlength="10" size="30"></p>
<p>性別:<!--單選框標(biāo)簽input typle="radio"value:單選框的值name:表示組(name一樣表示同一組,同時只能選中一個)checked:默認(rèn)選中--><input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female" checked>女</p>
<p>愛好:<!--多選框input type="checkbox"checked:默認(rèn)選中--><input type="checkbox" name="hobby" value="sleep">睡覺<input type="checkbox" name="hobby" value="code" checked>敲代碼<input type="checkbox" name="hobby" value="game">打游戲<input type="checkbox" name="hobby" value="study">學(xué)習(xí)</p>
<p><!--文件域input type="file"--><input type="file" name="file"><input type="button" name="upload" value="上傳"></p>
<p>郵箱:<!--郵箱input type="email"--><input type="email" name="my-email"></p>
<p>URL:<!--URL input type="url"--><input type="url" name="my-url"></p>
<p>數(shù)字:<!--數(shù)字input type="number"max:最大值min:最小值step:步長--><input type="number" name="num" max="100" min="0" step="10"></p>
<p>音量:<!--滑塊input type="range"--><input type="range" min="0" max="100" name="voice" step="2"></p><p>搜索:<!--搜索框input type="search"--><input type="search" name="search"></p><p>按鈕:<!--普通按鈕button--><input type="button" name="btn1" value="點我"><br><!--圖片按鈕image(具有submit功能)--><input type="image" src="../Resources/image/Cover.jpg" name="bn2" width="100"></p><p><!--提交按鈕submit--><input type="submit" value="提交"><!--重置按鈕reset--><input type="reset" value="清空"></p>
textarea標(biāo)簽表單
(1)、多行文本框
語法:
< textarea rows=“行數(shù)” cols=“列數(shù)”>多行文本框內(nèi)容< /textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
表現(xiàn)形式如下:
<p>反饋:<!--文本域textareacols:列數(shù)rows:行數(shù)--><textarea name="response" cols="50" rows="20">在這里填寫反饋</textarea></p>
(2)3種文本框?qū)Ρ?/p>
單行文本框和密碼文本框使用標(biāo)簽,而多行文本框使用< textarea>標(biāo)簽。
①單行文本框
語法:
< input type=“text” value=“默認(rèn)文字” size=“文本框長度” maxlength=“最多輸入字符數(shù)”/>
①密碼文本框
語法:
< input type=“password”>
①多行文本框
語法:
< textarea rows=“行數(shù)” cols=“列數(shù)”>多行文本框內(nèi)容< /textarea>
select和option
下拉列表由標(biāo)簽和標(biāo)簽配合使用。
語法:
<select multiple="mutiple" size="可見列表項的數(shù)目"><option value="選項值" selected="selected">選項顯示的內(nèi)容</option>……<option value="選項值">選項顯示的內(nèi)容</option></select>
<p>下拉框:<!--下拉框selectoption:選項selected:默認(rèn)選中--><select name="列表名稱"><option value="選項的值1">選項1</option><option value="選項的值2">選項2</option><option value="選項的值3" selected>選項3</option><option value="選項的值4">選項4</option><option value="選項的值5">選項5</option></select></p>
多媒體
src:資源路徑
controls:控制條
autoplay:自動播放
<video src="../Resources/video/超級敏感.mp4" controls autoplay></video><audio src="../Resources/audio/超級敏感.mp3" controls autoplay></audio>
插入音頻、視頻和flash
在網(wǎng)頁中插入音頻、視頻和flash都是使用embed標(biāo)簽。
語法:
< embed src=“多媒體文件地址” width=“播放界面的寬度” height=“播放界面的高度”>< /embed>
說明:
多媒體文件地址可以是相對地址,也可以是絕對地址。
width和height使用px作為單位。
插入背景音樂
為某個網(wǎng)頁設(shè)置背景音樂,使用的是bgsound標(biāo)簽。不過bgsound標(biāo)簽只適用于IE瀏覽器,在Firefox等瀏覽器中未必適用。
設(shè)置網(wǎng)頁背景音樂時常用的方法除了使用bgsound標(biāo)簽,還有使用embed標(biāo)簽和object標(biāo)簽。
語法:
< bgsound src=“背景音樂的地址”/>
說明:
loop="2"表示重復(fù)2次,loop=“infinite"表示無限次循環(huán)播放,也可以使用loop=”-1"表示無限次循環(huán)播放。
表單的應(yīng)用
<form action="test01.html" method="get"><p><!--增強鼠標(biāo)可用性--><!--label標(biāo)簽for:要聚焦到的控件的id--><label for="mark">點我聚焦到文本框</label><input type="text" name="text" id="mark"></p><p><!--只讀readonly--><input type="text" value="只給看,不給改" readonly></p><p><!--禁用disabled--><input type="checkbox" name="a">未選中,可改<input type="checkbox" name="a" checked disabled>已選中,只讀,改不了<input type="checkbox" name="a" checked>已選中,可改<input type="button" value="點不了" disabled></p><p><!--隱藏域hidden--><input type="button" value="看不見我但我依然存在" hidden><input type="button" value="看得見我"></p>
</form>
補充:增強鼠標(biāo)可用性
意思是:在之前的表單中,只有點擊輸入框,才能輸入數(shù)據(jù),但是在有的表單中,能夠?qū)崿F(xiàn),點擊輸入框前的文字,自動選擇后面對應(yīng)的輸入框
<p><!--增強鼠標(biāo)可用性--><!--label標(biāo)簽for:后面跟的是一個id--><label for="mark">點我聚焦到文本框</label><input type="text" name="text" id="mark"></p>
表單的初級驗證
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初級表單驗證</title>
</head>
<body>
<form action="test01.html" method="get"><!--提示信息placeholder--><p>用戶名:<input type="text" name="username" placeholder="請輸入用戶名"></p><!--必填項required--><p>密碼:<input type="password" name="password" required></p><!--正則表達(dá)式--><p>URL:<input type="text" name="url" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]+://[^\s]*"></p><p><input type="submit"></p>
</form>
</body>
</html>
頁面結(jié)構(gòu)分析
主要使用的是header、footer、nav
內(nèi)聯(lián)框架
浮動框架是一種較為特殊的框架,它是在瀏覽器窗口中嵌套的子窗口,整個頁面并不一定是框架頁面,但要包含一個框架窗口。< iframe>框架可以完全由設(shè)計者定義寬度和高度,并且可以放置在一個網(wǎng)頁的任何位置,這極大地擴展了框架頁面的應(yīng)用范圍。
< frameset>生成的框架結(jié)構(gòu)是依賴上級空間尺寸的,它的寬度或者高度必須有一個和上級框架相同。而< iframe>浮動框架可以完全由指定寬度和高度決定。
語法:
src屬性是iframe的必須屬性,它定義浮動框架頁面的源文件地址。
<iframe src="鏈接標(biāo)簽.html" name="haha" frameborder="0" width="500"></iframe>
<!--在a標(biāo)簽中使用target屬性以標(biāo)識符為haha的iframe標(biāo)簽的格式打開頁面-->
<a href="視頻與音頻.html" target="haha">點擊跳轉(zhuǎn)視頻與音頻</a>
設(shè)置浮動框架是否顯示滾動條scrolling
對于浮動框架iframe的的滾動條,我們可以使用scrolling屬性來控制。scrolling屬性有3種情況:根據(jù)需要顯示、總是顯示和不顯示。
語法:
< iframe src=“浮動框架的源文件” width=“浮動框架的寬” height=“浮動框架的高” scrolling=“取值”>< /iframe>
說明:
scrolling屬性取值如下:
進階
HTML、XHTML和HTML5
(一)HTML 和 XHTML
HTML,全稱HyperText Mark-up Language (超文本標(biāo)記語言),是構(gòu)成網(wǎng)頁文檔的 主要語言。我們常說的HTML指的是HTML 4.01。
XHTML,全稱 Extensible HyperText Mark-up Language (擴展的超文本標(biāo)記語言), 它是XML風(fēng)格的HTML 4.01,我們可以稱之為更嚴(yán)格、更純凈的HTML 4.01。
HTML語法書寫比較松散,利于開發(fā)者編寫。但是對于機器,如電腦、手機等來說,語法越松散,處理起來越困難。因此為了讓機器更好地處理HTML,我們才在HTML基礎(chǔ)上引入了 XHTML
XHTML相對于HTML來說,在語法上更加嚴(yán)格。XHTML和HTML主要區(qū)別如下。
1、XHTML標(biāo)簽必須閉合。
在XHTML中,所有標(biāo)簽必須閉合,例如“< p>< /p>" “< div>< /div>”等。此外,空標(biāo)簽也需要閉合,例如< br>要寫成< br/>。
錯誤寫法:< p>歡迎來到綠葉學(xué)習(xí)網(wǎng)
正確寫法:< p>歡迎來到綠葉學(xué)習(xí)網(wǎng)< /p>
2、XHTML標(biāo)簽以及屬性必須小寫。
在XHTML中,所有標(biāo)簽以及標(biāo)簽屬性必須小寫,不能大小寫混合,也不能全部都是大 寫。不過標(biāo)簽的屬性值可以大寫。
錯誤寫法:< Body>< DIV>< /DlV>< /Body>
正確寫法:< body>< div>< /div>< /body>
3、XHTML標(biāo)簽屬性必須用引號。
在XHTML中,標(biāo)簽屬性值必須用引號括起來,單引號、雙引號都可以。
錯誤寫法:< input id=txt type=text/>
正確寫法:< input id=“txt” type=“text”/>
下面是一個完整的XHTML文檔。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><p>“<span style="font-weight:bold;color:Red;">視覺化思考</span>”能以獨特而有效的方式,讓你的心有更大的空間來解決問題。</p>
</body>
</html>
(二)HTML5
HTML指的是HTML 4.01, XHTML是HTML的過渡版本,XHTML是XML風(fēng)格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升級版。
不過HTML 5已經(jīng)不再是單純意義上的標(biāo)簽了,它已經(jīng)遠(yuǎn)遠(yuǎn)超越了標(biāo)簽的范疇。HTML 5 除了新增部分標(biāo)簽之外,還增加了一組技術(shù),包括canvas、SVG、WebSocket.本地存儲等。這些新增的技術(shù)都是使用JavaScript來操作。也就是說,HTML 5使得HTML從一門“標(biāo)記語言” 轉(zhuǎn)變?yōu)橐婚T“編程語言”。
對于HTML 5中的新技術(shù),在此不做詳細(xì)介紹。單純從新增的標(biāo)簽上來看,HTML 5有 以下幾個特點。
1、文檔類型說明
基于HTML 5設(shè)計準(zhǔn)則中的“化繁為簡”原則,頁面的文檔類型<!DOCTYPE>被極大地 簡化了。
XHTML文檔聲明如下:
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>
HTML5文檔聲明如下:
< !DOCTYPE html>
2、標(biāo)簽不再區(qū)分大小寫
< div>綠葉學(xué)習(xí)網(wǎng)< /DIV>
上面這種寫法也是完全符合HTML5規(guī)范的。但是在實際開發(fā)中,建議所有標(biāo)簽以及屬性都采用小寫方式。
3、允許屬性值不加引號
< div id=wrapper style=co1or: red> 綠葉學(xué)習(xí)網(wǎng) < /div>
上面這種寫法也是完全符合HTML5規(guī)范的。但是在實際開發(fā)中,建議標(biāo)簽所有屬性值都加引號,單引號或雙引號都可以。
<input type="text" readonly/>
<input type="checkbox" checked/>
上面兩句代碼等價于:
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>
在HTML 5中,可以省略屬性值的屬性如表所示。
一句話概括 HTML、XHTML 和 HTML 5 就是:HTML 指的是 HTML 4.01, XHTML 是HTML的過渡版,HTML5是HTML的升級版。
div和span
對于div和span這兩個元素,不少新手也不知道它們之間有什么區(qū)別,使用起來也很隨便。因此,這里有必要簡單介紹一下。
div和span沒有任何語義,正是因為沒有語義,這兩個標(biāo)簽一般都是配合CSS來定義元素 樣式的。
div和span區(qū)別如下:
(1 ) div是塊元素,可以包含任何塊元素和行內(nèi)元素,不會與其他元素位于同一行;span 是行內(nèi)元素,可以與其他行內(nèi)元素位于同一行。
(2 ) div常用于頁面中較大塊的結(jié)構(gòu)劃分,然后配合CSS來操作;span 一般用來包含文字等, 它沒有結(jié)構(gòu)的意義,純粹是應(yīng)用樣式。當(dāng)其他行內(nèi)元素都不適合的時候,可以用span來配合CSS 操作。
其實,除了 div和span外,還有一個label標(biāo)簽。div和span是無語義標(biāo)簽,但label 是有語義標(biāo)簽。label 只適用于表單中,用于顯示在輸入控件旁邊的說明性文字。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><p>“<span style="font-weight:bold;color:Red;">視覺化思考</span>”能以獨特而有效的方式,讓你的心有更大的空間來解決問題。</p>
</body>
</html>
在這個例子中,我們想要對“視覺化思考”這幾個文字加粗或者改變顏色,此時可以 使用span包含文字,然后再進行樣式修改。事實上,span標(biāo)簽往往都是用來配合CSS來 修飾元素的。
id和class
id和class是HTML元素中兩個最基本的公共屬性。一般情況下,id和class都用來選擇元素,以便進行CSS操作或者JavaScript操作。但是很多新手對id和class這兩個屬性感到很迷茫,不知道什么時候用id,什么時候用class,甚至隨便使用。
(一)id 屬性
id屬性具有唯一性,也就是說在一個頁面中相同的id只允許出現(xiàn)一次。W3C建議,對 于頁面關(guān)鍵的結(jié)構(gòu)或者大結(jié)構(gòu),我們才使用id。所謂的關(guān)鍵結(jié)構(gòu),指的是諸如LOGO、導(dǎo)航、 主體內(nèi)容、底部信息欄等結(jié)構(gòu)。對于一些小地方,還是建議使用class屬性。
我們知道搜索引擎識別一個頁面結(jié)構(gòu),是根據(jù)標(biāo)簽的語義以及id屬性來識別的。因此 id屬性不要輕易使用。此外,id的命名也十分關(guān)鍵,特別是對搜索引擎優(yōu)化而言。對于id和 class的命名,我們在CSS進階部分會詳細(xì)介紹。
(二)class屬性
class,顧名思義,就是“類”。它釆用的思想跟C、Java等編程語言中的“類”相似。 我們可以為同一個頁面的相同元素或者不同元素設(shè)置相同的class,然后使得相同class的元 素具有相同的CSS樣式。
如果你要為兩個或者兩個以上元素定義相同的樣式,建議使用class屬性。因為這樣可以減少大量的重復(fù)代碼。
注意,對于一個元素而言,我們可以定義多個class。 一般來說,定義多個class的目的在于:一般用一個class抽取公共樣式,然后用另外一個class定義單獨樣式。
對于id和class,我們總結(jié)一下:對于頁面關(guān)鍵結(jié)構(gòu),建議使用id;對于小地方,建議使用class。就算我們不需要對關(guān)鍵結(jié)構(gòu)進行CSS操作或者JavaScript操作,也建議加上id.以便搜索引擎識別頁面結(jié)構(gòu)。
瀏覽器標(biāo)題欄小圖標(biāo)
在瀏覽網(wǎng)頁的時候,我們會發(fā)現(xiàn)幾乎所有網(wǎng)站的頁面在瀏覽器標(biāo)題欄前面都會有一個小 圖標(biāo)
想要實現(xiàn)這個效果,我們只需要在head標(biāo)簽添加一個link標(biāo)簽即可。
語法:
<link rel="shortcut icon" type="image/x-icon" href="../resources/image/music.ico"/>
說明:
rel和type這兩個屬性的取值是固定形式,無需多講。href屬性取值為小圖標(biāo)的地址, 這個地址是根據(jù)小圖標(biāo)在站點文件夾路徑而定的,跟圖片引用路徑是一樣的道理。
這里注意一下,小圖標(biāo)格式是.ico,而不是.jpeg、.png、.gif等格式。對于.ico格式的圖標(biāo)制作,我們可以搜索一下“在線icon",會發(fā)現(xiàn)很多不錯的在線工具,大家可以收藏一下。
語義化
(一)簡介
由于HTML簡單,很多初學(xué)者對它存在一種偏見,覺得它沒多少東西,因此在學(xué)習(xí)的過程中隨便對待。其實,學(xué)習(xí)HTML的重點不在于掌握了多少標(biāo)簽,而是在于掌握標(biāo)簽的語義 以及如何編寫一個語義結(jié)構(gòu)良好的頁面。
在實際開發(fā)過程中,很多人由于對標(biāo)簽語義不熟悉,常常用某一個標(biāo)簽代替另外一個標(biāo)簽來實現(xiàn)某些效果。
舉例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">.body {font-family: "微軟雅黑";font-size: 14px;}.content {width: 300px;padding: 10px;border: 1px dashed gray;}.content div {font-size: 16px;font-weight: bold;height: 24px;line-height: 24px;}</style>
</head><body><div class='content'><div>web 前端開發(fā) </div><p>web前端開發(fā)最核心3個技術(shù):HTML、CSS和JavaScript HTML控制網(wǎng)頁的 結(jié)構(gòu),CSS控制網(wǎng)頁的樣式,JavaScript控制網(wǎng)頁的行為。</p></div>
</body></html>
在瀏覽器預(yù)覽效果如圖所示。
對于上面的標(biāo)題效果,正確的做法應(yīng)該是
使用h1 ~ h6標(biāo)簽來實現(xiàn),但這里卻使用div 來代替了。雖然頁面效果一樣,但是這種“用某一個標(biāo)簽代替另外一個標(biāo)簽來實現(xiàn)相同效果”的做法是完全不可取的,因為它違背了 HTML這門語言的初衷。
HTML的精髓就在于標(biāo)簽的語義。在HTML中,大部分標(biāo)簽都有它自身的語義,例如p標(biāo)簽,表示的是"paragraph",標(biāo)記的是一個段落;hl標(biāo)簽,表示“headerl”,標(biāo)記的是一個最高級標(biāo)題……而div和span是無語義的標(biāo)簽,我們應(yīng)該盡可能少用。
HTML很簡單,因此很多初學(xué)者往往忽略了它的目的和重要性。我們學(xué)習(xí)HTML并不 是看自己學(xué)了多少標(biāo)簽,更重要的是在你需要的地方能否用到正確的語義化標(biāo)簽。把標(biāo)簽用在對的地方,這才是HTML學(xué)習(xí)的目的所在。
我們都知道前端最核心的技術(shù)是HTML、CSS和JavaScript這三種。.其中HTML是網(wǎng) 頁的結(jié)構(gòu),CSS是網(wǎng)頁的外觀,JavaScript是網(wǎng)頁的行為。在這三大元素中,HTML才是最 重要的,而CSS和.JavaScript只是用來修飾結(jié)構(gòu)的。就像你蓋房子,房子裝飾得再漂亮,如果結(jié)構(gòu)不穩(wěn)也容易塌。
整站開發(fā)時,編寫的代碼往往都是成千上萬行,如果我們?nèi)渴褂胐iv和span來代替 語義化標(biāo)簽,后期維護會非常困難。此外對于一個頁面來說,我們可以根據(jù)一個頁面的外觀來判斷哪些是標(biāo)題,哪些是圖片。但是搜索引擎跟人不一樣,它可“看不懂” 一個頁面長什 么樣的。它只會根據(jù)HTML代碼來識別。搜索引擎一般都是根據(jù)HTML標(biāo)簽來識別這里是 一個img標(biāo)簽,那里是一個p標(biāo)簽等。如果整個頁面都是div和span,捜索引擎小蜘蛛肯 定會迷路,可能以后都不想來光顧你這個站點。要是這樣的話,你崩潰了,你的老板也跟著 崩潰了。
從上面我們知道,編寫一個語義結(jié)構(gòu)良好的頁面在實際開發(fā)中極其重要。主要有兩個最大的優(yōu)點:①利于開發(fā)調(diào)試和后期維護;②利于搜索引擎優(yōu)化。
(二)標(biāo)題語義化
h1 - h6是標(biāo)題標(biāo)簽,h表示“header”。h1~ h6在HTML語義化中占有極其重要的地位。 h1 ~ h6按照標(biāo)題的重要性依次遞減,其中h1重要性最高,h6重要性最低。
相對于其他語義化標(biāo)簽,h1~ h6在搜索引擎優(yōu)化(即SEO)中占有相當(dāng)重要的地位。 在一個頁面中,h1 ~ h6這6個標(biāo)簽,我們不需要全部都用上,都是根據(jù)需要才用的。對于 h1~ h6,—般情況下我們只會用到h1、h2、h3和h4,很少再會去用h5和h6,因為一個頁面不可能用到那么多級的標(biāo)題。并且從搜索引擎優(yōu)化的角度來說,h1、h2、h3和h4這4個標(biāo)簽會被賦予一定的權(quán)重,而h5和h6的權(quán)重跟普通標(biāo)簽差不多,在SEO優(yōu)化上意義不大。
對于標(biāo)題h1 ~ h6的語義化,我們需要注意以下四個方面。
(1)一個頁面只能有一個h1標(biāo)簽。
(2)hl ~ h6之間不要斷層。
(3)不要用h1 ~ h6來定義樣式。
(4)不要用div來代替h1 ~ h6.
1.一個頁面只能有一個h1標(biāo)簽
hl標(biāo)簽表示每個頁面中最高層級的標(biāo)題,捜索引擎會賦予hl標(biāo)簽最高權(quán)重。雖然W3C沒有明確規(guī)定一個頁面不能有多個hl標(biāo)簽,但是我們還是推薦“一個頁面一個hl標(biāo)簽”的 做法。如果一個頁面出現(xiàn)多個hl,對搜索引擎可能不好,也可能會被判以作弊。就像你寫文章一樣,一個頁面就等于一篇文章,你見過一篇文章有多個主標(biāo)題的么?
2.h1~h6之間不要出現(xiàn)斷層
搜索引擎對hl ~ h6標(biāo)簽比較敏感,尤其是hl和h2。一個語義良好的頁面,hl ~ h6 應(yīng)該是完整有序而沒有出現(xiàn)斷層的。也就是說,要按照“hl、h2、h3、h4”這樣的順序依次排列下來,不要出現(xiàn)“hl、h3、h4”而漏掉h2的情況。
3.不要用h1~h6來定義樣式
我們都知道h1 ~ h6是有默認(rèn)樣式的,如圖所示。在實際開發(fā)中,很多時候我們需要為文本定義字體加粗或者字體大小。有些人喜歡用h1 ~ h6來代替CSS,使用標(biāo)簽來控制 樣式,這是一種非常不好的做法。我們一定要記住,HTML關(guān)注的是結(jié)構(gòu)(語義),CSS關(guān)注 的是樣式,結(jié)構(gòu)跟樣式應(yīng)該分離。
4.不要用div來代替h1~h6
從語義上來說,一個頁面的標(biāo)題應(yīng)該使用h1?h6標(biāo)簽,不要使用div來代替。
分析:
div是無語義的標(biāo)簽,如果使用div來代替h1?h6,后期維護比較困難,而且對SEO 影響也非常大。因為這種做法會讓一個頁面丟失大量的權(quán)重。
(三)圖片語義化
在HTML中,我們使用img標(biāo)簽來表示圖片。對于圖片的語義化,我們從以下兩個方面 來深入探討一下。
(1) alt屬性和title屬性。
(2) figure 元素和 figcaption 元素。
1、alt屬性和title屬性
img標(biāo)簽有兩個重要屬性:alt和title。
alt屬性用于圖片描述,這個描述文字是給捜索引擎看的。并且當(dāng)圖片無法顯示時,頁面會顯示alt中的文字。
title屬性也用于圖片描述,不過這個描述文字是給用戶看的。并且當(dāng)鼠標(biāo)指針移到圖片上時,會顯示title中的內(nèi)容。
語法:
<img src="" alt="圖片描述(給搜索引擎看)" title="圖片描述(給用戶看)">
搜索引擎跟人不一樣,它看不出一張圖片描繪的是什么東西,它只會査看HTML代碼, 通過img標(biāo)簽的alt屬性或者頁面上下文來判斷圖片的內(nèi)容。因此,對于img標(biāo)簽,我們一定要添加alt屬性,以便搜索引擎識別圖片的內(nèi)容。alt屬性在搜索引擎優(yōu)化中也很重要,并且會被賦予一定的權(quán)重。
請一定要注意;alt屬性是img標(biāo)簽必需屬性,一定要添加;title屬性是img標(biāo)簽可選屬性,可加可不加。建議大家在實際開發(fā)中,對于img標(biāo)簽,要記得在alt屬性中添加必要的描述信息。
2、figure 元素和 figcaption 元素
語法:
<figure><img src="" alt=""/><figcaption></figcaption></figure>
說明:
figure元素用于包含圖片和圖注,figcaption元素用于表示圖注文字。在實際開發(fā)中, 對于“圖片+圖注”效果,我們都建議使用figure和figcaption這兩個元素來實現(xiàn),從而使 得頁面的語義更加良好。
(四)表格語義化
在實際開發(fā)中,我們不建議使用表格布局,應(yīng)該使用浮動布局或者定位布局。雖然表格拿來做布局的方式被拋棄了,但是這并沒有說明表格就一無是處了。
問大家一個問題:如圖所示的這種表格數(shù)據(jù)的展示,應(yīng)該怎么實現(xiàn)呢?不少得了 “table恐懼癥”的小伙伴可能會想到使用div來模擬表格。事實上,對于這種表格數(shù)據(jù)形式, 最好的選擇還是table。
在表格中,我們比較常用的標(biāo)簽是table, tr和td這3個。不過為了加強表格的語義 化,W3C還增加了 5個標(biāo)簽:th、caption、thead、tbody和tfoot。th表示“表頭單元格”; caption表示“表格標(biāo)題”。thead、tbody和tfoot這3個標(biāo)簽把表格從語義上分為三部分: 表頭、表身和表腳。有了這幾個標(biāo)簽,表格語義更加良好,結(jié)構(gòu)更加清晰。
表格標(biāo)簽如下所示:
說明:
thead, tbody和tfoot這三個標(biāo)簽也是表格中非常重要的標(biāo)簽,它從語義上區(qū)分了表頭、 表身和表腳。很多人容易忽略這三個標(biāo)簽。
(五)表單語義化
表單跟表格,這是兩個完全不一樣的概念,不過還是有不少初學(xué)者傻傻分不清。對于表單語義化,我們從2個方面來探究一下。
(1)label 標(biāo)簽。
(2)fieldset 標(biāo)簽和 legend 標(biāo)簽。
1、label 標(biāo)簽
W3C規(guī)范定義,label標(biāo)簽用于顯示在輸入控件旁邊的說明性文字。也就是將某個表單元素和某段說明文字關(guān)聯(lián)起來。
語法:
< label for=“”> 說明性文字 < /label>
說明:
label標(biāo)簽for屬性值為所關(guān)聯(lián)的表單元素的id,例如< input id=“name” type=“text”/>, 則其所關(guān)聯(lián)的label標(biāo)簽應(yīng)該為< label for=“name”>
label標(biāo)簽的for屬性有兩個作用。
①語義上綁定了 label元素和表單元素。
②增強了鼠標(biāo)可用性。也就是說我們點擊label中的文本時,其所關(guān)聯(lián)的表單元素也會獲得焦點。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><div><input id="Radio1" type="radio"/>單選框<input id="Checkbox1" type="checkbox" />復(fù)選框</div><hr /><div><input id="rdo" name="rdo" type="radio"/><label for="rdo">單選框</label><input id="cbk" name="cbk" type="checkbox" /><label for="cbk">復(fù)選框</label></div>
</body>
</html>
分析:
從這個例子可以看到,在第一組表單中,我們只能點擊單選框才能選中單選框,點擊它旁邊的說明文字是不能選中的。在第二組表單中,我們可以點擊單選框來選中單選 框,并且點擊它旁邊的說明文字同樣也可以選中單選框。而對于復(fù)選框來說,也是一樣的效果。
其實,這就是label標(biāo)簽for屬性的作用。for屬性使得鼠標(biāo)單擊的范圍擴大到label元素上,極大地提高了用戶單擊的可操作性。
我們拿復(fù)選框來說,下面兩行代碼是等價的。
<input id="cbk" type="checkbox" /><label for="cbk"> 復(fù)選框 </label>
<label>復(fù)選框<input id="cbk" type="checkbox"/></label>
2.fieldset 標(biāo)簽和 legend 標(biāo)簽。
語法:
<fieldset><legend> 表單組標(biāo)題 </legend></fieldset>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>
</head><body><form action="index.aspx" method="post"><fieldset><legend>登錄綠葉學(xué)習(xí)網(wǎng)</legend><p><label for="name"> 賬號:</1abel><input type="text" id="name" name="name" /></p><label for="pwd"> 密碼:</label><input type="password" id="pwd" name="pwd" /></p><input type="checkbox" id="remember-me" name="remember-me" /> <label for="remember-me"> 記住我 </label><input type="submit" value="登錄" /></fieldset></form>
</body></html>
分析:
我們可以看到,使用了 fieldset和legend這兩個標(biāo)簽之后,表單形成了非常美觀的“書簽”效果
(六)其他語義化
1、 換行符 < br/>
很多新手會使用<br/>標(biāo)簽來換行,或者使用多個<br/>標(biāo)簽來實現(xiàn)元素之間的上下間距。
舉例:
<div><span> 標(biāo)題 </span><br/><br/><span>第 1 部分內(nèi)容 </span><br/><span>第 2 部分內(nèi)容 </span><br/><span>第 3 部分內(nèi)容 </span> </div>
上面兩個例子使用<br/>標(biāo)簽的方式是錯誤的,這也是<br/>標(biāo)簽很常見的錯誤用法。 事實上,<br/>標(biāo)簽有自己特定的語義,不能隨便用來實現(xiàn)換行效果。W3C標(biāo)準(zhǔn)規(guī)定,<br/> 標(biāo)簽僅僅用于段落中的換行,不能用于其他情況。也就是說,<br/>標(biāo)簽只適合用于p標(biāo)簽內(nèi)部的換行,不能用于其他標(biāo)簽。
2、無序列表ul
在實際開發(fā)中,對于列表型的數(shù)據(jù),為了實現(xiàn)良好的語義,我們還是建議使用無序列表 或者有序列表,不建議使用div等來實現(xiàn)。
<ul><li><span>l</span>HTML 教程 </li><li><span>2</span>CSS 教程 </li><li><span>3</span>JavaScript 教程 </li>
</ul>
有人問,每一個列表項前都有數(shù)字,不應(yīng)該使用有序列表來實現(xiàn)嗎?為什么這里使用無序列表來實現(xiàn)呢?假如使用有序列表,我們是做不到這種外觀效果的。因為有序列表前的數(shù)字外 觀是固定的。在實際開發(fā)中,大多數(shù)情況下都是使用無序列表,極少情況下會使用有序列表。
3、strong標(biāo)簽和em標(biāo)簽
strong用于實現(xiàn)加粗文本,em用于實現(xiàn)斜體文本?;诮Y(jié)構(gòu)和樣式分離的原則,標(biāo)簽僅僅是為了實現(xiàn)簡單的加粗或者斜體效果,我們一般不會用這兩個。實際上,W3C對這兩個標(biāo)簽賦予“強調(diào)”的語義,在strong或者em標(biāo)簽內(nèi)部的文本被強調(diào)為重要文本。并且搜索引擎對這兩個標(biāo)簽也賦予一定的權(quán)重。如果在一個頁面中,為了SEO而想要突出某些關(guān)鍵字,可以使用strong和em這兩個標(biāo)簽。一般情況下,我們都是去掉strong和em的默認(rèn)樣式,然后使用CSS重新定義新的樣式, 但這并不影響這兩個標(biāo)簽的語義。也就是說,樣式只會改變標(biāo)簽的外觀,但不會改變標(biāo)簽的語義。
4、del標(biāo)簽和ins標(biāo)簽
在HTML中,del和ins這兩個標(biāo)簽是配合使用的。del表示“delete”,用于定義被刪除的文本。ins表示“insert”,用于定義被更新的文本。一般情況下,我們會使用CSS來重新定義del和ins標(biāo)簽的樣式。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><p>新鮮的新西蘭奇異果</p><p><del>原價:¥6.50/kg</del></p><p><ins>現(xiàn)在僅售:¥4.00/kg</ins></p>
</body>
</html>
5、img標(biāo)簽
想要在頁面顯示一張圖片,我們有兩種方式:一是使用img標(biāo)簽;二是使用背景圖片。 這兩種實現(xiàn)方式最明顯的區(qū)別在于:使用img標(biāo)簽添加圖片,是通過HTML來實現(xiàn);使用背景圖片,是通過CSS來實現(xiàn)。
在實際開發(fā)中,很多人添加圖片的方式很隨意。對于什么時候使用img標(biāo)簽,什么時候使用背景圖片,并不是很清楚我們應(yīng)該根據(jù)HTML的語義來判斷。如果圖片作為HTML的一 部分,并且想要被捜索引擎識別,則應(yīng)該使用img標(biāo)簽,例如常見的各種圖片列表。如果圖片僅僅是起到修飾作用,并且不想被搜索引擎識別,則應(yīng)該使用背景圖片。
舉個例子,圖左這個頁面中的圖標(biāo)圖片就應(yīng)該使用背景圖片實現(xiàn),因為這些圖標(biāo)并不需要被搜索引擎識別,也不作為HTML的一部分。而圖右頁面中應(yīng)該使用img標(biāo)簽來實 現(xiàn),因為這是頁面HTML結(jié)構(gòu)的一部分,并且希望被搜索引擎識別。
(七)語義化驗證
前面這幾節(jié),我們介紹了頁面語義化需要注意的各個地方。那么平常有什么好的辦法來判斷一個頁面是否語義良好呢? 一個很簡單的辦法就是:去掉CSS樣式,然后看頁面是否還具有很好的可讀性。
我們都知道,很多HTML標(biāo)簽都有一定的默認(rèn)樣式,例如p標(biāo)簽有上下邊距、strong標(biāo)簽對字體加粗、ul標(biāo)簽有縮進效果,等等。
在前面我們接觸過,我們可以使用一個標(biāo)簽來代替另外一個標(biāo)簽,并且使用CSS修飾來實現(xiàn)相同的效果。也就是說,不同的HTML標(biāo)簽可以通過不同的CSS來實現(xiàn)相同的效果。但 是“一個語義良好的頁面”跟“一個語義不好的頁面”在去除樣式之后的表現(xiàn)卻是截然不同的。
語義不好的頁面和語義好的頁面:
從上面兩張圖我們可以看出:一個語義良好的頁面在“CSS裸奔”之后,可讀性也是非 常高的。想要查看一個頁面在“CSS裸奔”下的效果,我們可以使用Firefox瀏覽器的一款網(wǎng) 頁調(diào)試插件"Web Developer"來測試。
在 Web Developer ZL具欄找到“CSS” —? “Disable Styles” —'“Disable All Styles” 并且選中,就可以查看頁面去掉樣式后的效果,如圖2-21所示。Web Developer插件的安裝和使用,請自行搜索,很簡單。
HTML5舍棄的標(biāo)簽
在HTML5中,除了新增標(biāo)簽之外,也有不少標(biāo)簽被舍棄了,如表1和表2所示。
為了實現(xiàn)頁面的語義化,我們在實際開發(fā)中不應(yīng)該再去使用這些標(biāo)簽。因此了解哪些標(biāo)簽已經(jīng) 被舍棄是非常有必要的。
對于這些被舍棄的標(biāo)簽,總體可以分為兩大類。
(1)僅僅為了定義樣式,沒有任何語義,因此被舍棄。
(2)很少使用或者已經(jīng)被新標(biāo)簽代替,因此被舍棄。
對于HTML語義化,我們需要注意以下兩點。
1.我們應(yīng)該果斷舍棄那些僅僅為了定義樣式而存在的HTML標(biāo)簽。如果僅僅是為了改 變樣式,我們應(yīng)該使用CSS來實現(xiàn),不要使用HTML標(biāo)簽。
2.在不同的頁面部分,我們優(yōu)先使用正確的語義化標(biāo)簽。如果沒有語義標(biāo)簽可用,才去考慮div和span等無語義標(biāo)簽。
HTML5
一、什么是 HTML5
1.HTML5 的概念與定義
定義:HTML5 定義了 HTML 標(biāo)準(zhǔn)的最新版本,是對 HTML 的第五次重大修改,號稱下一代的 HTML
兩個概念:
-
是一個新版本的 HTML 語言,定義了新的標(biāo)簽、特性和屬性
-
擁有一個強大的技術(shù)集,這些技術(shù)集是指: HTML5 、CSS3 、javascript, 這也是廣義上的 HTML5
2.HTML5 拓展了哪些內(nèi)容
-
語義化標(biāo)簽
-
本地存儲
-
兼容特性
-
2D、3D
-
動畫、過渡
-
CSS3 特性
-
性能與集成
二、HTML5 新增標(biāo)簽
1、新增了哪些語義化標(biāo)簽
header — 頭部標(biāo)簽
nav — 導(dǎo)航標(biāo)簽
article — 內(nèi)容標(biāo)簽
section — 塊級標(biāo)簽
aside — 側(cè)邊欄標(biāo)簽
footer — 尾部標(biāo)簽
2.使用語義化標(biāo)簽的注意
-
語義化標(biāo)簽主要針對搜索引擎
-
新標(biāo)簽可以使用一次或者多次
-
在 IE9 瀏覽器中,需要把語義化標(biāo)簽都轉(zhuǎn)換為塊級元素
-
語義化標(biāo)簽,在移動端支持比較友好,
多媒體音頻標(biāo)簽
1.多媒體標(biāo)簽有兩個,分別是
-
音頻 – audio
-
視頻 – video
2.audio 標(biāo)簽說明
可以在不使用標(biāo)簽的情況下,也能夠原生的支持音頻格式文件的播放,
但是:播放格式是有限的
3.audio 支持的音頻格式
audio 目前支持三種格式:
4.audio 的參數(shù)
<body><!-- 注意:在 chrome 瀏覽器中已經(jīng)禁用了 autoplay 屬性 --><!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
?<!-- 因為不同瀏覽器支持不同的格式,所以我們采取的方案是這個音頻準(zhǔn)備多個文件--><audio controls><source src="./media/snow.mp3" type="audio/mpeg" /></audio>
</body>
多媒體視頻標(biāo)簽
1.video 視頻標(biāo)簽
目前支持三種格式:
2.語法格式
<video src="./media/video.mp4" controls="controls"></video>
3.video 參數(shù)
<body><!-- <video src="./media/video.mp4" controls="controls"></video> -->
?<!-- 谷歌瀏覽器禁用了自動播放功能,如果想自動播放,需要添加 muted 屬性 --><video controls="controls" autoplay muted loop poster="./media/pig.jpg"><source src="./media/video.mp4" type="video/mp4"><source src="./media/video.ogg" type="video/ogg"></video>
</body>
多媒體標(biāo)簽總結(jié)
音頻標(biāo)簽與視頻標(biāo)簽使用基本一致
多媒體標(biāo)簽在不同瀏覽器下情況不同,存在兼容性問題
谷歌瀏覽器把音頻和視頻標(biāo)簽的自動播放都禁止了
谷歌瀏覽器中視頻添加 muted 標(biāo)簽可以自己播放
注意:重點記住使用方法以及自動播放即可,其他屬性可以在使用時查找對應(yīng)的手冊