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)
  • 便于屏幕阅读器等辅助技术解析
相关推荐
小码哥_常8 分钟前
Room 3.0:移动端持久化的“重生”变革
前端
Front思1 小时前
前端的.hbs
前端
_.Switch1 小时前
东方财富股票数据JS逆向:secids字段和AES加密实战
开发语言·前端·javascript·网络·爬虫·python·ecmascript
软件技术NINI1 小时前
webkit简介及工作流程
开发语言·前端·javascript·udp·ecmascript·webkit·yarn
普通网友1 小时前
ES6模块化、Promise、async、await、EventLoop、API接口案例_export function 与 await
前端·ecmascript·es6
難釋懷1 小时前
Vue混入
前端·javascript·vue.js
若梦plus1 小时前
TypeScript进阶
前端·javascript·typescript·ecmascript
直奔標竿1 小时前
Java开发者AI转型第二十七课!Spring AI 个人知识库实战(六)——全栈闭环收官,解锁前端流式渲染终极技巧
java·开发语言·前端·人工智能·后端·spring
@PHARAOH2 小时前
WHAT - cursor cli 开发范式
前端·ai·ai编程
子兮曰3 小时前
深入 HTML-in-Canvas:当 Canvas 学会了渲染 DOM,前端图形生态要变天了
前端·javascript·canvas