diff --git a/imgs/9-29/929-2.PNG b/imgs/9-29/929-2.PNG new file mode 100644 index 0000000000000000000000000000000000000000..3cf56a17a937263205ed3ce40ecf255633f85c70 Binary files /dev/null and b/imgs/9-29/929-2.PNG differ diff --git a/imgs/9-29/929-3.PNG b/imgs/9-29/929-3.PNG new file mode 100644 index 0000000000000000000000000000000000000000..d08ef93f2ef2c5dcf6df24507ee92988e468babb Binary files /dev/null and b/imgs/9-29/929-3.PNG differ diff --git a/imgs/9-29/929.PNG b/imgs/9-29/929.PNG new file mode 100644 index 0000000000000000000000000000000000000000..bb14afd2595d73c88c135dd0762cb618f45684b9 Binary files /dev/null and b/imgs/9-29/929.PNG differ diff --git "a/imgs/9-29/929\344\273\243\347\240\201.PNG" "b/imgs/9-29/929\344\273\243\347\240\201.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..fb04c268f91f71f4b5d385ea7e56e7b68657a3b6 Binary files /dev/null and "b/imgs/9-29/929\344\273\243\347\240\201.PNG" differ diff --git a/imgs/9-30/Video_20240930113019.wmv b/imgs/9-30/Video_20240930113019.wmv new file mode 100644 index 0000000000000000000000000000000000000000..60c27331bc79b85469c111f83b40c8395377f2fd Binary files /dev/null and b/imgs/9-30/Video_20240930113019.wmv differ diff --git "a/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232.PNG" "b/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..1cfd52be75207d1cf83ad25b42f701a1770dc382 Binary files /dev/null and "b/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232.PNG" differ diff --git "a/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232css\344\273\243\347\240\201.PNG" "b/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232css\344\273\243\347\240\201.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..c3dae7c38ff3dd12b9a0cc2821db15b85b5c02d2 Binary files /dev/null and "b/imgs/9-30/\350\277\233\351\230\266\344\275\234\344\270\232css\344\273\243\347\240\201.PNG" differ diff --git a/imgs/list.PNG b/imgs/list.PNG new file mode 100644 index 0000000000000000000000000000000000000000..8929c6ec9a06025914dc7e03dfb5966058020e10 Binary files /dev/null and b/imgs/list.PNG differ diff --git "a/imgs/\350\203\214\346\231\257\345\233\276.jpg" "b/imgs/\350\203\214\346\231\257\345\233\276.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..5fd039cf08cf9d367e419e8f991af7b613a34621 Binary files /dev/null and "b/imgs/\350\203\214\346\231\257\345\233\276.jpg" differ diff --git "a/\345\220\264\344\275\263\346\225\217/20240904\347\254\254\344\270\200\346\254\241\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\346\225\217/20240904\347\254\254\344\270\200\346\254\241\350\257\276\345\240\202\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..de6684ddb161e6efb34bf0290e1350f2e1f9328e --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240904\347\254\254\344\270\200\346\254\241\350\257\276\345\240\202\347\254\224\350\256\260.md" @@ -0,0 +1,13 @@ +# git流程 +先从远程班级仓库`fork`到一个远程个人仓库再`clone`到本地仓库。由本地仓库修改完毕后`push`到远程个人仓库，最后`pr(pull request)`到远程本地仓库 +>VS code中以md为后缀名的文件显示图片 +>![图片不显示时的提示文字](图片相对路径) +# 一些技巧 +1. #几级标题 +2. *一个为斜体，两个为粗体，三个为斜粗体 +3. >为引用 +4. `为字体加上阴影背景（单个字），三个为段落 +5. |:-左对齐|:-:居中|-:右对齐| +6. 有序符号：1或者1） +7. 无序符号：+ - * + diff --git "a/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\220\216\344\275\234\344\270\232.md" "b/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\220\216\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..7dfb11f2e1ff11ac5a1ac803dbba4abedbc2e484 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\220\216\344\275\234\344\270\232.md" @@ -0,0 +1,11 @@ +# 主流浏览器中的渲染引擎和js引擎 + +| 浏览器名称 | 渲染引擎 | js引擎 | +| :----------------- | ---------------- | --------------------------- | +| **IE 浏览器** | Trident 渲染引擎 | Chakra JavaScript 引擎 | +| **Firefox 浏览器** | Gecko 渲染引擎 | TraceMonkey JavaScript 引擎 | +| **Safari 浏览器** | Webkit 渲染引擎 | Nitro JavaScript 引擎 | +| **Chrome 浏览器** | Blink 渲染引擎 | V8 JavaScript 引擎 | +| Opera浏览器 | | CaraKan | +| Safari浏览器 | Webkit/Webkit2 | JSCore/Nitro(4+) | + diff --git "a/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\240\202\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..746c2edd91edcf0a58235dde1e5b056593ad843d --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240909\350\257\276\345\240\202\347\254\224\350\256\260.md" @@ -0,0 +1,23 @@ +# ![image-20240909110718247](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20240909110718247.png) + +# HTML的专有名词 + +1.网页：由各种标记组成的一个页面就叫网页 + +2.主页（首页）：一个网站的起始页面或者导航页面 + +3.标记：比如

称为开始标记，

称为结束标记，也叫标签，每个标签都规定好了特殊的含义 + +4.元素：比如

内容

称为元素 + +5.属性：给每一个标签的辅助信息 + +6.XHTML：符合xml语法标准的HTML + +7.DHTML:dynamic，动态的，是js+css+html合起来的页面 + +8.HTTP：超文本传输协议，用来规定客户端浏览器和服务器交互时数据的一个格式 + +9.SMTP:邮件传输协议 + +10.FTP:文件传输协议 \ No newline at end of file diff --git "a/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\220\216\344\275\234\344\270\232.html" "b/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\220\216\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..9890c71f0f5c66bba1ea3e10410cd0c1478e6a58 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\220\216\344\275\234\344\270\232.html" @@ -0,0 +1,30 @@ + + + + + + Document + + + +

+ 1. 如何给p标签中的内容居中
+A.使用p标签创建一行文字，给p标签添加一个class属性，设置为test。
+B.在css标签内，通过class定义p标签的样式，设置它的高度为50px，宽度为200px，背景颜色为灰色。
+C.在css标签内，再使用line-height属性设置p标签的行高为50（与高度相同），便可以实现内容居中
+ + +

+ +

软件工程学院

+

吴佳敏

+
+

舍友是程梦

+ + \ No newline at end of file diff --git "a/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\240\202\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..75e8f0ef0f37a96437455223acb5cda77226d196 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240911\350\257\276\345\240\202\347\254\224\350\256\260.md" @@ -0,0 +1,53 @@ +# git笔记 + +1.git log---查看有几个版本 + +2.git push -f---强制推送 + +3.git status--查看状态 + +4.git reset --hard (哈希值前4位)---回到某一个版本 + +# 初识HTML + +1. +上面这个标签的意思是说，3秒之后，自动跳转到百度页面，如果后面并没有网址，则表示3秒之后自动刷新一次 + +2.编写HTML的规范： + +1. 所有标记元素都要正确的嵌套，不能交叉嵌套，正确举例：

+2. 所有标记必须小写 +3. 所有标签必须闭合 + - 双标签： + - 单标签：
建议写成
+4. 所有的属性值必须加引号 +5. 所有的属性必须有值 +6. XHTML文档开头必须要有dtd文档类型定义 + +3.HTML的基本语法特性： + +- html对换行不敏感，对tab不敏感 +- 会折叠空白符 + +4.排版标签： + +- h1 + +- p + +- hr + +- br + +- div + +- span + +- center + + +- pre + + +- 由于空白的折叠性，因此有时想要保留大量空格时，可以写在预定义标签pre中 + diff --git "a/\345\220\264\344\275\263\346\225\217/20240913\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\346\225\217/20240913\350\257\276\345\240\202\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..697c7c267783dc8ca54221f4339e50f232853724 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240913\350\257\276\345\240\202\347\254\224\350\256\260.md" @@ -0,0 +1,34 @@ +# 特殊字符 + +-   +- < ＜ +- > ＞ +- © 版权@ +- &trade 商标 +- & 符号& +- " 双引号 +- &apos 单引号 + +想在页面上展示出某标签，例如p标签，可以写成<；p>；标签 + +2. <；u>；标签---下划线 + +- <；s>；标签或者<；del>；标签---被划掉的，在css样式中为line-through属性值 +- <；i>；标签或者<；em>；标签---斜体 + +3. Windows：有很多字体，只支持有限的几种加粗效果，通常是400,600,900 + +4. a标签中的target属性的blank值可以全新刷新一次并跳转到新页面 + +5. 锚链接 + + 1.<a name="">内容<a> + + 2.<a href="#名"></a> + +6. 图片标签，<img src="图片的url" alt="图片不显示时，展示的文字" title="鼠标悬停时，展示的信息"/> + + + + + diff --git "a/\345\220\264\344\275\263\346\225\217/20240914\350\257\276\345\240\202\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\346\225\217/20240914\350\257\276\345\240\202\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..7d2070eab5fdc4929fc42e8f8bc9e51d5d8d53f0 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240914\350\257\276\345\240\202\347\254\224\350\256\260.md" @@ -0,0 +1,7 @@ +1.有序列表<ul><li> + +无序列表<ol><li> + +定义列表<dl><dd> + +2.表格的<thead><tbody><tfoot>,如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead，tbody，tfoot的顺序显示内容 \ No newline at end of file diff --git "a/\345\220\264\344\275\263\346\225\217/20240918\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\346\225\217/20240918\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..273a247c78cf6380e872b7601159b42bec426c23 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240918\347\254\224\350\256\260.md" @@ -0,0 +1,64 @@ +# 表格`` + +一个表格`
`是由每行``组成的，每行是由每个单元格`
`组成的。 所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。 在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。 **``的属性：** + +- `border`：边框。像素为单位。 +- `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条） +- `width`：宽度。像素为单位。 +- `height`：高度。像素为单位。 +- `bordercolor`：表格的边框颜色。 +- `align`：**表格**的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签`
`进行设置） +- `cellpadding`：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 **注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。**如果设置属性`dir="rtl"`，那就指的是内容到右边那条线的距离。 +- `cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0 +- `bgcolor="#99cc66"`：表格的背景颜色。 +- `background="路径src/..."`：背景图片。 背景图片的优先级大于背景颜色。 +- `bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色 +- `bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置3D的效果。 +- `dir`：公有属性，单元格内容的排列方式(direction)。 可以 取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left） + +### 单元格的合并 + +单元格的属性： + +- `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。 +- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。 + +# 表单`
` + +表单标签用``表示**，用于与服务器的交互。**表单就是收集用户信息的，就是让用户填写的、选择的。 + +**属性：** + +- `name`：表单的名称，用于JS来操作或控制表单时使用； +- `id`：表单的名称，用于JS来操作或控制表单时使用； +- `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php” +- `method`：表单数据的提交方式，一般取值：get(默认)和post + +注意：**表单和表格嵌套时，是在``标记中套``标记。** + +### ``：输入标签（文本框） + +用于接收用户输入。 + +``` + +``` + +**属性：** + +- **`type="属性值"`**：文本类型。属性值可以是： + - `text`（默认） + - `password`：密码类型 + - `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 + - `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。 + - `checked`：将单选按钮或多选按钮默认处于选中状态。当``标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。属性值也是checked，可以省略。 + - `hidden`：隐藏框，在表单中包含不希望用户看见的信息 + - `button`：普通按钮，结合js代码进行使用。 + - `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。 + - `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值 + - `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 + - `file`：文件选择框。 提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。 +- **`value="内容"`**：文本框里的默认内容（已经被填好了的） +- `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。 注意**size属性值的单位不是像素哦**。 +- `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 +- `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。 \ No newline at end of file diff --git "a/\345\220\264\344\275\263\346\225\217/20240923\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\346\225\217/20240923\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..fc7cbb33c410fca1c9fff36fcd61becb639e6870 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240923\347\254\224\350\256\260.md" @@ -0,0 +1,77 @@ +# html5 + +## 拖拽 + +1.设置draggable=“true”属性之后，元素是可以拖拽的，但是拖拽之后要做的事情就涉及到事件监听（js技术） + +2.拖拽元素的事件监听：（应用于拖拽元素） + +- ondragstart --当拖拽开始时调用 +- ondragleave --当鼠标离开拖拽元素时调用 +- ondragend --当拖拽结束时调用 +- ondrag --整个过程中都会调用 + + + + + +## 全屏 + +开启/关闭全屏显示 + +requestFullscreen()---让元素开启全屏显示 + +cancelFullscreen()---让元素关闭全屏显示 + +## web存储 + +### h5中有两种存储方式 + +1.window.sessionStorage会话存储 + +- 保存在内存中 +- 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁 +- 在同一个窗口下数据可以共享 + +2.window.localStorage本地存储 + +- 有可能保存在浏览器内存中，也可能保存在硬盘里 +- 永久生效，除非手动删除 +- 可以多窗口共享 + +### web存储的特性 + +1. 设置、读取方便 + +2. 容量较大，sessionStorage约5M，localStorage约20M + +3. 只能存储字符串，可以将对象JSON.stringify()编码后存储 + + # css + + ## 绝对单位 + + 1 in=2.54cm=25.4mm=72pt=6pc + + 各种单位的含义： + + - in：英寸 + - cm：厘米 + - mm：毫米 + - pt：点points（1点=1/72英寸） + - pc：皮卡picas(1皮卡=12点) + + ## 相对单位 + + px像素 em：印刷单位相当于12个点 %：百分比，相对于周围文字的大小 + + ## 如何让单行文本垂直居中 + + 小技巧：如果一段文本只有一行，设置行高=盒子高，就可以保证文本垂直居中 + + 记住：行高指的是一行的高度，并不是文字的高 + + + + + diff --git "a/\345\220\264\344\275\263\346\225\217/20240925\350\257\276\345\240\202\347\254\224\350\256\260---\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\345\220\264\344\275\263\346\225\217/20240925\350\257\276\345\240\202\347\254\224\350\256\260---\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..e594adc51271b496561c7d5df58e6727a80c22af --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240925\350\257\276\345\240\202\347\254\224\350\256\260---\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" @@ -0,0 +1,67 @@ +# 字号、行高、字体三大属性 + +1. 字号：font-size +2. 行高：line-height +3. 字体：font-family +4. 是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family） + +​ 格式：font: 加粗 字号/行高/ 字体 + +**上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。** + +5. 字体属性的说明： + + （1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置： + + ``` + font-family: "华文彩云"; + ``` + + 上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。 + + （2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个） + + ``` + font-family: "微软雅黑","宋体"; + ``` + + 上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。 + + （3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体： + + ``` + font-family: "Times New Roman","微软雅黑","宋体"; + ``` + + 上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体 + + （4）**行高可以用百分比**，表示字号的百分之多少。 + +6. 在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。 + + # 文本属性 + + - `letter-spacing: 0.5cm ;` 单个字母之间的间距 + + - `word-spacing: 1cm;` 单词之间的间距 + + - `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线 + + - `color:red;` 字体颜色 + + - `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（**在当前容器的中间**）、justify + + - `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写） + + - direction 设置文本方向 ltr /rtl + + - text-indent 缩进元素中文本的首行 + +[代码效果图](http://sk7rge758.hd-bkt.clouddn.com/1.png) +[代码效果图（变化）](http://sk7rge758.hd-bkt.clouddn.com/2.png) +[代码](http://sk7rge758.hd-bkt.clouddn.com/3.png) + + + + + \ No newline at end of file diff --git "a/\345\220\264\344\275\263\346\225\217/20240929\350\257\276\345\240\202\347\254\224\350\256\260--\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\345\220\264\344\275\263\346\225\217/20240929\350\257\276\345\240\202\347\254\224\350\256\260--\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..8d9d4ac72d107d3909c4c7380db04cbb78f1a9e9 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20240929\350\257\276\345\240\202\347\254\224\350\256\260--\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\350\203\214\346\231\257\345\261\236\346\200\247.md" @@ -0,0 +1,165 @@ +# 文本属性 +## 列表属性 +1.简写属性叫做`list-style`，它的作用是：将上面的多个属性写在一个声明中 +![](../imgs/list.PNG) + +## overflow属性：超出范围的内容要怎么处理 + +`overflow`属性的属性值可以是： + +- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。 +- `hidden`：不显示超过对象尺寸的内容。 +- `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。 +- `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。 + +## 滤镜 + +这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜： + +``` + + + + + + + + +
+ + +``` + +## 渐变：background-image + +渐变分为： + +- 线性渐变：沿着某条直线朝一个方向产生渐变效果。 +- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。 +- 重复渐变。 + +### 线性渐变 + +格式： + +``` + background-image: linear-gradient(方向, 起始颜色, 终止颜色); + + background-image: linear-gradient(to right, yellow, green); +``` + +参数解释： + +- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。 + +### 径向渐变 + +格式： + +``` + background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); + + background-image: radial-gradient(100px at center,yellow ,green); +``` + +解释：围绕中心点做渐变，半径是100px，从黄色到绿色做渐变。 + +中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。 + +当然，还有其他的各种参数 + +## clip-path：裁剪出元素的部分区域做展示 + +`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 \ No newline at end of file diff --git "a/\345\220\264\344\275\263\346\225\217/20241009\350\257\276\345\240\202\347\254\224\350\256\260--css\351\200\211\346\213\251\345\231\250.md" "b/\345\220\264\344\275\263\346\225\217/20241009\350\257\276\345\240\202\347\254\224\350\256\260--css\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..680ef37e60983b6371e1db59a30a97596cbe65cb --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/20241009\350\257\276\345\240\202\347\254\224\350\256\260--css\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,47 @@ +# 知识点 +## css语法 +语法格式：（其实就是键值对） +选择器{ 属性名: 属性值; 属性名: 属性值; } ++ 选择器代表页面上的某类元素，选择器后一定是大括号。 ++ 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。 ++ 冒号和属性值之间可以留一个空格（编程习惯的经验）。 ++ 如果一个属性有多个值的话，那么多个值用空格隔开。 +## css的书写方式 +css的书写方式有三种： +1. 行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。 +2. 内嵌样式（内联样式）：在页面的 head 标签里里采用 +``` + +设置无序列表`
    `中的最后一个`
  • `为红色： + +``` +ul li:last-child { + color: blue; +} +``` + +### 3.下一个兄弟选择器 + +`+`表示选择下一个兄弟 + +``` + +``` + +上方的选择器意思是：选择的是 h3 元素后面**紧挨着的第一个兄弟** + +# 伪类 + +1. 同一个标签，根据其不同的状态，具有不同的样式这种叫做伪类 + +## 静态伪类选择器、动态伪类选择器 + +伪类选择器分为两种。 + +（1）**静态伪类**：只能用于**超链接**的样式。如下： + +- `:link` 超链接点击之前 +- `:visited` 链接被访问过之后 + +PS：以上两种样式，只能用于超链接。 + +（2）**动态伪类**：针对**所有标签**都适用的样式。如下： + +- `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 +- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点） + +## 超链接a标签 + +### 超链接的四种状态 + +a标签有4种伪类（即对应四种状态），要求背诵。如下： + +- `:link` “链接”：超链接点击之前 + +- `:visited` “访问过的”：链接被访问过之后 + +- `:hover` “悬停”：鼠标放到标签上的时候 + +- `:active` “激活”： 鼠标点击标签，但是不松手时。 + +- 记住，在css中，这四种状态**必须按照固定的顺序写**： + + > a:link 、a:visited 、a:hover 、a:active，否则不生效 + +### 超链接的美化 + +问：既然`a{}`定义了超链的属性，和`a:link{}`定义了超链点击之前的属性，那这两个有啥区别呢？ + +答： + +**`a{}`和`a:link{}`的区别：** + +- `a{}`定义的样式针对所有的超链接(包括锚点) +- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点） + +锚记/锚点是网页制作中超级链接的一种，又叫命名锚记。它就像定位器一样是一种页面内的超级链接，可以迅速跳到某个节点 + +# 作业 +![前10题](http://sk7rge758.hd-bkt.clouddn.com/%E6%8D%95%E8%8E%B7.PNG) diff --git "a/\345\220\264\344\275\263\346\225\217/9.20\350\257\276\345\240\202\347\254\224\350\256\260 \347\231\273\345\275\225\351\241\265\351\235\242\345\210\266\344\275\234.md" "b/\345\220\264\344\275\263\346\225\217/9.20\350\257\276\345\240\202\347\254\224\350\256\260 \347\231\273\345\275\225\351\241\265\351\235\242\345\210\266\344\275\234.md" new file mode 100644 index 0000000000000000000000000000000000000000..edc80da5abe5f320ffa12acc1627f428debdb089 --- /dev/null +++ "b/\345\220\264\344\275\263\346\225\217/9.20\350\257\276\345\240\202\347\254\224\350\256\260 \347\231\273\345\275\225\351\241\265\351\235\242\345\210\266\344\275\234.md" @@ -0,0 +1,105 @@ +# 表单 +[登录页面](http://sk7rge758.hd-bkt.clouddn.com/%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.png) + +### 1. H5中新增的表单类型 + +- `email` 只能输入email格式。自动带有验证功能。 + +- `tel` 手机号码。 + +- `url` 只能输入url格式。 + +- `number` 只能输入数字。 + +- `search` 搜索框 + +- `range` 滑动条 + +- `color` 拾色器 + +- `time` 时间 + +- `date` 日期 + +- `datetime` 时间日期 + +- `month` 月份 + +- `week` 星期 + + [^值得注意的是：]: `
    ` 标签将表单里的内容进行打包，代表一组；而` `标签的则是 fieldset 里的元素定义标题 + + ### 2.表单属性 + + 1.<datalist>数据列表： + + ``` + + + + + + + ``` + + 上方代码中，input里的list属性和 datalist 进行了绑定。 + + 2、``元素： + + keygen 元素的作用是提供一种验证用户的可靠方法。 + + keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。 + + 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 + + 3、``元素：度量器 + + - low：低于该值后警告 + - high：高于该值后警告 + - value：当前值 + - max：最大值 + - min：最小值。 + + 举例： + + ``` + + ``` + + # 多媒体标签 + + ### 音频 + + HTML5通过`