尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
前端教程笔记 二
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.框架标签练习
RELATED

相关推荐

STM32F207ZG控制双极步进电机:DRV8818PWPR驱动方案与实现

STM32F207ZG控制双极步进电机:DRV8818PWPR驱动方案与实现

做非标设备这些年,步进电机的驱动方案来来回回就那么几条路。拿到一个需要在工业设备上控制双极步进电机的需求时,我通常会直接分成两个问题:谁负责产生“走一步”的指令,谁负责把“走一步”变成绕组里可控的电流。这次的项目答案…

📅 2026/10/3 12:32:00
MKV44F128VLH16与DRV8818PWPR步进电机控制方案实战解析

MKV44F128VLH16与DRV8818PWPR步进电机控制方案实战解析

做运动控制和机器人项目的朋友,大概率都遇到过这套经典组合:一颗带 FPU 的 ARM 内核 MCU,加一颗集成 H 桥的专用步进驱动 IC,用它去推两相双极步进电机。今天想展开聊的正是这个组合里比较有代表性的一档——MKV44F128VLH16 负责算…

📅 2026/10/3 12:32:00
LLM是学会还是背下SWE-bench?上交大等提出薛定谔代码库

LLM是学会还是背下SWE-bench?上交大等提出薛定谔代码库

Schrdinger’s Code Repository: Have LLMs Learned SWE-bench or Memorized It? 作者:Silin Chen, Yufei Yang, Xiaodong Gu, Yuling Shi, Chengcheng Wan, Haibing Guan 核心发表机构:Shanghai Jiao Tong University、Xi’an Jiaotong University、Ea…

📅 2026/10/3 12:32:00
MORE NEWS

更多资讯

📰

基于S7-200 SMART与组态王的大棚温湿监控系统实践

两年前冬天,我蹲在河北一个简易大棚里,搓着冻红的双手盯着PLC程序里温度值从-2℃跳到-3℃,那趟项目最让我头疼的不是控制算法,而是上位机组态和现场逻辑脱节——组态王6.53里温度曲线已经画得像心电图,可PLC那边风机死…

📰

FIR数字滤波器实战指南:从线性相位原理到C语言定点实现

刚接了一个传感器采集项目,现场数据里叠着一层50Hz工频噪声,同事嚷嚷着上IIR滤波器,效果也确实立竿见影。可波形一放大,坏事了——信号“走样”严重,关键的上升沿全都软绵绵地歪了。换了一套FIR方案,设计只…

📰

C语言switch语句详解:从语法细节到实战案例的完整笔记

学C语言,分支语句是无论如何都绕不开的基础。if-else用得多,但很多人习惯了一个if-else接一个if-else之后,代码一多就开始头疼:嵌套太深、括号对不上、逻辑乱成粥。这时候switch语句就该上场了。我准备把C语言程序设计系列里这一讲…

📰

Spring Boot钢材销售管理系统:报价、合同与业务流程实战解析

市面上Java毕设和培训项目里,“管理系统”四个字几乎被做烂了,但看完标题里这几个关键词——钢材销售、报价、合同,我还是觉得这个选题值得单独聊一聊。原因很简单:它不是那种随便凑出来的CRUD增删改查,而是把一个真实…

📰

力比多:弗洛伊德精神分析的心理能量核心与临床实践指南

如果要给弗洛伊德那套庞杂的理论体系找一个最核心的支点,我会毫不犹豫地选“力比多”。这概念听起来很高深,说白了就是一套关于“心理能量怎么产生、流向哪里、又在哪儿卡住”的完整解释框架。做心理咨询这行,越往后越觉得,很多症…

📰

正念拆解情绪背后的限制性信念:四步实操指南

我有过很多次这样的体验:白天被人说了一句“你怎么这么玻璃心”,晚上躺在床上一遍遍回放那句话,越想越委屈,越想越睡不着。脑子里翻来覆去都是“是不是我太敏感了”“为什么别人都不在意,就我在意”。第二天顶着黑眼圈…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬