HTML 与 CSS 笔记 · XYCOVO CONSOLE

学习前端开发时的 HTML 和 CSS 笔记，记录核心知识点和常用代码示例。

HTML 基础

HTML 简介

HTML（HyperText Mark-up Language，超文本标记语言）是目前网络上应用最广泛的技术之一，也是构成网页文档的主要基石。HTML 文本可以描述文字、图形、动画、声音、表格、链接等内容。

HTML 结构分为 头部（Head） 和 主体（Body） 两大部分。头部描述浏览器所需信息，主体包含具体的显示内容。

HTML 不是编程语言，而是一种描述性语言，通过标签来描述内容在浏览器中的显示方式。

HTML 历史

1990 年：Web 之父 Tim Berners-Lee 发布了《HTML 标签》论文，借用 SGML 的标记语法
IETF 时期：推出 HTML 2.0，逐步完善
W3C 时期：HTML 4.01（1999 年）成为里程碑版本，沿用至今
XHTML 1.0：以 XML 标准约束 HTML，语法严格但未增加新特性
HTML5：由 WAHTWG 组织（Opera/Apple/Mozilla）发起，W3C 跟进，现已被大部分浏览器兼容

HTML 特点

简易性：语法简单，易于学习和使用
可扩展性：标签可嵌套组合
平台无关性：任何操作系统只要有浏览器即可运行

开发环境

HTML 开发只需要简单的编辑工具：

简易编辑器：Notepad++、Sublime、VS Code
专业 IDE：WebStorm、HBuilder、Eclipse
学习阶段建议使用简单编辑器，熟练后可使用 IDE 提高效率

HTML 快速入门

第一个 HTML 页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个页面</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>这是我的第一个 HTML 页面。</p>
</body>
</html>

文档结构说明

标签	说明
`<!DOCTYPE html>`	声明文档为 HTML5
`<html>`	根元素，`lang` 属性指定语言
`<head>`	头部信息，含编码、标题、样式等
`<meta charset="UTF-8">`	字符编码声明
`<title>`	浏览器标签页标题
`<body>`	页面可见内容

常用 HTML 标签

文本标签

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

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

<strong>加粗强调</strong>
<em>斜体强调</em>

<br>  <!-- 换行 -->
<hr>  <!-- 水平线 -->

列表

<!-- 无序列表 -->
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

链接与图片

<a href="https://www.baidu.com">百度</a>
<a href="mailto:example@email.com">发送邮件</a>
<a href="#section1">页内跳转</a>

<img src="photo.jpg" alt="描述文字" width="300" height="200">

表格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
    </tr>
</table>

表单

<form action="/login" method="post">
    <label>用户名：</label>
    <input type="text" name="username" placeholder="请输入用户名">

    <label>密码：</label>
    <input type="password" name="password">

    <input type="submit" value="登录">
    <input type="reset" value="重置">
</form>

input 常用类型

类型	说明
`text`	文本框
`password`	密码框
`radio`	单选按钮
`checkbox`	多选框
`file`	文件上传
`submit`	提交按钮
`reset`	重置按钮
`email`	邮箱输入
`date`	日期选择

CSS 基础

CSS 引入方式

1. 行内样式

<p style="color: red; font-size: 16px;">红色文字</p>

2. 内部样式表

<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>

3. 外部样式表

<head>
    <link rel="stylesheet" href="style.css">
</head>

推荐使用外部样式表，实现结构与样式分离。

CSS 选择器

基础选择器

标签选择器

p {
    color: red;
}

div {
    background-color: #f0f0f0;
}

ID 选择器

#header {
    height: 80px;
    background-color: #333;
}

<div id="header">顶部导航</div>

类选择器

.highlight {
    color: blue;
    font-weight: bold;
}

<p class="highlight">高亮文字</p>

通配符选择器

* {
    margin: 0;
    padding: 0;
}

组合选择器

子代选择器 —— 只选直接子元素

div > p {
    color: red;
}

后代选择器 —— 选所有后代

div p {
    font-size: 14px;
}

分组选择器 —— 多个选择器共享样式

h1, h2, h3 {
    font-family: 'Microsoft YaHei', sans-serif;
}

属性选择器

/* 含有 title 属性的 div */
div[title] {
    border: 1px solid red;
}

/* type 属性等于 text 的 input */
input[type="text"] {
    background: #f5f5f5;
}

/* type 属性包含 e 的 input */
input[type*="e"] {
    background: pink;
}

/* href 以 https 开头的链接 */
a[href^="https"] {
    color: green;
}

/* href 以 .pdf 结尾的链接 */
a[href$=".pdf"] {
    color: red;
}

伪类选择器

/* 未访问的链接 */
a:link { color: blue; }

/* 已访问的链接 */
a:visited { color: purple; }

/* 鼠标悬停 */
a:hover { color: red; text-decoration: underline; }

/* 激活状态 */
a:active { color: orange; }

/* 第一个子元素 */
li:first-child { font-weight: bold; }

/* 最后一个子元素 */
li:last-child { border-bottom: none; }

/* 第 n 个子元素 */
li:nth-child(2) { background: #eee; }
li:nth-child(odd) { background: #fafafa; }
li:nth-child(even) { background: #fff; }

伪元素选择器

/* 元素前插入内容 */
p::before {
    content: "提示：";
    color: red;
}

/* 元素后插入内容 */
p::after {
    content: "。";
}

/* 首行 */
p::first-line {
    font-weight: bold;
}

/* 首字母 */
p::first-letter {
    font-size: 2em;
    color: red;
}

选择器优先级

当多个选择器作用于同一元素时，优先级规则为：

!important > 内联样式 > ID > 类/伪类/属性 > 标签/伪元素 > 通配符

计算规则（计算特异性值 a-b-c-d）：

选择器	示例	权重
行内样式	`style="..."`	1,0,0,0
ID	`#header`	0,1,0,0
类/伪类/属性	`.box`, `:hover`, `[type]`	0,0,1,0
标签/伪元素	`div`, `::before`	0,0,0,1

div.box           /* 标签+类   = 0,0,1,1 */
#content p        /* ID+标签   = 0,1,0,1 */
div #header .nav  /* 标签+ID+类 = 0,1,1,1 */

值越大优先级越高。值相同时，后写的覆盖先写的。

常用 CSS 属性

文本样式

color: #333;                    /* 文字颜色 */
font-size: 16px;                /* 字号 */
font-weight: bold;              /* 粗细 */
font-family: 'Microsoft YaHei'; /* 字体 */
text-align: center;             /* 水平对齐 */
text-decoration: none;          /* 装饰线（下划线/删除线） */
line-height: 1.5;               /* 行高 */
text-indent: 2em;               /* 首行缩进 */

背景

background-color: #f5f5f5;                  /* 背景色 */
background-image: url('bg.jpg');             /* 背景图 */
background-repeat: no-repeat;                /* 不平铺 */
background-size: cover;                      /* 覆盖 */
background-position: center;                 /* 居中 */

盒模型

width: 200px;           /* 宽度 */
height: 100px;          /* 高度 */
padding: 10px 20px;     /* 内边距（上下 左右） */
border: 1px solid #ccc; /* 边框 */
margin: 10px auto;      /* 外边距（上下10px 左右居中） */

box-sizing: border-box; 可以让宽高包含 padding 和 border，布局更直观。