HTML 元素
基本概念
HTML 元素是构建网页的基本单位，由开始标签、内容和结束标签组成。
html
<tagname>内容</tagname>常用元素分类
1. 文本元素
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落</p>
<span>行内文本</span>
<strong>粗体强调</strong>
<em>斜体强调</em>
<mark>标记文本</mark>
<del>删除线</del>
<ins>下划线</ins>2. 列表元素
html
<!-- 无序列表 -->
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>术语1</dt>
<dd>定义1</dd>
<dt>术语2</dt>
<dd>定义2</dd>
</dl>3. 链接和锚点
html
<!-- 外部链接 -->
<a href="https://example.com" target="_blank">外部链接</a>
<!-- 内部链接 -->
<a href="/page.html">内部链接</a>
<!-- 锚点链接 -->
<a href="#section1">跳转到section1</a>
<!-- 下载链接 -->
<a href="/file.pdf" download>下载文件</a>
<!-- 邮件链接 -->
<a href="mailto:example@email.com">发送邮件</a>4. 图片和多媒体
html
<!-- 图片 -->
<img src="image.jpg" alt="图片描述" width="300" height="200">
<!-- 响应式图片 -->
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="响应式图片">
</picture>
<!-- 视频 -->
<video controls width="640">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频播放
</video>
<!-- 音频 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频播放
</audio>5. 表格
html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">共2人</td>
</tr>
</tfoot>
</table>6. 容器元素
html
<!-- 块级容器 -->
<div>通用块级容器</div>
<!-- 行内容器 -->
<span>通用行内容器</span>
<!-- 分隔线 -->
<hr>
<!-- 换行 -->
<br>
<!-- 预格式化文本 -->
<pre>保留格式的文本</pre>
<!-- 代码 -->
<code>行内代码</code>
<!-- 代码块 -->
<pre><code>代码块内容</code></pre>
<!-- 引用 -->
<blockquote>
<p>这是一段引用内容</p>
<footer>— 引用来源</footer>
</blockquote>全局属性
所有HTML元素都可以使用的属性：
html
<div id="unique-id" class="class1 class2" style="color: red;"
title="提示信息" data-custom="自定义数据"
hidden aria-label="标签">
内容
</div>常用全局属性
id: 唯一标识符class: CSS类名style: 内联样式title: 鼠标悬停提示data-*: 自定义数据属性hidden: 隐藏元素tabindex: Tab键顺序aria-*: 无障碍属性
块级元素 vs 行内元素
块级元素
独占一行，可以设置宽高、内外边距：
html
<div>div</div>
<p>段落</p>
<h1>标题</h1>
<ul>列表</ul>
<table>表格</table>
<form>表单</form>行内元素
不独占一行，宽高由内容决定：
html
<span>span</span>
<a>链接</a>
<strong>强调</strong>
<em>斜体</em>
<img>图片</img>
<input>输入框</input>
<button>按钮</button>行内块级元素
html
<img src="image.jpg">
<input type="text">
<button>按钮</button>文档结构
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="页面描述">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>页眉</header>
<nav>导航</nav>
<main>
<article>文章</article>
<aside>侧边栏</aside>
</main>
<footer>页脚</footer>
<script src="script.js"></script>
</body>
</html>面试常见问题
1. DOCTYPE 的作用是什么？
DOCTYPE声明告诉浏览器使用哪种HTML规范解析文档，避免浏览器的怪异模式。
html
<!DOCTYPE html>2. meta 标签有哪些常用属性？
html
<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- 视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面描述 -->
<meta name="description" content="页面描述">
<!-- 关键词 -->
<meta name="keywords" content="关键词1,关键词2">
<!-- 作者 -->
<meta name="author" content="作者名">
<!-- HTTP等效 -->
<meta http-equiv="refresh" content="30">
<!-- Open Graph -->
<meta property="og:title" content="标题">
<meta property="og:description" content="描述">
<meta property="og:image" content="图片URL">3. src 和 href 的区别？
src: 引用外部资源，会替换当前元素内容（如img、script）href: 引用外部资源，建立链接关系（如link、a）
html
<img src="image.jpg">
<link href="style.css" rel="stylesheet">
<a href="page.html">链接</a>4. alt 属性的作用？
alt属性为图片提供替代文本，当图片无法加载时显示文本，对SEO和无障碍访问很重要。
html
<img src="image.jpg" alt="图片描述">5. iframe 有哪些缺点？
- 安全性问题：点击劫持攻击
- SEO不友好：搜索引擎难以索引iframe内容
- 性能问题：增加页面加载时间
- 移动端兼容性差
html
<iframe src="page.html" frameborder="0"></iframe>通过理解HTML元素的基本概念和分类，可以更好地构建语义化、可访问的网页结构。