HTML开发笔记：1.环境、标签和属性、CSS语法

一、环境与新建

在VSCODE里，加载插件："open in browser"

然后新建一个文件夹，再在VSCODE中打开该文件夹，在右上角图标新建文档，一定要是加.html，不要忘了文件后缀

复制任意一个代码比如：

css 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请投币</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: 'Comic Sans MS', cursive, sans-serif;
        }
        h1 {
            font-size: 4rem;
            color: #ff6347;
            text-shadow: 2px 2px 4px #000000;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }
    </style>
</head>
<body>
    <h1>第一个网页</h1>
</body>
</html>

鼠标右击空白处单击【open In Default Browser】查看运行结果。

网页弹出即说明新建成功。

二、标签和属性详解

1.标题标签 <h1> 到 <h6>

标题标签用于定义文档中的标题和子标题。<h1> 是最高级别的标题，通常用于主标题，而 <h6> 是最低级别的标题，用于最小的子标题。数字越大，字体越小。

2.段落标签 <p>

段落标签用于定义文本段落。浏览器会自动在段落前后添加一些空白。

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

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

3.链接标签 <a>

链接标签用于创建超链接，指向其他网页或同一网页的不同部分。href 属性指定了链接的目标URL。

<a href="https://www.example.com">访问示例网站</a>

图片标签 <img>

图片标签用于在网页中嵌入图像。src 属性指定了图像文件的路径，alt 属性提供了图像的替代文本。

4.列表标签

无序列表 <ul>：列表项前面有项目符号。

有序列表 <ol>：列表项前面有数字或字母。

列表项 <li>：用于定义列表中的每一项。

<ul>

<li>无序列表项1</li>

<li>无序列表项2</li>

</ul>

<ol>

<li>有序列表项1</li>

<li>有序列表项2</li>

</ol>

5.表格标签

表格 <table>：定义一个表格。

表格行 <tr>：定义表格中的一行。

表格数据 <td>：定义表格中的一个单元格。

表格头 <th>：定义表格中的表头单元格。

html

<table>

<tr>

</tr>

<tr>

</tr>

</table>

6.表单标签

表单 <form>：定义一个表单，用于收集用户输入。

输入 <input>：定义一个输入字段，可以有不同的类型，如文本、密码、单选、复选等。

按钮 <button>：定义一个按钮，可以用于提交表单或执行其他操作。

html

<br>

<br>

</form>

7.特殊字符

HTML中有一些特殊字符需要使用字符实体来表示，以避免与HTML标签冲突。

空格： 

小于号：<

大于号：>

和号：&

html

<p>这是一个包含特殊字符的段落：< > &  </p>

三、CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档外观和格式的样式表语言。CSS的主要作用是分离内容和表现，使得网页的结构和样式可以独立修改，提高了代码的可维护性和可重用性。

1. CSS的基本概念

层叠：多个样式可以作用在同一个HTML元素上，同时生效。

样式表：定义如何显示HTML元素的规则集合。

2. CSS的好处

功能强大：可以控制网页的几乎所有视觉表现。

内容与样式分离：降低耦合度，便于维护和协作。

提高开发效率：样式可以复用，减少重复代码。

3. CSS的使用方式

内联样式：在标签内使用style属性指定CSS代码。

内部样式：在<head>标签内使用<style>标签定义CSS。

外部样式：通过<link>标签引入外部CSS文件。

4. CSS语法

格式：

css

选择器 {

属性名1: 属性值1;

属性名2: 属性值2;

...

}

选择器：用于筛选具有相似特征的元素。

5. 选择器类型

基础选择器：

id选择器：#id属性值{}

类选择器：.class属性值{}

元素选择器：标签名称{}

扩展选择器：

通用选择器：*{}

并集选择器：选择器1, 选择器2{}

子选择器：选择器1 > 选择器2{}

后代选择器：选择器1 选择器2{}

属性选择器：元素名称[属性名="属性值"]{}

伪类选择器：元素:状态{}

例如：

#uniqueID { color: green; }

.commonClass { font-weight: bold; }

div { background-color: yellow; }

6. 常用CSS属性

字体和文本：

font-size：字体大小

color：文本颜色

text-align：对齐方式

line-height：行高

背景：

background：背景颜色或图片

边框：

border：边框样式

尺寸：

width：宽度

height：高度

盒子模型：

margin：外边距

padding：内边距

box-sizing：控制盒子尺寸计算方式

布局：

float：浮动

position：定位

例如：

body {

font-family: Arial, sans-serif;

background: url('background.jpg');

border: 1px solid black;

width: 50%;

height: 300px;

margin: 20px;

padding: 10px;

}

7. CSS的引入方式

行内式：直接在标签的style属性中添加CSS样式。

内嵌式：在<head>标签内加入<style>标签。

外链式：使用<link>标签引入外部CSS文件。

例如：

8. CSS的选择器

标签选择器：根据标签名选择元素。

类选择器：根据类名选择元素。

id选择器：根据id选择元素。

后代选择器：选择某个元素的后代元素。

子选择器：选择某个元素的直接子元素。

伪类选择器：根据元素状态选择元素。

例如：

ul li { color: purple; }

.container > p { text-decoration: underline; }

a:hover { color: orange; }

9. CSS的属性

布局常用属性：width, height, background, border, padding, margin, float

文本常用属性：color, font-size, font-family, font-weight, line-height, text-decoration, text-align, text-indent

例如：

h1 {

color: navy;

font-size: 2em;

text-align: center;

text-indent: 20px;

}

10. CSS的元素溢出

overflow属性：控制溢出内容的显示方式，可选值有visible, hidden, auto

例如：

div {

width: 100px;

height: 100px;

overflow: auto;

}

11. CSS的显示特性

display属性：控制元素的显示类型，可选值有none, inline, block, inline-block

例如：

span { display: block; }

div { display: none; }

12. 盒子模型

内容：元素的实际内容区域。

内边距：内容与边框之间的空间。

边框：围绕内容的线条。

外边距：元素与其他元素之间的空间。

例如：

.box {

width: 200px;

padding: 20px;

border: 5px solid gray;

margin: 20px;

}

13. CSS的优先级

优先级规则：内联样式 > ID选择器 > 类选择器 > 元素选择器

!important：用于提升某个样式的优先级，应谨慎使用。

例如：

#special { color: blue; }

.text { color: red !important; }

14. CSS的继承

继承属性：某些属性会自动继承父元素的值，如color, font-family等。

例如：

body { font-family: 'Arial', sans-serif; }

p { color: inherit; }

15. CSS的单位

绝对单位：如px, pt等。

相对单位：如em, rem, %等。

例如：

div {

width: 50%;

font-size: 1.2em;

}

16. CSS的响应式设计

媒体查询：根据不同的设备特性应用不同的样式。

例如：

@media (max-width: 600px) {

body { background-color: lightgreen; }

}

17. CSS的预处理器

Sass/SCSS, Less, Stylus：提供变量、嵌套、混合、函数等高级功能，增强CSS的可编程性。

例如：

$primary-color: #333;

body {

color: $primary-color;

}

18. CSS的命名规范

BEM（Block Element Modifier）：一种命名约定，提高代码的可读性和可维护性。

例如：

.block__element--modifier { color: blue; }

19. CSS的最佳实践

模块化：将CSS分成多个模块，便于管理和复用。

性能优化：减少重绘和回流，提高页面加载速度。

可访问性：确保所有用户都能无障碍地访问网页。

例如：

/* 模块化 */

.button {

padding: 10px 20px;

border: none;

background-color: #007BFF;

color: white;

}

/* 性能优化 */

.lazy-load {

background: url('lazy-image.jpg') no-repeat center;

background-size: cover;

}