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)
  • 便于屏幕阅读器等辅助技术解析
相关推荐
小鹏linux2 分钟前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水1 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger1 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)1 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态1 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态2 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart2 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe52 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
IT_陈寒3 小时前
Redis缓存击穿把我整不会了,原来还有这手操作
前端·人工智能·后端
idcu4 小时前
深入 Lyt.js 组件系统:L2 渲染引擎层的核心
前端·typescript