HTML基础

示例：2. 常用标签文本标签：标题：到段落：强调：（加粗）、（斜体）换行：水平线：链接：图片：列表：无序列表： +有序列表： +表格：、（行）、（表头）、（单元格）表单：、（文本、密码、按钮等）、、常用属性：、、、示例：3. 语义化标签语义化标签让 HTML 更具可读性和 SEO 友好性。常用语义化标签：：页眉：导航栏：主要内容：区块：独立内容：侧边栏：页脚示例：4. 常用属性全局属性：：

m0_51580562

14411人浏览 · 2025-01-23 14:02:22

m0_51580562 · 2025-01-23 14:02:22 发布

1. HTML 基础结构

文档类型声明：<!DOCTYPE html>
HTML 标签：<html>、<head>、<body>
字符编码：<meta charset="UTF-8">
标题：<title>

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>
<body>
    <!-- 内容 -->
</body>
</html>

2. 常用标签

文本标签：
- 标题：<h1> 到 <h6>
- 段落：<p>
- 强调：<strong>（加粗）、<em>（斜体）
- 换行：<br>
- 水平线：<hr>
链接：<a href="URL">链接文本</a>
图片：<img src="图片路径" alt="描述">
列表：
- 无序列表：<ul> + <li>
- 有序列表：<ol> + <li>
表格：
- <table>、<tr>（行）、<th>（表头）、<td>（单元格）
表单：
- <form>、<input>（文本、密码、按钮等）、<textarea>、<button>
- 常用属性：type、name、placeholder、value

示例：

<h1>标题</h1>
<p>这是一个段落。</p>
<a href="https://example.com">访问示例网站</a>
<img src="image.jpg" alt="示例图片">
<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>
<form>
    <input type="text" placeholder="输入用户名">
    <button type="submit">提交</button>
</form>

3. 语义化标签

语义化标签让 HTML 更具可读性和 SEO 友好性。
常用语义化标签：
- <header>：页眉
- <nav>：导航栏
- <main>：主要内容
- <section>：区块
- <article>：独立内容
- <aside>：侧边栏
- <footer>：页脚

示例：

<header>
    <h1>网站标题</h1>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>
<footer>
    <p>版权所有 &copy; 2023</p>
</footer>

4. 常用属性

全局属性：
- id：唯一标识
- class：类名（用于 CSS 和 JavaScript）
- style：内联样式
- title：提示文本
表单相关属性：
- required：必填项
- disabled：禁用
- readonly：只读
链接和图片属性：
- target="_blank"：在新标签页打开链接
- alt：图片无法显示时的替代文本

5. HTML5 新增特性

多媒体：
- <audio>：音频
- <video>：视频
画布：<canvas>（用于绘制图形）
本地存储：
- localStorage 和 sessionStorage
表单增强：
- 新增输入类型：email、date、number、range 等
- 新增属性：placeholder、autofocus、pattern（正则验证）

6. 调试工具

使用浏览器开发者工具（F12）查看和调试 HTML 结构。

7.示例

以下是一个简单的 个人简介页面 示例，使用了 HTML 和 CSS。你可以根据需要进一步扩展和美化。

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>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #4CAF50;
        }
        .profile-img {
            display: block;
            margin: 0 auto;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }
        .section {
            margin-bottom: 20px;
        }
        .section h2 {
            color: #4CAF50;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 5px;
        }
        .section ul {
            list-style-type: none;
            padding: 0;
        }
        .section ul li {
            margin-bottom: 10px;
        }
        .contact-info {
            text-align: center;
            margin-top: 20px;
        }
        .contact-info a {
            color: #4CAF50;
            text-decoration: none;
        }
        .contact-info a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头像 -->
        <img src="https://via.placeholder.com/150" alt="个人头像" class="profile-img">

        <!-- 标题 -->
        <h1>张三的个人简介</h1>

        <!-- 基本信息 -->
        <div class="section">
            <h2>基本信息</h2>
            <ul>
                <li><strong>姓名：</strong>张三</li>
                <li><strong>年龄：</strong>25</li>
                <li><strong>职业：</strong>前端开发工程师</li>
                <li><strong>所在地：</strong>北京</li>
            </ul>
        </div>

        <!-- 教育背景 -->
        <div class="section">
            <h2>教育背景</h2>
            <ul>
                <li><strong>学校：</strong>北京大学</li>
                <li><strong>专业：</strong>计算机科学与技术</li>
                <li><strong>学历：</strong>本科</li>
            </ul>
        </div>

        <!-- 技能 -->
        <div class="section">
            <h2>技能</h2>
            <ul>
                <li>HTML、CSS、JavaScript</li>
                <li>React、Vue.js</li>
                <li>Node.js、Express</li>
                <li>Git 版本控制</li>
            </ul>
        </div>

        <!-- 联系方式 -->
        <div class="contact-info">
            <h2>联系方式</h2>
            <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
            <p>GitHub：<a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></p>
        </div>
    </div>
</body>
</html>

页面说明

头像：使用 img 标签显示头像，默认使用占位图（https://via.placeholder.com/150），可以替换为自己的图片链接。
基本信息：包括姓名、年龄、职业和所在地。
教育背景：列出学校、专业和学历。
技能：展示个人技能，如 HTML、CSS、JavaScript 等。
联系方式：提供邮箱和 GitHub 链接。

CSS 说明

布局：使用 container 类居中内容，设置最大宽度为 800px。
样式：使用简单的颜色和阴影效果，使页面看起来更美观。
响应式：页面在小屏幕上也能良好显示。

以下是一个简单的 个人博客页面 示例，包含头部、导航栏、文章列表、侧边栏和底部。HTML 和 CSS 分开编写，适合学习和扩展。

HTML 文件 (`index.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>
    <!-- <link rel="stylesheet" href="styles.css"> 引入外部 CSS 文件 -->
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

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

        /* 头部 */
        header {
            background-color: #4CAF50;
            color: white;
            padding: 40px 0;
            text-align: center;
        }

        header h1 {
            margin: 0;
            font-size: 2.5em;
        }

        header p {
            margin: 10px 0 0;
            font-size: 1.2em;
        }

        /* 导航栏 */
        nav {
            background-color: #333;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            display: block;
        }

        nav ul li a:hover {
            background-color: #4CAF50;
        }

        /* 主要内容 */
        main {
            display: flex;
            margin-top: 20px;
        }

        .articles {
            flex: 3;
            margin-right: 20px;
        }

        .articles article {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .articles h2 {
            margin-top: 0;
            color: #4CAF50;
        }

        .articles .meta {
            color: #777;
            font-size: 0.9em;
        }

        .articles .read-more {
            display: inline-block;
            margin-top: 10px;
            color: #4CAF50;
            text-decoration: none;
        }

        .articles .read-more:hover {
            text-decoration: underline;
        }

        /* 侧边栏 */
        .sidebar {
            flex: 1;
        }

        .widget {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .widget h3 {
            margin-top: 0;
            color: #4CAF50;
        }

        .widget ul {
            list-style-type: none;
            padding: 0;
        }

        .widget ul li {
            margin-bottom: 10px;
        }

        .widget ul li a {
            color: #333;
            text-decoration: none;
        }

        .widget ul li a:hover {
            color: #4CAF50;
        }

        /* 底部 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 20px;
        }

        footer p {
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <p>记录技术与生活</p>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav>
        <div class="container">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container">
        <!-- 文章列表 -->
        <section class="articles">
            <article>
                <h2>文章标题 1</h2>
                <p class="meta">发布时间：2023-10-01 | 作者：张三</p>
                <p>这是文章摘要。这里是文章的内容简介，吸引读者点击阅读全文。</p>
                <a href="#" class="read-more">阅读全文</a>
            </article>
            <article>
                <h2>文章标题 2</h2>
                <p class="meta">发布时间：2023-09-25 | 作者：张三</p>
                <p>这是文章摘要。这里是文章的内容简介，吸引读者点击阅读全文。</p>
                <a href="#" class="read-more">阅读全文</a>
            </article>
            <article>
                <h2>文章标题 2</h2>
                <p class="meta">发布时间：2023-09-25 | 作者：张三</p>
                <p>这是文章摘要。这里是文章的内容简介，吸引读者点击阅读全文。</p>
                <a href="#" class="read-more">阅读全文</a>
            </article>
            <article>
                <h2>文章标题 2</h2>
                <p class="meta">发布时间：2023-09-25 | 作者：张三</p>
                <p>这是文章摘要。这里是文章的内容简介，吸引读者点击阅读全文。</p>
                <a href="#" class="read-more">阅读全文</a>
            </article>
            <article>
                <h2>文章标题 2</h2>
                <p class="meta">发布时间：2023-09-25 | 作者：张三</p>
                <p>这是文章摘要。这里是文章的内容简介，吸引读者点击阅读全文。</p>
                <a href="#" class="read-more">阅读全文</a>
            </article>
        </section>

        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="widget">
                <h3>关于我</h3>
                <p>我是张三，一名前端开发工程师，热爱技术与分享。</p>
            </div>
            <div class="widget">
                <h3>热门文章</h3>
                <ul>
                    <li><a href="#">文章标题 1</a></li>
                    <li><a href="#">文章标题 2</a></li>
                    <li><a href="#">文章标题 3</a></li>
                </ul>
            </div>
        </aside>
    </main>

    <!-- 底部 -->
    <footer>
        <div class="container">
            <p>&copy; 2023 我的博客. 保留所有权利.</p>
        </div>
    </footer>
</body>

</html>

页面说明

头部：包含博客标题和简介。
导航栏：提供首页、关于、文章、联系等链接。
文章列表：展示博客文章，包括标题、发布时间、摘要和阅读全文链接。
侧边栏：包含“关于我”和“热门文章”两个小部件。
底部：显示版权信息。

扩展建议

添加更多文章和分页功能。
使用 JavaScript 实现动态加载文章。
引入图片和图标，美化页面。
使用 CSS 框架（如 Bootstrap）快速构建响应式布局。

学习建议

快速实践：通过构建简单的网页（如个人简介页面）来练习。
结合 CSS 和 JavaScript：HTML 是基础，结合 CSS 和 JavaScript 才能实现完整功能。
参考文档：遇到问题时查阅 MDN Web Docs。

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

《基于 FastAPI + LangGraph + LLM 大语言模型的通用 Agent 多智能体系统架构设计与开发实战、产业应用》

"""执行智能体任务，更新状态"""prompt = f"作为self . llm = llm async def execute(self , state : AgentState) - > AgentState : """执行智能体任务，更新状态""" prompt = f"作为 {self . role . value } ，当前状态: {