當(dāng)前位置：首頁 > news >正文

河南省住房和城鄉(xiāng)建設(shè)廳官方網(wǎng)站上海培訓(xùn)機構(gòu)白名單

news 2025/7/10 9:19:55

河南省住房和城鄉(xiāng)建設(shè)廳官方網(wǎng)站,上海培訓(xùn)機構(gòu)白名單,wordpress不用緩存,美國社會安全號碼大全文章目錄基礎(chǔ)知識什么是HTMLW3C標(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)簽基…

文章目錄

基礎(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)容必須寫在 $< h t m l >$ 中
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>

在這里插入圖片描述

特殊符號

<!--特殊符號-->
空格&nbsp;
大于號&gt;
小于號&lt;
版權(quán)符號&copy;
<!--
多行
注釋
-->

<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
空&gt;格
<br/>
空&lt;格
<br/>
空&copy;格

樣式：
在這里插入圖片描述

空格符號記憶方式：以&開始，以；結(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)的手冊

新增 input 標(biāo)簽

在這里插入圖片描述

新增表單屬性

在這里插入圖片描述

查看全文

http://www.risenshineclean.com/news/52986.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

文章目錄

基礎(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)簽

新增表單屬性

相關(guān)文章：

一、什么是 HTML5

二、HTML5 新增標(biāo)簽