HTML & CSS 学习总结

最新推荐文章于 2025-12-02 22:10:11 发布

原创最新推荐文章于 2025-12-02 22:10:11 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了HTML的基础知识，包括HTML用于构建Web页面的用途，创建HTML实例的步骤，以及HTML的基本结构。内容涵盖HTML标题、段落、链接和图像的创建方法。此外，还提及了CSS在呈现页面样式中的作用，如颜色、尺寸和对齐方式的设置。

HTML（HyperText Markup Language）是一种用来告知浏览器如何组织页面的标记语言，它由一系列的元素组成，一般我们用它来构建 Web 页面。

创建一个HTML实例

打开vscode，新建一个文件夹，在该文件夹下新建一个后缀名为html 的文件并输入如下内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML结构解析

HTML的大体结构如下图所示

标签名	定义
`<html></html>`	标签
`<head></head>`	头部
`<title></title>`	标题
`<body></body>`	主体

3. HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的,语法如下

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

HTML段落

HTML 段落是通过标签<p>来定义的,语法如下

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML链接

HTML 链接是通过标签 <a> 来定义的,可分为三种，分别是外部链接、锚链接、邮件链接，这里我们简单介绍一下外部链接和锚链接

1.外部链接：即可以连接到外部文件如跳转到百度搜索界面

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

锚链接：是在本页面或者其他页面的的不同位置进行跳转

首先我们要创建一个锚点，使用name属性或者id属性给那个特定的位置起个名字

<a name=hhh>底部</a>

然后在底部设置超链接,点击即可跳转到底部

<a href="#hhh">跳转到底部</a>

HTML图像

HTML 图像是通过标签 <img> 来定义的,语法如下

<img src="图像路径" width="200" height="200">

文件路径有相对路径和绝对路径两种。

绝对路径：
1.本地路径

<img src="D:\images\1.jpg">

2.网络路径路径

<img src="图片的地址">

相对路径：
通常用 . 和 .. 分表代表当前目录和上一层目录
当前目录

<img src="1.jpg">
<img src="./1.jpg">

上一层目录

<img src="../1.jpg">

网页的内容是由 HTML的元素构建的，我们通常用CSS来呈现这些元素，让css样式生效一般有三种方法，1、首先我么们新建一个HTML文件，在<head></head>中添加下列代码,然后在同目录新建一个样式表文件mycss.css，2、可直接将样式放在HTML文件中的<style></style>中，3、直接把样式规则直接写到要应用的元素中。

css的内容有颜色，尺寸，对齐

1、颜色通常用 background-color 属性为元素设置背景色

<h1 style="color:Tomato;">Hello World</h1>

2、尺寸通常用 height 和 width 设定元素内容占据的尺寸

例如设置<div class="test1">的尺寸

.test1 {
  width: 100%;
  height: 200px;
}

3、对齐通常用text-align设置对齐，它的属性有left, center, right