<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题栏文档</title> </head> </head> </html>
1，代码意思
<!doctype>：标记于文档最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。
<html>:标记于<!doctype>标记之后，也成为根标记，用于告知浏览器其自身是一个HTML文档
<html>标记标志着html文档的开始，</html>标志着html文档的结束。
<head>:标记用于定义html文档的头部信息，也成为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。
<head>标记标志着头部开始，</head>标记标志着头部的结束。
<body>：标记于定义html文档所要显示的内容，也成为主题标记（一个html文档只能含有一对<body>标记，切<body>标记必须在<html>标记内位于<head>头部标记之后，与<head>标记是并列关系。）
<hr />:为单位标记，用于定义一条水平线。
<!doctype html > <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>传智博客云课堂</title> </head> <body> <h2 >传智博客云课堂上线了</h2> <p >更新于：2019年07月28日14时08分 来源：传智博客</p> <hr /> <p > 传智云课堂是传智博客在线教育平台，可以实现晚上在家学习，在线直播教学，实现互动辅助等多种功能，专注于网页，平面，ui设计以及web前端培训。 </p> <p > 传智博客在线教育平台，可以实现晚上在家学习，在线直播教学，实时互动辅导等多种功能，专注于网页，平面，ui设计以及web前段的培训 </p> </body> </html>
这个代码效果图如下。
2，注释语句
<!-- 注释语句 -->
注释内容虽然不会显示在浏览器窗口中，但是作为html文档内容的一部分，可以被下载到用户的计算机上，查看源代码时就可以看到。
3，标记的属性
使用html5制作网页时，可以提供更多信息
<标记名 属性1 =“属性值1”属性2 =“属性值2”...>内容</标记名>
比如语句
<h1 align="center">标题文本</h1>
期中align为属性名，center为属性值，表示标题文本这四个字居中对齐，还可以设置左对齐右对齐，对应属性值分别是left和right，但是如果省略align则会自动默认为左对齐
例如
<!doctype html > <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>传智博客云课堂</title> </head> <body> <h2 align="center" >传智博客云课堂上线了</h2> <p align="center" >更新于：2019年07月28日14时08分 来源：传智博客</p> <hr size="2" color="CCCCCC" /> <p align="center" > 传智云课堂是<strong>传智博客</strong>在线教育平台，可以实现晚上在家学习，在线直播教学，实现互动辅助等多种功能，专注于网页，平面，ui设计以及web前端培训。 </p> <p align="center" > 传智博客在线教育平台，可以实现晚上在家学习，在线直播教学，实时互动辅导等多种功能，专注于网页，平面，ui设计以及web前段的培训 </p> </body> </html>
这个运行效果为
其中<hr>中的下划线颜色还有粗细都可以自己定义
二，HTML5文档头部相关标记
1. 设置页面标题标记<title>
<title>网页标题名称</title>
<title>标记用于定义HTML页面的标题，就是说给网页起个名字，必须位于<head>标记之内，（文档只能包含一对<title></title>标记）
<!doctype html> <html> <head> <meta charset="utf-8"> <title>style标记的使用</title> <style type="text/css"> h2{color: blue;} p{color: black;} </style> </head> <body> <h2>设置h2标题为红色字体</h2> <p>设置p段落为蓝色字体</p> </body> </html>
效果如下
（颜色可以自己任意定义）
2. 文本控制标记
为了是网页更具有语义化，我们经常会在页面用到标题标记。HTML5提供了6个标记的标题即<h1><h2><h3><h4><h5><h6>,但是从<h1>到<h6>重要性递减
<!doctype html> <html> <head> <meta charset="utf-8"> <title>style标记的使用</title> <style type="text/css"> h2{color: red;} p{color: black;} </style> </head> <body> <h2>设置标题为红色字体</h2> <p>设置p段落为蓝色字体</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>
效果图为（在此可以看到<h1>-<h6>是递减的）
（从上图可以看出 默认情况文字是加粗左对齐的，但是如果想要标题文字右对齐或者中间对齐的话 就要使用align属性设置对其方法
left：设置标题左对齐（默认方式）
center：设置标题文字居中对齐
right：设置标题文字右对齐
（align属性设置 对齐方式 效果）
3.段落标记
网页中要报文字有条例的显示出来，离不开段落标记(代码如下)
<p align="对齐方式">段落文字</p>
下面通过一个案例来掩饰
代码为
<!doctype html> <html> <head> <meta charset="utf-8"> <title>段落标记的用法和对齐方式</title> </head> <body> <p align="center">“IT问答精灵”为计算机爱好者提供java，net，pht，c/c++，网页设计，平面设计。UI设计</p> <p align="left">java学院</p> <p align="center">网页平面设计学院</p> <p align="right">php学院</p> </body> </html>
从上图很容易看出通过使用<p>标记，每个段落都会独占一行，并且段落之间拉开了一定的距离
4.水平线<hr />
水平线是将段落与段落之间隔开的，是得每一个段落结构清晰
<hr 属性=“属性值” />
| 属性名 | 含义 | 属性值 |
| align | 设置水平线对齐方式 | 可选择left，right，center三种值，默认为center，居中对齐 |
| size | 设置水平线粗细 | 以像素（px）为单位，默认2像素 |
| color | 设置水平线的颜色 | 可用颜色名称，十六进制#rgb，rgb（r，g，b）表示 |
| width | 设置水平线的宽度 | 可以使去定的像素值，也可以是浏览器窗口的百分比（100%） |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>水平线标记的用法和属性</title> </head> <body> <p align="center">“IT问答精灵”为计算机爱好者提供java，net，pht，c/c++，网页设计，平面设计。UI设计</p> <hr /> <p align="left">java学院</p> <hr color="red" align="center" width="600"/> <p align="center">网页平面设计学院</p> <hr color="#0066FF" align="left" width="100"/> <p align="right">php学院</p> <hr align="center" color="red" width="right"> </body> </html>
效果图为
）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现