HTML5 全面知识点总结

一、HTML 底子概念

• HTML：超文本标记语言，用于创建网页和 Web 应用的布局。
  
• 超文本：可以包含文字、图片、音频、视频、链接等多种媒体。
  
• 标记语言：通过标签标记网页的各个部分。
  

---

二、HTML5 的新特性（区别于 HTML4）

• 新的布局标签：提升语义化
  
  
  
  • <header>：页眉
    
  • <nav>：导航
    
  • <main>：重要内容
    
  • <article>：文章
    
  • <section>：地区
    
  • <aside>：侧边栏
    
  • <footer>：页脚
    
  
  
• 新的表单控件范例：增强表单体验
  
  1. <input type="email" />
  2. <input type="url" />
  3. <input type="number" />
  4. <input type="range" />
  5. <input type="date" />
  6. <input type="color" />

  复制代码
• 新的表单属性：
  
  
  
  • required：必须填写
    
  • autofocus：页面加载时自动聚焦
    
  • placeholder：占位文本
    
  • pattern：正则验证
    
  • autocomplete：是否自动补全
    
  
  
• 多媒体标签：
  
  1. <audio controls>
  2.   <source src="sound.mp3" type="audio/mpeg">
  3. </audio>
  5. <video controls width="400">
  6.   <source src="movie.mp4" type="video/mp4">
  7. </video>

  复制代码
• 本地存储：
  
  
  
  • localStorage：永久存储（关闭浏览器也不会扫除）
    
  • sessionStorage：会话级存储（关闭浏览器扫除）
    
  
  
• Canvas 画布绘图：
  
  1. <canvas id="myCanvas" width="200" height="100"></canvas>

  复制代码
  1. const c = document.getElementById("myCanvas");
  2. const ctx = c.getContext("2d");
  3. ctx.fillStyle = "#FF0000";
  4. ctx.fillRect(0, 0, 150, 75);

  复制代码
• SVG 图形支持：
  
  1. <svg width="100" height="100">
  2.   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  3. </svg>

  复制代码

---

三、HTML 标签分类

1. 元信息标签

标签说明<meta>元数据（关键词、作者、编码）<title>页面标题<link>外部样式表<style>内部 CSS<script>JavaScript 脚本 2. 文本内容标签

标签说明<p>段落<h1>~<h6>标题<blockquote>引用<abbr>缩写<code>代码<mark>高亮<strong> / <em>加重语气 3. 编辑类标签

标签功能<b> / <i> / <u>粗体 / 斜体 / 下划线<sup> / <sub>上标 / 下标<del> / <ins>删除 / 插入

---

四、表单相关

常见控件

范例示例文本<input type="text">暗码<input type="password">单选<input type="radio" name="x">复选<input type="checkbox">文本域<textarea>下拉<select>提交<button type="submit">提交</button> 表单属性

• action：提交地址
  
• method：提交方式（GET/POST）
  
• enctype：编码范例（上传文件时用 multipart/form-data）
  

---

五、语义化标签的优势

• 提升 SEO 友好度
  
• 布局清晰、可读性强
  
• 更便于无停滞访问（如读屏软件）
  

---

六、布局方式简介

方式说明表格布局使用 <table> 实现（已过时）浮动布局float+clear定位布局position: absolute/fixedFlex布局弹性盒子，当代主流方式Grid布局网格布局，更适用于二维布局

---

七、HTML 与 JavaScript、CSS 的关系

• HTML 负责 布局
  
• CSS 负责 样式
  
• JavaScript 负责 活动与交互
  

三者共同组成 Web 前端三大焦点技术。

---

八、响应式设计底子

• 使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 控制移动端缩放
  
• 使用媒体查询（Media Query）
  
• 使用百分比、vw/vh 等相对单元更换 px
  
• 尽量使用弹性布局（Flex 或 Grid）
  

---

九、HTML5 API 简介（JavaScript）

API功能Geolocation获取地理位置Web Storage本地数据存储Drag and Drop拖拽功能WebSocket及时通信Web Worker多线程盘算File API文件读取上传

---

十、开发与调试工具推荐

• 浏览器开发者工具（F12）
  
• 在线编辑器如 CodePen、JSFiddle
  
• VS Code + Live Server 插件
  
• HTML 校验工具：W3C Validator
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告