一.HTML介绍：
HTML(hyper text markup language)超文本标记语言。
其发展版本主要有HTML4.0，HTML5和XHTML.
现如今，HTML5较为普遍适用于架构web网站。
HTML5在HTML4.0的基础上，对webforms2.0和webapp1.0进行了拓展。
二.HTML5的特征：
1.HTML5是一个独立的新的超文本标记语言。
2.HTML5坚持web结构，表现，行为分离的原则。
3.对表现结构元素等有了更为细化的更新。
4.在本地内嵌了数据库系统。
5.与CSS,JAVAscript结合。
三.HTML基本元素：
1.文档类型及注释：
<!DOCTYPE html>
<html>
<body>
<!--这是一个演示注释的页面-->
<p>要显示的页面内容</p>
</body>
</html>Output：
代码分析：
<!DOCTYPE html>这行代码是我们在架构web网页的时候，必不可少的一行代码。
它定义了我们后续代码架构的网站都基于HTML5下的网站。
<html>
.....
</html><html> </html>让我们在其中去给网站编码，这个的作用更像是为我们的代码确定了一个范围。
当作编码要求吧，必须要有。
注意前后对应。
<body>
...
</body>作用：确定规范网站内容的代码范围
说明省略号内的代码是架构网站的内容本体部分。
也是为代码确定了一个范围。
注意前后对应。
<!--这是一个演示注释的页面-->作用：标准的注释格式
<!--你的注释-->
<p>要显示的页面内容</p>作用：标准输出
这行代码有明显的输出结果。
这也是<p>...</p>的作用。将省略号的内容输出到网页上。
同时要重点注意：<p>所在的层次。
<p>在哪层，就在哪层输出内容。
如例，因为在<body>层次下，所以在网页内容部分进行输出。
2.文档的基本结构：
<!DOCTYPE html>
<html>
<head>
<!-- 文档头部信息 -->
<p>这里是文档头部</p>
</head>
<body>
<!-- 网站页面内容 -->
<p>这里是页面内容</p>
</body>
</html>Output：
<head>
<!-- 文档头部信息 -->
</head>作用：确定规范文档头部信息的代码范围
这个与上文的<body>是一个类型的。
只不过<head>的范围是文档的头部信息。
在输出网站上可能看不出头部信息与网站内容的差别。
但只要记住
头部信息是在简单感慨或介绍这个页面内容。
头部信息位置是在页面内容之上的。
就很好分清头部信息与页面内容的作用。
3.标题及字符集：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /> <!-- 页面编码字符集 -->
<title>标题与字符集</title> <!-- 页面标题 -->
</head>
<body>
<p>页面内容</p>
</body>
</html>Output：
<meta charset="UTF-8" /> <!-- 页面编码字符集 -->作用：定义了页面编码字符集。
这听起来似乎有点不太容易理解。
你只要理解为，这个元素定义了这个网站说哪国话就好了。
“UTF-8”这个字符集是支持中文的，这样才不会出现中文乱码。这也是我们较为常用的字符集。
同时，要注意：此元素必须定义在<head>层下。
<title>标题与字符集</title> <!-- 页面标题 -->作用：定义网站标题。
4.HTML元素嵌套：
<!DOCTYPE html>
<html>
<head>
<title>HTML元素的嵌套</title>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题2</h1>
<nav>
<a href=”html.html”>HTML</a>
<a href=”js.html”>简介</a>
<a href=”css.html”>联系方式</a>
</nav>
</body>
</html>Output:
<h1>...</h1>作用：把内容以黑体一号字格式输出。
与之近似的还有
<h2>...</h2>--黑体二号字等。
<nav>
<a href=”html.xxx”>xx2</a>
</nav>作用：定义了一个名为xx2的导航，这个导航导向html.xxx。
注意 导航元素需定义在<nav>层下。
5.块级元素：
<!DOCTYPE html>
<html>
<head>
<title>HTML元素的嵌套</title>
</head>
<body>
<header>
<h1>欢迎光临</h1>
<p>哈喽哈喽</p>
</header>
<nav>
<a href=”html.html”>HTML</a>
<a href=”js.html”>简介</a>
<a href=”css.html”>联系方式</a>
</nav>
<section id=”html4”>
<h2>HTML4.01<h2>
<p>……</p>
</section>
<section id=”xhtml”>
<h2>XHTML1.0<h2>
<p>……</p>
</section>
<section id=”xhtml”>
<h2>HTML5<h2>
<p>……</p>
</section>
<footer>本文档创建于2022-3-15</footer>
</body>
</html>Output：
<section id=”html4”>
<h2>HTML4.01<h2>
<p>……</p>
</section>这几行代码其实是由两部分元素组成。
分别是
分块元素：
<section>
....
</section>作用：把网页内容分为若干个板块，使网页结构更加清楚。
可以在板块内规划其内容显示。
标签元素：
<id=”xxx”>作用：给某一区块打上自定义的标签。方面编程者后续查看。
标签对于用户是不可见的。
<footer>本文档创建于2022-3-15</footer>作用：输出一个脚标。
脚标一般多为编辑日期或编辑人等等。
6.字符引用：
<!DOCTYPE html>
<html>
<head>
<title>字符引用</title>
</head>
<body>
<h1>字符引用</h1>
<h2>使用空格</h2>
<p>使 用 空 格</p>
<p>使 用 空 格</p>
<h2>显示一个标签</h2>
<p><h1>显示一个标签</h1></p>
<h2>几个特殊字符</h2>
<p>注册商标:®</p>
<p>版权:©</p>
<p>欧元:€</p>
</body>
</html>Output：
空格引用：
<p>使 用 空 格</p>
<p>使 用 空 格</p>方法一：直接在内容里面加空格。（硬核加空格）
方法二：用 代替一个Tab。
<>引用：
<h2>显示一个标签</h2>
<p><h1>显示一个标签</h1></p>< 代表 <
> 代表 >
还有一些特殊字符，看图理解就好啦。
7.引用图像：
<!DOCTYPE HTML>
<html>
<head>
<title>HTML的长度示例</title>
</head>
<body>
<p>用像素数设置图像宽度和高度：<br/>
<img src="img/img_1.jpg" width="200" height="200" />
</p>
<hr/>
<!--hr/输出一条直线。-->
<p>用百分比设置图像宽度：<br/>
<img src="img/img_1.jpg" width="80%" height="200" />
</p>
</body>
</html>Output：
在引用图像时，要注意的一点的是img src="这里要放图像的绝对路径"。
不然可能会不显示图像。
其他的很好理解。
