前言
该笔记仅为个人学习时做的一些笔记，作为学习记录，可能存在错误或缺陷。
HTML（超文本标记语言）
https://www.w3cschool.cn/html/dict
一、主题格式
<!DOCTYPE html> <!--文档声明-->
<html> <!--根标签-->
<head> <!--子标签-->
<meta charset="utf-8"> <!--字符集-->
<title></title> <!--网页标题-->
</head>
<body> <!--子标签，主体-->
<h1><h2> <!--一级标题-->
<h2><h3> <!--二级标题-->
</body>
</html>
二、注释
<!-- xxxxxx -->
注释不能嵌套
三、常用标签
1.基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
2.文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
3.链接（Links）
普通的链接：<a href="链接地址">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签： <a id="tips">
提示部分</a> <a href="#tips">跳到提示部分</a>
4.图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
5.样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
四、实体
空格： 
小于号：<
大于号：>
&符号：&
引号："
乘号：×
除号：÷
五、表格 table
<table> <!--表，属性：width，heigh，cellpadding，cellspacing-->
<caption>xxxxxx</caption> <!--表格标题-->
<tr> <!--行-->
<th>1</th> <!--表头单元格，具有属性align、dir、width、height-->
<th>2</th>
</tr>
<tr>
<td></td> <!--列，colspan=“2”合并2列，rowspan合并行-->
<td></td>
</tr>
</table>
可分为：
<thead></thead>、<tfoot></tfoot>、<tbody></tbody>
六、列表
1.无序列表
<ul> <!--不同类型的列表，如style="list-style-type:disc"或circle/square-->
<li>aaaaaa</li>
<li>bbbbbb</li>
</ul>
2.有序列表
<ol> <!--有不同类型的列表，如：type=”A“或a/I/i/-->
<li>aaaaaa</li>
<li>bbbbbb</li>
</ol>
3.自定义列表
<dl>
<dt>1</dt>
<dd>aaaaaa</dd>
<dt>2</dt>
<dd>bbbbbb</dd>
</dl>
列表可嵌套
七、表单
1.文本 text：
<form>
<fieldset> <!--边框-->
<legend>个人信息:</legend> <!--标题-->
姓名 ：<input type="test" name="name" placeholder="用户名"><br>
学号 ：<input type="test" name="id" placeholder="id"><br>
</fieldset>
</form>
2.密码 password：
<form>
用户名：<input type="test" name="name" placeholder="username"><br>
密码    ：<input type="password" name="pwd"<br> <!--密码显示为隐藏-->
</form>
3.单选按钮 radio：
<form> <!--name要相同，要包含在各自的；label标签中-->
<label><input type="radio" name="sex" value="gil">gil<br></label>
<label><input type="radio" name="sex" value="boy">boy<br></label>
</form>
4.多选 checkbox：
<form>
<label><input type="checkbox" name="flute" values="apple" checked>apple<br></label> <!--checked为默认被选中-->
<label><input type="checkbox" name="flute" value="banana">banana<br></label>
</form>
5.提交按钮
<form name="input" action="URL" method="POST">
用户名：<input type="text" name="username" required> <!--required为必填选项-->
<input type="submit" value="Submit">
</form>
6.下拉列表：
<form action=""> <!--action属性的值指定了表单提交到服务器的地址-->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
7.文本域：
<textarea rows="10" cols="30"></textarea>
CSS
一、基本语法
1.注释
/* */
2.选择器
常用选择器：
- 元素选择器，如 ：p{ }、h1{ }、body{ } 样式运用到 选择到的元素
- id选择器，如 ：#1{ }、#red{ } 样式运用到id所在元素
- class选择器，如 ：.greed{ }、.box-text{ } 样式将运用到聚友class属性的元素
- 通配选择器，*{ } 选择全部元素
复合选择器：
- 交集选择器：如：div.green{ }、.box-text.green{ } 当元素为div，且class为greed时，样式才被应用
- 并集选择器：如; h1,span{ } .green,p{ } 两个元素都会应用
关系选择器：
- 子元素选择器：父元素>子元素 如：div>p{ } 选择div中的p元素（子类）
- 后代元素选择器：祖先 后代 如：div h1{ } 选择div中的所有h1元素
- 选择下一个兄弟元素： 前一个+后一个 如：p+h2 选择p后面的一个h2
- 选择后面所有兄弟元素： 如：p ~ span{ } 选择下面所有的span兄弟元素
属性选择器:
- [属性名]{ } 包含有属性名的元素被选择
- [属性名=属性值]{ } 选择指定属性和指定属性值的元素
- [属性名^=属性值]{ } 选择属性值以指定值开头的元素
- [属性名$=属性值]{ } 选择属性值以指定属性值结尾的元素
- [属性名*=属性值]{ } 选择属性值包含指定属性值的元素
伪类选择器：
- ：first-child{ } 第一个子元素 ，如：ul > li ：first-child{ }
- ：last-child{ } 最后一个子元素
- ：nth-child（n）{ } 第n个子元素
- 以上对所有元素进行排序选择
- ：first-of-type{ } 第一个子元素 ，如：ul > li ：first-of-type{ }
- ：last-of-type{ } 最后一个子元素
- ：nth-of-type(n){ } 第n个子元素
- 以上对相同类型的元素进行排序选择，如（5）中的只对li进行排序
- ：not( ){ } 否定符合条件的元素 如： ul > li ：not(first-of-type){ } 否定第一个元素
超链接伪类：
1.a:link{ } 用来表示没有访问过的连接设置（可设置字体大小）
2.a:visited{ } 用于表示访问过的连接设置（不可设置字体大小）
3.a:hover{ } 用来表示鼠标移入状态（全类可用）
4.a:active{ } 用来表示鼠标点击
伪元素：
::first-letter{ } 第一个字母 如：p::first-letter{color：red；}表示
的第一个字母颜色为红色
::first-line{ } 第一行
::select{ } 表示选中的内容
::after{ } 表示元素的结尾
::before{ } 表示元素的开始
选择器权重优先级：
内联选择器>id选择器>类和伪类选择器>元素选择器>通配选择器>继承选择器
3.声明块
样式名：样式值；
样式名：样式值；
…
二、样式设置样例
1.颜色
p{background-color:red;} <!--后面所有的《p》字体都为红色-->
2.颜色
<style>
.red-text{ <!--.red-text为类名，引用时不加点.-->
color:red;
}
</style>
------------------------------
<body>
<h2 class="red-text"></h2>
</body>
3.字体
p{
font-size:16px; <!--段落字体将会变为16px-->
}
4.边框
<!--边框颜色为红色、边框宽度为5像素(px)、边框样式为实线(solid)，半径-->
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius:50% <!--可像素-->
}
5.使用元素id来设置
#cat-photo-element { <!--元素id为cat-photo-element-->
background-color: green;
}
6.继承
body{
color:green; <!--body中的所有元素都为green色-->
}
7.覆盖
.pink-text {
color: pink !important;
}
.blue-text { <!--后面的会覆盖前面的，但!important属性会使得第一个不会被覆盖-->
color: blue;
}
8.颜色表示
body{
background-color:#FF0000; <!--6位十六进制表示，2位分别表示红，绿，蓝-->
background-color:#F00; <!--3位十六进制表示，1位分别表示红，绿，蓝-->
background-color:rgb(0, 0, 0); <!--rgb表示，每个数值介于0-255-->
}
9.内联（一般不用）
<p style="color: chartreuse; font-size: 100px">bb</p>
三、布局
盒子模型（box model）：
-
内容区（content）——可设置：高度（height）、宽度（width）
-
内边距（padding）
-
边框(border)）——可设置：宽度（border-width）、颜色（border-color）、样式（border-style）
/*或者用 “border：10px red solid” 一起设置 */ -
外边距（margin） 相邻两个兄弟元素之间的外边距取两个中较大的值（正值）/取和（一正一负）/取绝对值较大（两负）
/* 外边距（margin） - 左、上设置自身位置 - 右、下设置与其他元素距离 - 正值为反方向，负值为相同的方向 - 简写与padding相同 - 子元素水平布局必须满足：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区width - 如果等式不成立会自动调整margin-right使其成立（过度约束）；可设置width、margin-right、margin-left为auto，auto会自动调整，width默认auto */
<div>块元素</div>---可全部设置
<span>行内元素</span>---不可以设置高度
元素设置(属性)
-
/*shadow用来设置元素阴影，第一个值为向右偏移量，第二个值为向下偏移量（负值相反） 第三个值为阴影模糊半径，第四个值为阴影颜色 （不影响box布局） */ box-shadow: 20px 20px 10px gray; -
/*radius用来设置圆角，圆角设置的半径大小*/ border-radius: 15px; -
/*设置鼠标移入，box1外添加轮廓（10px 红色 双线）*/ outline:10px crimson double; -
/* 如果子元素溢出父元素，可使用overflow属性来设置： overflow： - visible，默认值，子元素从父元素中外部显示 - hidden，隐藏溢出部分 - scroll，生成两个滚动条，通过滚动条来查看完整内容 - auto，根据需要生成滚动条 overflow-x: 设置x轴滚动条 overflow-y: 设置y轴滚动条 */ -
/*盒子尺寸设置，box-sizing： 有两个值：border-box、content-box border-box 表示盒子大小（width、height）直接设置boder content-box 表示盒子大小（width、height）设置为内容区大小，为默认值 */ box-sizing: border-box; -
/* display 用来设置元素显示的类型 可选值： inline 将元素设置为行内元素 block 将元素设置为块元素 inline-block 将元素设置为啥行内块元素 行内块元素兼具两者的特点 table 将元素设置为一个表格 none 元素不在页面内显示（不存在） visibility 用来设置元素的显示状态 可选值： visible 默认值，元素在页面中正常显示 hidden 元素在页面中隐藏，但依旧占据页面的位置 */ -
/* 元素浮动： 通过元素浮动设置一个元素向其父元素的左侧或者右侧移动 可使用float来设置，可选值： none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 元素设置浮动后，水平布局的等式不需要强制成立,并且会完全从文档流中脱离，不占位置 浮动特点： 1.浮动元素会完全脱离文档流，不再占据文档流中的位置 2.设置浮动以后元素回想父元素的左侧或右侧移动 3.浮动默认不会从父元素中脱离 4.浮动元素向左或向右移动时，不会超过其他的浮动元素 5.如果浮动元素上面是没有浮动的块元素，浮动元素无法上去 6.浮动元素不会超越他的上一个兄弟元素，最多和它一样 7.浮动元素不会盖住文字，文字会环绕在浮动元素的周围 脱离文档流特点（元素设置浮动后，元素的特点也会发生变化）： 块元素： 1.块元素不在独占一行 2.快元素的宽度和高度默认都被内容撑开 行内元素： 行内元素脱离文档流以后变成块元素，特点和块元素一样（变成块元素） */ float: left;
四、浏览器默认样式
- 在编写时要先去除默认样式
方法一：
*{
margin:0px;
padding:0px;
}
方法二：
使用外部css文件
<link rel="stylesheet" href="./reset.css">
五、定位
/* 定位（position）：
- 是一种更高级的布局手段，可以布局到页面的任何位置
- 使用position属性来设置
可选值有：
---------------------------------------------------------------
- static 默认值，元素静止没有开启定位
- relative 开启元素相对定位 ------------如“2”
特点：元素如果不设置偏移量，不会发生变化;层级会变高
偏移量：只会移动本元素，参照与原来的位置
值：top：定位元素和定位位置上边的距离；
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左边的距离；
right：定位元素和定位位置右边的距离；
--------------------------------------------------------------
- absolute 开启元素绝对定位 --------------如“3”对于“4”
特点：1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对位置会改变元素的性值，行内变成块，块的宽度被内容撑开
4.绝对定位会提升一个层级
5.绝对定位元素是相对于其包含块的位置
包含块：
正常情况下：
包含块就是里当前元素最近的祖先元素
绝对定位的包含块：
包含块就是离他最近的开启了定位的祖先元素
如果所有祖先元素都没有开启定位，根元素就是其包含块
--------------------------------------------------------------------
- fixed 开启元素的固定定位 --------------如“5所示”
也是一种绝对定位，大部分特点与绝对定位相同
不同点：固定定位永远参照于浏览器的视口进行定位
视口：浏览器的视口，大小不变，所以固定定位的元素会一直出现在视口内
------------------------------------------------------------------------
- sticky 开启元素的粘滞定位
特点：和相对定位的特点基本相似
不同点，当其到达某一个位置是就固定不动
*/
六、字体&背景
文本：
/* 文本框：
text-align 文本的水平对其
可选值：
left：左对齐
right：右对齐
center：居中
justify：两端对齐
vertical-align 设置袁术垂直对齐的方式
可选值：
baseline：默认值，基线对齐
top：顶部对齐
bottom：底部对齐
middle：居中对齐
text-decoration 设置文本修饰
可选值：
none：无
underline：下划线
line-through：删除线
overline：上划线
white-space 设置网页如何处理空白
可选值：
normal：正常
nowrap：不换行
pre：保留空白（保留代码格式）
对溢出的内容显示省略号：
white-space：nowrap；
over-flow：hidden；
text-overflow：ellipsis；（省略）
*/
字体：
- font-family：
- font-size：
- color
- 图标
- 等
背景：
/*背景颜色*/
background-color: lightyellow;
/*背景图片,
- 背景颜色和背景图片可一起设置，背景颜色为背景图片的背景颜色；
- 如果图片像素小于元素，背景图片会自动铺满元素
- 如果背景图片大于元素，背景图片无法完全显示
*/
background-image: url("p1.jpg");
/*设置背景重复方式
可选值：
repeat：默认值，背景会沿着x轴y轴双方向重复
repeat-x：沿着x轴方向重复
repeat-y：沿着y轴方向重复
no-repeat：背景图片不重复
*/
background-repeat: no-repeat;
/*设置背景图片的位置
值：
top、left、right、bottom、center 五个（两两）组合
*/
background-position: top;
/*可设置偏移量，x、y方向*/
/*background-position: 10px 10px;*/
/*设置背景范围 background-clip
可选值：
border-box：默认值，背景会出现在边框下
padding-box：背景不会出现在边框，智慧出现在内容区和内边距
content-box：只会出现在内容区
设置背景图片偏移量的计算原点 background-origin
可选值：
border-box：背景图片偏移量从边框开始计算
padding-box：默认值，偏移量从内边距开始计算
content-box：背景图片偏移量从内容区开始计算
*/
background-clip: border-box;
background-origin: border-box;
/*设置背景元素大小
第一个值为宽度
第二个值为高度
只写一个值，则第二个值为auto（比例不变）
cover：图片比例不变，将元素铺满
contain：图片比例不变，将图片完整显示
*/
background-size: 500px;
/*设置背景图片是否跟随元素移动
可选值：
scroll：默认值，背景图片会跟随移动
fixed：背景图片固定在页面中，不会跟随元素移动
*/
background-attachment: scroll;
/*渐变：
实现颜色从一个颜色向其他颜色渐变
渐变是图片，需要background-image来实现
线性渐变：沿着一条直线实现渐变
linear-gradient(); 开头可以设置渐变方向 to right/left/top/bottom、xxx drg（角度）
repeating-linear-gradient(); 重复线性渐变
镜像渐变：
radial-gradient：
默认圆心形状会根据元素形状改变
也可以设置改变
可设置圆心位置： at 0px 0px,
也可以设置渐变范围：closest-side、closest-corner、farthest-side、farthest-corner
repeating-radial-gradient: 重复镜像渐变
语法：
radial-gradient(大小 at 位置，颜色 位置，颜色 位置，···);
*/
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
