html基本知识

一、HTML 基本概念

  • 全称:HyperText Markup Language(超文本标记语言)
  • 作用:定义网页的结构和内容
  • 特点:不是编程语言,而是标记语言,使用标签来描述内容
  • 文件扩展名.html.htm

二、HTML 文档基本结构

每个 HTML 文档都遵循相同的基本结构:

  • <!DOCTYPE html>:声明文档类型,告诉浏览器这是 HTML5 文档
  • <html>:根元素,包含整个 HTML 文档
  • <head>:包含文档的元数据(不直接显示在页面上)
  • <meta charset="UTF-8">:指定字符编码,确保中文等字符正常显示
  • <title>:定义页面标题,显示在浏览器标签栏
  • <body>:包含所有可见的页面内容

三、HTML 标签基础

1. 标签的特点

  • 大多数标签成对出现:<标签名>内容</标签名>
  • 少数自闭合标签:<标签名><标签名/>(如 <img><br>
  • 标签可以嵌套,但不能交叉嵌套

2. 常用文本标签

四、链接与图像

1. 链接 (<a> 标签)

  • href:指定链接目标
  • target="_blank":在新窗口打开链接

2. 图像 (<img> 标签)

  • src:图像文件路径(必填)
  • alt:图像的替代文本(必填,用于图像无法显示时)
  • widthheight:设置图像尺寸

五、列表

1. 无序列表

2. 有序列表

3. 定义列表

六、表格

  • <table>:表格容器
  • <tr>:表格行
  • <th>:表头单元格
  • <td>:普通单元格

七、表单

表单用于收集用户输入:

  • <form>:表单容器
  • action:表单提交的目标 URL
  • method:提交方法(getpost
  • 常用输入控件:inputselecttextarea
  • required:表示该字段为必填项

八、语义化标签

HTML5 引入了语义化标签,使代码更具可读性和结构性:

语义化的好处:

  • 提高代码可读性
  • 有利于搜索引擎优化 (SEO)
  • 便于屏幕阅读器等辅助技术解析
相关推荐
万少5 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站7 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名10 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫10 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊10 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter10 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折10 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_10 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial11 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu11 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端