
基础认知
- 全称:HyperText Markup Language,即超文本标记语言。
- 本质:并非编程语言,仅为标记语言,负责搭建网页骨架、结构化组织网页内容,不负责样式美化和交互逻辑,样式由CSS实现,交互由JavaScript实现。
- 核心作用:将文本、图片、视频、链接等各类网页内容进行合理排布,让浏览器能够识别并渲染出完整网页。
- 文件后缀:标准后缀为html,早期兼容场景可使用htm后缀。
HTML 文档基本结构
- 文档类型声明:必须放在网页最顶部,用于告诉浏览器当前文档是HTML5文档,无闭合对应内容。
- 根标签:html标签,包裹整个网页的所有内容,可通过lang属性指定页面语言,如zh-CN表示中文,en表示英文。
- 头部区域:head标签,存放页面的元信息,该区域内容不直接在网页页面上显示,主要包含编码设置、页面标题等。
- 编码设置:meta标签指定charset为UTF-8,用于支持所有中文及特殊字符,避免网页出现乱码。
- 页面标题:title标签,定义的内容会显示在浏览器的标签栏上,用于标识网页主题。
- 主体区域:body标签,所有需要在网页上直观显示的内容,都放置在该标签内部,是用户可见内容的容器。
HTML 标签核心特性
- 标签分类(按书写形式):一是双标签(闭合标签),有开始标签和结束标签,中间包裹需要承载的内容,必须成对使用;二是单标签(自闭合标签),只有开始标签,无对应的结束标签,也无中间包裹内容,通常用于引入资源或实现简单功能,HTML5中可省略自闭合的斜杠。
- 标签属性:所有标签都可以添加属性,属性书写在开始标签内部,用于补充标签的额外信息,格式为标签名后跟随属性名等于属性值,属性值建议用引号包裹,多个属性之间用空格分隔。
- 标签嵌套规则:遵循规范嵌套,只能是父子级标签的层级包裹,不能出现标签交叉嵌套的情况,否则会导致浏览器渲染异常。
常用HTML 标签
- 文本排版标签:标题标签h1到h6,字体大小从h1到h6依次递减,自带加粗效果和上下间距,一个页面建议仅使用一个h1标签,利于搜索引擎优化;段落标签p,用于包裹一段完整文本,自带上下间距和自动换行功能;换行标签br,用于实现强制换行,无额外间距,与p标签的段落分隔不同;格式化标签,strong标签实现文本加粗且具有语义化,em标签实现文本斜体且具有语义化,b标签仅实现单纯加粗,i标签仅实现单纯斜体,后两者无语义化价值;容器标签div,属于块级容器,用于划分网页区域、承载各类内容,是网页布局的核心标签之一;span标签,属于行内容器,用于包裹行内的局部文本,实现精细化样式控制。
- 媒体与资源标签:图片标签img,用于在网页中插入图片,核心属性有src(指定图片路径)、alt(图片加载失败时的替代文本),还可通过width和height设置图片尺寸;视频标签video,用于插入视频资源,支持指定视频路径、播放控件、自动播放等配置;音频标签audio,用于插入音频资源,支持播放、暂停等基础音频控制。
- 链接与导航标签:a标签,即锚点链接标签,核心属性是href,用于指定跳转目标地址,可跳转至其他网页、当前网页的锚点位置、邮箱或电话等,还可通过target属性设置跳转方式,如新窗口打开、当前窗口打开。
- 列表标签:有序列表,由ol标签包裹li标签组成,列表项会自带有序编号,用于展示有先后顺序、有逻辑层级的内容;无序列表,由ul标签包裹li标签组成,列表项会自带项目符号,用于展示无固定顺序的内容;自定义列表,由dl标签包裹dt标签和dd标签组成,dt用于定义列表标题,dd用于解释说明dt,用于展示需要进行释义、补充的内容。
- 表单标签:form标签,包裹整个表单内容,用于收集用户输入的信息,并将信息提交至服务器,可指定提交地址和提交方式;表单控件,包含输入框、密码框、单选按钮、复选框、下拉选择框、提交按钮、重置按钮等,用于接收用户的不同类型输入,每个控件都有对应的属性配置,如name属性用于标识控件名称,便于服务器接收数据。
- 表格标签:table标签,作为表格的外层容器,包裹整个表格内容;tr标签,即表格行,用于定义表格的每一行;td标签,即表格单元格,用于定义每一行中的具体单元格,承载表格数据;th标签,即表头单元格,用于定义表格的表头,自带加粗和居中对齐效果,用于标识列的主题。
示例1

示例2

补充..
块级元素与行内元素:块级元素默认独占一行,可设置宽高、上下内外边距,如div、p、h1-h6、ol、ul、table、form等;行内元素默认不独占一行,与其他行内元素并排显示,不可直接设置宽高,仅能通过内外边距调整水平方向间距,如span、a、strong、em等。
语义化标签:HTML5新增了一系列具有明确语义的标签,如header(网页头部)、footer(网页底部)、nav(导航区域)、article(文章内容)、section(页面分区)等,用于替代传统的div标签,提升网页的可读性、可维护性,同时利于搜索引擎优化(SEO)。
元信息补充:head标签内还可引入外部CSS文件、配置网页图标、设置页面视口(适配移动端)等,这些元信息都是保障网页正常显示和适配的重要组成部分。
标签嵌套规范:部分标签有固定的嵌套限制,不可随意嵌套,遵循语义化和浏览器渲染规则,避免出现布局错乱或功能异常。
