HTML核心概念及代码示例的梳理

​一、HTML基础与文档结构​

  1. ​文档声明与根元素​

    xml 复制代码
    <!DOCTYPE html> <!-- 声明HTML5文档类型 -->
    <html lang="zh-CN"> <!-- 根元素,lang属性定义语言 -->
    </html>
    • <!DOCTYPE html> 强制浏览器使用标准模式渲染
  2. ​头部元数据​

    xml 复制代码
    <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 -->
    </head>
    • viewport 是移动端适配关键属性
  3. ​主体内容容器​

    xml 复制代码
    <body>
      <!-- 所有可见内容 -->
    </body>

​二、文本内容与格式化​

  1. ​标题与段落​

    xml 复制代码
    <h1>主标题</h1> <!-- 一个页面建议只有一个h1 -->
    <h2>二级标题</h2>
    <p>段落文本,自动带上下边距</p>
  2. ​文本修饰标签​

    xml 复制代码
    <strong>重要文本(加粗)</strong> <!-- 语义化强调 -->
    <em>强调文本(斜体)</em>
    <del>删除线文本</del>
    <u>下划线文本</u>
    H<sub>2</sub>O <!-- 下标 -->
    10<sup>2</sup> <!-- 上标 -->
  3. ​特殊符号​

    xml 复制代码
    &nbsp;   <!-- 空格 -->
    &lt;     <!-- < -->
    &gt;     <!-- > -->
    &copy;   <!-- © -->

​三、多媒体嵌入​

  1. ​图像​

    ini 复制代码
    <img src="image.jpg" alt="图片描述" loading="lazy"> 
    • alt 为无障碍访问必需属性,loading="lazy" 启用懒加载
  2. ​音频与视频​

    bash 复制代码
    <audio controls>
      <source src="audio.mp3" type="audio/mpeg">
    </audio>
    
    <video controls width="600" poster="preview.jpg">
      <source src="video.mp4" type="video/mp4">
    </video>
    • HTML5原生支持媒体播放,无需插件

​四、列表与表格​

  1. ​有序/无序列表​

    xml 复制代码
    <ul>
      <li>项目一</li>
      <li>项目二</li>
    </ul>
    
    <ol type="A" start="3"> <!-- 从C开始的大写字母列表 -->
      <li>第一项</li>
    </ol>
  2. ​表格结构​

    xml 复制代码
    <table border="1">
      <tr>
        <th>姓名</th> <!-- 表头 -->
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>25</td>
      </tr>
    </table>

​五、表单与用户输入​

  1. ​表单容器​

    ini 复制代码
    <form action="/submit" method="POST">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="user" required>
    </form>
  2. ​输入控件​

    xml 复制代码
    <input type="email" placeholder="邮箱"> <!-- 邮箱验证 -->
    <input type="date"> <!-- 日期选择器 -->
    <input type="range" min="0" max="100"> <!-- 滑块 -->
    <textarea rows="4"></textarea> <!-- 多行文本 -->
    <select>
      <option value="bj">北京</option>
    </select>
    • HTML5新增输入类型增强用户体验

​六、HTML5语义化布局​

css 复制代码
<header>网站头部</header>
<nav>导航栏</nav>
<main>
  <article>独立内容(如博客文章)</article>
  <aside>侧边栏</aside>
</main>
<section>内容区块</section>
<footer>页脚信息</footer>
  • ​优势​​:

    • 提升SEO友好性

    • 改善无障碍访问

    • 代码可读性更强


​七、超链接与资源​

  1. ​基础链接​

    ini 复制代码
    <a href="https://example.com" target="_blank">在新标签页打开</a>
  2. ​功能链接​

    xml 复制代码
    <a href="tel:13800138000">电话联系</a>
    <a href="mailto:contact@example.com">发送邮件</a>
    <a href="#section-id">跳转到章节</a> <!-- 锚点链接 -->

​八、元数据与脚本​

  1. ​CSS集成方式​

    xml 复制代码
    <!-- 内联样式 -->
    <p style="color:red;">红色文本</p>
    
    <!-- 内部样式表 -->
    <style> body { margin:0; } </style>
    
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
  2. ​JavaScript集成​

    xml 复制代码
    <!-- 内嵌脚本 -->
    <script> alert('页面加载!'); </script>
    
    <!-- 外部脚本 -->
    <script src="app.js" defer></script>
    • defer 属性确保脚本在DOM解析后执行

​九、注释与调试​

xml 复制代码
<!-- 这行注释不会显示在浏览器中 -->
<!-- 
  多行注释
  用于代码说明或临时禁用代码块
-->
  • 快捷键:VS Code中按 Ctrl+/ 快速注释

​十、现代开发实践​

  1. ​响应式图像​

    ini 复制代码
    <picture>
      <source media="(min-width:800px)" srcset="large.jpg">
      <img src="small.jpg" alt="响应式图片">
    </picture>
  2. ​语义化微数据​

    ini 复制代码
    <div itemscope itemtype="https://schema.org/Person">
      姓名:<span itemprop="name">张三</span>
    </div>
    • 帮助搜索引擎理解内容结构

​完整HTML5文档示例​​:

xml 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>现代HTML示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <a href="#home">首页</a>
      <a href="#news">新闻</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>文章标题</h2>
      <p>这是<mark>重点内容</mark></p>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2025 公司名称</p>
  </footer>
  
  <script src="app.js"></script>
</body>
</html>
相关推荐
倔强青铜三8 分钟前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹9 分钟前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三26 分钟前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘39 分钟前
Webpack 入门到实战 - 复习强化版
前端
晓131343 分钟前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三44 分钟前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z1 小时前
uniapp使用video实现沉浸式在线课程学习平台
前端
当牛作馬2 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw02 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter