一、演示HTML
后缀改为.html
页面展示
ctrl+/ 添加注释
HTML文档选择和网站推荐：https://developer.mozilla.org/zh-CN/docs/Web/HTML
CSS和JS也可以在这个网站里学习
二、标记语音
使用p标签实现了段落，在页面中实现效果使用的是标签来实现的
在页面中，标签可以是大写的标签，也可以是小写标签，都可以实现效果
在开发中推荐使用小写，小写更美观清楚
2.1示例
2.2标记语言的结构介绍
剖析一个HTML元素
2.3标签分类
2.3.1按照标签的结构来分类
1.围堵标签：<标签>内容</标签>
2.自闭合标签：<标签>
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!--
1.围堵标签
2.自闭合标签
-->
<p>围堵标签</p>
<hr>
</body>
</html>2.3.2按照标签效果来分类
1.行内标签：这个标签不会独占一行，会和其他标签共享一行
2.块级标签：这个标签会独立成为一行，不和其他标签共享一行
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!--
1.围堵标签
2.自闭合标签
-->
<!-- <p>围堵标签</p>
<hr> -->
<p>块级标签，不和其他标签共享一行</p>
<em>强调标签</em><em>二次强调</em><em>再强调</em>
</body>
</html>2.4标签使用注意事项
1.标签嵌套有嵌套规则
嵌套：一个标签（围堵）中可以写另一个标签
块级标签可以嵌套块级
块级标签可以嵌套行内
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!--
1.围堵标签
2.自闭合标签
-->
<!-- <p>围堵标签</p>
<hr> -->
<!-- <p>块级标签，不和其他标签共享一行</p>
<em>强调标签</em><em>二次强调</em><em>再强调</em> -->
<!--
1.标签嵌套有嵌套规则
嵌套：一个标签（围堵）中可以写另一个标签
块级标签可以嵌套块级
块级标签可以嵌套行内
行内标签可以嵌套行内
行内标签不能嵌套块级
-->
<!-- 块级标签嵌套块级标签 -->
<p>
<hr>
文字
<hr>
<em>行内</em><em>行内1</em><em>行内2</em>
</p>
</body>
</html>行内标签可以嵌套行内
行内标签不能嵌套块级
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!--
1.围堵标签
2.自闭合标签
-->
<!-- <p>围堵标签</p>
<hr> -->
<!-- <p>块级标签，不和其他标签共享一行</p>
<em>强调标签</em><em>二次强调</em><em>再强调</em> -->
<!--
1.标签嵌套有嵌套规则
嵌套：一个标签（围堵）中可以写另一个标签
块级标签可以嵌套块级
块级标签可以嵌套行内
行内标签可以嵌套行内
行内标签不能嵌套块级
-->
<!-- 块级标签嵌套块级标签 -->
<!-- <p>
<hr>
文字
<hr>
<em>行内</em><em>行内1</em><em>行内2</em>
</p> -->
<em><strong>这是行内</strong></em>
<!-- 注意行内嵌套行内时，不能嵌套未闭合的标签 -->
<!-- <em><strong>这是行内</em></strong> -->
<em>
<p>
块级
</p>
<p>
块级
</p>
</em>
</body>
</html>2.5属性
这里以<a>标签举例
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!--
属性是作用在标签上的，不同于内容，属性不会直接展示在内容上
属性是对于标签的设置
围堵标签有属性，自闭合标签也有属性
举例：
a标签
属性：
href属性，表示跳转到哪个网址
title属性，给元素添加提示信息，当鼠标悬停的时候，可以提示文字内容
target属性，下划线+blank _blank 可以让页面在新的窗口打开
-->
<a href="https://www.baidu.com/" title="百度跳转" target="_blank">我是链接 - 百度</a>
</body>
</html>2.6布尔属性
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!--
布尔属性，就是属性的一种简化写法，常见于表单标签中
-->
<input type="text" disabled>请输入名字
</body>
</html>2.7省略属性值的引号
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!-- 省略属性值引号的用法 -->
<a href=https://www.mozilla.org>favourite website</a>
<a href=https://www.mozilla.org title="The Mozilla homepage">favourite website</a>
</body>
</html>2.8单引号和双引号
单引号和双引号都可以实现连接跳转，在一个HTML中已使用一种引号，可以在此引号中嵌套另外一种引号，例如单引套双引✅。但是同符号引号不能嵌套，例如单引套单引❌
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<!-- 省略属性值引号的用法 -->
<!-- <a href=https://www.mozilla.org>favourite website</a>
<a href=https://www.mozilla.org title="The Mozilla homepage">favourite website</a> -->
<a href="https://www.baidu.com" title="百度'java'">百度链接</a>
<a href='https://www.baidu.com' title='百度"java"'>百度链接</a>
<!-- 同类型的引号是不能嵌套的 -->
<a href='https://www.baidu.com' title='百度' java''>百度链接</a>
</body>
</html>2.9实体字符
在HTML中，字符<、>、"、' 和 & 是特殊字符。它们是HTML语法本身的一部分。那么，你如何在文本中包含这些特殊字符呢？比如，你如何在内容中使用字面的&符号或小于符号的符号而不被解读为代码？
我们必须用字符应用------标志字符的特殊编码。每个字符引用以 & 开头，以分号（;) 结尾。
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<p>3 < 5</p>
<p>5 > 3</p>
<p>"java"</p>
<p>'java'</p>
<p>&</p>
</body>
</html>2.10空格的处理
我们在代码中加入了大量空白。在大多数情况下，这完全是没必要的。例如，这两个代码片段是等价的：
html
<p id="noWhitespace">Dogs are silly.</p>
<p id="whitespace">Dogs
are
silly.</p>
html
<html>
<head>
<title>
这是标题
</title>
</head>
<body>
<p>学习 java</p>
</body>
</html>