前言

ok今天来总结一下学习的HTML和CSS

跳转

HTML
CSS
示例

HTML

一、HTML 基础

定义：超文本标记语言（HyperText Markup Language），用于创建网页的标记语言
作用：构建网页的结构和内容，如文本、图像、链接、表单等

1. HTML 文档结构

<!DOCTYPE html> ：声明文档类型为 HTML5
<html> ：根元素，整个 HTML 页面的容器
<head> ：包含页面的元数据，如标题、字符编码、样式表链接等
- <title> ：设置页面的标题，显示在浏览器的标题栏或标签页上
- <meta> ：定义文档的元信息，如字符集（charset）、描述（name="description"）、关键词（name="keywords"）
<body> ：包含页面的可见内容，如文本、图片、链接等

2. 基本标签

标题标签 ：<h1> - <h6>，用于定义不同级别的标题，<h1> 是最高级别的标题，<h6> 是最低级别的标题
段落标签 ：<p>，用于定义段落文本
换行标签 ：<br>，用于在文本中强制换行
水平线标签 ：<hr>，用于在页面中插入一条水平线
文本格式化标签
- 加粗：<b> 或 <strong>，<strong>
- 斜体：<i> 或 <em>，<em>
- 下划线 ：<u>
- 删除线 ：<s> 或 <del>，<del>
- 上标文本：<sup>，用于公式中的上标
- 下标文本：<sub>，用于公式中的下标
列表标签
- 无序列表 ：<ul>，列表项使用 <li> 标签，用于创建无序列表，如项目符号列表
- 有序列表 ：<ol>，列表项使用 <li> 标签，用于创建有序列表，如数字列表
- 自定义列表 ：<dl>，包含 <dt>（定义术语）和 <dd>（定义描述），用于创建自定义列表
链接标签
- <a> ：用于创建超链接
  - href：属性指定链接的目标地址
  - target：属性指定链接的打开方式（如 _blank 在新窗口打开，_self 在同一窗口打开（默认））
  - title：为链接添加提示文本
图片标签
- <img> ：用于插入图片
  - src ：属性指定图片的源文件地址
  - alt ：属性提供图片的替代文本，当图片无法显示时显示该文本
  - width和 height ：设置图像的宽度和高度
表格标签
- <table> ：定义表格。常用属性有：
  - border ：设置表格的边框宽度
  - width 和 height ：设置表格的宽度和高度
- <tr>：定义表格行
- <td> ：定义表格单元格
- <th> ：定义表格表头单元格，通常用于第一行或第一列，加粗显示并居中对齐
表单标签
- <form> ：定义表单，用于收集用户输入。常用属性：
  - action ：指定表单提交的目标 URL
  - method ：指定表单提交的方式，如 get 或 post
- 表单元素
  - 文本输入框 ：<input type="text">，用于输入单行文本
  - 密码输入框 ：<input type="password">，用于输入密码，输入内容会被隐藏
  - 电子邮件输入框：<input type="email">，用于输入电子邮件，自动验证输入的格式
  - 单选按钮 ：<input type="radio">，用于从一组选项中选择一个选项，name 属性用于分组，value 属性指定选项的值
  - 复选框 ：<input type="checkbox">，用于选择多个选项，name 属性用于分组，value 属性指定选项的值
  - 提交按钮 ：<input type="submit"> 或 <button type="submit">，用于提交表单数据
  - 下拉列表 ：<select>用于创建下拉选择框。常用属性：
    - name：指定名称
    - <option>：定义下拉列表中的选项，value 属性指定选项的值，selected 属性指定默认选中的选项
  - 文本域 ：<textarea>，用于输入多行文本。常用属性：
    - name ：指定名称
    - rows 和 cols ：指定文本框的行数和列数
    - placeholder ：指定提示文本

二、HTML 语义化标签

<header> ：表示页面或区域的头部，通常包含网站标志、导航菜单等
<nav> ：定义导航链接的区域，用于包含页面的导航菜单
<main> ：表示页面的主要内容区域，一个页面只能有一个 <main> 元素
<article> ：表示独立的、完整的内容块，如博客文章、新闻报道等
<section> ：定义文档中的一个区域，用于对页面内容进行分组
<aside> ：表示页面的侧边栏内容，通常包含与页面主要内容相关的补充信息
<footer> ：表示页面或区域的底部，通常包含版权信息、联系方式等

三、HTML5 新特性

多媒体标签

<video> ：定义视频播放器。常用属性：
- src ：指定视频文件的路径
- controls ：显示播放控件
- width 和 height ：设置视频的宽度和高度
- 支持的视频格式：MP4、WebM、Ogg
<audio> ：定义音频播放器。常用属性：
- src ：指定音频文件的路径
- controls ：显示播放控件
- 支持的音频格式：MP3、WAV、OGG

表单新类型

date ：日期选择器
time ：时间选择器
datetime-local ：本地日期和时间选择器
month ：月份选择器
week ：周选择器
number ：数字输入框，可设置最小值、最大值和步长
range ：滑动条输入框，可设置最小值、最大值和步长
color ：颜色选择器

CSS

一、CSS 基础

定义：层叠样式表（Cascading Style Sheets），用于控制 HTML 文档的外观和格式
作用：实现网页的布局、颜色、字体、间距等样式设计，使网页更加美观和易用

1. CSS 引入方式

内联样式 ：在 HTML 元素中使用 style 属性直接设置样式，如 <p style="color: red;">这是红色文本</p>。
内部样式表 ：在 HTML 文档的 <head> 部分使用 <style> 标签定义样式，如 <style>p { color: blue; }</style>
外部样式表 ：创建独立的 CSS 文件（如 styles.css），然后在 HTML 文档的 <head> 部分使用 <link rel="stylesheet" href="styles.css"> 引入

2. CSS 选择器

优先级判定
- 优先级规则：内联样式 > ID 选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器。
- 具体优先级计算：通过选择器的组合和重要性（! important）来确定最终的优先级。
标签选择器 ：根据 HTML 标签名选择元素，如 p { color: green; } 会选择所有的 <p> 元素
类选择器 ：以 . 开头，根据元素的 class 属性值选择元素，如 .highlight { background-color: yellow; } 会选择所有 class 为 highlight 的元素
ID 选择器 ：以 # 开头，根据元素的 id 属性值选择元素，如 #main-content { width: 800px; } 会选择 id 为 main-content 的元素
通用选择器 ：*，选择所有元素，如 * { margin: 0; padding: 0; }
组合选择器
- 后代选择器 ：如 div p 选择 <div> 元素内的所有 <p> 元素
- 子元素选择器 ：如 div > p 选择 <div> 元素的直接子 <p> 元素
- 相邻兄弟选择器 ：如 h1 + p 选择紧跟在 <h1> 元素后的 <p> 元素
- 通用兄弟选择器 ：如 h1 ~ p 选择在 <h1> 元素之后的所有 <p> 元素
属性选择器 ：根据 HTML 元素的属性值选择元素，如 a[href="https://www.example.com"] { color: blue; } 选择所有 href 属性值为 https://www.example.com 的 <a> 标签

3. CSS 属性

文本属性
- color ：设置文本颜色
- font-size ：设置字体大小
- font-family ：设置字体族
- text-align ：设置文本对齐方式：left、right、center、justify
- text-decoration ：设置文本装饰，如下划线（underline）、删除线（line-through）、上方线（overline）、默认无（none）
- line-height ：设置行高
盒模型属性
- width 和 height ：设置元素的宽度和高度
- padding ：设置元素的内边距，可分别设置上、右、下、左的内边距
- margin ：设置元素的外边距，可分别设置上、右、下、左的外边距
- border ：设置元素边框，可细分为 border-style、border-width、border-color 等
- box-sizing ：定义盒模型的计算方式，content-box（默认，宽度和高度只包括内容区域）或 border-box（宽度和高度包括内容区域、内边距和边框）
边框属性
- border-style：设置边框样式：solid、dashed、dotted、double、none
- border-width：设置边框宽度
- border-color：设置边框颜色
- border-radius：设置边框圆角
- border：综合设置边框属性
背景属性
- background-color ：设置背景颜色
- background-image ：设置背景图片。
- background-repeat ：设置背景图片的重复方式，如 repeat、no-repeat 等
- background-position ：设置背景图片的位置
- background-size ：设置背景图片的大小
- background ：综合设置背景属性
布局属性
- display ：设置元素的显示类型：
  - block ：块级元素，独占一行
  - inline ：行内元素，不独占一行
  - inline-block ：行内块级元素，不独占一行，但可以设置宽高和内边距、外边距
  - none ：隐藏元素
  - flex ：弹性布局
  - grid ：网格布局

二、CSS 高级特性

1. CSS 盒模型

标准盒模型 ：元素的 width 和 height 只包括内容区域，padding、border 和 margin 在其外部
怪异盒模型（IE 盒模型） ：元素的 width 和 height 包括内容区域、padding 和 border，margin 在其外部
可以通过 box-sizing 属性来设置盒模型，box-sizing: content-box 为标准盒模型，box-sizing: border-box 为怪异盒模型

2. CSS 浮动

float 属性 ：如 float: left 或 float: right 用于使元素向左或向右浮动，脱离标准文档流
清除浮动 ：使用 clear 属性，如 clear: both 来清除浮动对周围元素的影响，防止父元素塌陷

3. CSS 定位

static ：默认定位方式，元素按照正常的文档流排列
relative ：相对定位，元素相对于其正常位置进行偏移，在文档流中仍占据原来的空间
absolute ：绝对定位，元素相对于最近的已定位祖先元素（position 不是 static 的元素）进行定位，脱离标准文档流
fixed ：固定定位，元素相对于浏览器窗口进行定位，脱离标准文档流
sticky ：粘性定位，元素在滚动过程中根据位置变化表现为相对定位和固定定位的结合

4. CSS 弹性盒模型（Flexbox）

使用方法 ：将容器设置为弹性容器，display: flex
弹性容器的属性
- flex-direction ：设置主轴方向，如 row、row-reverse、column、column-reverse
- justify-content ：设置主轴上子元素的对齐方式，如 flex-start、flex-end、center、space-between、space-around
- align-items ：设置交叉轴上子元素的对齐方式，如 flex-start、flex-end、center、stretch、baseline
弹性子元素的属性
- flex-grow ：设置子元素的增长因子
- flex-shrink ：设置子元素的收缩因子
- flex-basis ：设置子元素的初始大小

5. CSS 网格布局（Grid）

使用方法 ：将容器设置为网格容器，display: grid
网格容器的属性
- grid-template-columns ：定义列的大小，如 grid-template-columns: 100px 200px auto;
- grid-template-rows ：定义行的大小
- grid-gap ：设置网格间隙
网格项的属性
- grid-column-start、grid-column-end、grid-row-start、grid-row-end ：用于指定网格项在网格中的位置

以下未正式学习，网络搜索得来

6. CSS 动画与过渡

过渡（Transition）
- transition-property ：指定应用过渡效果的 CSS 属性。
- transition-duration ：指定过渡效果的持续时间。
- transition-timing-function ：指定过渡效果的时间函数，如 ease、linear、ease-in、ease-out、ease-in-out。
- transition-delay ：指定过渡效果的延迟时间。
- transition ：综合设置过渡属性。
动画（Animation）
- @keyframes ：定义动画的关键帧，指定在动画过程中元素的样式变化。
- animation-name ：指定动画的名称，对应 @keyframes 中定义的动画。
- animation-duration ：指定动画的持续时间。
- animation-timing-function ：指定动画的时间函数。
- animation-delay ：指定动画的延迟时间。
- animation-iteration-count ：指定动画的播放次数，如 infinite 表示无限次播放。
- animation-direction ：指定动画的播放方向，如 normal、reverse、alternate、alternate-reverse。
- animation-play-state ：指定动画的播放状态，如 running、paused。
- animation ：综合设置动画属性。

7. CSS 响应式设计

媒体查询（Media Query）
- 使用 @media 查询不同的设备类型和屏幕特征，如屏幕宽度、高度、分辨率等，为不同的设备应用不同的 CSS 样式。
- 常见的媒体查询条件：
  - max-width ：最大屏幕宽度。
  - min-width ：最小屏幕宽度。
  - orientation ：屏幕方向，portrait（竖屏）或 landscape（横屏）。
响应式布局技巧
- 使用百分比宽度：为元素设置百分比宽度，使其在不同屏幕尺寸下自动调整大小。
- 使用弹性布局（Flexbox）：通过 display: flex 和相关属性实现灵活的布局。
- 使用网格布局（Grid）：通过 display: grid 和相关属性创建网格布局。
- 使用图片的响应式处理：为图片设置 max-width: 100%; 和 height: auto;，使其在不同屏幕尺寸下自动调整大小并保持比例。

示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>网页开发基础 - HTML & CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>网页开发基础 - HTML & CSS</h1>
        <nav>
            <ul>
                <li><a href="#html">HTML</a></li>
                <li><a href="#css">CSS</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="html">
            <h2>HTML</h2>
            <article>
                <h3>一、HTML 基础</h3>
                <p><strong>定义</strong>：超文本标记语言，用于创建网页。</p>
                <p><strong>作用</strong>：构建网页结构和内容。</p>
                <h4>1. HTML 文档结构</h4>
                <ul>
                    <li><code>&lt;!DOCTYPE html&gt;</code>：声明 HTML5 文档类型。</li>
                    <li><code>&lt;html&gt;</code>：根元素。</li>
                    <li><code>&lt;head&gt;</code>：包含元数据。</li>
                    <li><code>&lt;body&gt;</code>：包含可见内容。</li>
                </ul>
                <h4>2. 基本标签</h4>
                <ul>
                    <li><strong>标题标签</strong>：<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code></li>
                    <li><strong>段落标签</strong>：<code>&lt;p&gt;</code></li>
                    <li><strong>链接标签</strong>：<code>&lt;a&gt;</code> <a href="https://example.com">示例链接</a></li>
                    <li><strong>图片标签</strong>：<code>&lt;img&gt;</code> <img src="example.jpg" alt="示例图片" width="200">
                    </li>
                    <li><strong>列表标签</strong>：<code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code></li>
                    <li><strong>表格标签</strong>：
                        <table>
                            <tr>
                                <th>表头 1</th>
                                <th>表头 2</th>
                            </tr>
                            <tr>
                                <td>数据 1</td>
                                <td>数据 2</td>
                            </tr>
                        </table>
                    </li>
                    <li><strong>表单标签</strong>：
                        <form action="#">
                            <input type="text" placeholder="文本输入">
                            <input type="password" placeholder="密码输入">
                            <input type="submit" value="提交">
                        </form>
                    </li>
                </ul>
            </article>
            <article>
                <h3>二、HTML 语义化标签</h3>
                <ul>
                    <li><code>&lt;header&gt;</code>：页面头部</li>
                    <li><code>&lt;nav&gt;</code>：导航区域</li>
                    <li><code>&lt;main&gt;</code>：主要内容</li>
                    <li><code>&lt;article&gt;</code>：独立内容块</li>
                    <li><code>&lt;section&gt;</code>：内容区域</li>
                    <li><code>&lt;aside&gt;</code>：侧边栏</li>
                    <li><code>&lt;footer&gt;</code>：页面底部</li>
                </ul>
            </article>
            <article>
                <h3>三、HTML5 新特性</h3>
                <h4>1. 多媒体标签</h4>
                <video src="example.mp4" controls width="320"></video>
                <audio src="example.mp3" controls></audio>
                <h4>2. 表单新类型</h4>
                <form action="#">
                    <input type="date">
                    <input type="email">
                    <input type="submit" value="提交">
                </form>
            </article>
        </section>

        <section id="css">
            <h2>CSS</h2>
            <article>
                <h3>一、CSS 基础</h3>
                <p><strong>定义</strong>：层叠样式表，控制 HTML 外观。</p>
                <p><strong>作用</strong>：实现网页样式设计。</p>
                <h4>1. CSS 引入方式</h4>
                <ul>
                    <li>内联样式</li>
                    <li>内部样式表</li>
                    <li>外部样式表</li>
                </ul>
                <h4>2. CSS 选择器</h4>
                <ul>
                    <li><strong>标签选择器</strong>：<code>p { color: red; }</code></li>
                    <li><strong>类选择器</strong>：<code>.my - class { background: yellow; }</code></li>
                    <li><strong>ID 选择器</strong>：<code>#my - id { font - size: 20px; }</code></li>
                </ul>
            </article>
            <article>
                <h3>二、CSS 常见属性</h3>
                <h4>1. 文本属性</h4>
                <p class="text - example">颜色、字体大小、对齐等。</p>
                <h4>2. 背景属性</h4>
                <div class="bg - example">背景颜色、图片等。</div>
                <h4>3. 边框属性</h4>
                <div class="border - example">边框样式、宽度等。</div>
                <h4>4. 盒模型属性</h4>
                <div class="box - model - example">宽度、高度、内边距、外边距。</div>
            </article>
            <article>
                <h3>三、CSS 布局</h3>
                <h4>1. 浮动布局</h4>
                <div class="float - example">
                    <div class="float - left">左浮动</div>
                    <div class="float - right">右浮动</div>
                </div>
                <h4>2. 弹性布局</h4>
                <div class="flex - example">
                    <div>弹性项 1</div>
                    <div>弹性项 2</div>
                </div>
                <h4>3. 网格布局</h4>
                <div class="grid - example">
                    <div>网格项 1</div>
                    <div>网格项 2</div>
                </div>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 网页开发基础示例</p>
    </footer>
</body>

</html>

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

section {
    margin-bottom: 40px;
}

article {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

h2 {
    color: #333;
}

h3 {
    color: #555;
}

h4 {
    color: #777;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

form input {
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

video, audio {
    margin-top: 10px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

/* 各类示例样式 */
.text-example {
    color: blue;
    font-size: 18px;
    text-align: center;
}

.bg-example {
    background-color: lightblue;
    padding: 10px;
}

.border-example {
    border: 2px solid green;
    padding: 10px;
}

.box-model-example {
    width: 200px;
    height: 100px;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
}

.float-example {
    overflow: auto;
    background-color: lightgray;
    padding: 10px;
    margin-bottom: 20px;
}

.float-left {
    float: left;
    background-color: lightgreen;
    padding: 10px;
    width: 45%;
    margin-right: 10px;
}

.float-right {
    float: right;
    background-color: lightcoral;
    padding: 10px;
    width: 45%;
    margin-left: 10px;
}

.flex-example {
    display: flex;
    justify-content: space-around;
    background-color: lightyellow;
    padding: 10px;
    margin-bottom: 20px;
}

.flex-example div {
    background-color: lightgoldenrodyellow;
    padding: 10px;
    width: 45%;
}

.grid-example {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    background-color: lightpink;
    padding: 10px;
    margin-bottom: 20px;
}

.grid-example div {
    background-color: lightcyan;
    padding: 10px;
}

create-meng's blog

learn the basic of web development including HTML & CSS

前言

跳转

HTML

一、HTML 基础

1. HTML 文档结构

2. 基本标签

二、HTML 语义化标签

三、HTML5 新特性

多媒体标签

表单新类型

CSS

一、CSS 基础

1. CSS 引入方式

2. CSS 选择器

3. CSS 属性

二、CSS 高级特性

1. CSS 盒模型

2. CSS 浮动

3. CSS 定位

4. CSS 弹性盒模型（Flexbox）

5. CSS 网格布局（Grid）

6. CSS 动画与过渡

7. CSS 响应式设计

示例：