（一）HTML快速入门
（1）快速创建文本文件，并将后缀名改为.html
(2)编写HTML结构标签
（3）在<body>中填写内容
<html><head><title>HTML快速入门,在文档头部展示</title></head><body><h1>HELLO HTML在浏览器主体部分展示</h1><h6>h1-h6是文本标签</h6><img src="1.png"></body></html>
(二）新浪新闻标题排版
（1）图像标签说明<img>：
1.src:指定图像的url(可以是绝对路径/相对路径)
2.width:图像的宽度（单位可以是像素/相对于父元素的百分比）
3.height:图像的高度（单位可以是像素/相对于父元素的百分比）
（2）标题标签：
<h1>到<h6>种字体型号从大到小
<!-- 说明文档类型为HTML --><!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器的兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈-最新技术聚焦</title>
</head>
<body><!-- 直接输入感叹号(img)，回车就会在动生成主体标签代码 --><h6>聚焦访谈-今日技术</h6><!-- 相对路径：./:相对于当前目录的路径，可以省略../:相对于上一级目录的路径，不能省略 --><img src="picture\1.jpg" width="150px" >新浪网>每日技术论坛<hr>2024年01月21日 17:08 新浪网 <hr>
</body>
</html>
效果：
（三）CSS样式
（1）CSS方法1:行内样式
<h1 style="color:blue;">聚焦访谈-今日技术（样式1）</h1>
（2） Css方法2: 内嵌样式
<style>
/* 在style中h1为选择器：表示该样式针对所有的h1标签进行设置 */
h1{
color: aquamarine;
}
</style>
<h1>样式2设置查看</h1>
（3） CSS方法3：外联样式：外部定义一个CSS文件,使用link标签引用CSS文件
创建一个后缀为css的文件news.css,在里面定义h3标签的样式：
h3{
color: rgb(168, 227, 30);
}
在主体代码中使用link标签引用：
<link rel="stylesheet" href="./css/news.css">
//整体代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈-最新技术聚焦</title>
</head>
<body>
<!-- CSS方法1:行内样式 --><h1 style="color:blue;">聚焦访谈-今日技术（样式1）</h1>
<!-- Css方法2: 内嵌样式--><style>/* 在style中h1为选择器：表示该样式针对所有的h1标签进行设置 */h1{color: aquamarine;}</style><h1>样式2设置查看</h1>
<!-- CSS方法3：外联样式：外部定义一个CSS文件,使用link标签引用CSS文件--><link rel="stylesheet" href="./css/news.css"><h3>样式3查看</h3><img src="picture\1.jpg" width="150px" >新浪网>每日技术论坛《样式学习》<hr>2024年01月21日 17:08 新浪网 <hr> <hr><hr><h5>CSS知识点：</h5>CSS方法1:行内样式</body>
</html>
