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)
  • 便于屏幕阅读器等辅助技术解析
相关推荐
June bug2 分钟前
【Vue】EACCES: permission denied 错误
前端·javascript·vue.js
陈随易4 分钟前
PostgreSQL v18发布,新增AIO uuidv7 OAuth等功能
前端·后端·程序员
一只小阿乐8 分钟前
react 中的组件性能优化
前端·javascript·react.js·react组件性能优化
柯南二号13 分钟前
【大前端】【iOS】iOS 真实项目可落地目录结构方案
前端·ios
肉清19 分钟前
linux自用命令
linux·服务器·前端
weibkreuz26 分钟前
初始React@1
前端·react.js·前端框架
Coder_Boy_37 分钟前
前端和后端软件系统联调经典问题汇总
java·前端·驱动开发·微服务·状态模式
小皮虾41 分钟前
别再封装 Axios 了!用 RPC 像调用本地函数一样写接口(支持 Vue/React/Node)
前端·rpc·全栈
PieroPC44 分钟前
NiceGUI .classes() 完整列表教程
前端
月巴月巴白勺合鸟月半44 分钟前
一个医学编码的服务
服务器·前端·javascript