一、走进HTML的世界
1、html文件名的规范
可以以中文命名，但是不允许使用中文。
不允许使用特殊字符。
HTML文件名推荐使用小写。
创建完HTML文件后依然是文本文件格式，那么需要将系统中隐藏已知文件类型扩展名勾选掉
2、HTML主体结构
<!DOCTYPE html> <!-- 声明头 --><html lang="en"><head><!--头标签--><meta charset="UTF-8"> <!--编码--><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title></head><body><!-- body区，体标签 --></body></html>
3、head标签中常用的标签
设置页面字符串 <title>这是网页标题</title>
设置页面字符集 <meta charset="utf-8" />
设置页面字符集 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
设置5秒后自动跳转到php 中文网 <meta http-equiv="refresh" content="5;url=https://www.php.cn" />
设置浏览器10秒刷新一次 <meta http-equiv="refresh" content="10" />
设置网站关键字，多个关键字之间用英文状态下的逗号分割 <meta name="keywords" content="关键字1,关键字2"/>
设置网站的描述,<meta name="description" content="描述的内容" />
设置网页icon <link rel="icon" type="" href="img/ico.png"/>
导入外部css样式 <link rel="stylesheet" type="text/css" href="css/index.css" />
网页标题 <title>这是页面标题</title>
设置内部样式
<style>/* 当前网页的样式,优先级比导入的css文件样式高 */p{color:aquamarine}</style>
js代码块
<script>//js脚本alert('我是弹出的js脚本');</script>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <!-- 页面编码、字符集 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端视口适配 --><meta http-equiv="refresh" content="5;url=http://www.php.cn" /> <!-- 5秒种自动跳转到php中文网 --><meta http-equiv="refresh" content="10" /> <!-- 10秒种自动刷新网页 --><meta name="keywords" content="php,大前端"/> <!-- seo用的搜索关键词 --><meta name="description" content="网页描述" /> <!-- seo页面描述 --><link rel="icon" type="" href="img/ico.png"/> <!-- 设置网页icon --><link rel="stylesheet" type="text/css" href="css/index.css" /> <!-- 导入外部css样式 --><title>这是页面标题</title> <!-- 网页标题 --><style>/* 当前网页的样式,优先级比导入的css文件样式高 */p{color:aquamarine}</style><script>//js脚本alert('我是弹出的js脚本');</script></head><body><p>hello php中文网</p></body></html>
4、body标签中常用的标签
4.1 文本与文本格式标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <!-- 页面编码、字符集 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端视口适配 --><meta http-equiv="refresh" content="10" /> <!-- 10秒种自动刷新网页 --><meta name="keywords" content="php,大前端"/> <!-- seo用的搜索关键词 --><meta name="description" content="网页描述" /> <!-- seo页面描述 --><link rel="icon" type="" href="img/ico.png"/> <!-- 设置网页icon --><link rel="stylesheet" type="text/css" href="css/index.css" /> <!-- 导入外部css样式 --><title>这是页面标题</title> <!-- 网页标题 --><style>/* 当前网页的样式,优先级比导入的css文件样式高 */p{color:aquamarine}pre{border:1px solid #ccc}</style><script>//js脚本alert('我是弹出的js脚本');</script></head><body><p>我是文章的一个段落</p> <!--段落标签--><b>我是加粗的内容</b> <!--加粗--><strong>强调强调</strong> <!--强调某段文本--><em>我是em,我长这样哦</em> <!--强调某段文本--><i>我是歪的字哦，相当于font: italic;</i> <!--斜体--><br/> <!--单标签不可以换行--><hr /> <!--水平线--><u>我是下划线</u> <!--下划线标签--><del>删除线</del> <!--删除线标签--><hn>h族标题</hn> <!--h族标题标签--><bdo></bdo> <!--覆盖默认的文本方向-->2<sub>3</sub> <!--下标文本-->3<sup>2</sup> <!--上标文本--><details><summary>标题</summary>我们是中华人民共和国优秀程序员</details><dialog open>这是打开的对话窗口</dialog> <!--定义对话框或窗口--><pre>alert('我是弹出的js脚本');</pre><figure><p>php中文网</p><img src="https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg" width="350" height="234" /></figure><mark></mark> <!--标记文本--><mark></mark>定义带有记号的文本，它会给你要突出显示的文本下加个背景色。如：<p>你是<mark>大长腿</mark>吗？</p></body></html>
4.2 列表标签
<ul><li>你好</li><li>我很好</li><li>你不好</li><li>我也要很好</li></ul><!--有序--><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><dl><dt>标题</dt><dd>详情</dd></dl>
4.3 多媒体标签
<img usemap="#planetmap" alt="Planets"src="https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg" /><video controls="controls" src="https://v.cztvcloud.com//shixian_new/yuhang/vod/2021/11/09/e36343c136d3407ba63d4105d130b2dc/7459b422cf9f46c6b5edeb7698298cbd_H264_1500K_MP4.mp4">您的设备不支持</video>图片热点链接，就是在图上链接不同的内容，现在很少用了<map name="planetmap" id="planetmap"><area shape="circle" coords="180,139,14" href ="" alt="Venus" /><area shape="circle" coords="129,161,10" href ="" alt="Mercury" /><area shape="rect" coords="0,0,110,260" href ="" alt="Sun" /></map>早期的flash标签<embed />标签标示任务的进度<progress value="22" max="100"></progress>使用 meter 元素来度量给定范围（gauge）内的数据：<meter value="0.6">60%</meter><audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
