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)
  • 便于屏幕阅读器等辅助技术解析
相关推荐
benbenAItalk4 小时前
数字人口播视频的批量生产实践:素材规范、任务编排与质量验收
java·前端·音视频
2601_962885725 小时前
如何用 Python 扫描 A 股跳空缺口并统计缺口回补概率?
java·前端·python
西瓜太郎12345 小时前
Claude Code、Codex CLI、Gemini CLI 能否共用一枚 Key?先看协议选择矩阵
前端·api 网关·claude code·gemini cli·codex cli
陈随易7 小时前
在Finch用了62亿词元,我认为这是新一代Agent工具之神
前端·人工智能·后端
水域安全老周8 小时前
水趣钓鱼救生衣专利拆解:两级锁紧如何解决落水人衣分离
java·前端·网络
计算机魔术师8 小时前
Anthropic CEO突然喊踩刹车,OpenAI罕见力挺:AI这辆车不能只踩油门了
前端
wing988 小时前
从codex转战workbuddy使用一周的感受
前端·人工智能·后端
EatFan9 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
梦想平凡9 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理
IT_陈寒9 小时前
Redis的Set操作居然能把我的服务整挂了?
前端·人工智能·后端