我也是新手刚学web没几天，总结一下今天所学，如有错误，欢迎批评指正
我是边写边学的，刚开始我写了一个类似新闻界面的前端，自然按着新闻页面的构成一步步学习。
1. 页面的标题排版
使用vscode时按下！会自动生成html的框架,其中我们要修改title为自己所用的。
<!-- 声明文档类型为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 src="./picture/微信图片_20240919204805.jpg" width="300" >
<h1>一级标题</h1>
<h2>二级标题</h2>
<hr>
双横线中间内容显示
<hr>
</body>
</html>其中<img> 标签用于在网页中嵌入图像，使用方法如下：
img标签
src:图片资源路径
绝对路径：
1.绝对磁盘路径："D:\twoyears\HTML\picture\微信图片_20240919204805.jpg"
2.绝对网络路径：https://images.shobserver.com/news/690_390/.jpg
相对路径：
./ : 当前目录（可以省略）
../ ： 上一级目录
width：宽度
height：高度
2.标题的样式
修改标题的颜色，有三种方法，不过我比较习惯于内嵌样式，就是在<head>标签中用<style>标签进行修改，这里就用到了另一个知识点（css选择器），我习惯于用id选择器，就是在<h1>标签内定义一个id名称 这样就可以在<style>标签中用井号加id名称的方法进行修改操作。另外<span> 标签是一个内联元素，用于对文档中的部分文本或其他内联元素进行分组。<span> 标签本身没有任何特定的样式或行为，但它通常与 CSS 结合使用，以便对特定的文本或元素应用样式。
<head>
<style>
/* ID选择器 */
#time{
color: #968D92;
font-size: 12px;
}
</style>
</head>
<body>
<hr>
<span id = "time">2024年9月24日</span>
<hr>
</body>
</html>3.超链接
在 HTML 中，<a> 标签（也称为锚标签）用于创建超链接，使用户能够从一个页面导航到另一个页面或同一页面中的不同部分。<a> 标签通常包含一个 href 属性，用于指定链接的目标地址。
基本语法为
<a href="目标地址">链接文本</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>点击 <a href="https://www.example.com">这里</a> 访问示例网站。</p>
</body>
</html>通常<a>标签内需要用到两个属性 href和target
href：指定链接的目标地址。可以是绝对 URL（如https://www.example.com）或相对 URL（如about.html）。
target：指定链接的打开方式。常用的值包括：
_blank：在新窗口或新标签中打开链接。
_self：在当前窗口或标签中打开链接（默认行为）。
_parent：在父框架中打开链接。
_top：在整个窗口中打开链接。
总结来说：用到的HTML和CSS常用标签如下
1. <!DOCTYPE html>
-
功能: 声明文档类型，告诉浏览器这是一个HTML5文档。
2. <html lang="en">
-
功能: 定义HTML文档的根元素，并指定文档的语言为英语。
-
属性:
-
lang: 指定文档的语言，例如lang="en"表示英语。
-
3. <head>
-
功能: 包含文档的元数据（metadata），如标题、样式表、脚本等。
4. <meta charset="UTF-8">
-
功能: 指定文档的字符编码为UTF-8，确保文档中的字符能够正确显示。
-
属性:
-
charset: 指定字符编码，例如charset="UTF-8"。
-
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
功能: 设置视口（viewport），使网页在移动设备上正确显示。
-
属性:
-
name: 指定元数据的名称，例如name="viewport"。 -
content: 指定元数据的值，例如content="width=device-width, initial-scale=1.0"。
-
6. <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
-
功能: 定义文档的标题，显示在浏览器的标题栏或标签页上。
7. <style>
-
功能: 定义文档的内部样式表。
-
属性:
-
h1: 定义一级标题的样式。-
color: 设置字体颜色。
-
-
#time: 定义ID为time的元素的样式。-
color: 设置字体颜色。 -
font-size: 设置字体大小。
-
-
a: 定义超链接的样式。-
color: 设置字体颜色。 -
text-decoration: 设置文本装饰，例如none表示无下划线。
-
-
p: 定义段落的样式。-
text-indent: 设置首行缩进。 -
line-height: 设置行高。
-
-
#plast: 定义ID为plast的元素的样式。-
text-align: 设置文本对齐方式。
-
-
#center: 定义ID为center的元素的样式。-
width: 设置宽度。 -
margin: 设置外边距，0 auto表示上下边距为0，左右边距自动，使元素居中。
-
-
8. <body>
-
功能: 定义文档的主体内容。
9. <div id="center">
-
功能: 定义一个分区或节，ID为
center，用于包裹内容并使其居中。 -
属性:
-
id: 指定元素的唯一标识符，例如id="center"。
-
10. <img src="img/news_logo.png">
-
功能: 插入图像。
-
属性:
-
src: 指定图像的URL，例如src="img/news_logo.png"。
-
11. <a href="https://www.sina.com.cn/" target="_self">新闻频道</a>
-
功能: 定义超链接。
-
属性:
-
href: 指定链接的目标URL，例如href="https://www.sina.com.cn/"。 -
target: 指定链接的打开方式，例如target="_self"在当前窗口打开。
-
12. <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
-
功能: 定义一级标题。
13. <hr>
-
功能: 插入水平线，用于分隔内容。
14. <span id="time">2024年9月24日</span>
-
功能: 定义行内元素，ID为
time，用于显示日期。 -
属性:
-
id: 指定元素的唯一标识符，例如id="time"。
-
15. <span> <a href="https://www.cctv.com/" target="_blank">央视网</a></span>
-
功能: 定义行内元素，包含一个超链接。
-
属性:
-
href: 指定链接的目标URL，例如href="https://www.cctv.com/"。 -
target: 指定链接的打开方式，例如target="_blank"在新窗口打开。
-
16. <video src="video/1.mp4" controls width="950px"></video>
-
功能: 插入视频。
-
属性:
-
src: 指定视频的URL，例如src="video/1.mp4"。 -
controls: 显示视频控制条。 -
width: 设置视频的宽度。
-
17. <p>
-
功能: 定义段落。
-
属性:
-
id: 指定元素的唯一标识符，例如id="plast"。
-
18. <b>央视网消息 </b>
-
功能: 定义加粗文本。
19. <img src="img/1.jpg"> 和 <img src="img/2.jpg">
-
功能: 插入图像。
-
属性:
-
src: 指定图像的URL，例如src="img/1.jpg"。
-
注：其中一些内容在我的代码中体现
明天计划：学习js
志不立，天下无可成之事。——王阳明
标签：24,Web,定义,标签,指定,文档,属性,id,入门 From： https://blog.csdn.net/A20031115/article/details/142501774