HTML(四) 样式,阿里开发7年大牛

本文讨论了JavaScript内嵌和外联脚本的使用,强调了正确闭合标签的重要性,并介绍了async和defer属性在异步加载中的作用。文章还探讨了如何通过window.onresize实现响应式设计,以及如何用CSS媒体查询来动态调整样式,以提高性能和用户体验。
摘要由CSDN通过智能技术生成

内嵌的使用一定要注意闭合标签:

');   

/* 这种写法是错误的,因为这一行包含了一个标签,浏览器会默认认为这是一个闭合标签,正确写法

  • 应该是document.write(‘

*/

第三种:外联脚本

export function test(){

}

export function greet(){

}

我们把type类型为javascript的称为classic scripts,把type类型为module成为module scripts

脚本类型(通常不写)                              跨域文本处理                执行脚本方式

脚本引用地址                             编码方式(可以不写)

脚本类型                 跨域文本处理          执行脚本方式

脚本引用地址

async/defer执行方式

这两个属性都是布尔属性,要么true,要么false,

  • async:立即执行

  • defer:HTML文件解析完才可以执行

假如同时存在,优先async规则

课后练习

使用JS的方式,实现响应式

提示:window.onresize,window.clientWidth,element.className

方法一:

解释:

通过window.onresize方法实时判断窗口是否有改变,然后通过document.body.clientWidth方法获得窗口的宽度,根据不同的宽度调整样式;

但是这里遇到几个问题:

(1)onresize多次触发的问题,当改变窗口大小时,onresize被触发了多次;

(2)这个调整比较麻烦,假如元素过多时,调整很麻烦;

因此,修改一下要求,改成:还是响应式,但是根据窗口的大小,动态创建css文件引入,已达到响应的效果

想了一下,要达到css的那个media的效果,分为几步

(1)实时获得窗口宽度

(2)根据宽度修改css文件的引用,变相达到了style中自适应的效果

脚本学习
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值