服务器C/S架构
B/S架构
使用 WampServer 搭建 HTTP服务静态网站和动态网站静态网站：
访问的是实实在在保存在服务器上的文件。静态资源包括：html页面、css文件、js文件、图片等。
当内容、图片、界面需要更新时，直接修改.html文件。
动态网站：
当用户访问网站时，根据某些逻辑,动态生成对应的HTML、CSS、JS代码给用户（这也就是web服务器开发的本质）。
通过某种手段，当有新的消息时，自动的完成网站的更新。
Read more
NENEIIII
Nov 25, 2022
基础部分写在哪行内
<input type="button" value="点我点我" onclick="alert('千古壹号 Hello 方式1')" />
内联
<script type="text/javascript">
// 在这里写 js 代码
alert('千古壹号 hello 方式2');
console.log('qianguyihao hello 方式2');
</script>
.js文件中
<body>
<!-- 外链式：引入外部的 js 文件：这个 utils.js 文件与当前的 html 文件，处于同一级目录 -->
<script src="utils.js"></script>
</body>
区分大小写
Read more
NENEIIII
Nov 24, 2022
文字阴影p{
text-shadow: 20px 27px 22px pink;
/*水平位移 垂直位移 模糊程度 阴影颜色*/
}
设置多个阴影实现凹凸效果
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;/*凹*/
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;/*凸*/
盒子大小box-sizing: content-box;
此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化
box-sizing: border-box;
此时设置的width和height是盒子的总宽高。盒子的实际宽度=设置的width。此时改变padding和border的大小，会改变内容的宽高，盒子的总宽高不变。
Read more
NENEIIII
Nov 23, 2022
我看这个是最全的：直接查看就行
CSS 选择器 | 菜鸟教程 (runoob.com)
选择器
示例
示例说明
CSS
.class
.intro
选择所有class=”intro”的元素
1
#id
#firstname
选择所有id=”firstname”的元素
1
*
*
选择所有元素
2
element
p
选择所有元素
1
element,element
div,p
选择所有元素和元素
1
element element
div p
选择元素内的所有元素
1
element>element
div>p
选择所有父级是 元素的 元素
2
element+element
div+p
选择所有紧跟在 元素之后的第一个 元素
2
[attribute]
[target]
选择所有带有target属性元素
2
[attribute=value]
[target=-blank]
选择所有使用target=”-blank”的元素
2
[attribute~=value]
[title~=flower]
选择标题属性包含单词”flower”的所有元素
2
[attribute|=language]
[lang|=en]
选择 lang 属性等于 en，或者以 en- 为开头的所有元素
2
:link
a:link
选择所有未访问链接
1
:visited
a:visited
选择所有访问过的链接
1
:active
a:active
选择活动链接
1
:hover
a:hover
选择鼠标在链接上面时
1
:focus
input:focus
选择具有焦点的输入元素
2
:first-letter
p:first-letter
选择每一个元素的第一个字母
1
:first-line
p:first-line
选择每一个元素的第一行
1
:first-child
p:first-child
指定只有当元素是其父级的第一个子级的样式。
2
:before
p:before
在每个元素之前插入内容
2
:after
p:after
在每个元素之后插入内容
2
:lang(language)
p:lang(it)
选择一个lang属性的起始值=”it”的所有元素
2
element1~element2
p~ul
选择p元素之后的每一个ul元素
3
[attribute^=value]
a[src^=”https”]
选择每一个src属性的值以”https”开头的元素
3
[attribute$=value]
a[src$=”.pdf”]
选择每一个src属性的值以”.pdf”结尾的元素
3
[attribute*=value]
a[src*=”runoob”]
选择每一个src属性的值包含子字符串”runoob”的元素
3
:first-of-type
p:first-of-type
选择每个p元素是其父级的第一个p元素
3
:last-of-type
p:last-of-type
选择每个p元素是其父级的最后一个p元素
3
:only-of-type
p:only-of-type
选择每个p元素是其父级的唯一p元素
3
:only-child
p:only-child
选择每个p元素是其父级的唯一子元素
3
:nth-child(n)
p:nth-child(2)
选择每个p元素是其父级的第二个子元素
3
:nth-last-child(n)
p:nth-last-child(2)
选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
3
:nth-of-type(n)
p:nth-of-type(2)
选择每个p元素是其父级的第二个p元素
3
:nth-last-of-type(n)
p:nth-last-of-type(2)
选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
3
:last-child
p:last-child
选择每个p元素是其父级的最后一个子级。
3
:root
:root
选择文档的根元素
3
:empty
p:empty
选择每个没有任何子级的p元素（包括文本节点）
3
:target
#news:target
选择当前活动的#news元素（包含该锚名称的点击的URL）
3
:enabled
input:enabled
选择每一个已启用的输入元素
3
:disabled
input:disabled
选择每一个禁用的输入元素
3
:checked
input:checked
选择每个选中的输入元素
3
:not(selector)
:not(p)
选择每个并非p元素的元素
3
::selection
::selection
匹配元素中被用户选中或处于高亮状态的部分
3
:out-of-range
:out-of-range
匹配值在指定区间之外的input元素
3
:in-range
:in-range
匹配值在指定区间之内的input元素
3
:read-write
:read-write
用于匹配可读及可写的元素
3
:read-only
:read-only
用于匹配设置 “readonly”（只读） 属性的元素
3
:optional
:optional
用于匹配可选的输入元素
3
:required
:required
用于匹配设置了 “required” 属性的元素
3
:valid
:valid
用于匹配输入值为合法的元素
3
:invalid
:invalid
用于匹配输入值为非法的元素
3
属性选择器属性选择器的标志性符号是 []。
匹配含义：
^：开头 $：结尾 *：包含
格式：
E[title] 选中页面的E元素，并且E存在 title 属性即可。
E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。
E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
E[title^="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
E[title$="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
E[title*="abc"] 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
Read more
NENEIIII
Nov 23, 2022
行内元素和块级元素的相互转换我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素：一旦，给一个块级元素（比如div）设置：
display: inline;
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了。
行内元素转换为块级元素：
Read more
NENEIIII
Nov 23, 2022
盒子模型即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：==内容==的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width
padding有四个方向小属性的写法：
Read more
NENEIIII
Nov 23, 2022
background 的常见背景属性css2.1 中，常见的背景属性有以下几种：（经常用到，要记住）
background-color:#ff99ff; 设置元素的背景颜色。
background-image:url(images/2.gif); 将图像设置为背景。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
no-repeat不要平铺；
repeat-x横向平铺；
repeat-y纵向平铺。
background-position:center top; 设置背景图片在当前容器中的位置。
background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。 属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。
另外还有一个综合属性叫做background，它的作用是：将上面的多个属性写在一个声明中。
CSS3 中，新增了一些background属性：
background-origin
background-clip 背景裁切
background-size 调整尺寸
多重背景
RGBA 表示法 background-color: rgba(0, 0, 255, 0.3);
border: 30px solid rgba(0, 255, 0, 0.3);
代码解释：
RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。
R、G、B 的取值范围是：0255；透明度的取值范围是 01。
Read more
NENEIIII
Nov 22, 2022
01-CSS属性：字体属性和文本属性 | 千古前端图文教程 (qianguyihao.com)
CSS的单位html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。
绝对单位1 in=2.54cm=25.4mm=72pt=6pc
相对单位px：像素 em：印刷单位相当于12个点 %：百分比，相对周围的文字的大小
font 字体属性CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
Read more
NENEIIII
Nov 22, 2022
05-CSS样式表的继承性和层叠性 | 千古前端图文教程 (qianguyihao.com)
继承性我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。
层叠性：处理冲突的能力（计算权重）当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
id 选择器
类选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器
举例1：计算权重
Read more
NENEIIII
Nov 22, 2022