HTML和CSS(部分)知识点总结
Posted Buu6
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML和CSS(部分)知识点总结相关的知识，希望对你有一定的参考价值。
html和CSS(部分)知识点总结
html的基本标签
1.标签标题
n表示不同大小的字体,n取值1-6
2.
水平线标签
创建一个水平分割线,用于定义内容主题的变化
👉size属性:水平线的高度,单位像素(px)
👉 noshade属性:没有阴影,取值:noshade,表示显示纯色
3. 字体标签
<font size="2" color="red" face = "微软雅黑">字体的内容</font>
size:设置字体大小,取值1-7 浏览器默认3
color: 设置字体的颜色
face: 设置文字的字体
4.格式化标签
粗体 斜体
5.
段落标签内 插入单个换行
6.标签图片
| 属性名称 | 含义 | 作用 |
|---|---|---|
| src | 图片的路径地址 | 必写属性,否则看不到图片 |
| width | 宽度 | |
| height | 高度 | 如果只设置其中一项,那么图片会等比例缩放 |
| title | 提示文本 | 鼠标悬停在图片上方会出现的文字信息 |
| alt | 替换文本 | 图片加载失败时候才会出现的文字信息 |
| border | 边框 | 只能定义边框的粗细 |
7.
- 标签
- 是标签内的每一列
无序列表
名称 含义 type=“circle” 空心圆 type=“disc” 默认值,实心圆 type=“square” 实心黑色正方形 注意:写在ul身上时所有li改变,写在li身上是单个改变 有序列表
type可以为1,a,A,i,I默认值阿拉伯数字,英文字母,大写英文字母,小写的罗马数字,大写的罗马数字
9.超链接标签
名称 作用 取值 href 规定链接的目标url 比写属性 target 规定在何处打开目标url.尽在href属性存在时使用 _blank新窗口打开
_self默认打开方式
framename框架的名称name 规定锚点的名称 自定义 空连接
<a href="javascript:;">空链接<a/> <a href="javascript:void(0);">空链接</a>锚点链接
<a href="#锚点名">点击跳转</a> <a name="锚点名">目标区域</a>10.表格标签
table是父标签,相当于整个表格的容器
用于定义行 用于定义表格的单元格(一个列)名稱 作用 border 表格边框的宽度 cellpadding 单元格边沿与其内容之间的空白 cellspaceing 单元格之间的空白 bgcolor 表格的背景颜色 height 表格的高度 width 表格的宽度 td标签的属性
标签用来定义表头,单元格的内容默认居中加粗名称 作用 colspan 单元格可横跨的列数(横向合并单元格) rowspan 单元格可横框的行数(纵向合并单元格) align 单元格内容的水平对齐方式 取值:left right 居中 表单相关标签
1、 < form>表单标签
表单标签的主要功能:把表单中的数据提交给远端的服务器。
From就像一个快递盒子,把需要发送给服务器的数据装到这个盒子里,点击提交按钮,然后浏览器就将数据发送给服务器
表单标签在浏览器上没有任何显示,但是所有需要提交到服务器的数据都需要存放在表单标签中。action属性:请求路径,确定表单提交到服务器的地址(路径)
method属性:请求方式。常用的取值:GET、POST
2、 输入域标签
标签用于获得用户输入信息,type属性值不同,搜集方式不同type属性
text: 文本框,单行的输入字段,默认宽度20个字符
password: 密码框,密码字段。
radio: 单选框,表示一组互斥选项按钮中的一个。
submit: 提交按钮。将表单数据发送到服务器。一般不写name属性,否则将”提交”两个字到服务器。
checkbox 复选框
file: 文件上传组件
hidden: 隐藏字段
reset: 重置按钮
image : 图形提交按钮
button: 普通按钮,常用于与javaScript结合使用
name: 元素(数据)名称,如果需要表单数据提交到服务器,必须提供name属性值,服务器通过属性值获得提交的数据value属性: 设置input标签的默认值。注意:submit和reset为按钮显示数据
size属性: input的宽度大小
checked属性: 单选框或复选框被选中
readonly: 是否只读 数据会被提交
disabled: 是否可用 数据不会被提交
maxlength: 允许输入的最大长度下拉列表。可用单选和多选。需要字标签 制定列表项
子标签:下拉列表中的一个选项(一个条目) selected: 勾选当前列表项 value: 发送给服务器的选项值 一般option需要给value这个属性,如果不给,默认把option的文本内容发送给服务器
name属性: 发送给服务器的名称
multiple属性: 不写默认单选,取值为”mutiple” 表示多选
size属性: 多选时,课件选项的数目文本域标签
cols属性:文本域的列数
rows属性:文本域的行数盒子模型
基本介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子</title> <style> .box1 /* 内容区(content).元素中的所有的子元素和文本内容都在内容区中排列 内容区的大小由width和height两个属性来设置 width 设置内容区的宽度 height 设置内容区的高度 */ width: 200px; height: 200px; background-color: skyblue; /* 边框(border),边框属于盒子边缘, 要设置边框,至少需要设置三个样式 边框的大小会影响到整个盒子的大小w 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style */ border-width:10px; border-color: red; border-style: solid; </style> </head> <body> <!-- 盒模型,盒子模型,框模型(box model) - CSS将页面中的所有元素都设置为了一个矩形的盒子 - 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置 - 每一个盒子都由以下几个部分组成: 内容区(content) 内边距(padding) 边框(border) 外边距(margin) --> <div class="box1"></div> </body> </html>边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <style> .box1 width:200px; height:200px; background: #bfa; /* 边框 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style */ /* border-width:10px; 默认值:一般都是3个像素 可以用来指定四个方向的边框的宽度 值的情况 四个值:上 右 下 左 三个值:上 左右 下 两个值: 上下 左右 除了border-width还有一组 border-xxx-width xxx可以是 top right bottom left */ /*border-width: 10px 20px 30px 40px;*/ /* border-color用来指定边框的颜色,同样可以分别指定四边的边框 规则和border-width一样 border-color可以省略,如果省略则自动使用color的颜色值 */ /*border-color: orange red pink yellow;*/ /*border-style 指定边框的样式 solid 表示实线 dotted 点状虚线 dashed 虚线 double 双线 borders-style默认是none 表示没有边框 */ /*border-style: solid;*/ /* border简写属性,通过该属性可以同时设置边框的所有的相关样式,并且没有顺序要求 */ border:10px orchid solid; </style> </head> <body> <div class = "box1"></div> </body> </html>外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 width: 200px; height: 200px; background-color: #bbffaa; border: 10px red solid; /* 外边距(margin) - 外边距不会影响盒子可见框的大小 - 但是外边距会影响盒子的大小 - 一共有四个方向的外边距 margin-top - 上外边距 设置一个正值,元素会向下移动 margin-right - 默认情况下设置margin-right不会产生 任何效果 margin-bottom - 下外边距 设置一个正值,其下边的元素会向下移动 margin-left - 左外边距 设置一个正值,元素会向右移动 - margin也可以 设置负值,如果是负值则元素会向相反方向移动, - 元素在页面中时按照自左向右的顺序排列的, 所以默认情况下如果我们设置的左和上外边距则会移动元素自身 而设置下和右外边距会移动其他元素 - margin的简写属性 margin可以同时设置四个方向的外边距,用法和padding一样 - margin 会影响到盒子实际占用空间 */ margin-top: 100px; margin-left: 100px; margin-bottom: 100px; </style> </head> <body> <div class="box1"> </div> </body> </html>内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1 width: 200px; height: 200px; background-color: #bbffaa; border: 10px orange solid; /* 内边距(padding) - 内容区和边框之间的距离是内边距 - 一共有四个方向的内边距 padding-top padding-right padding-bottom padding-left - 内边距的设置会影响到盒子的大小 - 背景颜色会延伸到内边距上 一个盒子的可见框的大小,由内容去 内边距和边框共同决定 所以在计算盒子大小时,需要将这三个区域加到一起计算 padding 内边距的简写属性,可以同时指定四个方向的内边距,规则和 border-width一样 */ padding:10px 20px 30px 40px; </style> </head> <body> <div class="box1"> </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .outer width:800px; height: 200px; border: solid red 10px; .inner /*width: auto; width的值默认就是auto*/ width: auto; height: 200px; background-color: #bbffaa; margin-right: 200px; /* 元素水平方向的布局: 元素在其父元素中,水平方向的位置由以下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right 一个元素在其父元素中,水平布局必须满足以下等式 margin-left + border-right + padding-left + width + padding-right+ border-right + margin-right = 其父类元素内容区的宽度(必须满足) 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 - 以上等式必须满足,如果相加结果使等式不成立,则称为过渡约束,则等式会自动调整 - 调整的情况 - 如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足 - 如果将一个宽度和一个外边距设置为auto 则宽度会调整到最大,设置为auto的外边距会自动为0 - 如果讲三个值都设置为auto,则外边距都是0,宽度最大 - 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值 所以我们经常利用这个特点来使一个元素在其父类元素中水平居中 实例: width:xxxpx; margin:0 auto; */ margin-left: 200px; </style> </head> <body> <div class="outer"> <div class="inner"> </div> </div> </body> </html>水平布局
选择器
群组选择器
作用:
选择器生命是以（，）隔开的选择器列表语法：
选择器1，选择器2，选择器3，…ex（例子）：
span，.important,#main,div.redColor
color:red;
font-size:12px;
页面中的所有的span，以及class为important的元素，
id为main的元素以及class为redColor的div元素，
它们的样式为 color：red,font-size:12px;命令显示图：
网页示例图：
后代选择器
后代：
只要具备层级关系的元素，被嵌套的都可以称之为 后代元素语法：
选择器1 选择器1，选择器2，样式声明;ex(例子)：
- #d1 span
作用： 匹配id为d1中的 所有的span
命令显示图：
网页示例图：
子代选择器：
子代：
只具备一级层级关系的元素，被嵌套的称之为 子代元素语法：
选择器1，选择器2，样式声明伪类选择器
作用：
匹配页面元素的不同状态的选择器分类：
-
链接伪类：
-
：link，匹配尚未被访问的超链接状态
-
：visited，匹配访问后的超链接的状态
推荐使用方式：
元素：伪类匹配id为anchor的元素为被访问时的样式 #anchor：link 匹配页面中id为myAn元素的访问过后的状态 #myAn：visited a:link -
动态伪类：
1. :hover 匹配鼠标悬停在元素上的状态 （重点） 2. ：active 匹配元素被激活时的状态 3. ：focus 匹配元素获取焦点时的状态（test，password，textarea） -
目标伪类
-
元素状态伪类 .
-
结构伪类
-
否定伪类
选择器的优先级：
示例图：命令显示图：
网页示例图：
命令显示图：
网页示例图：
- #d1 span
以上是关于HTML和CSS(部分)知识点总结的主要内容，如果未能解决你的问题，请参考以下文章