1.相对路径和绝对路径1.相对路径以当前位置作为参考点去建立路径2.绝对路径以根位置作为参考点去建立路径1.本地绝对路径E:/a/b/c/奥特曼.jpg(很少使用)2.网络绝对路径:http://www.atguigu.com/images/index_new/logo.png注意点使用本地绝对路径一旦更换设备路径处理起来比较麻烦所以很少使用。使用网络绝对路径确实方便但要注意若服务器开启了防盗链会造成图片引入失败2.图片常见格式1.jpg格式概述扩展名为.jpg或.jpeg是一种有损的压缩格式把肉眼不容易观察出来的细节丢弃了主要特点支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图使用场景对图片细节没有极高要求的场景例如网站的产品宣传图等一一该格式网页中很常见2.png 格式:概述扩展名为.png是一种无损的压缩格式能够更高质量的保存图片主要特点支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图使用场景①想让图片有透明背景②想更高质量的呈现图片例如公司logo图、重要配图等3.bmp 格式:概述扩展名为.bmp不进行压缩的一种格式在最大程度上保留图片更多的细节主要特点支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图使用场景对图片细节要求极高的场景例如一些大型游戏中的图片网页中很少使用4.gif格式概述扩展名为.gif仅支持256种颜色色彩呈现不是很完整主要特点支持的颜色较少、支持简单透明背景、支持动态图使用场景网页中的动态图片5.webp 格式概述扩展名为.webp谷歌推出的一种格式专门用来在网页中呈现图片主要特点具备上述几种格式的优点但兼容性不太好一旦使用务必要解决兼容性问题使用场景网页中的各种图片6.base64格式1.本质一串特殊的文本要通过浏览器打开传统看图应用通常无法打开2.原理把图片进行base64编码形成一串文本3.如何生成靠一些工具或网站4.如何使用直接作为img标签的src属性的值即可并且不受文件位置的影响5.使用场景一些较小的图片或者需要和网页一起加载的图片3.超链接 跳转页面主要作用从当前页面进行跳转–跳转其他网页– a href“https://www.jd.com/” target“_blank”去京东/ a–跳转本地网页–a href”./10_HTML排版标签.html”target”_self去看排版标签/ a注意点1.代码中的多个空格、多个回车都会被浏览器解析成一个空格2.虽然a是行内元素但a元素可以包裹除它自身外的任何元素4.超链接 跳转文件浏览器能直接打开的文件 a href“./resource/自拍.jpg”看自拍/ a a href“./resource/小电影.mp4”看小电影/ a a href“./resource/小姐姐.gif”看小姐姐/ a a href“./resource/如何一夜暴富.pdf”点我一夜暴富/ a浏览器不能打开的文件会自动触发下载 a href“./resource/内部资源.zip”内部资源/ a强制触发下载 a href./resource/小电.mp4download“电影片段.mp4”下载电影/ a注意1若浏览器无法打开文件则会引导用户下载注意2若想强制触发下载请使用download属性属性值即为下载文件的名称5.超链接 跳转锚点第一步设置锚点第一种方式a标签配合name属性 a name“test1”/ a第二种方式其他标签配合id属性 h2 id“test2”我是一个位置/ h2注意点1.具有href属性的a标签是超链接具有name属性的a标签是锚点2.name和id都是区分大小写的且id最好别是数字开头第二步跳转锚点跳转到test1锚点 a href“#test1”去test1锚点/ a跳到本页面顶部 a href“#”回到顶部/ a跳转到其他页面锚点 a href“demo.html#test1”去demo.html页面的test1锚点/ a刷新本页面 a href“”刷新本页面/ a执行一段js如果还不知道执行什么可以留空javascript:; a href“javascript:alert(1);”点我弹窗/ a6.超链接 唤起指定应用通过a标签可以唤起设备应用程序唤起设备拨号 a href“tel:10010”电话联系/ a唤起设备发送邮件 a href“mailto:10010qq.com”邮件联系/ a唤起设备发送短信 a href“sms:10086”短信联系/ a7.超文本的真正含义超文本是一种组织信息的方式通过超链接将不同空间的文字、图片、等各种信息组织在一起能从当前阅读的内容跳转到超链接所指向的内容8.列表1.有序列表概念有顺序或侧重顺序的列表2.无序列表概念无顺序或不侧重顺序的列表3.列表嵌套概念列表中的某项内容又包含一个列表4. 自定义列表1.概念所谓自定义列表就是一个包含术语名称以及术语描述的列表2.一个dl就是一个自定义列表一个dt就是一个术语名称一个dd就是术语描述9.表格 基本结构1.一个完整的表格由表格标题、表格头部、表格主体、表格脚注四部分组成2.表格涉及到的标签table表格caption表格标题thead表格头部tbody表格主体tfoot表格注脚tr每一行th、td每一个单元格备注表格头部中用th表格主体、表格脚注中用td10.表格 常用属性注意点 table 元素的border属性可以控制表格边框但border值的大小并不控制单元格边框的宽度1.只能控制表格最外侧边框的宽度2.给某个th或td设置了宽度之后他们所在的那一列的宽度就确定了3.给某个th或td设置了高度之后他们所在的那一行的高度就确定了11.表格 跨行与跨列1.rowspan指定要跨的行数。2.colspan指定要跨的列数。12.常用标签补充13.表单 基本结构示例代码14.表单 文本框和密码框常用表单控件1.文本输入框 input type“text”常用属性如下name属性数据的名称。value属性输入框的默认输入值。maxlength属性输入框最大可输入长度。2.密码输入框 input type“password”常用属性如下name属性数据的名称。value属性输入框的默认输入值一般不用无意义maxlength属性输入框最大可输入长15.表单 单选框和多选框1.单选框 input type“radio” name“sex” value“female”女 input type“radio” name“sex” value“male”男常用属性如下name属性数据的名称注意想要单选效果多个radio的name属性值要保持一致value属性提交的数据值checked属性让该单选按钮默认选中2.复选框 input type“checkbox” name“hobby” value“smoke”抽烟 input type“checkbox” name“hobby” value“drink”喝酒 input type“checkbox” name“hobby” value“perm”烫头常用属性如下name属性数据的名称value属性提交的数据值checked属性让该复选框默认选中16.表单 隐藏域1.隐藏域 input type“hidden” name“tag” value“1oe”用户不可见的一个输入区域作用是提交表单的时候携带一些固定的数据name属性指定数据的名称value属性指定的是真正提交的数据17.表单 提交与重置1.提交按钮input typesubmit”value“点我提交表单” button点我提交表单/ button注意1.button标签type属性的默认值是submit2.button不要指定name属性3.input标签编写的按钮使用value属性指定按钮文字重置按钮 input typeresetvalue“点我重置” button type“reset”点我重置/ button注意点1.button不要指定name属性2.input标签编写的按钮使用value属性指定按钮文字18.表单 普通按钮 input typebuttonvalue“普通按钮” button type“button”普通按钮/ button注意点普通按钮的type值为button若不写type值是submit会引起表单的提交19.表单 文本域和下拉框文本域 textarea namemsgrows22cols“3”我是文本域/ textarea常用属性如下1.rows属性指定默认显示的行数会影响文本域的高度2.co1s属性指定默认显示的列数会影响文本域的宽度3.不能编写type属性其他属性与普通文本输入框一致下拉框 select name“from” option value“黑”黑龙江/ option option value“辽”辽宁/ option option value“吉”吉林/ option option value“粤” selected广东/ option/ select常用属性及注意事项1.name属性指定数据的名称2.option标签设置value属性如果没有value属性提交的数据是option中间的文字如果设置了value属性提交的数据就是value的值3.option标签设置了selected属性表示默认选中20.表单 禁用表单控件给表单控件的标签设置 disabled 既可禁用表单控件input、textarea、button、select、option都可以设置disabled属性21.表单 label标签label 标签label标签可与表单控件相关联关联之后点击文字与之对应的表单控件就会获取焦点两种与label关联方式如下1.让label标签的for属性的值等于表单控件的id2.把表单控件套在label标签的里面22.表单 fieldset与legendfieldset可以为表单控件分组、legend标签是分组的标题23.表单总结24.框架标签练习 
长河君 · 2026/10/3 12:36:59 · 阅读 1.2k 前端教程笔记 二
1.相对路径和绝对路径1.相对路径以当前位置作为参考点去建立路径2.绝对路径以根位置作为参考点去建立路径1.本地绝对路径E:/a/b/c/奥特曼.jpg(很少使用)2.网络绝对路径:http://www.atguigu.com/images/index_new/logo.png注意点使用本地绝对路径一旦更换设备路径处理起来比较麻烦所以很少使用。使用网络绝对路径确实方便但要注意若服务器开启了防盗链会造成图片引入失败2.图片常见格式1.jpg格式概述扩展名为.jpg或.jpeg是一种有损的压缩格式把肉眼不容易观察出来的细节丢弃了主要特点支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图使用场景对图片细节没有极高要求的场景例如网站的产品宣传图等一一该格式网页中很常见2.png 格式:概述扩展名为.png是一种无损的压缩格式能够更高质量的保存图片主要特点支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图使用场景①想让图片有透明背景②想更高质量的呈现图片例如公司logo图、重要配图等3.bmp 格式:概述扩展名为.bmp不进行压缩的一种格式在最大程度上保留图片更多的细节主要特点支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图使用场景对图片细节要求极高的场景例如一些大型游戏中的图片网页中很少使用4.gif格式概述扩展名为.gif仅支持256种颜色色彩呈现不是很完整主要特点支持的颜色较少、支持简单透明背景、支持动态图使用场景网页中的动态图片5.webp 格式概述扩展名为.webp谷歌推出的一种格式专门用来在网页中呈现图片主要特点具备上述几种格式的优点但兼容性不太好一旦使用务必要解决兼容性问题使用场景网页中的各种图片6.base64格式1.本质一串特殊的文本要通过浏览器打开传统看图应用通常无法打开2.原理把图片进行base64编码形成一串文本3.如何生成靠一些工具或网站4.如何使用直接作为img标签的src属性的值即可并且不受文件位置的影响5.使用场景一些较小的图片或者需要和网页一起加载的图片3.超链接 跳转页面主要作用从当前页面进行跳转–跳转其他网页– a href“https://www.jd.com/” target“_blank”去京东/ a–跳转本地网页–a href”./10_HTML排版标签.html”target”_self去看排版标签/ a注意点1.代码中的多个空格、多个回车都会被浏览器解析成一个空格2.虽然a是行内元素但a元素可以包裹除它自身外的任何元素4.超链接 跳转文件浏览器能直接打开的文件 a href“./resource/自拍.jpg”看自拍/ a a href“./resource/小电影.mp4”看小电影/ a a href“./resource/小姐姐.gif”看小姐姐/ a a href“./resource/如何一夜暴富.pdf”点我一夜暴富/ a浏览器不能打开的文件会自动触发下载 a href“./resource/内部资源.zip”内部资源/ a强制触发下载 a href./resource/小电.mp4download“电影片段.mp4”下载电影/ a注意1若浏览器无法打开文件则会引导用户下载注意2若想强制触发下载请使用download属性属性值即为下载文件的名称5.超链接 跳转锚点第一步设置锚点第一种方式a标签配合name属性 a name“test1”/ a第二种方式其他标签配合id属性 h2 id“test2”我是一个位置/ h2注意点1.具有href属性的a标签是超链接具有name属性的a标签是锚点2.name和id都是区分大小写的且id最好别是数字开头第二步跳转锚点跳转到test1锚点 a href“#test1”去test1锚点/ a跳到本页面顶部 a href“#”回到顶部/ a跳转到其他页面锚点 a href“demo.html#test1”去demo.html页面的test1锚点/ a刷新本页面 a href“”刷新本页面/ a执行一段js如果还不知道执行什么可以留空javascript:; a href“javascript:alert(1);”点我弹窗/ a6.超链接 唤起指定应用通过a标签可以唤起设备应用程序唤起设备拨号 a href“tel:10010”电话联系/ a唤起设备发送邮件 a href“mailto:10010qq.com”邮件联系/ a唤起设备发送短信 a href“sms:10086”短信联系/ a7.超文本的真正含义超文本是一种组织信息的方式通过超链接将不同空间的文字、图片、等各种信息组织在一起能从当前阅读的内容跳转到超链接所指向的内容8.列表1.有序列表概念有顺序或侧重顺序的列表2.无序列表概念无顺序或不侧重顺序的列表3.列表嵌套概念列表中的某项内容又包含一个列表4. 自定义列表1.概念所谓自定义列表就是一个包含术语名称以及术语描述的列表2.一个dl就是一个自定义列表一个dt就是一个术语名称一个dd就是术语描述9.表格 基本结构1.一个完整的表格由表格标题、表格头部、表格主体、表格脚注四部分组成2.表格涉及到的标签table表格caption表格标题thead表格头部tbody表格主体tfoot表格注脚tr每一行th、td每一个单元格备注表格头部中用th表格主体、表格脚注中用td10.表格 常用属性注意点 table 元素的border属性可以控制表格边框但border值的大小并不控制单元格边框的宽度1.只能控制表格最外侧边框的宽度2.给某个th或td设置了宽度之后他们所在的那一列的宽度就确定了3.给某个th或td设置了高度之后他们所在的那一行的高度就确定了11.表格 跨行与跨列1.rowspan指定要跨的行数。2.colspan指定要跨的列数。12.常用标签补充13.表单 基本结构示例代码14.表单 文本框和密码框常用表单控件1.文本输入框 input type“text”常用属性如下name属性数据的名称。value属性输入框的默认输入值。maxlength属性输入框最大可输入长度。2.密码输入框 input type“password”常用属性如下name属性数据的名称。value属性输入框的默认输入值一般不用无意义maxlength属性输入框最大可输入长15.表单 单选框和多选框1.单选框 input type“radio” name“sex” value“female”女 input type“radio” name“sex” value“male”男常用属性如下name属性数据的名称注意想要单选效果多个radio的name属性值要保持一致value属性提交的数据值checked属性让该单选按钮默认选中2.复选框 input type“checkbox” name“hobby” value“smoke”抽烟 input type“checkbox” name“hobby” value“drink”喝酒 input type“checkbox” name“hobby” value“perm”烫头常用属性如下name属性数据的名称value属性提交的数据值checked属性让该复选框默认选中16.表单 隐藏域1.隐藏域 input type“hidden” name“tag” value“1oe”用户不可见的一个输入区域作用是提交表单的时候携带一些固定的数据name属性指定数据的名称value属性指定的是真正提交的数据17.表单 提交与重置1.提交按钮input typesubmit”value“点我提交表单” button点我提交表单/ button注意1.button标签type属性的默认值是submit2.button不要指定name属性3.input标签编写的按钮使用value属性指定按钮文字重置按钮 input typeresetvalue“点我重置” button type“reset”点我重置/ button注意点1.button不要指定name属性2.input标签编写的按钮使用value属性指定按钮文字18.表单 普通按钮 input typebuttonvalue“普通按钮” button type“button”普通按钮/ button注意点普通按钮的type值为button若不写type值是submit会引起表单的提交19.表单 文本域和下拉框文本域 textarea namemsgrows22cols“3”我是文本域/ textarea常用属性如下1.rows属性指定默认显示的行数会影响文本域的高度2.co1s属性指定默认显示的列数会影响文本域的宽度3.不能编写type属性其他属性与普通文本输入框一致下拉框 select name“from” option value“黑”黑龙江/ option option value“辽”辽宁/ option option value“吉”吉林/ option option value“粤” selected广东/ option/ select常用属性及注意事项1.name属性指定数据的名称2.option标签设置value属性如果没有value属性提交的数据是option中间的文字如果设置了value属性提交的数据就是value的值3.option标签设置了selected属性表示默认选中20.表单 禁用表单控件给表单控件的标签设置 disabled 既可禁用表单控件input、textarea、button、select、option都可以设置disabled属性21.表单 label标签label 标签label标签可与表单控件相关联关联之后点击文字与之对应的表单控件就会获取焦点两种与label关联方式如下1.让label标签的for属性的值等于表单控件的id2.把表单控件套在label标签的里面22.表单 fieldset与legendfieldset可以为表单控件分组、legend标签是分组的标题23.表单总结24.框架标签练习