html常用标记:分类汇总与实操用法
html常用标记包含结构、文本、媒体、链接、列表、表格、表单六大核心类别,是搭建网页基础框架与展示内容的核心元素,所有标记均遵循W3C2024版HTML5通用规范,多数为双标签成对使用,少数单标签无需闭合,适配绝大多数静态网页、企业官网、前端练习项目的基础开发场景,仅复杂交互型网页需结合JavaScript拓展功能。
html结构类标记
结构类标记用于搭建网页整体骨架,定义网页的基础布局层级,是所有网页必须包含的核心标记,缺少对应标记会导致网页解析异常。为网页根标记,包裹页面所有代码内容;
用于存放网页配置信息,不会直接展示在页面中,包含标题、编码格式、样式引入等设置;是网页可视区域,所有文字、图片、按钮等可见内容均需放置在该标记内。你在编写基础网页时,必须严格遵循html、head、body的嵌套层级,不可颠倒顺序。html文本类标记
文本类标记用于排版页面文字内容,实现文字层级、样式、段落的基础格式化。标题标记包含
至六个等级,h1字号最大、权重最高,多用于页面主标题,h6字号最小,适配次级辅助标题,单个页面仅建议使用一次h1标签,可多次使用h2-h6标签。
为段落标记,用于包裹常规正文文本,自带上下间距,是网页文字排版的常用标记。为行内文本标记,无默认样式,主要用于局部文字的样式单独修改,不影响整体排版结构。
文本样式辅助标记可快速优化文字展示效果,用于文字加粗,突出重点内容,用于文字斜体展示,适合标注备注、引用内容,两类标记均为行内标记,不会自动换行,可嵌套在段落、标题标记内部使用。
html链接与媒体类标记
为图片展示单标记,无需闭合,依靠src属性加载图片资源,属性值为图片的本地路径或网络地址,搭配alt属性可设置图片加载失败时的替代文字,提升网页兼容性与用户体验。网页中所有静态图片展示,均可使用该标记实现,适配jpg、png、gif等主流图片格式。
html列表与表格类标记
列表标记用于规整并列内容,分为无序列表和有序列表两类,适配导航栏、参数罗列、步骤说明等场景。
- 无序列表,默认自带实心圆点符号,无数字排序,适合无先后顺序的内容罗列
- 有序列表,默认自带数字排序,适合有先后、层级顺序的内容展示
表格标记用于结构化展示规整数据,适配数据统计、参数对比、信息台账等场景,由表头、表体、单元格组成,结构严谨且适配数据规整展示需求。
表格子标记 核心作用 使用场景 定义表格表头 存放表格标题、分类字段 定义表格主体内容 存放具体数据信息 定义表格行 划分表格横向内容 定义表格单元格 承载具体数据文字 html表单类标记
表单类标记用于实现用户与网页的基础交互,收集用户输入的信息,广泛应用于登录、注册、留言、搜索等功能模块。