基本结构
HTML文档由<!DOCTYPE html>
声明开头,定义文档类型为HTML5,整体分为<html>
标签包裹的<head>
(头部)和<body>
(主体)两部分。
<!DOCTYPE>
<html>
<head>
<body>
头部区域详解
<head>
内常用标签及作用:
| 标签 | 功能说明 |
|—————–|————————————————————————–|| 设置浏览器标签页标题,显示在标签栏和页面标题栏 | |
| 定义字符编码为UTF-8,避免中文乱码 | |
| 引入外部CSS文件,控制页面样式 | |
| 引入外部JavaScript文件,实现交互功能 | |
` | 适配移动设备屏幕,实现响应式布局 |
标签
<body>
中常用标签及示例:
<h1>~<h6>
<h1>
权重最高,依次递减<h1>主标题</h1>
<p>
<p>这是一个段落。</p>
<a>
href
属性指定链接地址<a href="https://example.com">点击访问</a>
<img>
src
属性指定图片路径,alt
提供替代文本<img src="image.jpg" alt="示例图片">
<ul>/<ol>
<li>
定义列表项<ul><li>项目1</li><li>项目2</li></ul>
<table>
<tr>
(行)、<th>
(表头)、<td>
(单元格)使用<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr></table>
表格标签详解
表格结构通过嵌套标签实现:
功能说明 | |
---|---|
<table> |
定义表格区域 |
<thead> |
表头区域(可选),通常包含<tr> 和<th> |
<tbody> |
表体区域,包含数据行(<tr> )和单元格(<td> ) |
<tr> |
定义一行数据 |
<th> |
表头单元格,内容默认加粗 |
<td> |
普通单元格,可合并行或列(rowspan /colspan 属性) |
示例代码:
<table border="1"> <thead> <tr><th>ID</th><th>名称</th></tr> </thead> <tbody> <tr><td>1</td><td>苹果</td></tr> <tr><td>2</td><td>香蕉</td></tr> </tbody> </table>
常见问题与解答
问题1:如何嵌套表格?
解答:在<td>
或<th>
内直接插入<table>
标签即可。
<table>
<tr>
<td>主表格</td>
<td>
<table border="1">
<tr><td>嵌套表格</td></tr>
</table>
</td>
</tr>
</table>
问题2:<meta charset="UTF-8">
的作用是什么?
解答:该标签声明网页字符编码为UTF-8,确保浏览器正确解析中文、日文等非ASCII字符,若未设置,可能出现乱码或显示异常