一、什么是 HTML？
HTML是制作网页的超文本标记语言。
作用:制作网页--软件操作界面
超文本：文本指的是文字
不仅仅是文字，可以显示图片，视频...
可以在互联网被所用网络用户访问。
标记：使用一个一个的标记元素显示操作文字，图片....
HTML文档也叫做 web 页面
二、编写第一个Html网页
<!doctype html> ------- html声明
<html> ------ 整个html页面
<head> -------- html页面头部
<meta charset="utf-8"> ----- 字符编码格式设定
<title>测试文件标题</title> -------- 设置浏览器标签页标题
</head>
<body> ------- html页面的身体，表示页面需要显示的具体内容
<h1>第一个标题</h1> ------ 内容标题
</body>
</html>
三、HTML 元素
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <html> 和 </html>
一个 HTML 元素包含了开始标记与结束标记组成。
开始标记没有“/”,可以包含属性，结束标记一定有“/”.
开始标记中的属性是用来为这个标记提供附加信息，通常一个属性是由属性名称和属性值组成
属性可以在一个开始标记中出现多个，也可以一个都没有。多个属性之间空格分离。开始标记与结束标记中的部分是具体内容。
例如：
<font color="red" size="10px">这是一个html元素</font>----HTML 元素
<font color="red" size="10px">-----开始标记
color="red" size="10px"-------属性【出现多个，也可以一个都没有】
color----属性名称
red-----属性值
这是一个html元素-----具体内容【用户可见】
</font>----------结束标记
四、Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
Web 浏览器是html网页的运行环境。
无论我是使用记事本还是 HBuilderX，创建出来的网页都是要在浏览器中运行查看结果。
浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。
1、Trident 内核
代表产品为 Internet Explorer，又称其为 IE 内核。Trident（又称为 MSHTML），是微软开发 的一种排版引擎。使用 Trident 渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、 腾讯 TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser 和 KKman 等 。
2、Gecko 内核
代表作品为 Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最 流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器Firefox、Netscape6 至 9。
3、WebKit 内核
代表作品有 Safari、Chrome。WebKit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对 网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 。
4、Presto 内核
代表作品 Opera。Presto 是由 Opera Software 开发的浏览器排版引擎，供 Opera 7.0 及以上使 用。它取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎，包括加入动态功能，例如网页 或其部分可随着 DOM 及 Script 语法的事件而重新排版。
不同的浏览器可能因为采用的内核不同，网页也会呈现出不同的效果。做好的网页需要在不同浏览器上去测试效果。
五、中文编码
有的时候我们在网页中编写了中文，然后在浏览器上显示成乱码。这是因为网页编码格式造成的，所以我们在编写html网页的时候需要设置当前网页的编码格式，需要在头部将字符声明为 UTF-8 或 GBK。
<meta charset="UTF-8">
六、HTML 标题
<title></title>--设置整个网页在浏览器中的标题
<h1> - <h6> -- 标签设置网页内容的标题
<h1> 定义最大的标题。 <h6> 定义最小的标题。
h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
浏览器会自动地在标题的前后添加空行。
h1~h6标记会自动换行，不要仅仅是为了生成粗体或大号的文本而使用标题。设置字体加粗/放大缩小后面会在CSS中通过样式来设置。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新闻联播</title>
</head>
<body>
<h1>第一个标题</h1>
<h2>第二个标题，每个标题都会自动换行</h2>
<h3>第三个标题，看看效果</h3>
<h4>第四个标题是不是会变小</h4>
<h5>第五个标题，前后是不是会自动加上空行</h5>
<h6>第六个标题是最小的标题</h6>
</body>
</html>
七、HTML 水平线
hr标签在 HTML 页面中创建水平线
hr标签是一个单标记 <hr />
color设置水平线颜色
width设置水平线长度【中间】
size设置水平线粗细
align设置水平线对齐方式【left center right】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酷炫的标题。。。。</title>
</head>
<body>
<hr color="blue" width="543px" size="80px" align="center">
<h1>看看水平线的效果</h1>
</body>
</html>
八、HTML 注释
注释--解释说明html代码的含义
一般出现在html元素的上面，注释的内容不会被浏览器执行
<!-- 注释内容 -->
<!--
可以一次性
注释多行
-->
九、HTML 段落
p标记表示一个文本的段落
p标记会自动换行
align可以设置水平对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试段落标记</title>
</head>
<body>
<h1>p标记表示一个文本的段落</h1>
<p align="center">p标记会自动换行</p>
<p>align可以设置水平对齐方式</p>
</body>
</html>
十、测试小例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二阳症状</title>
</head>
<body>
<h1 align = "center">二阳症状</h1>
<hr>
<p align = "center">本报评论员</p>
<p align = "center">2023年05月23日06:07 | 来源：西安日报</p>
<h2>一、发高烧</h2>
<p>在新冠病毒感染中，体温升高是最常见的症状之一，如果最近感觉身体发热，
尤其是伴有咳嗽、喉咙痛或者乏力等其他症状，那么可能已经中招了，
务必及时测量体温，及时去医院看医生。</p>
<h2>二、呼吸困难</h2>
<p>呼吸困难是新冠病毒感染的严重症状，最近我们如果感觉呼吸不畅或者气短，
特别是在活动或者躺下时更加明显，那么一定要警惕，
呼吸困难可能是肺部受损的迹象。</p>
<h2>三、味觉嗅觉丧失</h2>
<p>相信这一点很多人都体验过，当我们“阳”了之后，吃什么喝什么都尝不出味道，
因为新冠病毒感染会导致嗅觉和味觉的丧失或减退。
如果发现自己无法嗅到平常能闻到的气味，或者食物没有原本的味道，
那么这可能是中招的信号之一。</p>
<h2>四、发力疲劳</h2>
<p>之前“阳”的时候就有这种全身无力的感觉，明明什么都没干，
但就是全身上下都没有力气，新冠病毒感染会引起明显的乏力和疲劳感，如果感觉无力、
精神不振，且这种疲劳感持续时间较长，那么可能需要进行新冠病毒的检测。
及早发现并隔离自己，有助于减少传播风险。</p>
<hr>
</body>
</html>
4744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
