Web的入门知识（9月24日）
保持自己的节奏 2024-10-21 15:03:02 阅读 56
我也是新手刚学web没几天，总结一下今天所学，如有错误，欢迎批评指正
我是边写边学的，刚开始我写了一个类似新闻界面的前端，自然按着新闻页面的构成一步步学习。
1. 页面的标题排版
使用vscode时按下！会自动生成html的框架,其中我们要修改title为自己所用的。
<!-- 声明文档类型为html -->
<!DOCTYPE html>
<html lang="en">code>
<head>
<!-- 当前页面的字符集为UTF-8 -->
<meta charset="UTF-8">code>
<!-- 设置浏览器兼容性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>此处为标题</title>
</head>
<body>
<img src="./picture/微信图片_20240919204805.jpg" width="300" >code>
<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>code>
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<p>点击 <a href="https://www.example.com">这里</a> 访问示例网站。</p>code>
</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">code>
功能: 定义HTML文档的根元素，并指定文档的语言为英语。
属性:
lang: 指定文档的语言，例如 lang="en"code> 表示英语。
3. <head>
功能: 包含文档的元数据（metadata），如标题、样式表、脚本等。
4. <meta charset="UTF-8">code>
功能: 指定文档的字符编码为UTF-8，确保文档中的字符能够正确显示。
属性:
charset: 指定字符编码，例如 charset="UTF-8"code>。
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">code>
功能: 设置视口（viewport），使网页在移动设备上正确显示。
属性:
name: 指定元数据的名称，例如 name="viewport"code>。
content: 指定元数据的值，例如 content="width=device-width, initial-scale=1.0"code>。
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">code>
功能: 定义一个分区或节，ID为 center，用于包裹内容并使其居中。
属性:
id: 指定元素的唯一标识符，例如 id="center"code>。
10. <img src="img/news_logo.png">code>
功能: 插入图像。
属性:
src: 指定图像的URL，例如 src="img/news_logo.png"code>。
11. <a href="https://www.sina.com.cn/" target="_self">新闻频道</a>code>
功能: 定义超链接。
属性:
href: 指定链接的目标URL，例如 href="https://www.sina.com.cn/"code>。
target: 指定链接的打开方式，例如 target="_self"code> 在当前窗口打开。
12. <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
功能: 定义一级标题。
13. <hr>
功能: 插入水平线，用于分隔内容。
14. <span id="time">2024年9月24日</span>code>
功能: 定义行内元素，ID为 time，用于显示日期。
属性:
id: 指定元素的唯一标识符，例如 id="time"code>。
15. <span> <a href="https://www.cctv.com/" target="_blank">央视网</a></span>code>
功能: 定义行内元素，包含一个超链接。
属性:
href: 指定链接的目标URL，例如 href="https://www.cctv.com/"code>。
target: 指定链接的打开方式，例如 target="_blank"code> 在新窗口打开。
16. <video src="video/1.mp4" controls width="950px"></video>code>
功能: 插入视频。
属性:
src: 指定视频的URL，例如 src="video/1.mp4"code>。
controls: 显示视频控制条。
width: 设置视频的宽度。
17. <p>
功能: 定义段落。
属性:
id: 指定元素的唯一标识符，例如 id="plast"code>。
18. <b>央视网消息 </b>
功能: 定义加粗文本。
19. <img src="img/1.jpg">code> 和 <img src="img/2.jpg">code>
<img src="img/2.jpg">code>
功能: 插入图像。
属性:
src: 指定图像的URL，例如 src="img/1.jpg"code>。
注：其中一些内容在我的代码中体现
明天计划：学习js
志不立，天下无可成之事。——王阳明
上一篇： Nuxt.js 应用中的 build：done 事件钩子详解
下一篇： 前端学习，软创中心（前端组）———— vue环境（Element Plus添加）以及相关前端组应用 第二次笔记记录
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。