HTML文檔類型聲明標(biāo)簽(入門級(jí)教程)
我要評(píng)論一、文檔類型聲明標(biāo)簽
</DOCTYPE> 其作用就是告訴瀏覽器使用哪種HTML版本來(lái) 顯示網(wǎng)頁(yè)。
代碼：</DOCTYPE html>的意思是采用HTML5版本來(lái)顯示網(wǎng)頁(yè)
需要注意的是：
1、<!DOCTYPE>聲明位于文檔中最前面的位置，處于<html>標(biāo)簽之前
2、<!DOCTYPE>不是HTML標(biāo)簽
一般都是這樣用的
<!DOCTYPE html> <html lang="zh-CN">
二、lang語(yǔ)言種類
用來(lái)定義文檔顯示的力量
en --- 英語(yǔ)
zh-CN---中文
三、字符集
字符集（Character set）是多個(gè)字符的集合，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)文字
在<head>標(biāo)簽內(nèi)，可以通過(guò)<meta>標(biāo)簽的charset屬性來(lái)規(guī)定HTML文檔應(yīng)該使用哪種字符編碼
<meta charset ="UTF-8"/>
"UTF-8"也被稱為萬(wàn)國(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)頁(yè)：
Document
get！
4.3 文本化格式標(biāo)簽
在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或者下劃線效果，這時(shí)就需要用到HTML中的文本格式標(biāo)簽（突出重要性，比普通文字更重要）
語(yǔ)義 | 標(biāo)簽 | 說(shuō)明 |
加粗 | <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)簽是沒(méi)有語(yǔ)義的，他們就是一個(gè)盒子，用來(lái)裝內(nèi)容的
<div>這個(gè)是頭部</div>（一行只能放一個(gè)div）
比如: <div>童話書(shū)</div>1997
輸出應(yīng)該是
<span>今日價(jià)格</span>（可以讓內(nèi)容在一行上顯示）
比如：<span>格林童話</span>
<span>安徒生童話</span>
<span>伊索寓言</span>
輸出應(yīng)該是：
4.5 圖像標(biāo)簽和路徑
如何在網(wǎng)頁(yè)中插入圖片?
在HTML中，<img>標(biāo)簽用于定義HTML頁(yè)面中的圖像
<img src="圖像URL"/>
src是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名
最好把圖片放在網(wǎng)頁(yè)所在的文件夾中
直接可以在網(wǎng)頁(yè)中看到，圖像略、
這里列出圖像標(biāo)簽的基本屬性
屬性 | 屬性值 | 說(shuō)明 |
| src | 圖片路徑 | 必須屬性 |
alt | 文本 | 替換文本、圖像不能顯示的文字 |
title | 文本 | 提示文本，鼠標(biāo)放在圖像上會(huì)顯示文字 |
width | 像素 | 設(shè)置圖像寬度 |
height | 像素 | 設(shè)置圖像高度 |
border | 像素 | 設(shè)置圖像的邊框粗細(xì) |
首先試一試alt屬性，當(dāng)圖像顯示不出來(lái)，輸入<img src="image1.jpg" alt="童話"/>(此處image1圖片不存在，故顯示不出來(lái))
那再試一試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)簽必須寫(xiě)在標(biāo)簽名的后面
（2）屬性之間不分先后順序，標(biāo)簽名和屬性，屬性和屬性之間必須以空格隔開(kāi)
（3）格式 key="value"
4.6 圖像標(biāo)簽和路徑
路徑可以分為：絕對(duì)路徑和相對(duì)路徑
1.相對(duì)路徑
就是圖片相對(duì)于HTML頁(yè)面的位置
相對(duì)路徑分類 | 符號(hào) | 說(shuō)明 |
同一級(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)頁(yè)是按照HTML5的標(biāo)準(zhǔn)編寫(xiě)的。
編寫(xiě)網(wǎng)頁(yè)時(shí)，一定要將HTML5的文檔聲明寫(xiě)在網(wǎng)頁(yè)的最上面，如果不寫(xiě)文檔聲明，則會(huì)導(dǎo)致有些瀏覽器進(jìn)入怪異模式。進(jìn)入怪異模式以后，瀏覽器解析頁(yè)面會(huì)導(dǎo)致頁(yè)面無(wú)法正常顯示，所以為了避免進(jìn)入該模式，一定要寫(xiě)文檔聲明。
常用的文檔聲明
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 是用什么版本編寫(xiě)的。
為了兼容一些舊的頁(yè)面，瀏覽器當(dāng)中設(shè)置了兩種解析模式：
Standards Mode 標(biāo)準(zhǔn)模式
Quirks Mode 怪異模式
怪異模式解析網(wǎng)頁(yè)時(shí)會(huì)產(chǎn)生一些不可預(yù)期的行為，我們應(yīng)避免怪異模式的出現(xiàn)。
文件類型<HTML></HTML> （放在檔案的開(kāi)頭與結(jié)尾）
到此這篇關(guān)于HTML文檔類型聲明標(biāo)簽(入門級(jí)教程)的文章就介紹到這了,更多相關(guān)HTML文檔聲明內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- HTML表格用于在網(wǎng)頁(yè)上展示數(shù)據(jù),通過(guò)標(biāo)簽及其相關(guān)標(biāo)簽來(lái)創(chuàng)建,表格由行和列組成,每一行包含一個(gè)或多個(gè)單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁(yè)面滾動(dòng)的方法：通過(guò)CSS的overflow屬性、使用JavaScript的滾動(dòng)事件監(jiān)聽(tīng)器以及使用CSS的position:fixed屬性,每種方法都有其適用場(chǎng)景和優(yōu)缺點(diǎn)，感興2025-02-24
使用HTML和CSS實(shí)現(xiàn)文字鏤空效果的代碼示例
在 Web 開(kāi)發(fā)中，文本的視覺(jué)效果是提升用戶體驗(yàn)的重要因素之一,通過(guò) 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)樣式,可以通過(guò)CSS來(lái)實(shí)現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25HTML文本域如何設(shè)置為禁止用戶手動(dòng)拖動(dòng)
在HTML中,可以通過(guò)設(shè)置CSS的resize屬性為none,來(lái)禁止用戶手動(dòng)拖動(dòng)文本域（textarea）的大小,這種方法簡(jiǎn)單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測(cè)試以確保2024-09-25
如何通過(guò)HTML/CSS 實(shí)現(xiàn)各類進(jìn)度條的功能
本文詳細(xì)介紹了如何利用HTML和CSS實(shí)現(xiàn)多種風(fēng)格的進(jìn)度條,包括基礎(chǔ)的水平進(jìn)度條、環(huán)形進(jìn)度條以及球形進(jìn)度條等,還探討了如何通過(guò)動(dòng)畫(huà)增強(qiáng)視覺(jué)效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽2024-09-19HTML中Canvas關(guān)鍵知識(shí)點(diǎn)總結(jié)
Canvas 提供了一套強(qiáng)大的 2D 繪圖 API，適用于各種圖形繪制、圖像處理和動(dòng)畫(huà)制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁(yè)圖形應(yīng)用，這篇文章主要介紹了HTML中Canvas關(guān)鍵知識(shí)點(diǎn)總結(jié)2024-06-03
html table+css實(shí)現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實(shí)現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2024-03-06
HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果
本文主要介紹了HTML中使用Flex布局實(shí)現(xiàn)雙行夾批效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2024-02-22
HTML+CSS實(shí)現(xiàn)炫酷登錄切換的項(xiàng)目實(shí)踐
在網(wǎng)站開(kāi)發(fā)中，登錄頁(yè)面是必不可少的一部分，本文就來(lái)介紹一下HTML+CSS實(shí)現(xiàn)登錄切換，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需2024-02-02
