-
HTML 中使用 JavaScript 的具体方式 一、JavaScript 脚本添加方式在 HTML 文件中使用 JavaScript 代码主要由以下三种方法： 内联内嵌外部引用1.1 内联 JavaScript内联 JavaScript 是将 JavaScript 代码直接写在 HTML 元素的事件属性中。例如，使用 onclick 属性来处理按钮点击事件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inline JavaScript Example</title> </head> <body> <button onclick="alert('Button clicked!')">Click me</button> </body> </html> 1.2 内嵌 JavaScript 内嵌 JavaScript 是将 JavaScript 代码放在 HTML 文件中的 <script> 标签内，通常放置在 <head> 或 <body> 中。 <script>允许出现网页的任意位置处 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Embedded JavaScript Example</title> </head> <body> <button onclick="showMessage()">Click me</button> <script> function showMessage() { alert('Button clicked!'); } </script> </body> </html> 1.3 外部引用 JavaScript 外部引用 JavaScript 是将 JavaScript 代码放在独立的 .js 文件中，然后通过 <script> 标签引用该文件。这种方法有助于分离内容和行为，提高代码的可维护性和重用性。 创建 script.js 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>External JavaScript Example</title> <script src="script.js"></script> </head> <body> <button onclick="showMessage()">Click me</button> </body> </html> 注意：<script src=""></script>该对标记中，是不允许出现任何内容的 -
html怎么设置字体样式 html是一种用于创建网页的标记语言。在html中，可以使用各种标记和属性来设置文本的样式，包括字体、字号、字体颜色和字体格式等。在HTML中，字体样式可以通过以下方式进行设置：使用HTML标记设置样式在HTML中，可以使用标记来设置不同字体样式。HTML中支持的字体标记包括：<h1> - <h6>：用于设置标题的字体大小。 <p>：用于定义段落的字体样式。 <b> 或 <strong>：用于设置文本加粗。 <i> 或 <em>：用于设置文本斜体。 <small>：用于设置小号字体。 <sup>：用于设置上标样式。 <sub>：用于设置下标样式。 <u>：用于设置文本下划线。例如，在以下代码中，我们使用标记来设置标题的字体样式：<!DOCTYPE html> <html> <head> <title>设置字体样式</title> </head> <body> <h1 style="font-family: Arial, sans-serif;">这是一个标题</h1> <p style="font-family: 'Times New Roman', serif;">这是一段正文</p> <b>这段文字加粗。</b> <i>这段文字斜体。</i> <small>这是一段小号文字。</small> <sup>10</sup> <sub>2</sub> <u>这段文字带下划线。</u> </body> </html>在上述代码中，我们使用style属性来设置字体样式。例如，我们使用style="font-family: Arial, sans-serif;"来设置标题的字体族为“Arial”或“sans-serif”。在CSS中设置样式除了使用HTML标记来设置字体样式外，也可以使用CSS样式表来设置字体样式。CSS样式表是一种用于指定web页面样式的语言。在CSS中，可以使用字体配置来设置各种字体样式，如字体族、字号、字体粗细和字体样式等。例如，在以下CSS代码中，我们使用font-family属性来设置字体样式：h1 { font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; font-style: italic; color: #333; text-align: center; }在上述代码中，我们使用了font-family、font-size、font-weight和font-style属性来设置字体族、字号、字体粗细和字体样式。此外，我们还可以使用color属性来设置字体颜色和text-align属性来设置文字对齐方式等。总结在HTML中，可以使用标记和CSS样式表来设置文本样式。通过合理运用各种标记和属性，可以轻松实现各种字体样式效果。在设置字体样式时，需要注意选择合适的字体族、字号和颜色，以及使用恰当的字体格式，以确保网页更具吸引力和可读性。 -
-
怎么在网页中嵌入其它网页 怎么在网页中嵌入其它网页，其实一行代码搞定！代码如下：<h1 style="box-sizing: border-box; margin: 0px; font-size: 36px; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;"> <span style="box-sizing: border-box; color: rgb(255, 221, 87);">烟雨江湖wiki</span> </h1> <p> <embed type="text/x-scriptlet" src="https://wiki.biligame.com/yanyujianghu/%E9%A6%96%E9%A0%81" width="960" height="480"/><br/> </p> <p> <br/> </p> <p> <br/> </p> -
如何用CSS实现背景图片自适应？ 用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。 例如： .picLUp{ background:url(http://img.w3cschool.cn/attachments/knowledge/201610/14632.png) no-repeat; width:100%; height:40%; background-size:100% 100%; } 这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。 但是，图片会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置 100% 参数，而是使用 cover 参数 background-size:cover 设置cover参数以后，背景图会按比例缩放填充满整个背景。 如果使用IE浏览器你会发现，上面的 background-size:100% 100%; 并没有起到作用，图片原本是怎样就怎样显示，比较大就只能显示一部分。 所以这时需要使用IE特有的滤镜 AlphaImageLoader 兼容性在IE5.5+以上版本的浏览器上都可以完美运行。 AlphaImageLoader 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) AlphaImageLoader 属性： enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false_ true: 默认值。滤镜激活。false: 滤镜被禁止。sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop: 剪切图片以适应对象尺寸。image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale: 缩放图片以适应对象的尺寸边界。src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。特性: Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。src: 可读写。字符串(String)。参阅 src 属性。说明: 在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。 PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容 hello{ width:10%; height:50%; position:absolute; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.w3cschool.cn/attachments/knowledge/201610/14632.png',sizingMethod='scale'); } 这样我们就可以完美兼容绝大多数的浏览器，实现用CSS让背景图片100%填充了。 -
css里怎样设置字体大小和字体颜色 在 CSS 中，可以通过以下属性设置字体大小和颜色：1. 设置字体大小（font-size）selector { font-size: 值; }常用单位：px：像素（绝对单位，如 16px）em：相对单位（基于父元素字体大小，如 1.5em）rem：相对单位（基于根元素 <html> 的字体大小，如 1.2rem）%：百分比（如 120%）vw/vh：视窗宽度/高度的百分比（如 2vw）示例：p { font-size: 16px; /* 固定像素 */ } h1 { font-size: 2em; /* 父元素字体大小的2倍 */ } body { font-size: 1.2rem; /* 根元素字体大小的1.2倍 */ }2. 设置字体颜色（color）selector { color: 颜色值; }颜色值的写法：颜色名称：如 red, blue, green十六进制：如 #ff0000（红色），简写 #f00RGB/RGBA：如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)（带透明度）HSL/HSLA：如 hsl(0, 100%, 50%)（色相、饱和度、亮度）示例：h1 { color: #333; /* 深灰色 */ } .highlight { color: rgb(255, 0, 0); /* 红色 */ } .transparent-text { color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */ }完整示例<style> .title { font-size: 24px; color: #ff5722; /* 橙色 */ } .subtitle { font-size: 1.5rem; color: hsl(210, 100%, 50%); /* 亮蓝色 */ } .small-text { font-size: 0.8em; color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */ } </style> <h1 class="title">这是标题</h1> <p class="subtitle">这是副标题</p> <p class="small-text">这是小号文字</p>注意事项：响应式设计：建议优先使用 rem 或 em 单位，便于整体调整字体大小。可访问性：确保颜色对比度足够（如深色文字配浅色背景）。继承性：color 属性会被子元素继承，但 font-size 的具体表现取决于使用的单位（如 em 基于父元素，rem 基于根元素）。如果需要同时设置字体家族，可以结合 font-family 使用：body { font-family: "Arial", sans-serif; font-size: 1rem; color: #333; } -
HTML+CSS+JS实现雪花飘扬 使用HTML+CSS+JS如何实现下雪特效？下面本篇文章给大家分享一个HTML+CSS+JS实现雪花飘扬的示例，希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪，今天我给大家带来一个小Demo，模拟了下雪场景，首先让我们看一下运行效果 可以点击看看在线运行：http://haiyong.site/xiaxue 首先看看项目结构，一张雪花图片，一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了，或者可以直接用图片地址：https://img.php.cn/upload/article/000/000/024/61dea8bfbe598211.png 开局一张图，内容全靠JS。 HTML代码 下面这是 html 里的内容，没啥东西 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>海拥| 雪一片一片</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <meta name="keywords" content="雪一片一片" /> <meta name="description" content="工具 | 雪一片一片；立志打造一个拥有100个小游戏的摸鱼网站。Made By Haiyong，技术支持——海拥" /> <meta name="author" content="海拥(http://haiyong.site/moyu)" /> <meta name="copyright" content="海拥(http://haiyong.site/moyu)" /> <link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" sizes="192x192" /> <style type="text/css"> body{ background-color: #000000; margin: 0;/* 去掉自带的外边距 */ } img{ position: absolute; } </style> </head> <body> <script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script> </body></html> JS代码： 首先开启定时器添加雪花图片，这里的<img src='images/snow.png'>可以改成<img src='http://haiyong.site/wp-content/uploads/2021/12/snow.png' setInterval(function(){var img = $("<img src='images/snow.png'>"); $("body").append(img); 这里设置雪花的尺寸为10-20px,下面的公式即表示(0-10 + 10)px var size = parseInt(Math.random()*11)+10; img.css("width",size+"px"); 得到屏幕宽度 var w = $(window).width(); 取值范围应该是0-屏幕宽度-雪花宽度 var left =parseInt(Math.random()*(w-size)); 把得到的随机1eft给到图片 img.css("left",left+"px"); 添加雪花移动的动画，得到雪花移动的距离 = 屏幕高度-雪花尺寸 var top = $(window).height()-size; 下面注释中的代码是用来清除缓存的，可加可不加。 img.animate({"top":top+"px"},size*100) /* .fadeOut(1000,function(){ //当动画完成时执行此代码，清除缓存 img.remove(); //console.log($("img").length); }); */ },10) 取消注释就会看到落下的雪会消失，如下图所示 喜欢看积雪就可以把它注释掉，预览效果像下面这样 到这里我们要实现的效果就完成了，如果运行时间过长可能会导致内存占用过多造成卡顿现象，可以将html代码中的最后一段注释里的内容取消注释，这样到下面的积雪就会慢慢淡出并且remove删除了，不过我觉得积雪也挺好看的，就没让它融化，像下面这样：