(01).前端知识库之HTML篇

walking957
79 阅读5分钟

一、HTML基础与结构

  1. HTML的定义和基本结构 HTML（超文本标记语言）用于创建网页内容的结构和意义。基本结构包含：

    <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <!-- 内容 -->
  </body>
</html>

  2. HTML文档的标准组成部分

  • <!DOCTYPE>：声明文档类型
  • <html>：根元素
  • <head>：包含元数据（如字符集、标题、脚本等）
  • <body>：页面可见内容
  1. <!DOCTYPE> 的作用及HTML5意义
  • 作用：告知浏览器使用哪种HTML标准解析文档。
  • HTML5中简化为 <!DOCTYPE html>，统一标准，兼容性更好。

  1. 默认块级元素（至少3个）：div, p, h1-h6 行内元素（至少3个）：span, a, input

  2. 元素分类区别

  • 行内元素：独占一行，宽度不可控（如 a）。
  • 块级元素：自成一行，可设置宽高（如 div）。
  • 空元素：无内容，需闭合标签（如 br, img）。
  1. src 和 href 区别
  • src：用于嵌入资源（如图片、脚本），内容替换当前元素。
  • href：用于链接外部资源（如超链接），内容不替换。
  1. HTML全局属性 class, id, style, title, lang, dir, accesskey 等。

二、HTML5 新特性

  1. HTML5主要新特性
  • 新增语义化标签（如 article, section）。
  • 支持多媒体（<video>, <audio>）。
  • 本地存储（localStorage, sessionStorage）。
  • Canvas绘图、地理定位（Geolocation）等。
  1. 新增语义化标签及场景
  • <article>：独立内容块（如博客文章）。
  • <nav>：导航栏。
  • <aside>：侧边栏或补充内容。

  1. 新增表单控件类型 date, time, email, number, range, color 等。

  2. 浏览器兼容性解决方案

  • 使用 Polyfills（如 html5shiv 处理旧版IE）。
  • Modernizr 检测特性支持情况。
  • CSS前缀（如 -webkit-）。

三、语义化与 SEO

  1. HTML语义化的核心价值
  • 提高代码可读性和维护性。
  • 帮助搜索引擎理解内容结构，提升SEO效果。
  1. 常见语义化标签
  • <header>：页面头部。
  • <footer>：页面底部。
  • <main>：主要内容区域。
  1. SEO优化注意事项
  • 使用语义化标签（如 h1 仅用一次作为标题）。
  • 优化 title 和 meta 描述标签。
  1. strong vs em
  • strong：表示重要性（语义强调）。
  • em：表示语气变化（如斜体，但优先级低于 strong）。
  1. 微格式（Microformats） 使用类名（如 vcard）标记数据（如联系人信息），便于机器读取。

四、表单与交互

  1. HTML表单元素类型
  • 文本输入：text, password, email
  • 复选框：checkbox
  • 下拉菜单：select + option
  • 按钮：button, submit, reset

  1. 单选框分组条件 需共享相同的 name 属性，不同 value。

  2. img 的 alt 和 title 区别

  • alt：替代文本（屏幕阅读器依赖，不可省略）。
  • title：鼠标悬停提示信息（非必需）。

五、响应式与布局

  1. HTML层面的响应式实现
  • 使用 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
  • 媒体查询（@media）配合 CSS。

  1. 响应式设计原理 根据设备屏幕尺寸动态调整布局和内容。

  2. 渐进增强 vs 优雅降级

  • 渐进增强：先保证基础功能，再增强体验（优先现代浏览器）。
  • 优雅降级：先设计完整功能，再兼容旧浏览器。

八、其他

  1. HTML空元素 br, img, input, link, meta, area 等，无需闭合标签。

  2. title vs alt 属性

  • title：提供元素额外信息（如工具提示）。
  • alt：图像无法加载时的替代文本（SEO和可访问性关键）。
### **一、HTML基础与结构**
1. **HTML的定义和基本结构**
   HTML（超文本标记语言）用于创建网页内容的结构和意义。基本结构包含：
   ```html
   <!DOCTYPE html>
   <html lang="zh-CN">
     <head>
       <meta charset="UTF-8">
       <title>页面标题</title>
     </head>
     <body>
       <!-- 内容 -->
     </body>
   </html>
   ```

2. **HTML文档的标准组成部分**
  - `<!DOCTYPE>`：声明文档类型
  - `<html>`：根元素
  - `<head>`：包含元数据（如字符集、标题、脚本等）
  - `<body>`：页面可见内容

3. **`<!DOCTYPE>` 的作用及HTML5意义**
  - 作用：告知浏览器使用哪种HTML标准解析文档。
  - HTML5中简化为 `<!DOCTYPE html>`，统一标准，兼容性更好。

4. **默认块级元素**（至少3个）：`div`, `p`, `h1-h6`
   **行内元素**（至少3个）：`span`, `a`, `input`

5. **元素分类区别**
  - 行内元素：独占一行，宽度不可控（如 `a`）。
  - 块级元素：自成一行，可设置宽高（如 `div`）。
  - 空元素：无内容，需闭合标签（如 `br`, `img`）。

6. **`src` 和 `href` 区别**
  - `src`：用于嵌入资源（如图片、脚本），内容替换当前元素。
  - `href`：用于链接外部资源（如超链接），内容不替换。

7. **HTML全局属性**
   `class`, `id`, `style`, `title`, `lang`, `dir`, `accesskey` 等。

---

### **二、HTML5 新特性**
1. **HTML5主要新特性**
  - 新增语义化标签（如 `article`, `section`）。
  - 支持多媒体（`<video>`, `<audio>`）。
  - 本地存储（`localStorage`, `sessionStorage`）。
  - Canvas绘图、地理定位（Geolocation）等。

2. **新增语义化标签及场景**
  - `<article>`：独立内容块（如博客文章）。
  - `<nav>`：导航栏。
  - `<aside>`：侧边栏或补充内容。

3. **新增表单控件类型**
   `date`, `time`, `email`, `number`, `range`, `color` 等。

4. **浏览器兼容性解决方案**
  - 使用 Polyfills（如 `html5shiv` 处理旧版IE）。
  - Modernizr 检测特性支持情况。
  - CSS前缀（如 `-webkit-`）。

---

### **三、语义化与 SEO**
1. **HTML语义化的核心价值**
  - 提高代码可读性和维护性。
  - 帮助搜索引擎理解内容结构，提升SEO效果。

2. **常见语义化标签**
  - `<header>`：页面头部。
  - `<footer>`：页面底部。
  - `<main>`：主要内容区域。

3. **SEO优化注意事项**
  - 使用语义化标签（如 `h1` 仅用一次作为标题）。
  - 优化 `title` 和 `meta` 描述标签。

4. **`strong` vs `em`**
  - `strong`：表示重要性（语义强调）。
  - `em`：表示语气变化（如斜体，但优先级低于 `strong`）。

5. **微格式（Microformats）**
   使用类名（如 `vcard`）标记数据（如联系人信息），便于机器读取。

---

### **四、表单与交互**
1. **HTML表单元素类型**
  - 文本输入：`text`, `password`, `email`
  - 复选框：`checkbox`
  - 下拉菜单：`select` + `option`
  - 按钮：`button`, `submit`, `reset`

2. **单选框分组条件**
   需共享相同的 `name` 属性，不同 `value`。

3. **`img` 的 `alt` 和 `title` 区别**
  - `alt`：替代文本（屏幕阅读器依赖，不可省略）。
  - `title`：鼠标悬停提示信息（非必需）。

---

### **五、响应式与布局**
1. **HTML层面的响应式实现**
  - 使用 `<meta name="viewport" content="width=device-width, initial-scale=1.0">`。
  - 媒体查询（`@media`）配合 CSS。

2. **响应式设计原理**
   根据设备屏幕尺寸动态调整布局和内容。

3. **渐进增强 vs 优雅降级**
  - 渐进增强：先保证基础功能，再增强体验（优先现代浏览器）。
  - 优雅降级：先设计完整功能，再兼容旧浏览器。

---

### **八、其他**
1. **HTML空元素**
   `br`, `img`, `input`, `link`, `meta`, `area` 等，无需闭合标签。

2. **`title` vs `alt` 属性**
  - `title`：提供元素额外信息（如工具提示）。
  - `alt`：图像无法加载时的替代文本（SEO和可访问性关键）。

---
````
avatar
文章
阅读
粉丝