目录
[1]文档结构 [2]文档声明 [3]文档头部 [4]文档主体文档结构
一个完整的HTML文档必须包含3个部分:文档声明、文档头部和文档主体。
【最简单的文档结构】
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
【复杂的文档结构】
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>Document</title> <meta name="keywords" content=""/> <meta name="description" content=""/> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="5/style.css"/> <link rel="shortcut icon" href="ico.ico"/></head><body></body></html>
文档声明
告诉浏览器以哪个标准来解析HTML文档
[注意]必须首行、顶格,对大小写不敏感
【HTML版本】
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1996 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2014 |
【常用声明】
【1】HTML5
<!DOCTYPE html>
【2】在HTML5之前,文档声明一般有三种类型:严格型strict、过渡型transitional、框架frameset
【a】HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
【b】XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
【c】XHTML1.1 等同于XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
文档头部
描述了文档的一些基本的属性和信息(可以呈现的是title和icon)
【1】文档标题
【作用】
【a】定义浏览器工具栏中的标题
【b】提供页面被添加到收藏夹时显示的标题
【c】显示在搜索引擎结果中的页面标题
[注意]在所有HTML文档中,
【2】base标签
为页面上所有链接规定默认地址和默认打开方式
<base href="http://baidu.com" target="_blank">
【3】link标签
【a】引入图标
<link rel="shortcut icon" href="ico.ico"/>
【b】引入外部CSS样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
【4】style标签和script标签
【a】引入内部CSS样式
<style> body{background-color: red;}</style>
【b】引入javascript
document.onclick = function(){ alert('hello world;')}
【5】meta标签
【a】字符编码,文档的编码一定要与文件本身的编码保持一致,否则会出现乱码,推荐使用UTF-8编码
<meta charset="utf-8"/>
【b】SEO常用到的关键词keywords和描述description
<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" /><meta name="keywords" content="HTML, CSS, XML" />
【c】作者、版权
<meta name="author" content="littlematch"><meta name="copyright" content="">
【d】定时跳转(让网页多少秒刷新,或跳转到其他网页)
<meta http-equiv="refresh" content="5"><meta http-equiv="refresh" content="5;url=http://www.baidu.com">
【e】期限(指定网页在缓存中的过期时间)
<meta http-equiv="Expires" Content="0"><meta http-equiv="Expires" Content="Sat Nov 28 2015 21:19:15 GMT+0800">
【f】缓存
<meta http-equiv="Pragma" Content="No-cach">(禁止缓存,访问者无法脱机浏览)
【g】cookie
<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/">
【h】viewport:视口,移动端常用
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
文档主体
真正可以在页面上看到的内容
【常用标签】
<h1><h2><h3><h4><h5><h6><p><a><img alt="HTML骨架结构_html/css_WEB-ITnose" ><strong><em><br><hr><ul><ol><li><dl><dt><dd><section><header><footer><nav><article><aside><time><table><thead><tbody><caption><tr><th><td><form><input><textarea><button><select><option><label>
[注意]在HTML5标准下,哪些标签可以使用,哪些标签不可以使用,请移步HTML元素和有效的DTD

在Bootstrap4中實現多項目輪播的解決方案在Bootstrap4中實現多項目輪播並不是一件簡單的事情。雖然Bootstrap...

如何實現鼠標滾動事件穿透效果?在我們瀏覽網頁時,經常會遇到一些特別的交互設計。比如在deepseek官網上,�...

無法直接通過CSS修改HTML視頻的默認播放控件樣式。 1.使用JavaScript創建自定義控件。 2.通過CSS美化這些控件。 3.考慮兼容性、用戶體驗和性能,使用庫如Video.js或Plyr可簡化過程。

在手機上使用原生select的潛在問題在開發移動端應用時,我們常常會遇到選擇框的需求。通常情況下,開發者傾...

在手機上使用原生select的弊端是什麼?在移動設備上開發應用時,選擇合適的UI組件是非常重要的。許多開發者�...

使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理在Three.js中使用Octree實現房間內的第三人稱漫遊並添加碰�...

使用原生select在手機上的問題在移動設備上開發應用時,我們經常會遇到需要用戶進行選擇的場景。雖然原生sel...

探究鼠標滾動事件的實現原理在瀏覽一些網站時,你可能注意到某些頁面元素在鼠標懸停時仍然允許滾動整個頁...


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具