HTML/CSS学习笔记

简介: HTML/CSS

HTML和CSS学习笔记

一、HTML基础

1. HTML简介

HTML(HyperText Markup Language)是用于创建网页的标准标记语言。它使用标签来描述网页的结构和内容。

2. 基本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>
    <!-- 网页内容 -->
</body>
</html>

3. 常用HTML标签

文本标签

<h1><h6>  <!-- 标题标签 -->
<p>段落标签</p>
<strong>粗体文本</strong>
<em>斜体文本</em>
<br>  <!-- 换行 -->
<hr>  <!-- 水平线 -->

链接和图片

<a href="https://example.com">链接文本</a>
<a href="mailto:example@example.com">发送邮件</a>
<img src="image.jpg" alt="图片描述" width="300">

列表

<!-- 无序列表 -->
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

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

表格

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

表单

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">

    <textarea name="message" rows="5" cols="30"></textarea>

    <input type="submit" value="提交">
</form>

二、CSS基础

1. CSS简介

CSS(Cascading Style Sheets)用于控制网页的样式和布局,包括颜色、字体、间距、响应式设计等。

2. CSS引入方式

内联样式

<p style="color: blue; font-size: 16px;">段落文本</p>

内部样式表

<head>
    <style>
        body {
    
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
</head>

外部样式表

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

3. CSS选择器

基础选择器

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

/* 类选择器 */
.highlight {
   
    background-color: yellow;
}

/* ID选择器 */
#header {
   
    height: 100px;
}

/* 通用选择器 */
* {
   
    margin: 0;
    padding: 0;
}

组合选择器

/* 后代选择器 */
div p {
   
    color: blue;
}

/* 子元素选择器 */
div > p {
   
    font-weight: bold;
}

/* 相邻兄弟选择器 */
h1 + p {
   
    margin-top: 0;
}

/* 通用兄弟选择器 */
h1 ~ p {
   
    color: gray;
}

4. 常用CSS属性

文本样式

.text-style {
   
    color: #333;              /* 文字颜色 */
    font-size: 16px;          /* 字体大小 */
    font-family: Arial, sans-serif;  /* 字体 */
    font-weight: bold;        /* 字体粗细 */
    text-align: center;       /* 文本对齐 */
    line-height: 1.5;         /* 行高 */
    text-decoration: underline; /* 文本装饰 */
}

盒模型

.box-model {
   
    width: 300px;             /* 宽度 */
    height: 200px;            /* 高度 */
    padding: 20px;            /* 内边距 */
    border: 2px solid #333;   /* 边框 */
    margin: 10px;             /* 外边距 */
}

背景

.background {
   
    background-color: #f0f0f0;     /* 背景颜色 */
    background-image: url('bg.jpg'); /* 背景图片 */
    background-repeat: no-repeat;   /* 背景重复 */
    background-position: center;    /* 背景位置 */
    background-size: cover;         /* 背景大小 */
}

布局

.layout {
   
    display: block;           /* 显示方式 */
    position: relative;       /* 定位方式 */
    float: left;              /* 浮动 */
    clear: both;              /* 清除浮动 */
}

三、学习资源推荐

MDN Web Docs - 最权威的Web技术文档
W3Schools - 适合初学者的教程网站
CSS-Tricks - 高质量的CSS技巧和教程
CodePen - 在线代码编辑和分享平台

相关文章
|
14天前
|
数据采集 存储 人工智能
基于 EventBridge 构筑 AI 领域高效数据集成方案
本文深入探讨了AI时代数据处理的变革与挑战,分析了事件驱动架构(EventBridge)在AI数据处理中的技术优势,并结合实践案例,展示了其在多源数据接入、向量数据库优化、智能数据转换等方面的应用价值。
237 29
|
2月前
|
运维 Prometheus 监控
API 网关 x OKG:游戏连接治理的「最后一公里」
本文介绍了 API 网关与 OpenKruiseGame(OKG)结合,在云原生游戏场景中实现连接治理“最后一公里”的解决方案。针对游戏服务的有状态特性,该方案通过精细化流量管理和无感变更能力,保障玩家会话连续性,提升运维效率,助力游戏服务实现优雅下线、配置动态更新等功能,同时提供零改造接入和全栈可观测性,显著优化游戏体验与开发运维流程。
205 0
|
21天前
|
人机交互 API 开发工具
基于通义多模态大模型的实时音视频交互
Qwen-Omni是通义千问系列的全新多模态大模型,支持文本、图像、音频和视频的输入,并输出文本和音频。Omni-Realtime服务针对实时交互场景优化,提供低延迟的人机交互体验。
270 23
|
10天前
|
监控 Linux iOS开发
PyCharm启动项目和调试项目
本文介绍了在 PyCharm 中启动和调试 Python 项目的详细步骤,涵盖单文件运行、配置管理、命令行工具使用、断点调试、变量监控、远程调试及常见问题解决方案,帮助开发者高效利用 PyCharm 的调试功能提升开发效率。
173 4
|
存储 人工智能 前端开发
全球首个搭载 Kimi-K2 的 Serverless 架构 VibeCoding解决方案重磅来袭!
本文介绍了基于阿里云 Function AI 和 Serverless 架构的 AI 编程解决方案 VibeCoding,展示其如何通过 AI 快速开发并上线小游戏及平台。方案支持普通与专家两种模式,用户可选择不同模型与数据库配置,具备良好的扩展性与交互体验,适合开发者与企业快速实现创意落地。
|
16天前
|
数据采集 数据可视化 搜索推荐
数据可视化真能影响市场决策吗?——聊聊那些被“图”改变的选择
数据可视化真能影响市场决策吗?——聊聊那些被“图”改变的选择
49 0
|
26天前
|
人工智能 自然语言处理 物联网
 团队效率翻倍秘诀:SOP自动生效的智能方法与SOP标准化工具
SOP工具历经四代技术演进,从纸质文档发展到融合知识图谱与自适应引擎的智能系统。在数字化转型背景下,智能SOP具备情境感知、增强现实指引、自优化流程与联邦合规检查等新能力。系统功能涵盖智能流程构建、动态执行控制与持续优化分析,支持NLP解析、多模态交互与实时合规检查。实施采用四阶段框架,应对跨部门标准不统一、遵循率低等挑战。未来将融合LLM、神经符号系统、量子优化等前沿技术,推动SOP向自我演进与人机协同方向发展。
162 0