HTML、CSS(小笔记)

这是我自己在学习html、css时觉得要记的东西太多总结一些较为常用的标签。

HTML

<p></p>段落标签

<hn></hn>标题标签n数值为1~6之间，n值越大标题文字越小。

<br />换行

<img />图像标签

属性：src:图片的路径

　　　width:宽度

　　 height:高度

　　　alt:图片加载失败时，显示该文字

　　　title:鼠标悬浮显示文字

<audio></audio>音频标签

属性：autoplay ：自动播放

　　 controls:控制条

　　　loop：循环播放

<video></video>视频标签

属性：autoplay ：自动播放

　　 controls:控制条

　　 loop：循环播放

<a></a>超链接

属性：href:表示需要链接到的目标文件的路径【类似于src属性】　　

　　 target:设置打开的方式，默认在当前窗口中打开

 　　 _blank:在一个新的窗口中打开

　　　　　　_self:在当前窗口中打开

注意：默认字体颜色为蓝色，自带有一个下划线

块标签

<pre></pre>：其中的内容原样输出

<div></div>：会自动的换行；主要用于页面的划分，其中可以嵌套任意的标签。

<span></span>：类似于div，不会自动换行；主要用于注册错误提示。

自定义列表/解释性列表

 <dl></dl>:父标签

 <dt></dt>：子标签

 <dd></dd>：子标签

有序列表

 <ol></ol>:父标签，表示有序列表的范围

 <li></li>:具体内容，子标签

　　属性：type:设置排序方式，默认为阿拉伯数字

无序列表

 <ul></ul>:父标签，表示无序列表的范围

 <li></li>：具体内容，子标签

表格标签

<table></table>:表示表格的范围，父标签

 <tr></tr>:表示行，子标签

 <td></td>:表示单元格【列】，子标签

 <th></th>:表示单元格【列】，子标签，其中的文本会加粗显示，会居中显示

<caption></caption>:设置表格标题

属性： border:表格线条宽度

 　　　bordercolor:线条颜色

　　　 cellspacing:单元格之间的间隔

 　　　width:宽度

　　　 height:高度

 　　　align:对齐方式【局左对齐，居中，居右对齐】

　　　使用tr中：设置整行的对齐方式

 　　　使用td中：设置某一个单元格的对齐方式

表单标签【重点掌握】

<form></form>:表示表单的范围，父标

<input />:表示输入项，是form标签的子标签，可以单独使用，可以输入内容或者选择内容

作用：可以提交不同的数据到指定的服务器，主要用于采集用户信息，

分为三部分：

 　　a.表单标签：包含数据需要提交到的服务器的地址，数据提交的方式【get和post】

 　　b.表单域：用于采集用户信息的

 　　c.表单按钮：普通按钮【button】重置按钮【reset】提交按钮【submit】

form标签的属性：

 　　a.action:数据需要提交到的服务器的地址

　　 b.method:数据提交的方式

 　　c.enctype:很少用，做文件上传的时候需要设置该属性

<input />:表示输入项，是form标签的子标签，可以单独使用，可以输入内容或者选择内容

input标签的属性：

 type：

 　　a.<input type="text"/> 普通输入项

 　　b.<input type="password"/> 密码输入项

 　　c.<input type="radio"/> 单项选择

 　　d.<input type="checkbox"/> 多项选择

 　　e.<input type="file"/> 文件选择项

　　 f.<input type="email"/> 邮箱输入项

 　　g.<input type="hidden"/> 隐藏项【了解】

　　 h.<input type="date"/> 日期选择【了解】

 　　j,<input type="color"/> 颜色选择【了解】

 　　k.<input type="button"/> 按钮，reset/submit

 　　placeholder:提示文字，一般结合text或者password使用

 　　checked:checked = “checked”,表示设置默认选中，一般结合radio和checkbox使用

 　　value：设置默认值

 　　name：用于区分不同的输入项，提交给服务器

 　　id：区分

 　　style：设置样式

<select></select>:表示下拉选择项，是form标签的子标签

 <option></option>:选项，是select标签的子标签

 　　name：区分

 　　value：默认值

　　 selected = "selected":设置默认选中

<textarea></textarea>:表示文本域，是form标签的子标签

 　　cols；列

　　 rows:行

头标签

html的子标签head被称为头标签

title:设置当前页面的标题

base：设置超链接的基本位置，可以统一设置超链接打开的方式

meta：设置页面的一些相关内容【编码格式】

charset:字符集

name:关键字

content:内容

link:引入外部的css文件

框架标签

<frameset></frameset>:指定页面的划分规则【父标签】

　　rows:按照行进行划分

　　cols:按照列进行划分

<frame />:具体显示的页面

注意：使用框架标签的时候，不能写在body中，也不能写在body外面，使用框架标签之后，则需要将body删掉

css

通配符选择器

语法：

}

作用：当前页面中的所有的html标签都会被设置相同的样式

使用场景：一个网页中所有标签共同的样式【一般设置内外边距】

标签名称【元素】选择器

语法：

html标签名称{

}

作用：根据给定的标签名称，在当前页面中只匹配指定的标签

弊端：如果多个同类的标签需要设置不同的样式，使用标签名称选择器解决不了问题，可以使用类选择器或者id选择器

类选择器

跟class属性有关，通过设置class的值确定类名

语法：

.类名{

}

作用：对同类的标签，需要设置不同的样式，可以使用类名进行区分

使用场景：标签名称选择器一旦声明，那么页面中所有相关的标签都会发生变化，但是，如果希望其中的某些个标签具有不同的特征，则就可以选择类选择器

id选择器

语法：
#id名称{
}

说明：id选择器的使用和类选择器的使用基本相同，不同之处在于：id选择器在同一个html页面中最好只使用一次

跟id属性有关

属性选择器

语法：

基本选择器[属性名]{

}

基本选择器[属性名=“值”]{

}

作用：根据某个标签的指定属性进行匹配

结构选择器

语法：

第一个字标签

ul li:first-child{
}

结合前面的选择器，使用冒号

包含选择器

语法：

匹配子标签或者后辈标签

先辈选择器后辈选择器{

}

匹配子标签

父标签选择器 > 子标签选择器{

}

伪类选择器

语法：

1.鼠标悬浮效果

#first:hover{
}

2.添加头部
.second:before{
}

3.添加尾部
.second:after{
}

4.设置第一个字符的样式
.second:first-letter{
}

5.设置第一行的样式
#third:first-line{
color: cyan;
}

结合前面的选择器，使用冒号

注意：是结构选择器还是伪类选择器，看冒号后面的限定条件

组合选择器

语法：

选择器1，选择器2,。。。{

}

#first,.second,div{
}

行内样式

<p style="color: red;font-size:20px;text-decoration: underline;">于同一个html文件</p>

仅作用于当前标签

内嵌样式

<style>
　　p{
　　　　color: red;
　　　　font-size:20px;
　　　　text-decoration: underline;
　　}
</style>

仅作用于当前html文件

链接样式

将css样式单独分离出来，其中书写的是css的选择器

优点：同一个css文件可以同时作用于多个html文件，作用于整个网站，使得整个网站风格统一，后期维护成本降低

使用方式：

 a.创建css文件，其中书写选择器

 b.在需要使用的html文件中引入【链接进来】，使用<link />

 <link href="外部css文件的相对路径" rel="stylesheet" type="text/css" />

 　　href:css文件的相对路径

 　　rel:stylesheet

 　　type:MIME类型【标记文档类型】，格式：大类型/小类型

 　　css文件：text/css

　　 javascript文件：text/javascript

 　　jpg图片：image/jpg

关联该css文件的所有html文件

导入样式

和链接样式基本相同，只是语法和运作方式不同

语法：

 在<style></style>进行导入

 导入方式：

 　　a.@import url("外部css文件的相对路径") ,建议使用

 　　b.@import url(外部css文件的相对路径)

 　　c.@import url('外部css文件的相对路径')

css常用属性

字体属性

font-family:字体类型

font-style:设置是否倾斜

 　　normal:正常

 　　italic:意大利体

 　　oblique：斜体

font-weight:设置文字的粗细

　　 设置方式有两种：数字【取值范围为100~900，数值越大，字体越粗】或者英文单词

　　 normal:正常

　　 bold；粗体

　　 bolder:加粗体

　　 lighter：细

font-size:文字大小，一般使用像素，默认的大小为16px

文本属性

text-decoration:设置文字的装饰效果

 　　none:正常显示

 　　underline；下划线

 　　overline;顶线

 　　line-through:删除线

text-indent:段落缩进，中文中常用2em【em也是一种计量单位，一般情况下，一个中文占1em，1em = 16px】

text-align:对齐方式

　　 left,center,right,justify【两端对齐】

letter-spacing:设置单词内部字母之间的间距

word-spacing:设置单词之间的间距

text-transform:变化，大小写转换

 　　none:无变化

　　 capitalize:单词首字母大写

 　　uppercase

 　　lowercase

direction:文本方向

 　　ltr:默认，从左到右

　　 rtl: 从右到左

盒子属性

border:表示统一【上下左右】设置，包括边框的宽度，边框样式，边框颜色

 　　border-top

 　　border-left

　　 border-bottom

　　 border-right

　　border-width:边框宽度

　　border-style：边框样式

 　　dotted:点画线

　　 dashed:虚线

　　 solid：实线

　　 double：双线

　　border-color：边框颜色

　　border-radius:边框削圆角【一般使用百分比设置圆角的程度，当取值为50%，则是一个圆】

margin:外边距，可以统一设置,使用px为单位设置距离

　　 margin-top

　　 margin-left

　　 margin-right

　　 margin-bottom

padding:内边距，可以统一设置,使用px为单位设置距离

 　　padding-top

　　 padding-left

　　 padding-right

　　 padding-bottom

尺寸属性

width:设置元素的宽度

height：设置元素的高度

line-height:行高【注意：当一个元素的文本内容只有一行，如果设置line-height = height,则表示该元素的文本在垂直方向上居中】

text-align:center；水平方向居中

背景属性

background:背景图/色

background-image:背景图

background-repeat:背景样式是否平铺

　　 repeat:沿着水平和垂直方向同时平铺，默认值

　　 no-repeat:不平铺，只显示一次

　　 repeat-x:只沿着水平方向平铺

　　 repeat-y:只沿着垂直方向平铺

background-position：背景图像的位置

　　 left right center top bottom

background-attachment:设置背景图是否随着网页滚动条一起滚动

　　 scroll：会随着滚动，默认值

 　　fixed: 固定的

和列表相关的属性

list-style:列表类型，项目符号项目符号的位置【inside outside】

list-style-image:项目符号

list-style-position:项目符号的位置

浮动属性

div是块级元素，一个div在页面中独占一行【自动换行】，默认从上往下依次排列，这种排列方式称为流

元素浮动之前，是竖向排列的，但是，浮动之后，变为横向排列

float：设置元素浮动

 none:

 left:以左边为参照，浮动起来

 right:以右边为参照，浮动起来

clear:清除浮动，取值只能是left或者right【表示将原先设置的浮动清除掉，避免对后面其他元素位置的影响】

显示属性

display:设置标签的显示状态

 　　none：隐藏状态，不会占据空间，也无法显示，相当于该元素不存在，主要用于页面的重绘或者重排，在动画中使用较多

 　　block：块级标签

 　　　　特点：总是以一个块的形式表现，可以独占一行

　　　　注意：可以设置宽高以及内外边距，如果不设置宽，默认和父标签的宽相等，如果不设置高，则高度随着自身的内容自适应

　　代表：div li hn p

 　　inline：行内标签

 　　　　特点:不会自动换行

 　　　　注意：宽高随着内容自适应，设置宽高或者内外边距无效

 　　　　代表：span a

 　　　　作用：如果给一个块级标签设置inline值，则可以将一个块级标签转换为行内标签

 　　inline-block:行内块级标签

 　　　　特点：不但具有block的特点，同时也具有inline的特点，【可以设置宽高，同时可以换行】

 　　　　使用场景：导航的实现

定位属性

position：设置元素的位置，

absolute：绝对定位，参照父标签或者先辈标签设置有效定位，通过left，top，right，bottom设置有效定位【类似于坐标轴，至少需要其中的两个值可以确定一个标签的位置】

　　参照物：如果给一个元素设置位置，则查看该标签的父标签是否设置有效定位，如果有，则以父标签作为参照物；如果没有设置，则查找所有的先辈标签，如果所有先辈标签没有设置，则以body作为参照物【设置了绝对定位，该标签对象会从流中拖出，会脱离流，不会保留原来的位置】

　　relative：相对定位，通过left，top，right，bottom设置有效定位

　　参照物：该标签自身原来的位置【设置了相对定位，该标签对象不会脱离流，会保留原来的位置】

 fixed：固定定位

　　参照物：窗体【脱离流】

　　使用场景：一般应用在广告中

　　注意：left，top，right，bottom可以是正数，也可以是负数

z-index:设置元素的优先级

过渡和形变属性

形变：transform，可以设置标签的放大或者缩小，旋转角度

1.设置旋转
　　默认沿着z轴旋转
　　rotate()
　　rotateX()
　　rotateY()
　　rotateZ()
　　xxxdeg
　　正数：顺时针，负数：逆时针

2.设置缩放
　　scale（）
　　scaleX（）
　　scaleY()
　　0~1之间：缩小
　　大于1：放大

3.设置旋转和缩放
　　transform: scale(2) rotate(75deg);　　　

过渡：transition，结合其他属性使用，一般应用在动画中，主要是为了声明使用动画的是哪个属性

1.发生过渡需要的时间
　　transition-duration: 10s;

2.哪个属性的值需要过渡，all表示所有属性
　　transition-property: all;

动画属性

animation:设置动画

设置动画
1.动画的名字，自定义的
2.动画执行一次需要的时间
3.动画需要执行的次数，默认为1次，无限次：infinite
4.动画的形式
　　 线性动画：linear
　　由快到慢：ease

div{
　　width: 300px;
　　height: 200px;
　　background-color: orange;

　　animation:customAnimate 5s linear infinite;

　　@keyframes customAnimate{
　　　　/*from{background-color: cyan;}
　　　　to{background-color: red;}*/

　　　　/*
　　　　* from{起始属性操作}------》%0
　　　　* to{最终属性操作}-------》100%
　　　　*/

　　　　0%{
　　　　　　background-color: blue;
　　　　}
　　　　100%{
　　　　　　background-color: cyan;
　　　　}
}