HTML文檔類型聲明標(biāo)簽(入門級(jí)教程)
我要評(píng)論一、文檔類型聲明標(biāo)簽
</DOCTYPE> 其作用就是告訴瀏覽器使用哪種HTML版本來 顯示網(wǎng)頁。
代碼：</DOCTYPE html>的意思是采用HTML5版本來顯示網(wǎng)頁
需要注意的是：
1、<!DOCTYPE>聲明位于文檔中最前面的位置，處于<html>標(biāo)簽之前
2、<!DOCTYPE>不是HTML標(biāo)簽
一般都是這樣用的
<!DOCTYPE html> <html lang="zh-CN">
二、lang語言種類
用來定義文檔顯示的力量
en --- 英語
zh-CN---中文
三、字符集
字符集（Character set）是多個(gè)字符的集合，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)文字
在<head>標(biāo)簽內(nèi)，可以通過<meta>標(biāo)簽的charset屬性來規(guī)定HTML文檔應(yīng)該使用哪種字符編碼
<meta charset ="UTF-8"/>
"UTF-8"也被稱為萬國(guó)碼
四、HTML常用標(biāo)簽
4.1 標(biāo)題標(biāo)簽
<h1> 我是一級(jí)標(biāo)題</h1>
特點(diǎn)：
加了標(biāo)題的文字會(huì)變粗，字號(hào)也會(huì)變大
一個(gè)標(biāo)題獨(dú)占一行
實(shí)例如下：
添加標(biāo)題標(biāo)簽需要放在<body></body>中
“標(biāo)題標(biāo)簽”字體變粗，變大
將六級(jí)標(biāo)題標(biāo)簽都輸入
標(biāo)題各占據(jù)一行，字號(hào)依次減小，只要加標(biāo)題字號(hào)都會(huì)變粗
4.2 段落標(biāo)簽和換行標(biāo)簽
<p>我是一個(gè)段落標(biāo)簽</p>
顯示效果（不同段落中間有很大的空）
如果想要換行，就需要使用換行標(biāo)簽</br>（效果不展示）
這里放上按照流程做的網(wǎng)頁：
Document
get！
4.3 文本化格式標(biāo)簽
在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或者下劃線效果，這時(shí)就需要用到HTML中的文本格式標(biāo)簽（突出重要性，比普通文字更重要）
語義 | 標(biāo)簽 | 說明 |
加粗 | <strong></strong>或<b></b> | 更推薦第一個(gè) |
斜線 | <em></em>或<i></i> | 更推薦第一個(gè) |
刪除線 | <del></del>或<s></s> | 更推薦第一個(gè) |
下劃線 | <ins></ins>或<u></u> | 更推薦第一個(gè) |
4.4 <div>和<span>標(biāo)簽
這兩個(gè)標(biāo)簽是沒有語義的，他們就是一個(gè)盒子，用來裝內(nèi)容的
<div>這個(gè)是頭部</div>（一行只能放一個(gè)div）
比如: <div>童話書</div>1997
輸出應(yīng)該是
<span>今日價(jià)格</span>（可以讓內(nèi)容在一行上顯示）
比如：<span>格林童話</span>
<span>安徒生童話</span>
<span>伊索寓言</span>
輸出應(yīng)該是：
4.5 圖像標(biāo)簽和路徑
如何在網(wǎng)頁中插入圖片?
在HTML中，<img>標(biāo)簽用于定義HTML頁面中的圖像
<img src="圖像URL"/>
src是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名
最好把圖片放在網(wǎng)頁所在的文件夾中
直接可以在網(wǎng)頁中看到，圖像略、
這里列出圖像標(biāo)簽的基本屬性
屬性 | 屬性值 | 說明 |
| src | 圖片路徑 | 必須屬性 |
alt | 文本 | 替換文本、圖像不能顯示的文字 |
title | 文本 | 提示文本，鼠標(biāo)放在圖像上會(huì)顯示文字 |
width | 像素 | 設(shè)置圖像寬度 |
height | 像素 | 設(shè)置圖像高度 |
border | 像素 | 設(shè)置圖像的邊框粗細(xì) |
首先試一試alt屬性，當(dāng)圖像顯示不出來，輸入<img src="image1.jpg" alt="童話"/>(此處image1圖片不存在，故顯示不出來)
那再試一試title屬性，輸入<img src="image.jpg" title="童話"/>，這個(gè)效果自己試一試。
width、height、border屬性測(cè)試，輸入<img src="image.jpg" title="童話" width="300" height="100" border="15"/>
圖像標(biāo)簽注意的地方：
（1）圖像標(biāo)簽必須寫在標(biāo)簽名的后面
（2）屬性之間不分先后順序，標(biāo)簽名和屬性，屬性和屬性之間必須以空格隔開
（3）格式 key="value"
4.6 圖像標(biāo)簽和路徑
路徑可以分為：絕對(duì)路徑和相對(duì)路徑
1.相對(duì)路徑
就是圖片相對(duì)于HTML頁面的位置
相對(duì)路徑分類 | 符號(hào) | 說明 |
同一級(jí)路徑 | <img src="image.jpg"/> | |
下一級(jí)路徑 | / | <img src="images/baidu.gif"/> |
上一級(jí)路徑 | ../ | <img src="../baidu.gif"/> |
2.絕對(duì)路徑
就是通俗意義上的路徑：“D：\web\img\logo.gif”
(后序有時(shí)間再更新)
HTML5的文檔聲明
HTML5的文檔聲明
<!DOCTYPE html>
上面的代碼塊是HTML5的文檔聲明，聲明當(dāng)前的網(wǎng)頁是按照HTML5的標(biāo)準(zhǔn)編寫的。
編寫網(wǎng)頁時(shí)，一定要將HTML5的文檔聲明寫在網(wǎng)頁的最上面，如果不寫文檔聲明，則會(huì)導(dǎo)致有些瀏覽器進(jìn)入怪異模式。進(jìn)入怪異模式以后，瀏覽器解析頁面會(huì)導(dǎo)致頁面無法正常顯示，所以為了避免進(jìn)入該模式，一定要寫文檔聲明。
常用的文檔聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
注意：<!DOCTYPE> 不是 HTML 標(biāo)簽。它為瀏覽器提供一項(xiàng)信息（聲明），即 HTML 是用什么版本編寫的。
為了兼容一些舊的頁面，瀏覽器當(dāng)中設(shè)置了兩種解析模式：
Standards Mode 標(biāo)準(zhǔn)模式
Quirks Mode 怪異模式
怪異模式解析網(wǎng)頁時(shí)會(huì)產(chǎn)生一些不可預(yù)期的行為，我們應(yīng)避免怪異模式的出現(xiàn)。
文件類型<HTML></HTML> （放在檔案的開頭與結(jié)尾）
到此這篇關(guān)于HTML文檔類型聲明標(biāo)簽(入門級(jí)教程)的文章就介紹到這了,更多相關(guān)HTML文檔聲明內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML img標(biāo)簽和超鏈接標(biāo)簽詳細(xì)介紹
文章介紹了HTML中img標(biāo)簽的使用,包括src屬性（指定圖片路徑）、相對(duì)/絕對(duì)路徑區(qū)別、alt替代文本、title提示、寬高控制及邊框設(shè)置等，本文主要給大家介紹HTML img標(biāo)簽和超鏈2025-06-20HTML中meta標(biāo)簽的常見使用案例(示例詳解)
HTML meta標(biāo)簽用于提供文檔元數(shù)據(jù),涵蓋字符編碼、SEO優(yōu)化、社交媒體集成、移動(dòng)設(shè)備適配、瀏覽器控制及安全隱私設(shè)置,優(yōu)化頁面顯示與搜索引擎索引，本文給大家介紹HTML中meta2025-06-20
input 標(biāo)簽主要用于接收用戶的輸入，隨 type 屬性值的不同，變換其具體功能,本文通過實(shí)例圖文并茂的形式給大家介紹HTML input 標(biāo)簽，感興趣的朋友一起看看吧2025-06-20
html 滾動(dòng)條滾動(dòng)過快會(huì)留下邊框線的解決方案
這篇文章主要介紹了html 滾動(dòng)條滾動(dòng)過快會(huì)留下邊框線的解決方案,解決方法很簡(jiǎn)單，可以將 dialog 單獨(dú)拿出來別放在 transform 的子元素里,需要的朋友可以參考下2025-06-09- 本文將介紹如何使用<img>標(biāo)簽在 HTML 中添加圖片，并展示一些常見的用法和技巧,通過本文的介紹，應(yīng)該掌握了在 HTML 中添加和調(diào)整圖片的基礎(chǔ)知識(shí)，感興趣的朋友一起看2025-05-16
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標(biāo)簽及其相關(guān)標(biāo)簽來創(chuàng)建,表格由行和列組成,每一行包含一個(gè)或多個(gè)單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動(dòng)的方法：通過CSS的overflow屬性、使用JavaScript的滾動(dòng)事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場(chǎng)景和優(yōu)缺點(diǎn)，感興2025-02-24
使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例
在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗(yàn)的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨(dú)特的效果，例如文字鏤空效果,本文將帶你一步一步實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文字鏤空2024-11-17
Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線,這可能不滿足所有設(shè)計(jì)需求,如需去除這些默認(rèn)樣式,可以通過CSS來實(shí)現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25HTML文本域如何設(shè)置為禁止用戶手動(dòng)拖動(dòng)
在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動(dòng)拖動(dòng)文本域（textarea）的大小,這種方法簡(jiǎn)單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測(cè)試以確保2024-09-25
