在HTML学习中，首先要了解HTML文档结构的基本布局，其中文本元素是最基本的组成部分之一。通过使用一些常用的页面文本元素，我们可以搭建一个最简单的HTML页面。以下两个实例代码分别展示了一个由标题标签、段落标签组成的含有超链接可跳转的页面，和一个完成跳转后的新闻列表跳转的页面（标题title的logo文件及新闻页面的图片文件未上传）。
实例
<!DOCTYPE html><!-- 声明以下文档为html -->
<html>
<head><!-- head内部元素可以引用脚本，样式表，为网页提供元信息 -->
<title>web第一节课</title><!-- 文件头部标题 -->
<meta charset="utf-8">
<!-- 不允许用户缩放 -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<!-- 引入外部文件（link-->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- rel:规定当前文档与被连接文档之间的关系 -->
<!-- type：定义被连接文档的类型-->
<link rel="icon" type="image/x-icon" href="favicon.ico"><!-- 引入头部logo -->
<style type="text/css">
/*内部样式*/
*{margin: 0; padding: 0;}
p{
width: 400px;
text-indent:2em;
}
div{
width: 300px;
height: 20px;
background: #f2f2f2;
/*white-space：规定如何处理元素内的空白*/
white-space: nowrap;/*文本不许换行*/
/*overflow：属性规定当内容超出元素框时发生的事情*/
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis;/*用省略号代表被修剪文本*/
}
</style>
</head>
<body>
<!-- 页面中常用文本元素 -->
<!-- 标题标签通过<h1>~<h6>定义 -->
<h1>新闻标题</h1>
<!-- 段落标签用<p>定义 -->
<p> 新华社<b>北京</b>3月10日电 （记者张旭东、林晖、刘慧）全国政协十三届二次会议10日下午在人民大会堂举行第三次全体会议。***中央政治局常委、全国政协主席汪洋出席会议。15名委员围绕文化建设和社会建设作大会发言。</p>
<br><!-- 定义换行 -->
<hr><!-- 定义水平线 -->
<p><small>新华社北京3月10日电 （记者张旭东、林晖、刘慧）全国政协十三届二次会议10日下午在人民大会堂举行第三次全体会议。***中央政治局常委、全国政协主席汪洋出席会议。15名委员围绕文化建设和社会建设作大会发言。</small></p>
<br>
<hr><!-- 定义水平线 -->
<p><strong>新华社北京3月10日电 （记者张旭东、林晖、刘慧）全国政协十三届二次会议10日下午在人民大会堂举行第三次全体会议。***中央政治局常委、全国政协主席汪洋出席会议。15名委员围绕文化建设和社会建设作大会发言。(定义加重语气标签strong)</strong></p>
<br>
<hr><!-- 定义水平线 -->
<p>新华社北京3月10日电 （记者张旭东、林晖、刘慧）全国政协十三届二次会议<del>10</del><b>11</b>日下午在人民大会堂举行第三次全体会议。***中央政治局常委、全国政协主席汪洋出席会议。15名委员围绕文化建设和社会建设作大会发言。(删除线标签del)</p>
<p><abbr title="HTML">html</abbr>(超文本标记语言)</p>
<br>
<hr><!-- 定义水平线 -->
<!-- 页面常用文本属性 -->
<!-- 首行缩进（text-indent） -->
<!-- 网页中的链接：a -->
<!-- <a href="地址"></a> -->
<a href="http://www.tmtpost.com/3811631.html" target="_blank">作业页面</a>
<div><a href="demo2.html" target="_blank">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<title>魔方公寓获得1.5亿美元D轮融资</title><!-- 文件头部标题 -->
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="favicon (1).ico"><!-- 引入头部logo -->
<style type="text/css">
/*内部样式*/
*{margin: 0; padding: 0;}
div{
margin: 100px auto;
width: 700px;
height: 200px;
}
abbr{
text-decoration: none;
color: #52F7F2
}
p{
font-size: 14px;
}
img{
margin: 40px 0;
}
h1{
font-family: 宋体;
}
.box{
line-height: 30px; margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<p style="color:#ccc; line-height: 70px;"><abbr title="高梦阳">高梦阳</abbr> • 2019-03-11 15:34</p>
<p style="text-align: center; background: #F2f2f2 ;line-height: 70px;"><b>摘要：</b>新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="pic.jpeg" width="700" alt="这是一张图片">
<p class="box"><b style="font-size: 18px;">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="box">据钛媒体了解，本轮战略投资方加拿大魁北克储蓄投资集团（CDPQ）是一家长期投资管理机构，负责管理加拿大魁北克省的公共养老基金以及保险计划的资产。截止2018年12月31日，CDPQ 管理的基金净资产已达3,095亿加元。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
demo1
demo2
总结：
<!DOCTYPE XXX>放在开头用来声明文档类型，类型有html，xml等等
<head></head>头部元素可引用脚本样式表等等
<title></title> ：标题
<meta>：定义网页信息
<link>：引入外部文件，其中参数有rel（当前文档与被连接文档之间关系） type（文件类型）href（文件路径）
<style>：定义内部样式 ，例如<style type="text/css"> *{ } 、div{ } 、 p{ } 、 img{ } 、.box{ } </style> ,其中外边距margin、内边距padding是常用的参数。常用的还有width、height、background等等，头文件中的div<>定义必须由<body>的div<>实现。
<body></body>包含页面中的常用文本元素及其属性
<h1></h1>：标题标签
<p></p>：段落标签
<a></a>：超链接
<abbr></abbr>：超文本标记语言
<img>：定义图片
在<body>中，可以采用“内联样式写法”定义样式。例如 ：<p style="color: #ccc; line-height: 70px;"></p>、 <b style="font-size: 18px;">内容</b> 等等