HTML/CSS

HTML 基础

简介

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。

基本结构

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>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>

常用标签

文本标签

<h1> - <h6>: 标题
<p>: 段落
<span>: 行内元素
<div>: 块级元素

链接和媒体

<a href="">: 链接
<img src="" alt="">: 图片
<video>: 视频
<audio>: 音频

列表

<ul>: 无序列表
<ol>: 有序列表
<li>: 列表项

表格

<table>: 表格
<tr>: 表格行
<td>: 表格单元格
<th>: 表格标题单元格

CSS 基础

简介

CSS（Cascading Style Sheets）用于描述 HTML 元素的样式。

基本语法

css

选择器 {
    属性: 值;
    属性: 值;
}

选择器类型

基础选择器

css

/* 元素选择器 */
p { color: blue; }

/* 类选择器 */
.my-class { font-size: 16px; }

/* ID选择器 */
#my-id { background-color: yellow; }

组合选择器

css

/* 后代选择器 */
div p { margin: 10px; }

/* 子选择器 */
div > p { padding: 5px; }

/* 相邻兄弟选择器 */
h1 + p { font-weight: bold; }

盒模型

css

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

布局

Flexbox

css

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Grid

css

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

响应式设计

css

/* 媒体查询 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

最佳实践

使用语义化的 HTML 标签
保持 HTML 结构清晰
使用外部 CSS 文件
遵循 CSS 命名规范
优化性能和加载速度
确保跨浏览器兼容性
实现响应式设计

HTML/CSS ​

HTML 基础 ​

简介 ​

基本结构 ​

常用标签 ​

文本标签 ​

链接和媒体 ​

列表 ​

表格 ​

CSS 基础 ​

简介 ​

基本语法 ​

选择器类型 ​

基础选择器 ​

组合选择器 ​

盒模型 ​

布局 ​

Flexbox ​

Grid ​

响应式设计 ​

最佳实践 ​

相关资源 ​

HTML/CSS

HTML 基础

简介

基本结构

常用标签

文本标签

链接和媒体

列表

表格

CSS 基础

简介

基本语法

选择器类型

基础选择器

组合选择器

盒模型

布局

Flexbox

Grid

响应式设计

最佳实践

相关资源