具體介紹HTML5-建立HTML文檔-H5教程-PHP中文網

首頁

web前端

H5教程

具體介紹HTML5-建立HTML文檔

黄舟

Mar 11, 2017 pm 04:52 PM

HTML5中一個主要的變化是：將元素的語意與元素對其內容呈現結果的影響分開。 從原理上來說這合乎情理。 HTML元素負責文件內容的結構與意義，內容的呈現則由套用於元素上的CSS樣式控制。以下介紹最基礎的HTML元素：文檔元素和元資料元素。

一、建構基本的文檔結構

文檔元素只有4個：DOCTYPE元素、html元素、head元素、body元素。

1. DOCTYPE元素

每個HTML文件必須以DOCTYPE元素開頭。其告知瀏覽器兩件事：第一，它處理的是HTML文件；第二，用來標記文件內容的HTML所屬的版本。
注意，在HTML4中要求的DTD已不再HTML5中使用！

如果網頁程式碼含有DOCTYPE元素，瀏覽器就會依照你所宣告的標準解析；
如果不加入DOCTYPE元素，將讓網頁進入怪異模式(quirks mode)，兩者會有一定的差異！！

<!-- HTML4 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
            <!-- HTML5 --><!DOCTYPE HTML>

2. 其他元素

<!DOCTYPE HTML><html>
    <head>
        <title>title</title>
    </head>
    <body>
        文档内容    </body></html>

#需要注意的時，head元素中必須有一個title元素！

二、用元資料元素說明文件

元資料元素應該放在head元素中。

1. 設定文件標題：title元素

2. 設定相對URL的解析基準

base元素可用來設定一個基準URL，讓HTML文件中的相對鏈接在此基礎上進行解析。 base元素還能設定連結在使用者點擊時的開啟方式，以及提交表單時瀏覽器如何反應（在第12章表單中講述）。

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Base Test</title>
    <!-- 指定相对URL的基准URL -->
    <base href="http://avatar.csdn.net">
    <!-- 指定链接打开方式为:当前页面 -->
    <base target="_self"></head><body>
    <!-- 图片地址:http://www.php.cn/ -->
    <img src="/static/imghwm/default1.png"  data-src="/1/4/A/1_ligang2585116.jpg"  class="lazy"   alt="奋飞">
    <a href="http://http://www.php.cn/">PHP中文网</a></body></html>

注意：如果不指定基準URL，那麼瀏覽器會將目前文件的URL認定為所有相對URL的解析基準。

3. 用元資料說明文件

meta元素可以用來定義文件的各種元資料；每個meta元素只能用於一種用途。
（1）指定名稱/值元資料對
需要用到其name和content屬性。提供了5個預先定義的元資料名稱。

元資料名稱	說明
#application name	目前頁所屬web應用系統的名稱
author	目前頁的作者名稱
description	目前頁的說明
generator	用來產生HTML的軟體名稱
keywords	一批以逗號分開的字串，用來描述頁面的內容

#說明：告知瀏覽器如何對內容分類和分數等級，過去主要的手段就是使用keywords元資料。現在由於其被濫用來製造頁面內容和相關性的假象，從而降低了對其重視性。
（2）meta廣泛用途

<!-- 文档内容的字符编码 -->
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html charset=UTF-8">
<!-- 5s后刷新当前页面 -->
<meta http-equiv="refresh" content="5">
<!-- 5s后跳转到MyBlog -->
<meta http-equiv="refresh" content="5; http://www.php.cn/">

4.定義CSS樣式

style元素用來定義HTML文檔內嵌的CSS樣式，link元素用來匯入外部樣式表中的樣式。
（1）指定樣式適用的媒體
media屬性可用於表示文件在什麼情況下應該使用該元素中定義的樣式。

列印預覽與列印頁面電腦顯示器畫面##tty電傳打字機之類的等寬設備

裝置	說明
all	所有設備（預設）
aural	#語音合成器
braille	點字裝置
handheld	手持裝置
#projection	投影機

	print
	screen

tv 具體介紹HTML5-建立HTML文檔
#電視機

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Style Test</title>
    <!-- 显示样式 && 小于500px -->
    <style media="screen and (max-width:500px)">
        p{            
        background-color: blue;            
        color: white;        }
    </style>
    <!-- 显示样式 && 大于500px -->
    <style media="screen and (min-width:500px)">
        p{            background-color: grey;            color: white;        }
    </style>
    <!-- 打印样式 -->
    <style media="print">
        p{            background-color: green;            font-weight: bold;        }
    </style></head><body>
    <p>
        注意我的背影颜色吼!!!    </p></body></html>

要注意的是（2）指定外部資源值說明#author#文件作者help目前文件的說明文件#icon圖示資源license目前文件的相關授權

，在使用上述media屬性時，需要進行全面測試，並且準備好不可用的備用樣式。	link標籤同樣支援media屬性。其中，ref屬性決定瀏覽器對待link元素的方式。

###stylesheet######已載入外部樣式表###### ######

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Link Test</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body></body></html>

注意：如果网站标志文件位于项目根目录下，就无需使用link元素加载，其会自动请求加载该文件。

三、使用脚本元素

与脚本相关的有两个元素：第一个是script，定义脚本并控制其执行过程；第二个是noscript，规定浏览器不支持脚本或禁用脚本情况的处理方法。
在引入外部资源时，如果使用自闭合标签，浏览器会忽略这个元素，不会加载引用的文件。
其加载资源时，可以使用async（script元素默认行为是在加载和执行脚本同时暂停处理页面，该属性可以让资源异步加载）和defer（告知浏览器等页面载入和解析完毕后才能执行脚本）控制。【JavaScript异步编程设计快速响应的网络应用】

<!-- 未启用或不支持脚本 --><noscript>
    <!-- 5s后跳转到http://www.php.cn/ -->
    <meta http-equiv="refresh" content="5; http://www.php.cn/"></noscript>

以上是具體介紹HTML5-建立HTML文檔的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee