diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/20240911.html" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/20240911.html" new file mode 100644 index 0000000000000000000000000000000000000000..77222e688e018a12ae84eeef355a2ef78e4e88ef --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/20240911.html" @@ -0,0 +1,26 @@ + + + + + + Document + + + +
+
我是一名大二的软件工程学子
+ + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.13.html" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.13.html" new file mode 100644 index 0000000000000000000000000000000000000000..4ee891163debb92a416265079e6ebf0cb4875825 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.13.html" @@ -0,0 +1,18 @@ + + + + + + 图片 + + + + + 山河 + + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.14.html" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.14.html" new file mode 100644 index 0000000000000000000000000000000000000000..a717fc13552b7af320b2f23f8001306037c655ce --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.14.html" @@ -0,0 +1,87 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/R-C.jfif" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/R-C.jfif" new file mode 100644 index 0000000000000000000000000000000000000000..396c4de867890dce36da6561d967989f5361becc Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/R-C.jfif" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/\346\265\217\350\247\210\345\231\250.md" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/\346\265\217\350\247\210\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..bff99416305fe1b1067e043d9e6c49a0729392a0 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/\346\265\217\350\247\210\345\231\250.md" @@ -0,0 +1,10 @@ +#国内外常用的浏览器 +|浏览器| 渲染引擎| JS引擎| +|:- |:-: | -:| +|Google Chrome谷歌 |Chromium| v8| +|Microsoft Edge| Chromium| Charkra| +|Mozilla Firefox火狐|Gecko| SpiderMonkey| +|Safari苹果| WebKit| JAvaScriptCore| +|Opera 挪威| Presto| Carakan| +|QQ BrowserQQ浏览器 | WebKit| JavaScript| +|阿里巴巴UCBrowser| Blink| U3引擎 | \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/2 024 0911\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/2 024 0911\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..4b10a96343a7f65f69681f8a374a59814ff409ec --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/2 024 0911\347\254\224\350\256\260.md" @@ -0,0 +1,31 @@ +# 回到某一时刻并3强推并不会影响他人文件 + 1. git reset --hard xxxx(前四位) 回退 +2. git push -f 强推 +3. git reflog 查看推前推后两个时刻 + # 排版标签 + ```js +

标题标签 +

段落标签 +


水平线标签 +
换行标签 +
占一行 + 不换行 +
居中 +
 预定义/预格式化文本标签(可以使空格表现出来)
+```
+```js
+
+1. 
标签 + (1)div标签:可以把标签中的内容分割为独立的区块。必须单独占据一行。 + + (2)span标签:和div的作用一致,但不换行。 + + div和span的区别 +
唯一的区别在于:是不换行的,而
是换行的。 + 居中
+ 2.
+

+

+
+ + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240909-\350\256\244\350\257\206web\357\274\214\346\265\217\350\247\210\345\231\250.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240909-\350\256\244\350\257\206web\357\274\214\346\265\217\350\247\210\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..1b800fec10dc700a6eebc6fe93331735a710b5c8 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240909-\350\256\244\350\257\206web\357\274\214\346\265\217\350\247\210\345\231\250.md" @@ -0,0 +1,16 @@ +#Web +认识web +1.web是全球光域网,也称为万维网 +2.网页:网页是构成网站的基本元素 +3.浏览器:网页运行的平台 + +##web的标准 +1.常见的浏览器 * 谷歌 Chrome * Safari * 火狐(Firefox) * IE * Edge * Opera * 组成 * 渲染引擎(浏览器内核) +2。决定了浏览器如何显示网页的内容以及页面的格式信息 * 渲染引擎是浏览器兼容性问题出现的根本原因 +3.作用:读取网页内容,计算网页的显示方式并显示在页面上 * JS引擎 * 用来解析网页中的JavaScript代码,对其处理后再运行 * HTML * 专有名词 * 网页 :由各种标记组成的一个页面就叫网页。 +4.主页(首页) : 一个网站的起始页面或者导航页面。 * 标记: 也叫标签。每个标签都规定好了特殊的含义。 + +###Web前段分三层: +1.HTML:超文本标记语言,结构 +2.CSS:层叠样式表,样式 +3.JS:JavaScript,行为 \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240913-\350\266\205\351\223\276\346\216\245\357\274\214\345\255\227\344\275\223.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240913-\350\266\205\351\223\276\346\216\245\357\274\214\345\255\227\344\275\223.md" new file mode 100644 index 0000000000000000000000000000000000000000..724301818a5e39de39055fbf16ab161767a8447c --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240913-\350\266\205\351\223\276\346\216\245\357\274\214\345\255\227\344\275\223.md" @@ -0,0 +1,65 @@ +# 特殊字符 + +|特殊字符| 描述| 字符的代码| +|:- |:-: | -:| +| |空格符 |nbsp;| +|< |小于号 |lt;| +|> |大于号 |gt;| +|& |和号 |amp;| +|¥ |人民币 | yen;| +|© |版权 | copy;| +|® |注册商标 | reg;| +|° |摄氏度 | deg;| +|± |正负号 | plusmn;| +|× |乘号 |times;| +|÷ |除号 |divide;| +|² |平方2(上标2) |sup2;| +|³ |立方3(上标3) |sup3;| + + + +# 上标 下标 + +# 外部链接:链接到外部文件 + 1. 点击进入另外一个文件 +2. 点我点我 +# 锚链接 +## 首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字。如下: + +1. 回到顶部 +# 3、邮件链接 +1. 点击进入我的邮箱 +# 超链接的属性 +1. href:目标URL +2. title:悬停文本。 +3. name:主要用于设置一个锚点的名称。 +4. target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值: + 1. _self:在同一个网页中显示(默认值) + 2. _blank:在新的窗口中打开。 + 3. _parent:在父窗口中显示 + 4. _top:在顶级窗口中显示 + + # img标签 + 语法: + + # 插入的图片类型 +* 能够插入的图片类型是:jpg(jpeg)、gif、png、bmp等。 +* 不能往网页中插入的图片格式是:psd、ai等。 + +## img标签的src属性 +* 指图片的路径 在写图片的路径时,有两种写法:相对路径、绝对路径 + +## 标签的width、height 属性 +* width:图像的宽度。 +* height:图像的高度。 重要提示:如果要想保证图片等比例缩放,请只设置width和height中其中一个。 +# Alt 属性 +* 当图片 src 不可用的时候,显示文字。这样做,至少能让用户知道,这个图片大概是什么内容。 + +* title 属性 ++ title:提示性文本。鼠标悬停时出现的文本。 + +* :下划线标记 + + * :中划线标记(删除线) + +* :斜体标记 diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250\357\274\214\350\241\250\346\240\274\346\240\207\347\255\276.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250\357\274\214\350\241\250\346\240\274\346\240\207\347\255\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..94da670441a8435844c33c3422d06b07fd092f0b --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250\357\274\214\350\241\250\346\240\274\346\240\207\347\255\276.md" @@ -0,0 +1,38 @@ +# 行的属性 +* dir:公有属性,设置这一行单元格内容的排列方式。可以取值: +* ltr:从左到右(left to right,默认) +* rtl:从右到左(right to left) +* bgcolor:设置这一行的单元格的背景色。 +* height:一行的高度 +* align="center":一行的内容水平居中显示,取值:left、center、right +* valign="center":一行的内容垂直居中,取值:top、middle、bottom +# 单元格的属性 +* align:内容的横向对齐方式。属性值可以填:left right center。 +* valign:内容的纵向对齐方式。属性值可以填:top middle bottom +* width:绝对值或者相对值(%) +* height:单元格的高度 +* bgcolor:设置这个单元格的背景色。 +* background:设置这个单元格的背景图片。 +# 单元格的属性 +* colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 +* rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。 +# :表格的标题 +* 使用时和tr标签并列 +* 属性:align,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom + + +* border:边框。像素为单位 +* style="border-collapse:collapse;":单元格的线和表格的边框线合并 +* width:宽度。像素为单位 +* height:高度。像素为单位 +* bordercolor:表格的边框颜色 +* align:表格的水平对齐方式。属性值可以填:left right center +* cellpadding:单元格内容到边的距离,像素为单位 +* cellspacing:单元格和单元格之间的距离,像素为单位 +* bgcolor="":表格的背景颜色 +* background="路径src/...":背景图片。 +* bordercolorlight:表格的上、左边框,以及单元格的右、下边框的颜色 +* bordercolordark:表格的右、下边框,以及单元格的上、左的边框的颜色 +* dir:公有属性,单元格内容的排列方式(direction)。 可以 取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left) + + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\345\222\214\350\241\250\346\240\274\344\275\234\344\270\232.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\345\222\214\350\241\250\346\240\274\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f8be6a432be5dbae4137721058a458835431445 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\345\222\214\350\241\250\346\240\274\344\275\234\344\270\232.md" @@ -0,0 +1,205 @@ +# 表格`` +一个表格`
`是由每行``组成的,每行是由每个单元格`
`组成的。 +所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。 +在以前,要想固定标签的位置,唯一的方法就是表格。现在可以通过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 + +注意:表单和表格嵌套时,是在``标记中套``标记。 +### ``:输入标签(文本框) + +用于接收用户输入。 + +```html + +``` + +**属性:** + +- **`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`:文本框只读,不能编辑,光标点不进去。属性值可以不写。 + +# 作业 +## 表单作业 + ``` + + + + + + + + +## 表格作业 + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
星期一星期二星期三星期四星期五
数学数学体育
语文语文
历史地理政治政治
数学体育体育计算机
英语语文数学数学
+ ``` diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240920-HTML\357\274\214\344\275\234\344\270\232.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240920-HTML\357\274\214\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..3cbebd827753226a355306417db22c6e4fddba07 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240920-HTML\357\274\214\344\275\234\344\270\232.md" @@ -0,0 +1,186 @@ + +# 什么是HTML5? +* HTML5是构建Web内容的一种语言描述方式,HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式,被认为是互联网的核心技术之一。 +* HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 +* HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息,HTML5在从前HTML4.01的基础上进行了一定的改进。 +# 表单元素(标签) +1. <datalist> 数据列表 --> 与下拉框相似,它可以输入关键字搜索 + ```html + + + + + + + ``` + +2. <fieldset> 字段集 --> 将表单内的一组相关表单元素进行分组。与<legend> 标签一起使用。 + ```html + 语法: +
+ 标题 +
+ 代码显示: +
+ 标题 + +
+ ``` + +3. <meter> 度量器 + +- low:低于该值后警告 + +- high:高于该值后警告 + +- value:当前值 + +- max:最大值 + +- min:最小值。 +```javascript + +``` + +### 表单属性 + - `placeholder` 占位符(提示文字) + + - `autofocus` 自动获取焦点(刷新时,文本可直接输入) + + - `multiple` 文件上传多选或多个邮箱地址 + + - `autocomplete` 自动完成(填充的)。on 开启(默认),off 取消。用于表单元素,也可用于表单自身(on/off) + + - `form` 指定表单项属于哪个form,处理复杂表单时会需要 + + - `novalidate` 关闭默认的验证功能(只能加给form) + + - `required` 表示必填项 + + - `pattern` 自定义正则,验证表单 + +### 表单事件 +- `oninput()`:用户输入内容时触发,可用于输入字数统计。 +- `oninvalid()`:验证不通过时触发。比如,如果验证不通过时,想弹出一段提示文字,就可以用到它。 + +### 音频 +- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`,都可以。 +- `controls` 控制条。(建议把这个选项写上,不然都看不到控件在哪里) +- `loop` 循环播放。 +- `preload` 预加载 同时设置 autoplay 时,此属性将失效。 + +```html + +``` + + + +### 视频 +- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`,都可以。 +- `controls` 控制条。(建议把这个选项写上,不然都看不到控件在哪里) +- `loop` 循环播放。 +- `preload` 预加载 同时设置 autoplay 时,此属性将失效。 +- `width`:设置播放窗口宽度。 +- `height`:设置播放窗口的高度。 + +```html + +``` + +# 作业 +## 登录页面 +``` + +div class="login-container"> +

登录页面

+ +
+ + +
+
+ + +
+ + + + +# 跑马灯 + +
+
+

关关雎鸠,在河之洲。窈窕淑女,君子好逑。 + 参差荇菜,左右流之。窈窕淑女,寤寐求之。 + 求之不得,寤寐思服。悠哉悠哉,辗转反侧。 + 参差荇菜,左右采之。窈窕淑女,琴瑟友之。 + 参差荇菜,左右芼之。窈窕淑女,钟鼓乐之

+
+
+``` \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240923-html.CSS.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240923-html.CSS.md" new file mode 100644 index 0000000000000000000000000000000000000000..2c4cd605cfb6d98583ca27adb587feda7c8807bd --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240923-html.CSS.md" @@ -0,0 +1,98 @@ +# html详解 +## 拖拽元素 +页面中设置了 `draggable="true"` 属性的元素 + +**拖拽元素的事件监听**:应用于拖拽元素 + +- `ondragstart`当拖拽开始时调用 + +- `ondragleave` 当**鼠标离开拖拽元素时**调用 + +- `ondragend` 当拖拽结束时调用 + +- `ondrag` 整个拖拽过程都会调用 + +事例: +```html + +
+ + + +``` + +# 地理定位(位置) + +地理定位是HTML5中新增的API特性,它允许JavaScript程序向浏览器询问用户真实的地理位置。识别地理位置的一些应用就可以使用它来显示地图、导航和其它一些与用户当前位置有关的信息。当然,考虑到用户的隐私,支持地理定位API的浏览器在JavaScript程序获取用户物理位置前总是会询问用户是否允许获取当前位置。 + +### 获取地理位置的方式 + +1. IP地址 + +2. 三维坐标: + + +(1)**GPS**(Global Positioning System,全球定位系统)。 + +# css基础 +CSS(Cascading Style Sheets,层叠样式表)是为 web 内容添加样式的代码。 + +### CSS的单位 +html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。 CSS中的单位是必须要写的,因为它没有默认单位。 + +绝对单位 +1 in=2.54cm=25.4mm=72pt=6pc。 + +各种单位的含义: + +- in:英寸Inches (1 英寸 = 2.54 厘米) +- cm:厘米Centimeters +- mm:毫米Millimeters +- pt:点Points,或者叫英镑 (1点 = 1/72英寸) +- pc:皮卡Picas (1 皮卡 = 12 点) +相对单位 +- px:像素 em:印刷单位相当于12个点 %:百分比,相对周围的文字的大小 + +### 字体属性`font` + +有以下属性: +- `` +- `` +- `` +- `` +- `` +- `` +- `` + +**注意:** font-style、font-variant 和 font-weight 必须在 font-size 之前 +font-variant 只可以使用 CSS 2.1 定义的值,即 normal 和 small-caps +font-stretch 必须是单个关键字值 +line-height 必须跟在 font-size 后面,由“/”分隔,例如“16px/3” +font-family 必须最后指定 + + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240925-\345\255\227\344\275\223 \346\226\207\346\234\254.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240925-\345\255\227\344\275\223 \346\226\207\346\234\254.md" new file mode 100644 index 0000000000000000000000000000000000000000..e2b0f86621247ff2770d0f2d095e9ae984fef183 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240925-\345\255\227\344\275\223 \346\226\207\346\234\254.md" @@ -0,0 +1,41 @@ +## 文本属性 + +CSS样式中,常见的文本属性有以下几种: + +- `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`(每个单词的首字母大写) +### 字体属性: + +- `font-family`: 设置字体,如 SimSun(宋体),SimHei(黑体),Microsoft Yahei(微软雅黑),Arial,serif 等 +。 +- `font-size`: 设置字体大小,可以使用像素(px)、百分比(%)或者 em 作为单位。 +- `font-weight`: 设置字体粗细,如 normal(默认)、bold(粗体)、lighter(细体)、bolder(更粗)等。 +- `font-style`: 设置字体样式,如 normal(默认)、italic(斜体)等。 + +### 行高和间距: + +- `line-height`: 设置行高,可以使用单位值或者数字(相对于当前字体大小的倍数)。 +- `letter-spacing`: 设置字符间距,通常用于调整字母之间的间距。 +- `word-spacing`: 设置单词间距,用于调整单词之间的间距。 + +# 文本装饰: + +- text-decoration: 设置文本装饰,如 underline(下划线)、overline(上划线)、line-through(删除线)等。 +- text-transform: 控制文本转换,如 uppercase(大写)、lowercase(小写)、capitalize(首字母大写)等。 + +# 首字下沉: + +- first-letter: 选择元素的第一个字母进行特殊样式设置。 + +```css +p.dropcap:first-letter { + float: left; + font-size: 3em; + line-height: 1; + padding-right: 8px; + padding-top: 4px; +} diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240929\350\203\214\346\231\257\347\254\224\350\256\2601.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240929\350\203\214\346\231\257\347\254\224\350\256\2601.md" new file mode 100644 index 0000000000000000000000000000000000000000..c27324acac416c68e2b02db76192987fc0f38b80 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240929\350\203\214\346\231\257\347\254\224\350\256\2601.md" @@ -0,0 +1,134 @@ +# 文本属性补充 +## overflow属性:超出范围的内容要怎么处理 + +`overflow`属性的属性值可以是: + +- `visible`:默认值。多余的内容不剪切也不添加滚动条,会全部显示出来。 +- `hidden`:不显示超过对象尺寸的内容。 +- `auto`:如果内容不超出,则不显示滚动条;如果内容超出,则显示滚动条。 + - `scroll`:Windows 平台下,无论内容是否超出,总是显示滚动条。Mac 平台下,和 `auto` 属性相同。 + +## 鼠标的属性 cursor + +鼠标的属性`cursor`有以下几个属性值: + + - `auto`:默认值。浏览器根据当前情况自动确定鼠标光标类型。 + - `pointer`:IE6.0,竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 + - `hand`:和`pointer`的作用一样:竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 + + # 背景属性 + + ## 滤镜`` + + 滤镜(filter)是一种强大的工具,它允许开发者在网页上直接应用各种视觉效果,如模糊、亮度调整、对比度调整等。这些滤镜可以用于图像、背景、甚至整个页面元素,为网页设计提供了更多的创意空间。 + +设置背景图片是否重复及如何重复,默认平铺满 ++ no-repeat:不要平铺 ++ repeat-x:横向平铺 ++ repeat-y:纵向平铺 +```cs +background-repeat: no-repeat +``` +4. 设置背景图片在当前容器中的位置 +```cs +background-position: 100 200 +background-position:center top +``` +5. 设置背景图片是否跟着滚动条一起移动 ++ scroll:默认属性,和fixed相反 ++ fixed:背景被固定,不会随滚动条滚动 +```cs +background-attachment:scroll +``` +6. 综合属性:将上面的多个属性写在一个声明中 +```cs +background +``` +## 新增属性 +1. background-origin +2. background-clip:背景裁切 +3. background-size:调整尺寸 + +### background-color:背景颜色的表示 +1. 单词 +```cs +background-color:red +``` +2. rgb表示法 +```cs +background-color:rgb(255,0,0) +``` +3. 十六进制表示法 +```cs +background-color:#ff0000 +``` + +#### CSS3的新方式 +1. RGBA表示法 +R,G,B的取值范围是:0-255;透明度的取值范围是0-1 +```js +background-color:rgba(0,0,255,0.3) +``` +2. HSLA表示法 ++ H:色调,取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 ++ S:饱和度,取值范围 0%~100%。值越大,越鲜艳。 ++ L:亮度,取值范围 0%~100%。亮度最大时为白色,最小时为黑色。 ++ A:透明度,取值范围 0~1。 +```cs +background-color:hsla(240,50%,50%,0.4) +``` + + +```` + + + +
+
+
+
+ + +```` \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\347\254\224\350\256\2602.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\347\254\224\350\256\2602.md" new file mode 100644 index 0000000000000000000000000000000000000000..63f948ff3dbe5c241b75a74e679f85d752df9f7f --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\347\254\224\350\256\2602.md" @@ -0,0 +1,111 @@ +# 背景属性 +## background-attachment 属性 + +- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是: + - `fixed`(背景就会被固定住,不会被滚动条滚走)。 + - `scroll`(与fixed属性相反,默认属性) + +## `background-size`属性:背景尺寸 + +`background-size`属性:设置背景图片的尺寸。 + +格式举例: + +```javascript + /* 宽、高的具体数值 */ + background-size: 500px 500px; + + /* 宽高的百分比(相对于容器的大小) */ + background-size: 50% 50%; // 如果两个属性值相同,可以简写成:background-size: 50%; + + background-size: 100% auto; //这个属性可以自己试验一下。 + + /* cover:图片始终填充满容器,且保证长宽比不变。图片如果有超出部分,则超出部分会被隐藏。 */ + background-size: cover; + + /* contain:将图片完整地显示在容器中,且保证长宽比不变。可能会导致容器的部分区域为空白。 */ + background-size: contain; + ## 背景原点:background-origin 属性 +格式举例: +```css +/**从padding-box 内边距开始显示背景图 */ +background-origin: padding-box; /**默认值 */ + +/**从border-box 边框开始显示背景图 */ +background-origin: border-box; + +/**从content-box 内容区域开始显示背景图 */ +background-origin:content-box; +``` + +## background-clip 属性:设置元素的背景(背景图片或颜色)是否延伸到边框下面 + +格式举例: + ++ `background-clip: content-box;` 超出的部分,将裁剪掉。属性值可以是: + ++ `border-box`: 超出 `border-box` 的部分,将裁剪掉 + ++ `padding-box`: 超出 `padding-box` 的部分,将裁剪掉 + ++ `content-box`: 超出 `content-box` 的部分,将裁剪掉 + +## 渐变:background-image +渐变分为: ++ 线性渐变:沿着某条直线朝一个方向产生渐变效果。 + ++ 径向渐变:从一个中心点开始沿着四周产生渐变效果。 + ++ 重复渐变 + +### 线性渐变 +格式: +```css +background-image: linear-gradient(方向,起始颜色,终止颜色); +``` +> 方向可以是:`to left`、`to right`、`to top`、`to bottom`、角度`30deg`(指的是顺时针方向30deg) +# line-height专项练习作业俩个 + ``` + ![图片](./imgs/效果图.png) + + + +
+
+ + + + + +```` \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241009\346\240\267\345\274\217\351\200\211\346\213\251\345\231\250.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241009\346\240\267\345\274\217\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..380add1fc4a03443416c0931bc3715705c1f01b9 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241009\346\240\267\345\274\217\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,163 @@ +# 径向渐变 +语法: + +``` + background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); + + background-image: radial-gradient(100px at center,yellow ,green); + +``` +中心点的位置可以是:at left right center bottom top。如果以像素为单位,则中心点参照的是盒子的左上角。 + +## clip-path:裁剪出元素的部分区域做展示 +`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。 + +虽然`clip-path`不是背景属性,但这个属性非常强大,但往往会结合背景属性一起使用,达到一些效果。 +* 好处是,即使做了任何裁剪,**容器的占位大小是不变的**。 + # CSS样式表 + - CSS 四种基本选择器:`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` +- CSS 几种扩展选择器:`后代选择器`、`交集选择器`、`并集选择器` + +**CSS 优点:** +1. 使数据和显示分开 +2. 降低网络流量 +3. 使整个网站视觉效果一致 +4. 使开发效率提高了 + ## CSS 语法 + +**语法格式:**(其实就是键值对) +* 语法 +```html +选择器{ 属性名: 属性值; 属性名: 属性值; } +``` +或者可以写成: + +```css +选择器 { + k: v; + k: v; + k: v; + k: v; +} +选择器 { + k: v; + k: v; + k: v; + k: v; +} +``` +- 选择器代表页面上的某类元素,选择器后一定是大括号。 +- 属性名后必须用冒号隔开,属性值后用分号(最后一个属性可以不用分号,但最好还是加上分号)。 +- 冒号和属性值之间可以留一个空格(编程习惯的经验)。 +- 如果一个属性有多个值的话,那么多个值用**空格**隔开。 +# CSS 的一些简单常见的属性 +**字体颜色:**(c) + +```html +color:red; +``` +color 属性的值,可以是英语单词,比如 red、blue、yellow 等等;也可以是 rgb、十六进制(后期详细讲)。 + +**字号大小:**(fos) + +```html +font-size:40px; +``` + +font 就是“字体”,size 就是“尺寸”。px 是“像素”。单位必须加,不加不行。 + +**背景颜色:**(bgc) + +```html +background-color: blue; +``` + +background 就是“背景”。 + +**加粗:**(fwb) + +```html +font-weight: bold; +``` + +font 是“字体” weight 是“重量”的意思,bold 粗。 + +**不加粗:**(fwn) + +```html +font-weight: normal; +``` + +normal 就是正常的意思。 + +**斜体:**(fsi) + +```html +font-style: italic; +``` + +italic 就是“斜体”。 + +**不斜体:**(fsn) + +```html +font-style: normal; +``` + +**下划线:**(tdu) + +```html +text-decoration: underline; +``` + +decoration 就是“装饰”的意思。 + +**没有下划线:**(tdn) + +```html +text-decoration:none; +``` + +# CSS 的书写方式 +1. **行内样式**:在某个特定的标签里采用 style **属性**。范围只针对此标签。 + +2. **内嵌样式**(内联样式):在页面的 head 标签里里采用` + + +
+ +
+ + + +``` + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241011\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241011\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..9a0b8929bcc2c1b55d8ec51f2328f5b3f8ef84ea --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241011\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260.md" @@ -0,0 +1,68 @@ +# CSS 的4种高级选择器 +- 后代选择器:用空格隔开 +- 交集选择器:选择器之间紧密相连 +- 并集选择器(分组选择器):用逗号隔开 +- 伪类选择器 +1. 子代选择器,用符号`>`表示 +2. 序选择器 +3. 下一个兄弟选择器 + +# 伪类选择器 +## 概念: +* 同一个标签,根据其**不同的种状态,有不同的样式**。这就叫做“伪类”。伪类用冒号来表示 + +# 伪类选择器分两种 +## 第一种是静态伪类 +**静态伪类**:只能用于**超链接**的样式。如下: + +- `:link` 超链接点击之前 +- `:visited` 链接被访问过之后 + +PS:以上两种样式,只能用于超链接。 + +## 第二种是动态伪类 +(2)**动态伪类**:针对**所有标签**都适用的样式。如下: + +- `:hover` “悬停”:鼠标放到标签上的时候 +- `:active` “激活”: 鼠标点击标签,但是不松手时。 +- `:focus` 是某个标签获得焦点时的样式(比如某个输入框获得焦点) + +# 超链接a标签 +## 超链接的四种状态 +a标签有4种伪类(即对应四种状态)如下: +- `:link` “链接”:超链接点击之前 +- `:visited` “访问过的”:链接被访问过之后 +- `:hover` “悬停”:鼠标放到标签上的时候 +- `:active` “激活”: 鼠标点击标签,但是不松手时。 + +对应的代码如下: + +```html + +``` +在CSS中,四种状态必须按照固定顺序写: +* 1: a:link : +* 2 a:visited 、 +* 3:a:hover : +* 4:a:active + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/9.04.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/9.04.md" new file mode 100644 index 0000000000000000000000000000000000000000..6df63be15bc5fbff9e7d49e2d6569af223028824 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/9.04.md" @@ -0,0 +1,47 @@ +斜体: *斜体* + +粗体:**粗体** + +# 一级标题 +## 二级标题 +***粗斜体*** + +有序列表: +1. 软件3班 +2. 软件4班 +3. 软件5班 + +5) 软件53班 +6) 软件23班 +7) 软件24班 + +无序列表: ++ 额外 ++ 列表 ++ 列表 + +- 列表 +- 列表 +- 列表 + +* 列表 +* 列表 +* 列表 + +> 我是一段有感谢 + +dom标签是指font + +我是百度 + +{我是百度}(https://baidu.com) + +``` js +console.log("我是超级英雄") +``` + +|一级 | 二级| 三级| +|:- |:-: | -:| +|我是超级英雄| 索拉卡|数据库规划| + +下课了 diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\345\261\217\345\271\225\346\210\252\345\233\276.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\345\261\217\345\271\225\346\210\252\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..cfbfbaf48e3de7bc09d28b3b473d71ad6c3e4090 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\345\261\217\345\271\225\346\210\252\345\233\276.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\346\225\210\346\236\234\345\233\276.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\346\225\210\346\236\234\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..9aa47e66c8f16d2e10a25704c4bdf4b001270767 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\346\225\210\346\236\234\345\233\276.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\344\275\215\347\275\256.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\344\275\215\347\275\256.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b9132dd1427b9d97cb269cf0b54f68f781b79345 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\344\275\215\347\275\256.jpg" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\345\233\276\347\211\207.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\345\233\276\347\211\207.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..f3504cb80fdb78688cd159dc37ffc465fa15133b Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\345\233\276\347\211\207.jpg" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\345\260\272\345\257\270.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\345\260\272\345\257\270.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..97ed3bf672a8a27c52d49898248fef1c9b94110a Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\345\260\272\345\257\270.jpg" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\351\207\215\345\244\215.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\351\207\215\345\244\215.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..bd5f83b2f93163a0f7ac09415af2c2c1ddbefcae Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/img/\350\203\214\346\231\257\351\207\215\345\244\215.jpg" differ diff --git "a/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" "b/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" deleted file mode 100644 index 90824d654dfb77c07abc5067b73cdf1b7c1e99b3..0000000000000000000000000000000000000000 --- "a/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" +++ /dev/null @@ -1,105 +0,0 @@ -# 今天天气很好,40多度,老胡很帅呆 - -## 今天讲了git的流程,特画图如下,快夸我 - -![你看你那什么破图!^=^|||](./imgs/img011.jpg) - - 我是没有感情的文字 - -我是百度 - -[我也是百度](http://baidu.com) - -

一级标题

-

二级标题

- -# 一级标题 - -## 二级标题 - -斜体 - -*斜体* - -**粗体** - -***粗斜体*** - -> 我是一段引用 - - -比如我这里需要使用一个`dom`标签,这个`dom`标签是指`font` - -如下代码可以说明若干问题: - -```js -console.log('我是女生,爱哭的女生') - -``` - -有序列表 - -1. 列表 - 1. 还是列表 - A. 总是列表 - 2. 还是列表 - 3. 还是列表 - 4. 还是列表 -2. 列表 -3. 列表 - - -18) 第一项 -2) 第二项 -3) 第三项 - -i. 第一项 -ii. 第二项 -iii. 第三项 - -a. 第一项 -b. 第二项 -c. 第三项 - -无序列表 - -我是新增行 - -+ 无序列表 - + 我还是 - + 总是 - + 天天向上 - + 总是 - + 总是 - + 总是 - + 我还是 - + 我还是 - + 我还是 - + 我还是 -+ 无序列表 - - gd gd - - 悠悠岁月 - - 悠悠岁月 - - 悠悠岁月 - - 悠悠岁月 - - gd gd - - gd gd - - gd gd - - gd gd -+ 无序列表 -+ 无序列表 - * 星星眨眼 - * 这个天 - * 这个天 - * 这个天 - * 星星眨眼 - * 星星眨眼 - * 星星眨眼 -+ 无序列表 - - -| 左对齐 | 居中 | 右对齐 | -| :- | :-: | -: | -| 单元格1 | 单元格2 | 单元格3 | -| 单元格4 | 单元格5 | 单元格6 | - diff --git "a/\350\200\201\350\203\241/imgs/img01.jpg" "b/\350\200\201\350\203\241/imgs/img01.jpg" deleted file mode 100644 index 9a379cf5f0681088cca4da476e10125b29ad16e5..0000000000000000000000000000000000000000 Binary files "a/\350\200\201\350\203\241/imgs/img01.jpg" and /dev/null differ