参考资料

  1. HTML 常用颜色
  2. HTML 音频(Audio)
  3. HTML 中最常用的
  4. Excel转HTML表格有哪些
  5. HTML 多媒体
  6. html元信息标签详细说明以及案例
  7. HTML 文本对齐方式
  8. HTML 图像

HTML 元素语法

HTML 元素语法：

  1. 基本结构：

    • 开始标签：<tagname>

    • 内容：元素内容

    • 结束标签：</tagname>

    • 示例：<p>This is a paragraph.</p>

  2. 空元素：

    • 自闭合标签：<tagname /> 或 <tagname>

    • 示例：<br>, <img src="image.jpg">

  3. 属性：

    • 语法：<tagname attribute="value">

    • 示例：<a href="https://example.com">Link</a>

  4. 嵌套规则：

    • 元素可以包含其他元素

    • 必须正确嵌套：<p><strong>Text</strong></p>

常用HTML标签：

  1. 结构标签：

    • <html>: 文档根元素

    • <head>: 文档头部

    • <body>: 文档主体

  2. 文本标签：

    • <h1>-<h6>: 标题

    • <p>: 段落

    • <span>: 行内容器

  3. 链接和媒体：

    • <a>: 超链接

    • <img>: 图像

    • <video>: 视频

  4. 列表：

    • <ul>: 无序列表

    • <ol>: 有序列表

    • <li>: 列表项

  5. 表单元素：

    • <form>: 表单容器

    • <input>: 输入控件

    • <button>: 按钮

CSS扩展：

  1. 样式属性：

    • style 属性：<p style="color:red;">

    • 多个属性用分号分隔

  2. 类选择器：

    • class 属性：<div class="container">

    • CSS 中对应：.container { }

  3. ID 选择器：

    • id 属性：<div id="header">

    • CSS 中对应：#header { }

  4. 伪类：

    • 动态状态：a:hover { }

    • 结构伪类：li:nth-child(2) { }

  5. 盒模型属性：

    • width, height

    • padding, margin

    • border

  6. 布局属性：

    • display: block, inline, flex, grid

    • position: static, relative, absolute

    • float: left, right

  7. 响应式设计：

    • 媒体查询：@media (max-width: 600px) { }

    • 视口单位：vw, vh

  8. 动画和过渡：

    • transition: 属性变化动画

    • @keyframes: 自定义动画

TAG：元素标签示例文档语法结构内容嵌套容器序列表