投稿
  1. Blog of HowellHome
  2. python 进阶

HTML+CSS

LJH • • python 进阶 • 39 views

HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，用于创建和设计网页内容。它是网页的基本构建块，用于描述网页的结构和内容。HTML使用各种标签（tags）来定义文档中的文本、图像、链接、表单等元素。

HTML 基本结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

常用HTML标签：

以下是一些常用的 HTML 标签，以及它们的功能和用法：

1. 文档结构相关标签

  • <!DOCTYPE html>
    • 声明文档类型，告诉浏览器使用 HTML5 解析文档。
  • <html>
    • 文档根元素，包含所有其他 HTML 元素。
  • <head>
    • 包含文档的元数据（如标题、字符集、样式等）。
  • <title>
    • 定义文档的标题，显示在浏览器的标题栏或标签页上。
  • <body>
    • 文档的主体，包含页面的可见内容。

2. 文本内容相关标签

  • <h1> - <h6>
    • 标题标签，从 <h1>（最重要）到 <h6>（最不重要）。
  • <p>
    • 段落标签，用于包裹文本段落。
  • <br>
    • 换行标签，在文本中插入换行（没有结束标签）。
  • <hr>
    • 水平线标签，用于在内容中插入水平分隔线（没有结束标签）。
  • <strong>
    • 表示强调的内容，通常以粗体显示。
  • <em>
    • 表示强调的内容，通常用斜体显示。
  • <mark>
    • 高亮显示文本。
  • <small>
    • 表示小型文本。

3. 链接和图像相关标签

  • <a>
    • 超链接标签，用于链接到另一个页面或资源。示例：<a href="https://www.example.com">链接文本</a>。
  • <img>
    • 图像标签，用于插入图像。需要 src 和 alt 属性。例如：<img src="image.jpg" alt="描述">。
  • <figure> 和 <figcaption>
    • <figure> 用于封装图像及其说明，<figcaption> 用于描述图像。

4. 列表相关标签

  • <ul>
    • 无序列表，表示一个项目列表。
  • <ol>
    • 有序列表，表示按顺序排列的项目。
  • <li>
    • 列表项，定义在 <ul> 或 <ol> 中的每一个列表项。

5. 表单相关标签

  • <form>
    • 表单标签，用于提交用户输入的数据。
  • <input>
    • 输入框标签，用于接受用户输入，可通过 type 属性指定输入类型（如 text、password、email等）。
  • <label>
    • 标签，用于为表单元素提供描述。
  • <textarea>
    • 多行文本输入框。
  • <button>
    • 按钮标签，通常用于提交表单或执行某个操作。
  • <select> 和 <option>
    • <select> 表示下拉菜单，<option> 表示选项。

6. 布局和语义相关标签

  • <div>
    • 区块标签，将内容分组用于布局，不具备特殊语义。
  • <span>
    • 行内标签，用于将文本或其他内容分组，通常用于样式。
  • <header>
    • 页面或区块的头部分，通常包含标题或导航。
  • <nav>
    • 定义导航链接的部分。
  • <main>
    • 页面主要内容的部分（每个页面只能有一个）。
  • <section>
    • 定义文档中的节，具有相似主题的内容。
  • <article>
    • 独立的、完整的内容，适合于独立发布的信息。
  • <footer>
    • 页脚内容，通常包含版权信息或联系信息。

7. 多媒体相关标签

  • <audio>
    • 音频标签，用于嵌入音频内容。
  • <video>
    • 视频标签，用于嵌入视频内容。
  • <source>
    • 用于 <audio> 和 <video> 内，指定媒体文件的链接。

8. 脚本和链接

  • <script>
    • 用于嵌入或链接外部 JavaScript 脚本。
  • <link>
    • 用于链接外部资源，如 CSS 样式表。
  • <style>
    • 内联 CSS 样式的定义。

Demo 演示（直接浏览器打开此html）

<!-- 1. 文档结构相关标签
<!DOCTYPE html>

声明文档类型，告诉浏览器使用 HTML5 解析文档。
<html>

文档根元素，包含所有其他 HTML 元素。
<head>

包含文档的元数据（如标题、字符集、样式等）。
<title>

定义文档的标题，显示在浏览器的标题栏或标签页上。
<body>

文档的主体，包含页面的可见内容。 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <!-- 2. 文本内容相关标签 -->
    <h1>文本内容相关标签</h1>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
        <p>段落标签，用于包裹文本段落。</p>
        <br>换行标签，在文本中插入换行（没有结束标签）。
        <hr>水平线标签，用于在内容中插入水平分隔线（没有结束标签）。
        <strong>表示强调的内容，通常以粗体显示。</strong>
        <em>表示强调的内容，通常用斜体显示。</em>
        <mark>高亮显示文本。</mark>
        <small>表示小型文本。</small>


<!-- 3. 链接和图像相关标签 -->
     <h1>链接和图像相关标签</h1>
        <!-- 超链接标签，用于链接到另一个页面或资源。 -->
        <a href="https://www.example.com">链接文本</a>

        <!-- 图像标签，用于插入图像。需要 src 和 alt 属性。 -->
        <img src="image.png" alt="描述">。

        <!-- <figure> 用于封装图像及其说明，<figcaption> 用于描述图像。常见用法如下： -->
        <figure>
            <img src="image.jpg" alt="描述性文字" />
            <figcaption>这是一张有趣的图像。</figcaption>
        </figure>

<!-- 4. 列表相关标签 -->
    <h1>列表相关标签</h1>
        <h2>ul/ol列表项展示</h2>
        <!-- 无序列表，表示一个项目列表。 -->
        <ul>
            <li>列表项，定义在 “ul” 中的每一个列表项。</li>
            <li>列表项，定义在 “ul” 中的每一个列表项。</li>
            <li>列表项，定义在 “ul 中的每一个列表项。</li>
        </ul>

        <!-- 有序列表，表示按顺序排列的项目。 -->
        <ol>
            <li>列表项，定义在 “ol” 中的每一个列表项。</li>
            <li>列表项，定义在 “ol” 中的每一个列表项。</li>
            <li>列表项，定义在 “ol” 中的每一个列表项。</li>
        </ol>

        <!-- 嵌套使用 -->
        <h2>购物清单 demo</h2>
        <ul>
            <li>水果
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                </ul>
            </li>
            <li>面包</li>
            <li>饮料
                <ol>
                    <li>水</li>
                    <li>果汁</li>
                </ol>
            </li>
        </ul>

 <!-- 5. 表单相关标签 -->
    <h1>表单相关标签</h1>
    <!-- <form>
    表单标签，用于提交用户输入的数据。
    <input>
    输入框标签，用于接受用户输入，可通过 type 属性指定输入类型（如 text、password、email等）。
    <label>
    标签，用于为表单元素提供描述。
    <textarea>
    多行文本输入框。
    <button>
    按钮标签，通常用于提交表单或执行某个操作。
    <select> 和 <option>
    <select> 表示下拉菜单，<option> 表示选项。 -->

        <!-- 展示一个表单 demo -->
        <h2>用户注册 表单 demo</h2>

        <form action="/submit" method="POST">
            <!-- 姓名输入 -->
            <label for="fullname">姓名：</label>
            <input type="text" id="fullname" name="fullname" required>
            <br><br>
        
            <!-- 密码输入 -->
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
            <br><br>
        
            <!-- 电子邮件输入 -->
            <label for="email">电子邮件：</label>
            <input type="email" id="email" name="email" required>
            <br><br>
        
            <!-- 性别单选 -->
            <label>性别：</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
            <br><br>
        
            <!-- 兴趣复选框 -->
            <label>兴趣：</label>
            <input type="checkbox" id="sports" name="interests" value="sports">
            <label for="sports">体育</label>
            <input type="checkbox" id="music" name="interests" value="music">
            <label for="music">音乐</label>
            <input type="checkbox" id="travel" name="interests" value="travel">
            <label for="travel">旅行</label>
            <br><br>
        
            <!-- 多行文本输入 -->
            <label for="bio">个人简介：</label>
            <textarea id="bio" name="bio" rows="4" cols="50" placeholder="简要介绍一下自己"></textarea>
            <br><br>
        
            <!-- 下拉选择框 -->
            <label for="country">国家：</label>
            <select id="country" name="country">
                <option value="">-- 请选择国家 --</option>
                <option value="china">中国</option>
                <option value="usa">美国</option>
                <option value="uk">英国</option>
                <option value="japan">日本</option>
                <option value="germany">德国</option>
            </select>
            <br><br>
        
            <!-- 提交按钮 -->
            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </form>

        <!-- 下面是一个简单的示例，展示了不同输入类型的使用： -->

        
        <h2>表单 input type 不同输入类型示例表单 demo</h2>
        
        <form action="#" method="post">
            <label for="text">文本输入：</label>
            <input type="text" id="text" name="text" placeholder="输入任意文本">
            <br><br>
            
            <label for="password">密码输入：</label>
            <input type="password" id="password" name="password" placeholder="输入密码">
            <br><br>
            
            <label for="email">电子邮件输入：</label>
            <input type="email" id="email" name="email" placeholder="输入邮箱地址">
            <br><br>
            
            <label for="url">网址输入：</label>
            <input type="url" id="url" name="url" placeholder="输入网址">
            <br><br>
            
            <label for="tel">电话输入：</label>
            <input type="tel" id="tel" name="tel" placeholder="输入电话号码">
            <br><br>
            
            <label for="number">数字输入：</label>
            <input type="number" id="number" name="number" min="1" max="10" step="1">
            <br><br>
          
            <label for="range">范围输入：</label>
            <input type="range" id="range" name="range" min="1" max="100">
            <br><br>
          
            <label for="date">日期选择：</label>
            <input type="date" id="date" name="date">
            <br><br>
          
            <label for="file">文件上传：</label>
            <input type="file" id="file" name="file">
            <br><br>
          
            <label>兴趣：</label><br>
            <input type="checkbox" id="sports" name="interest" value="sports">
            <label for="sports">体育</label><br>
            <input type="checkbox" id="music" name="interest" value="music">
            <label for="music">音乐</label><br><br>
          
            <label>性别：</label><br>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label><br>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label><br><br>
          
            <label for="color">选择颜色：</label>
            <input type="color" id="color" name="color">
            <br><br>
        
            <button type="submit">提交</button>

<!-- 6. 布局和语义相关标签 -->
    <!-- <div>
    区块标签，将内容分组用于布局，不具备特殊语义。
    <span>
    行内标签，用于将文本或其他内容分组，通常用于样式。
    <header>
    页面或区块的头部分，通常包含标题或导航。
    <nav>
    定义导航链接的部分。
    <main>
    页面主要内容的部分（每个页面只能有一个）。
    <section>
    定义文档中的节，具有相似主题的内容。
    <article>
    独立的、完整的内容，适合于独立发布的信息。
    <footer>
    页脚内容，通常包含版权信息或联系信息。 -->
    <header>
        <h1>布局和语义demo：我的博客</h1>
        <nav>
            <a href="#about">关于我</a>
            <a href="#blog">博客文章</a>
            <a href="#contact">联系我</a>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>你好！我是一位热爱写作和分享知识的博客作者。<span style="color: blue;">欢迎访问我的博客！</span></p>
        </section>
    
        <section id="blog">
            <h2>博客文章</h2>
    
            <article>
                <h3>第一篇文章</h3>
                <p>这是我的第一篇博客文章，我将分享一些有趣的话题。</p>
                <footer>
                    <p>发布时间：2023年10月1日</p>
                    <p>作者：我</p>
                </footer>
            </article>
    
            <article>
                <h3>第二篇文章</h3>
                <p>在这篇文章中，我会讨论如何学习编程。在这个过程中，保持对知识的渴望非常重要。</p>
                <footer>
                    <p>发布时间：2023年10月5日</p>
                    <p>作者：我</p>
                </footer>
            </article>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2023 我的博客. 保留所有权利.</p>
    </footer>

<!-- 7. 多媒体相关标签 -->
    <!-- 
    <audio>
    音频标签，用于嵌入音频内容。
    <video>
    视频标签，用于嵌入视频内容。
    <source>
    用于 <audio> 和 <video> 内，指定媒体文件的链接。 
    -->
    <h1>音频与视频示例</h1>

    <!-- 音频标签 -->
    <h2>音频播放</h2>
    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
        <source src="audio-file.ogg" type="audio/ogg">
        您的浏览器不支持音频播放。
    </audio>
    
    <!-- 视频标签 -->
    <h2>视频播放</h2>
    <video controls width="640" height="360">
        <source src="video-file.mp4" type="video/mp4">
        <source src="video-file.webm" type="video/webm">
        您的浏览器不支持视频播放。
    </video>

<!-- 8. 脚本和链接 -->
    <!-- 
    <script>
    用于嵌入或链接外部 JavaScript 脚本。
    <link>
    用于链接外部资源，如 CSS 样式表。
    <style>
    内联 CSS 样式的定义。 
    -->

</body>
</html>

CSS

发布者：LJH，转发请注明出处：https://www.ljh.cool/42508.html

Like (0)
LJHLJH
0 0
Previous 2025年5月28日 上午12:55
Next 2024年11月8日 下午4:27

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注