当前位置： 首页 > news >正文

01HTML预备知识

news 2026/6/8 8:20:10

✨博客主页： https://blog.csdn.net/m0_63815035?type=blog

💗《博客内容》：大数据、Java、测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识
📢博客专栏：https://blog.csdn.net/m0_63815035/category_11954877.html
📢欢迎点赞 👍 收藏 ⭐留言 📝
📢本文为学习笔记资料，如有侵权，请联系我删除，疏漏之处还请指正🙉
📢大厦之成，非一木之材也；大海之阔，非一流之归也✨


目录

    • 一、Web 工作原理（快速回顾）
    • 二、HTML 文档基础
      • 1. 文档类型声明（DOCTYPE）
      • 2. 基本结构模板
      • 3. `<head>` 中常用标签
    • 三、HTML 元素分类与显示模式
      • 1. 块级元素（Block）
      • 2. 行内元素（Inline）
      • 3. 行内块元素（Inline-block）
    • 四、常用标签详解（补充）
      • 1. 文本格式化（补充）
      • 2. 链接与锚点
      • 3. 多媒体元素
        • 图片 `<img>`
        • 视频 `<video>`
        • 音频 `<audio>`
        • 嵌入外部内容 `<iframe>`
      • 4. HTML5 语义化标签（布局利器）
      • 5. 列表进阶
      • 6. 表格进阶
      • 7. 表单增强（HTML5）
        • 新的 input 类型
        • 常用新属性
        • 表单分组
      • 8. 其他实用标签
    • 五、字符实体（转义字符）
    • 六、全局属性（所有标签通用）
    • 七、路径写法
    • 八、注释与代码规范
    • 九、SEO 基础（补充）
    • 十、浏览器兼容性提示
    • 十一、扩展：HTML 与 CSS、JS 的关系
    • 十二、案例作业：完善人物简历

一、Web 工作原理（快速回顾）

  • HTTP（超文本传输协议）是浏览器与服务器之间的通信语言。
  • 流程：输入 URL → DNS 解析 → 发送 HTTP 请求 → 服务器返回 HTML/CSS/JS → 浏览器渲染。
  • URL：统一资源定位符，例如https://example.com/page.html。

二、HTML 文档基础

1. 文档类型声明（DOCTYPE）

  • 作用：告诉浏览器使用哪种 HTML 标准解析页面。
  • 推荐写法（HTML5）：<!DOCTYPE html>
  • 必须放在文档第一行，否则触发“怪异模式”，导致布局错误。

2. 基本结构模板

<!DOCTYPEhtml><htmllang="zh-CN"><!-- lang 属性有助于搜索引擎和读屏软件 --><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>文档标题</title><metaname="description"content="页面描述，用于SEO"><metaname="keywords"content="关键词1,关键词2"><linkrel="stylesheet"href="style.css"><scriptsrc="script.js"defer></script></head><body><!-- 页面内容 --></body></html>

3.<head>中常用标签

标签作用
<meta charset="UTF-8">声明字符编码（推荐 UTF-8）
<meta name="viewport">控制移动端适配
<meta http-equiv="X-UA-Compatible" content="IE=edge">强制 IE 使用最新渲染引擎
<title>浏览器标签页标题
<link>引入外部 CSS 或 favicon
<style>内部 CSS
<script>引入或编写 JS

三、HTML 元素分类与显示模式

1. 块级元素（Block）

  • 独占一行，默认宽度 100%，可设宽高、内外边距。
  • 常见：<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、<form>、<header>、<footer>、<section>、<article>、<nav>、<aside>。

2. 行内元素（Inline）

  • 不换行，宽高由内容决定，不可设上下边距。
  • 常见：<span>、<a>、<strong>、<em>、<img>（虽为替换元素，但默认为行内）、<br>、<i>、<b>。

3. 行内块元素（Inline-block）

  • 不换行，但可设宽高、内外边距。
  • 常见：<img>、<input>、<button>、<select>、<textarea>。

💡 可通过 CSS 的display属性改变元素类型，如display: inline-block。

四、常用标签详解（补充）

1. 文本格式化（补充）

标签语义
<strong>重要文本（加粗）
<em>强调（斜体）
<mark>高亮标记
<small>小号字（如版权声明）
<del>删除文本
<ins>插入文本
<sub>/<sup>下标 / 上标

2. 链接与锚点

<!-- 普通链接 --><ahref="https://example.com"target="_blank"rel="noopener">新标签页打开</a><!-- 锚点跳转 --><ahref="#section1">跳转到 section1</a><h2id="section1">章节1</h2><!-- 返回顶部 --><ahref="#">返回顶部</a><!-- 发送邮件 --><ahref="mailto:someone@example.com">发送邮件</a><!-- 拨打电话（移动端） --><ahref="tel:+123456789">拨打电话</a>

3. 多媒体元素

图片<img>
<imgsrc="photo.jpg"alt="描述文字"width="300"height="200"loading="lazy">
  • alt必须写，提升可访问性。
  • loading="lazy"懒加载，优化性能。
视频<video>
<videocontrolswidth="600"poster="preview.jpg"><sourcesrc="movie.mp4"type="video/mp4"><sourcesrc="movie.ogg"type="video/ogg">您的浏览器不支持 video 标签。</video>
音频<audio>
<audiocontrols><sourcesrc="audio.mp3"type="audio/mpeg">您的浏览器不支持 audio 元素。</audio>
嵌入外部内容<iframe>
<iframesrc="https://www.youtube.com/embed/xxx"width="560"height="315"allowfullscreen></iframe>

4. HTML5 语义化标签（布局利器）

标签含义
<header>页眉或区域头部
<nav>导航链接
<main>页面主内容（一个页面唯一）
<article>独立文章
<section>文档中的一个区块
<aside>侧边栏或附属信息
<footer>页脚

示例：

<body><header>网站标题</header><nav>导航菜单</nav><main><article><h1>文章标题</h1><p>内容...</p></article><aside>相关链接</aside></main><footer>版权信息</footer></body>

5. 列表进阶

  • 定义列表<dl>+<dt>（术语）+<dd>（描述）
<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd></dl>

6. 表格进阶

  • 合并单元格：colspan（跨列）、rowspan（跨行）
<tableborder="1"><tr><tdcolspan="2">合并两列</td></tr><tr><tdrowspan="2">合并两行</td><td>单元格</td></tr><tr><td>另一行</td></tr></table>
  • 表格结构：<thead>、<tbody>、<tfoot>（提升语义和滚动时头部固定）

7. 表单增强（HTML5）

新的 input 类型
类型示例说明
email<input type="email">内置邮箱格式验证
number<input type="number" min="1" max="10">数字输入，带增减按钮
tel<input type="tel">电话号码（不验证格式）
url<input type="url">网址格式验证
date<input type="date">日期选择器
time<input type="time">时间选择器
color<input type="color">颜色选择器
range<input type="range" min="0" max="100">滑块
search<input type="search">搜索框（带清除按钮）
常用新属性
属性说明
placeholder="提示文字"输入框内灰色提示
required必填字段
autofocus页面加载时自动聚焦
autocomplete="on/off"是否启用自动完成
multiple允许多选（如文件上传）
pattern="正则"自定义输入格式验证
表单分组
<fieldset><legend>个人信息</legend><label>姓名：<inputtype="text"name="name"></label><label>年龄：<inputtype="number"name="age"></label></fieldset>

8. 其他实用标签

标签作用
<progress value="70" max="100">70%</progress>进度条
<meter value="0.6">60%</meter>度量条（如磁盘使用率）
<details><summary>更多信息</summary>隐藏内容</details>可折叠面板
<dialog>对话框（需配合 JS 或open属性）

五、字符实体（转义字符）

显示实体名数字形式
空格&nbsp;&#160;
<&lt;&#60;
>&gt;&#62;
&&amp;&#38;
©&copy;&#169;
®&reg;&#174;
“ ”&ldquo;&rdquo;&#8220;&#8221;

六、全局属性（所有标签通用）

属性说明
id唯一标识符（用于 CSS/JS / 锚点）
class类名（用于 CSS 或 JS 批量控制）
style内联样式
title鼠标悬停时显示的提示文本
data-*自定义数据属性，如data-user-id="123"
hidden隐藏元素
tabindex控制 Tab 键切换顺序
lang定义元素语言

七、路径写法

  • 相对路径（推荐用于同网站）
    • image/photo.jpg– 当前目录下的 image 文件夹
    • ../photo.jpg– 上一级目录
  • 绝对路径
    • https://example.com/photo.jpg– 完整 URL
    • /photo.jpg– 从网站根目录开始

八、注释与代码规范

  • 注释：<!-- 这是注释，不会显示在页面中 -->
  • 注释的作用：解释代码、标记待办、临时禁用代码。
  • 规范建议：
    • 标签名、属性名一律小写。
    • 属性值始终加引号（双引号优先）。
    • 自闭合标签（如<img>、<br>、<hr>）在 HTML5 中可不写斜杠，但写/更安全（兼容 XHTML）。
    • 合理缩进，提高可读性。

九、SEO 基础（补充）

除了<title>、<meta name="description">、<meta name="keywords">外：

  • 使用语义化标签（<article>、<section>等）帮助搜索引擎理解结构。
  • 图片添加alt属性。
  • 为链接写有意义的描述（不要用“点击这里”）。
  • 保证页面有清晰的h1~h6层级。
  • 使用canonical标签避免重复内容：<link rel="canonical" href="主链接">。

十、浏览器兼容性提示

  • 使用 HTML5 新标签时，对于老旧 IE 浏览器可引入html5shiv.js使其支持。
  • 表单新类型（如date）在不同浏览器中显示样式不同，可使用 polyfill 或统一 UI 组件库。
  • 使用 CSS 前缀或自动化工具（如 Autoprefixer）处理兼容性。

十一、扩展：HTML 与 CSS、JS 的关系

  • HTML：结构（骨架）
  • CSS：表现（外观）
  • JavaScript：行为（交互）

最佳实践：结构、样式、行为分离，尽量不使用内联样式和内联事件。

十二、案例作业：完善人物简历

在原有吴彦祖简历基础上，要求：

  1. 将导航区<div id="navigation">改为<nav>标签，内部列表改为语义化。
  2. 为主体内容添加<main>标签，各部分用<section>包裹。
  3. 在获奖记录部分制作一个完整表格（至少包含年份、奖项名称、结果）。
  4. 为联系表单增加email类型的输入框，并添加required属性。
  5. 在页面底部添加一个<details>标签，展示参考资料来源。
今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文

http://www.gsyq.cn/news/1485121.html

相关文章：

  • 高要母婴除甲醛CMA甲醛检测治理公司深度测评：绿呼吸环保稳居榜首 - 一修哥咨询
  • 从一次线上OOM排查实战出发：手把手教你用Visual VM分析堆dump和线程死锁
  • Jaspersoft Studio报表模板设计避坑大全：从‘元素超出框架’到‘条码显示明文’的10个常见错误修复
  • 前端项目：SpeakMentor AI 场景化英语口语陪练助手开发复盘
  • 深入涂鸦Wi-Fi模组协议栈：手把手解析MCU与模组间的数据帧（含心跳、配网、OTA全流程）
  • 保姆级教程：在Windows 10上从零部署PaddleOCR C++推理库（含OpenCV配置与常见编译报错解决）
  • 保姆级避坑指南：SAP SPRO中给公司代码分配采购组织，新手最容易搞混的几点
  • Nsight System + Nsight Compute 组合拳：从宏观Timeline到微观Counter的CUDA应用全链路性能分析实战
  • 2026 安徽淮北市｜本地人必选旧房改造・墙面刷新・局部装修 3 家正规企业精选 + 避坑攻略 - 本地便民网
  • 多维聚合实战：从SQL GROUP BY到OLAP立方体的工程跃迁
  • 别再乱调学习率了！用PyTorch的CosineAnnealingLR和WarmRestarts，让你的模型训练又快又稳（附完整代码）
  • Android启动安全实战：手把手教你用avbtool给dtbo.img镜像签名（附源码分析）
  • Mythos能力解析：跨步状态锚定与长程推理一致性技术
  • 告别环境配置噩梦：用Docker镜像5分钟搞定OpenFPGA开发环境（Ubuntu 20.04实测）
  • 淮北矿业股息率怎么这么高，未来预期产能能翻倍吗？
  • 创维E900V21C救砖记：从TTL跑码异常到飞线修复，手把手教你排查硬件短路
  • tidevice不只是安装启动：这5个隐藏功能让iOS测试效率翻倍
  • CPU核心没跑满？7大真实瓶颈与实操优化指南
  • IT项目管理的难点在哪里？
  • 告别环境冲突：用PyCharm 2023.1创建项目时，如何正确选择并配置Python 3.10解释器？
  • 别再搞混了！Android布局中margin和padding的实战避坑指南（附ConstraintLayout案例）
  • 保姆级教程：新版Dubbo-Admin在Windows 10/11上的完整安装与配置（含Maven打包避坑指南）
  • 用两个HC-05蓝牙模块搭建无线串口，给你的Arduino/STM32项目做个无线调试器
  • 别再对着空白画布发愁了！用Altium Designer 18快速搞定STM32F103C8T6最小系统原理图（附完整库文件）
  • 用ESP32和ADC做个智能花盆：土壤湿度监测与自动浇水系统（Arduino框架）
  • TMS320F280049 GPIO输入消抖实战：采样窗口配置与按键防抖应用
  • 告别故障码盲猜：手把手教你用OBD诊断仪读取动力总成冻结帧数据（ISO15031 $02服务实战）
  • Action100M：视频动作识别的大规模数据集与开放词汇技术
  • Parallels Desktop 17 虚拟机网络配置：手把手教你给CentOS 7设置固定IP，告别每次启动IP都变
  • 多维聚合实战：从pandas groupby到银行级业务建模