HTML文档是由各种HTML元素组成的，如html元素（HTML文档根元素）、head（HTML头部）元素、body（HTML主体）元素、title(HTML标题)元素和p（段落）元素等，这些元素都是通过尖括号“<>”组成的标签形式来表现的。实际上，HTML文档内容就是标签、元素和属性
HTML元素是组成HTML文档最基本的部件，它是用标签来表现的，一般来说，“起始标签”表示元素的开始，“结束标签”表示元素的结束。HTML元素分为“有内容的元素”和“空元素”两种。“有内容的元素”是由起始标签、结束标签以及两者之间的元素内容组成的，其中元素内容既可以是需要显示在网页中的文字内容，也可以是其它元素。
例如上面的示例中，起始标签<p>与结束标签</p>组成的元素，它的元素内容是“这是一个段落”；起始标签<head>和结束标签</head>之间的元素内容是另外一个元素“title”。“空元素”只有起始标签而没有结束标签，也没有元素内容，如上面示例中的<hr>（横线）元素就是空元素。
HTML元素可以按另一种方式分为“块元素”和“行元素”。“块元素”在网页中的效果是该元素的内容对于其前后元素的内容都另起一行。如图2所示，<p>是块元素，浏览器会单独用一行来显示块元素。“行元素”在网页中的效果是该元素的内容对于其前后元素的内容都在一行显示。如图3所示，<b>元素和<input>元素是行元素，浏览器会将它们的内容都放置在一行显示。
HTML的元素属性提供了对HTML元素的描述和控制信息，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。例如要设置<p>元素中文字内容的颜色为红色，字号为30像素，这时就需要用到HTML元素属性了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5页面结构</title>
<style>
h2{
color:blue;
}
button{
color:
#fff;
background:
#6D58FF;
height: 41px;
width: 160px;
icon:
#fff;
padding: 0;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 页面主体内容 -->
<h2>PHP中文网欢迎您...</h2>
<form action="">
<div>
<label for="email">邮箱:</label>
<!-- 元素值: 预定义值, 指定值, 布尔值,数值 -->
<input type="email" name="email" id="email" maxlength="100" required />
</div>
<div>
<label for="password">密码:</label>
<input
type="password"
name="password"
id="papassword"
placeholder="至少8位"
required
/>
</div><p>
<div>
<button>提交</button>
</div>
</form>
</body>
</html>显示效果如下
