哈喽~我是小桃~我们上篇文章大致讲了HTML的基础认知包括作用以及基本语法、HTML的标准结构、对于初学者来说核心的常用标签我们这一篇文章就把关于HTML基础框架部分剩余的知识讲解一下。一、HTML5语义化标签语义化就是用有含义的标签来描述具体的内容而不是全部都用div这个标签。1. 语义化的好处能够使代码的可读性更强更容易理解从而使团队协作更高效有利于搜索引擎SEO来识别页面的结构支持屏幕阅读器等无障碍工具页面的可访问性也因此提高2. 高频语义标签标签作用header页面或某个区块的头部导航、logo、标题等nav导航链接区域main页面主体核心内容一个页面只能有一个section独立的内容区块通常有标题article完整独立的内容如一篇文章、一条新闻aside侧边栏、附属内容广告、相关推荐footer页面或区块的底部版权、联系方式等二、HTML表单表单是网页用来收集用户输入的核心载体比如像网页的登录、注册、搜索框这些都是基于表单来实现的。1. 表单容器formaction是表单数据提交的目标地址method表示提交方式常用get参数显示在地址栏和post参数隐藏更安全现在简单的解析一下get和post的区别:GET是从服务器获取数据适合查询、获取数据且无敏感信息它的参数直接暴露在URL中可以被缓存、收藏为书签。POST是向服务器提交数据适合提交表单、上传文件、传输敏感或大数据量内容它的数据不会出现在URL中相对来说会更安全。2. 核心表单控件input输入框单标签通过type属性来切换不同的输入类型这个标签是HTML表单中最灵活的标签type 值作用补充属性text单行文本输入框placeholder占位提示文字、name提交数据的键名password密码输入框输入内容自动显示为圆点radio单选框同组单选框name属性必须相同才能互斥checked默认选中checkbox复选框同组复选框name属性相同checked默认选中submit提交按钮点击后提交表单数据reset重置按钮点击后恢复表单默认值button普通按钮无默认行为配合 JS 使用file文件上传可选择本地文件上传其他的表单标签select下拉选择框selected属性设置默认选中textarea多行文本域rows设置行数cols设置列数label关联表单控件for属性对应控件的id点击文字即可选中输入框 / 单选框提升用户体验三、HTML 核心属性1. 通用属性几乎所有标签都支持id元素的唯一标识一个页面中不能重复用于锚点跳转、CSS 选择器、JS 操作class类名可重复、可给一个元素加多个类主要用于给元素设置 CSS 样式style行内样式直接在标签内写 CSS 代码title鼠标悬停时显示的提示文字2. 特殊字符转义HTML 中有些字符有特殊含义不能直接写需要用转义字符替代显示结果转义写法说明空格nbsp;多个空格默认会被合并用它实现连续空格lt;小于号gt;大于号©copy;版权符号对于初学者来说有几个点需要注意HTML不区分大小写但是在计算机行业里面基本都是用小写上一章也提到过标签要注意闭合双标签要成对成对的写单标签要注意规范使用给某个属性进行赋值要用双引号包裹在写代码的过程中适当的要缩进更容易进行理解也方便后期的完善最后的最后HTML有样式效果但是在日常中不要使用尽量把样式的修改交给CSS来实现。巩固练习题基础篇练习 1默写HTML5标准结构要求从零手写一个完整的HTML5标准页面框架包含文档声明、根标签、头部配置、主体区域配置字符编码为UTF-8、设置网页标题为 “我的第一个练习”用注释标注每一个核心标签的作用考察点HTML 标准结构、头部、基础语法规范练习 2文本标签排版要求 在 body中编写一篇 “我的学习日记”内容包含1 个一级标题日记总标题2 个二级标题划分两个不同的内容主题至少 3 个段落段落中穿插使用strong标注重点内容em标注强调语气的内容br实现段落内强制换行hr水平分隔两个二级标题的区块末尾用删除线标注过时内容用下划线标注新增补充内容考察点标题、段落、文本格式化标签的使用练习 3三类列表实操要求 在页面中分别实现三种列表无序列表列出 3 项你的前端学习计划如 HTML 基础、CSS 布局、JavaScript 入门有序列表列出 “打开浏览器查看网页” 的 4 个操作步骤自定义列表解释 3 个前端术语HTML、CSS、JavaScript练习 4图片与超链接要求插入一张图片本地图片或网络图片地址均可设置alt替代文本、title悬停提示宽度设为 300px给图片包裹超链接点击后跳转到百度首页要求新窗口打开在页面底部添加 “回到顶部” 锚点链接点击后回到页面最顶端练习 5基础表格制作要求 制作一个学生成绩表第一行为表头内容分别是姓名、科目、分数后两行填充两条真实的成绩数据新增一行 “总分”实现跨 3 列合并的效果使用thead、tbody对表格进行语义化划分考察点表格基础结构、表头、单元格合并、语义化表格练习 6特殊字符转义要求 在页面中显示以下内容必须使用转义字符实现显示文本HTML 标签用 和 符号包裹显示文本版权所有 © 2026 前端学习笔记显示文本字与字之间 有多个连续空格考察点HTML 特殊转义字符的使用完成以上基础联系之后进行自己所学知识的查漏补缺关于HTML的基础到这里就结束了下一篇我们将进行JSJavascript的学习,伙伴们我们下期见哈~
哈喽~我是小桃~我们上篇文章大致讲了HTML的基础认知包括作用以及基本语法、HTML的标准结构、对于初学者来说核心的常用标签我们这一篇文章就把关于HTML基础框架部分剩余的知识讲解一下。一、HTML5语义化标签语义化就是用有含义的标签来描述具体的内容而不是全部都用div这个标签。1. 语义化的好处能够使代码的可读性更强更容易理解从而使团队协作更高效有利于搜索引擎SEO来识别页面的结构支持屏幕阅读器等无障碍工具页面的可访问性也因此提高2. 高频语义标签标签作用header页面或某个区块的头部导航、logo、标题等nav导航链接区域main页面主体核心内容一个页面只能有一个section独立的内容区块通常有标题article完整独立的内容如一篇文章、一条新闻aside侧边栏、附属内容广告、相关推荐footer页面或区块的底部版权、联系方式等二、HTML表单表单是网页用来收集用户输入的核心载体比如像网页的登录、注册、搜索框这些都是基于表单来实现的。1. 表单容器formaction是表单数据提交的目标地址method表示提交方式常用get参数显示在地址栏和post参数隐藏更安全现在简单的解析一下get和post的区别:GET是从服务器获取数据适合查询、获取数据且无敏感信息它的参数直接暴露在URL中可以被缓存、收藏为书签。POST是向服务器提交数据适合提交表单、上传文件、传输敏感或大数据量内容它的数据不会出现在URL中相对来说会更安全。2. 核心表单控件input输入框单标签通过type属性来切换不同的输入类型这个标签是HTML表单中最灵活的标签type 值作用补充属性text单行文本输入框placeholder占位提示文字、name提交数据的键名password密码输入框输入内容自动显示为圆点radio单选框同组单选框name属性必须相同才能互斥checked默认选中checkbox复选框同组复选框name属性相同checked默认选中submit提交按钮点击后提交表单数据reset重置按钮点击后恢复表单默认值button普通按钮无默认行为配合 JS 使用file文件上传可选择本地文件上传其他的表单标签select下拉选择框selected属性设置默认选中textarea多行文本域rows设置行数cols设置列数label关联表单控件for属性对应控件的id点击文字即可选中输入框 / 单选框提升用户体验三、HTML 核心属性1. 通用属性几乎所有标签都支持id元素的唯一标识一个页面中不能重复用于锚点跳转、CSS 选择器、JS 操作class类名可重复、可给一个元素加多个类主要用于给元素设置 CSS 样式style行内样式直接在标签内写 CSS 代码title鼠标悬停时显示的提示文字2. 特殊字符转义HTML 中有些字符有特殊含义不能直接写需要用转义字符替代显示结果转义写法说明空格nbsp;多个空格默认会被合并用它实现连续空格lt;小于号gt;大于号©copy;版权符号对于初学者来说有几个点需要注意HTML不区分大小写但是在计算机行业里面基本都是用小写上一章也提到过标签要注意闭合双标签要成对成对的写单标签要注意规范使用给某个属性进行赋值要用双引号包裹在写代码的过程中适当的要缩进更容易进行理解也方便后期的完善最后的最后HTML有样式效果但是在日常中不要使用尽量把样式的修改交给CSS来实现。巩固练习题基础篇练习 1默写HTML5标准结构要求从零手写一个完整的HTML5标准页面框架包含文档声明、根标签、头部配置、主体区域配置字符编码为UTF-8、设置网页标题为 “我的第一个练习”用注释标注每一个核心标签的作用考察点HTML 标准结构、头部、基础语法规范练习 2文本标签排版要求 在 body中编写一篇 “我的学习日记”内容包含1 个一级标题日记总标题2 个二级标题划分两个不同的内容主题至少 3 个段落段落中穿插使用strong标注重点内容em标注强调语气的内容br实现段落内强制换行hr水平分隔两个二级标题的区块末尾用删除线标注过时内容用下划线标注新增补充内容考察点标题、段落、文本格式化标签的使用练习 3三类列表实操要求 在页面中分别实现三种列表无序列表列出 3 项你的前端学习计划如 HTML 基础、CSS 布局、JavaScript 入门有序列表列出 “打开浏览器查看网页” 的 4 个操作步骤自定义列表解释 3 个前端术语HTML、CSS、JavaScript练习 4图片与超链接要求插入一张图片本地图片或网络图片地址均可设置alt替代文本、title悬停提示宽度设为 300px给图片包裹超链接点击后跳转到百度首页要求新窗口打开在页面底部添加 “回到顶部” 锚点链接点击后回到页面最顶端练习 5基础表格制作要求 制作一个学生成绩表第一行为表头内容分别是姓名、科目、分数后两行填充两条真实的成绩数据新增一行 “总分”实现跨 3 列合并的效果使用thead、tbody对表格进行语义化划分考察点表格基础结构、表头、单元格合并、语义化表格练习 6特殊字符转义要求 在页面中显示以下内容必须使用转义字符实现显示文本HTML 标签用 和 符号包裹显示文本版权所有 © 2026 前端学习笔记显示文本字与字之间 有多个连续空格考察点HTML 特殊转义字符的使用完成以上基础联系之后进行自己所学知识的查漏补缺关于HTML的基础到这里就结束了下一篇我们将进行JSJavascript的学习,伙伴们我们下期见哈~
)
)
