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

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

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

河南省住房和城鄉(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)容必須寫在<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>

在這里插入圖片描述

  • 特殊符號
<!--特殊符號-->
空格&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

相關(guān)文章:

  • 平湖網(wǎng)站建設(shè)公司克河北網(wǎng)站seo地址
  • wordpress設(shè)置網(wǎng)址錯視頻seo優(yōu)化教程
  • 南京網(wǎng)站建設(shè)推南京網(wǎng)站建設(shè)設(shè)計山東16市最新疫情
  • 網(wǎng)站開發(fā)和嵌入式開發(fā)哪個泉州網(wǎng)站seo外包公司
  • 茶葉淘寶店網(wǎng)站建設(shè)ppt朝陽網(wǎng)絡(luò)推廣
  • 低價網(wǎng)站建設(shè)方案seo查詢工具有哪些
  • 網(wǎng)站頁面尺寸百度建一個網(wǎng)站多少錢
  • 做網(wǎng)站用ssm還是ssh不錯寧波seo公司
  • 建筑人才網(wǎng)官網(wǎng)掛證seo 推廣教程
  • 企業(yè)網(wǎng)站系統(tǒng)功能分析與設(shè)計上海有哪些優(yōu)化網(wǎng)站推廣公司
  • 有哪些做頭像的網(wǎng)站比較靠譜的電商培訓(xùn)機構(gòu)
  • ui設(shè)計做網(wǎng)站百度視頻
  • 愛做網(wǎng)站外國2023智慧樹網(wǎng)絡(luò)營銷答案
  • 石龍網(wǎng)站開發(fā)企業(yè)qq官方下載
  • 網(wǎng)站建設(shè) 站內(nèi)搜索百搜科技
  • 做網(wǎng)站首頁的圖片怎么縮小大數(shù)據(jù)營銷平臺那么多
  • 招代理網(wǎng)站建設(shè)公司如何推廣網(wǎng)上國網(wǎng)
  • 邢臺任澤區(qū)疫情最新數(shù)據(jù)消息抖音seo運營模式
  • 電子商務(wù)網(wǎng)站建設(shè)的流程百度競價排名多少錢
  • 怎么樣做淘寶聯(lián)盟網(wǎng)站國外域名注冊平臺
  • 成品網(wǎng)站好嗎萬江專業(yè)網(wǎng)站快速排名
  • 東莞網(wǎng)站網(wǎng)絡(luò)公司佛山網(wǎng)站優(yōu)化
  • 中國建設(shè)銀行網(wǎng)站首頁英文營銷網(wǎng)課
  • 一些網(wǎng)站只能在微信打開怎么做的域名注冊要多少錢
  • 網(wǎng)站空間購買注意事項網(wǎng)站模板下載免費
  • 黃岡建設(shè)局網(wǎng)站自建網(wǎng)站
  • 東莞營銷型網(wǎng)站百度關(guān)鍵詞優(yōu)化和百度推廣
  • 網(wǎng)站建設(shè)課設(shè)總結(jié)怎么進行網(wǎng)站推廣
  • 網(wǎng)站建設(shè)招標(biāo)評分表海外seo培訓(xùn)
  • 建好網(wǎng)站是不是還得維護百度搜索鏈接