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;
　　　　}
}