HTML超文本标记语言HyperText Markup Language是构建网页结构的核心语言它不是编程语言而是标记语言—— 通过一系列「标签」描述网页的结构和内容如标题、段落、图片、链接等浏览器会解析这些标签并渲染出可视化的网页HTML 核心基础基本结构必背所有标准 HTML 文档都遵循固定的骨架结构缺一不可!DOCTYPE html !-- 声明文档类型为HTML5必须放在第一行 -- html langzh-CN !-- 根元素lang指定页面语言利于SEO -- head !-- 头部页面元信息不直接显示在页面上 -- meta charsetUTF-8 !-- 字符编码UTF-8兼容所有字符 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 适配移动端 -- title页面标题/title !-- 浏览器标签页显示的标题 -- /head body !-- 主体页面可见内容都放在这里 -- h1这是一级标题/h1 p这是一个段落/p /body /html标签的核心规则标签分类双标签有开始和结束标签如p内容/p、div内容/div单标签自闭合标签无需结束标签如img、input、br标签属性为标签添加额外信息格式为属性名属性值多个属性用空格分隔img srclogo.png alt网站logo width100 !-- src图片路径alt图片加载失败时的替代文本width宽度 --嵌套规则标签需正确嵌套不能交叉如divp内容/div/p是错误的HTML 常用标签分类文本结构标签语义化核心语义化标签的作用让代码更易读、利于 SEO搜索引擎优化、提升无障碍访问性!-- 标题标签h1-h6权重递减一个页面建议只写一个h1 -- h1一级标题最重要/h1 h2二级标题/h2 !-- 段落标签独占一行自动换行 -- p这是一个独立的段落浏览器会自动在段落前后添加空白。/p !-- 文本格式化标签 -- strong加粗文本语义强调/strong em斜体文本语义强调/em span行内通用容器无默认样式/span div块级通用容器独占一行无默认样式/div链接与导航标签!-- 超链接核心属性href跳转地址target指定打开方式 -- a hrefhttps://www.example.com target_blank跳转到示例网站/a !-- target_blank新标签页打开_self当前页打开默认 -- !-- 锚点链接跳转到页面内指定位置 -- a href#section1跳转到第一部分/a div idsection1第一部分内容/div媒体标签!-- 图片标签核心属性src图片路径、alt替代文本必加 -- img srcimages/photo.jpg alt风景照片 width300 height200 !-- 音频标签 -- audio srcmusic.mp3 controls autoplay/audio !-- controls显示播放控件autoplay自动播放多数浏览器禁用 -- !-- 视频标签 -- video srcvideo.mp4 controls width500/video列表标签!-- 无序列表ul默认带圆点常用导航、列表项 -- ul li列表项1/li li列表项2/li /ul !-- 有序列表ol默认带数字 -- ol li第一步/li li第二步/li /ol !-- 定义列表dl用于名词解释 -- dl dtHTML/dt dd超文本标记语言/dd /dl表单标签交互核心用于收集用户输入核心是form包裹各类表单控件!-- form表单容器action指定提交地址method指定提交方式 -- form action/submit methodpost !-- 文本输入框 -- label forusername用户名/label input typetext idusername nameusername required !-- 密码输入框 -- label forpwd密码/label input typepassword idpwd namepwd !-- 单选框 -- input typeradio namegender idmale valuemale label formale男/label input typeradio namegender idfemale valuefemale label forfemale女/label !-- 提交按钮 -- button typesubmit提交/button /form关键属性name表单提交时的键名、id与 label 的 for 关联、required必填HTML5 新增语义化标签HTML5 新增了更具语义的块级标签替代传统的div嵌套header页面头部导航、logo等/header nav导航栏/nav main页面主要内容唯一/main section文档中的章节/区块/section article独立的文章内容如博客、新闻/article aside侧边栏相关推荐、广告等/aside footer页面底部版权、联系方式等/footerHTML 核心特性语义化核心用正确的标签做正确的事如用nav做导航而非div classnav好处代码可读性高、搜索引擎易抓取、屏幕阅读器无障碍更友好兼容性HTML5 兼容所有现代浏览器老旧浏览器如 IE可通过 polyfill 兼容编写时遵循「渐进增强」原则核心功能适配所有浏览器高级功能仅在支持的浏览器生效与 CSS/JS 的配合HTML 负责结构CSS 负责样式JavaScript 负责交互三者分离是前端开发的最佳实践便于维护和扩展HTML 最佳实践始终声明!DOCTYPE html确保浏览器以标准模式渲染优先使用语义化标签减少无意义的div为图片添加alt属性为表单控件添加label关联页面编码统一用UTF-8避免乱码移动端页面添加meta nameviewport contentwidthdevice-width, initial-scale1.0适配屏幕总结HTML 是网页的「骨架」核心是通过语义化标签描述页面结构而非样式标准 HTML 文档必须包含!DOCTYPE html、html、head、body四大核心部分HTML5 新增的header/nav/main等语义标签让页面结构更清晰利于 SEO 和维护官网参考书W3schoolHTML 标签参考手册
6.5.2 软件-＞W3C HTML5、CSS3标准（W3C Recommendation）：HTML（HyperText Markup Language）
HTML超文本标记语言HyperText Markup Language是构建网页结构的核心语言它不是编程语言而是标记语言—— 通过一系列「标签」描述网页的结构和内容如标题、段落、图片、链接等浏览器会解析这些标签并渲染出可视化的网页HTML 核心基础基本结构必背所有标准 HTML 文档都遵循固定的骨架结构缺一不可!DOCTYPE html !-- 声明文档类型为HTML5必须放在第一行 -- html langzh-CN !-- 根元素lang指定页面语言利于SEO -- head !-- 头部页面元信息不直接显示在页面上 -- meta charsetUTF-8 !-- 字符编码UTF-8兼容所有字符 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 适配移动端 -- title页面标题/title !-- 浏览器标签页显示的标题 -- /head body !-- 主体页面可见内容都放在这里 -- h1这是一级标题/h1 p这是一个段落/p /body /html标签的核心规则标签分类双标签有开始和结束标签如p内容/p、div内容/div单标签自闭合标签无需结束标签如img、input、br标签属性为标签添加额外信息格式为属性名属性值多个属性用空格分隔img srclogo.png alt网站logo width100 !-- src图片路径alt图片加载失败时的替代文本width宽度 --嵌套规则标签需正确嵌套不能交叉如divp内容/div/p是错误的HTML 常用标签分类文本结构标签语义化核心语义化标签的作用让代码更易读、利于 SEO搜索引擎优化、提升无障碍访问性!-- 标题标签h1-h6权重递减一个页面建议只写一个h1 -- h1一级标题最重要/h1 h2二级标题/h2 !-- 段落标签独占一行自动换行 -- p这是一个独立的段落浏览器会自动在段落前后添加空白。/p !-- 文本格式化标签 -- strong加粗文本语义强调/strong em斜体文本语义强调/em span行内通用容器无默认样式/span div块级通用容器独占一行无默认样式/div链接与导航标签!-- 超链接核心属性href跳转地址target指定打开方式 -- a hrefhttps://www.example.com target_blank跳转到示例网站/a !-- target_blank新标签页打开_self当前页打开默认 -- !-- 锚点链接跳转到页面内指定位置 -- a href#section1跳转到第一部分/a div idsection1第一部分内容/div媒体标签!-- 图片标签核心属性src图片路径、alt替代文本必加 -- img srcimages/photo.jpg alt风景照片 width300 height200 !-- 音频标签 -- audio srcmusic.mp3 controls autoplay/audio !-- controls显示播放控件autoplay自动播放多数浏览器禁用 -- !-- 视频标签 -- video srcvideo.mp4 controls width500/video列表标签!-- 无序列表ul默认带圆点常用导航、列表项 -- ul li列表项1/li li列表项2/li /ul !-- 有序列表ol默认带数字 -- ol li第一步/li li第二步/li /ol !-- 定义列表dl用于名词解释 -- dl dtHTML/dt dd超文本标记语言/dd /dl表单标签交互核心用于收集用户输入核心是form包裹各类表单控件!-- form表单容器action指定提交地址method指定提交方式 -- form action/submit methodpost !-- 文本输入框 -- label forusername用户名/label input typetext idusername nameusername required !-- 密码输入框 -- label forpwd密码/label input typepassword idpwd namepwd !-- 单选框 -- input typeradio namegender idmale valuemale label formale男/label input typeradio namegender idfemale valuefemale label forfemale女/label !-- 提交按钮 -- button typesubmit提交/button /form关键属性name表单提交时的键名、id与 label 的 for 关联、required必填HTML5 新增语义化标签HTML5 新增了更具语义的块级标签替代传统的div嵌套header页面头部导航、logo等/header nav导航栏/nav main页面主要内容唯一/main section文档中的章节/区块/section article独立的文章内容如博客、新闻/article aside侧边栏相关推荐、广告等/aside footer页面底部版权、联系方式等/footerHTML 核心特性语义化核心用正确的标签做正确的事如用nav做导航而非div classnav好处代码可读性高、搜索引擎易抓取、屏幕阅读器无障碍更友好兼容性HTML5 兼容所有现代浏览器老旧浏览器如 IE可通过 polyfill 兼容编写时遵循「渐进增强」原则核心功能适配所有浏览器高级功能仅在支持的浏览器生效与 CSS/JS 的配合HTML 负责结构CSS 负责样式JavaScript 负责交互三者分离是前端开发的最佳实践便于维护和扩展HTML 最佳实践始终声明!DOCTYPE html确保浏览器以标准模式渲染优先使用语义化标签减少无意义的div为图片添加alt属性为表单控件添加label关联页面编码统一用UTF-8避免乱码移动端页面添加meta nameviewport contentwidthdevice-width, initial-scale1.0适配屏幕总结HTML 是网页的「骨架」核心是通过语义化标签描述页面结构而非样式标准 HTML 文档必须包含!DOCTYPE html、html、head、body四大核心部分HTML5 新增的header/nav/main等语义标签让页面结构更清晰利于 SEO 和维护官网参考书W3schoolHTML 标签参考手册
