HTML+CSS自用知识点（第一周）_css颜色alt+左键-优快云博客

本文链接：https://blog.youkuaiyun.com/Meg_Fu/article/details/127349921

这篇博客介绍了HTML和CSS作为网站基础编程语言的角色，讲解了VSCode编辑器的基本操作，包括常用的快捷键。此外，还详细阐述了HTML的基本内容，如超文本、标记、常见标签、属性、初始代码、注释和语义化。同时，讨论了CSS的作用，并提及了标题、段落、文本修饰、图片标签、文件路径、跳转链接、锚点和特殊符号的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拨云见日篇

一、HTML、CSS是做网站基础编程语言

其中可以用文本以.html来编写网页。

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

CSS叫做层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、VS Code编辑器

1、左侧扩展可安装相应的扩展程序，方便使用该软件。
2、
ctrl+s保存
ctrl+a全选
ctrl+y还原
ctrl+d选择相同
shift+end从头选中一行
shift+home从尾部选中一行
shift+alt+ ↓快速复制一行
alt+方向快速移动一行
alt+左键多光标

三、网站了解

1、Web前端开发（H5开发）

主要用JavaScript（行为），HTML（结构）+CSS（样式）；
将设计稿用代码呈现；
将数据库里的数据显示到页面；

2、网页代码示例

<style>
div{ color:□red;  font-style:italic; }  
</style>  <!-- 颜色和斜体 -->

<div>文字</div>  <!--结构-->

<script>
行为                 
</script>  <!--这里代码为“行为”-->

四、HTML基础内容

1、超文本：

文本内容 + 非文本内容（图片、视频、音频等）

1.5、标记(签)：

<单词> （文本格式）（例：<header><footer>）

2、写法

单标签 <header>
双标签 <header></header>
(单词 + Tab可以快捷标签)
标签可以上下排列，嵌套（嵌套越深越详细）

3、HTML常见标签

https://www.juanzan.com/cha/html5/

4、标签属性

修饰标签，设置当前标签功能（可设置多个标签）

5、HTML初始代码

! + Tab 可生成初始代码

<!DOCTYPE html>  <!--代码表示此为HTML文件-->
<html lang="en">   <!--HTML文件最外层标签：包裹所有html标签代码；lang="en"表示为英文网站-->
<head>
    <meta charset="UTF-8">   <!--无信息：是编写网页中的一些赋值信息（使不同国家展示页面正常）-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   <!--网页标题-->
</head>
<body>
    
</body>
</html>

6、HTML注释

<!-- 注释内容 -->

用处：
1.把暂时不用的代码注释起来，方便储存。
2.注释起重要内容，便于记忆

快速添加（取消）注释：
shift + alt + a
ctrl + /

7、HTML语义化

语义化指：根据网页中内容的结构，选择合适的HTML标签进行编写。

好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器（https://h5o.github.io）、盲人阅读器等）
4.便于团队开发与维护。

五、标签

1、标题和段落

1.标题
双标签：<h1><、h1> ... <h6></h6>
(h1~6,等级越来越高，且一个.html文件中只能出现一次h1标签，h5、h6尽量少用)

2.段落
双标签：<p></p>

2、文本修饰标签

1.强调（双标签）
(加粗)：<steong></strong>
(斜体)：<em></em>
*strong的强调性比em更强

2.下标
(双标签)：<sub></sub>

3.上标
(双标签)：<sup></sup>

4.删除文本
(双标签)：<del></del>

5.插入文本
(双标签)：<ins></ins>
*删除文本和插入文本配合使用

3、图片标签与图片属性

图片标签
（单标签）：<img src="" alt="">
src : 图片网页地址
alt : 当图片出现问题时可以给用户提示
title : 一张图片的提示信息
width、height : 图片大小

六、文件的地址路径

1、路径

1.相对路径
“.” 在路径中表示当前路径
“…” 在路径中表示上一级的路径

2.绝对路径
磁盘详细地址或网页详细地址
~~(window系统正反斜线都可以，网络地址除外)~~ （尽量避免反斜线）

2、跳转链接

1.<a>(双标签)：<a></a>
href属性：连接的地址
target属性：可以改变链接打开的方式
默认情况下:是在当前页面打开 _self ,新窗口打开_blank

2.<base>(单标签)：
改变链接默认行为

六、跳转锚点

1.实现一
#号+id号
例：

<a href="#html">文字</a>

<p>段落</p>
<p>段落</p>
<p>段落</p>
<h2 id="html">文字</h2>
<p>段落</p>

2.实现二
#号+name属性
例：

<a href="#html">文字</a>

<p>段落</p>
<p>段落</p>
<p>段落</p>
<a name"html"></h2>
<h2>文字</h2>
<p>段落</p>

七、特殊符号

特殊字符对应代码