html css笔记

### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载，实现页面内容的更新。这种技术在早期的网页开发中较为常见，通常用于实现简单的内容轮播或者定时获取服务器上的新数据。 **实现方法**： 通过`<meta>`标签设置HTTP头部中的`refresh`属性来实现页面自动刷新。 ```html <meta http-equiv="refresh" content="20"> ``` 这里，`content`属性定义了刷新间隔的时间（单位为秒）。例如，上面的例子中页面将在20秒后自动刷新。 --- #### CSS3 阴影 `box-shadow` 的使用和技巧总结 `box-shadow` 属性允许开发者为元素添加一个或多个阴影效果。该属性非常灵活，可以创建出各种复杂的设计效果。 **基本语法**： ```css {box-shadow:[inset] x-offset y-offset blur-radius spread-radius color} ``` - **投影方式**：`inset`（可选）表示内阴影，不写则默认为外阴影。 - **X-offset**：阴影水平偏移量，正值表示阴影在对象右侧，负值表示阴影在对象左侧。 - **Y-offset**：阴影垂直偏移量，正值表示阴影在对象下方，负值表示阴影在对象上方。 - **模糊半径**：阴影的模糊程度，正值使阴影边缘更模糊，0表示无模糊效果。 - **扩展半径**：阴影的大小扩展或收缩，正值使阴影扩大，负值使阴影缩小。 - **颜色**：阴影的颜色，默认情况下浏览器可能显示不同颜色，建议指定具体颜色值。 **示例**： ```css .box { box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.5); /* 水平偏移 | 垂直偏移 | 模糊半径 | 扩展半径 | 颜色 */ } ``` **多层阴影**： 可以为一个元素添加多个`box-shadow`值，每个值之间用逗号分隔。 ```css .box { box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.5), -10px -10px 5px 0 rgba(255, 0, 0, 0.5); } ``` **兼容性**： 大多数现代浏览器（包括IE9及以上版本）都支持`box-shadow`属性。对于较旧的浏览器，可以考虑使用图片或其他技术替代。 --- #### 特殊字符 HTML中的特殊字符是指那些不能直接输入到文档中的字符，例如小于号 `<` 和大于号 `>`。为了正确地显示这些字符，需要使用特殊的实体代码。 **常见特殊字符**： - 小于号 `<`：`&lt;` - 大于号 `>`：`&gt;` - 与符号 `&`：`&amp;` - 单引号 `'`：`&apos;` - 双引号 `"`：`&quot;` **使用示例**： ```html <p>这是一个小于号: &lt; 和一个大于号: &gt;</p> ``` 通过使用这些实体代码，可以确保HTML文档的正确解析和显示。 通过掌握以上知识点，开发者可以更加灵活地控制网页布局和样式，并且能够处理一些常见的HTML和CSS问题。