经过近半月的学习，对于html、CSS、 JS的一些基础知识点有了更深入的了解，学习的过程需要不断的积累和总结，才能更好地进步。好记性不如烂笔头，以下就是我对这段时间的学习做的总结。
HTML知识点
-
HTML
- html是超文本标记语言，是用来描述web文档的一种标记语言。
-
标签分类
- 块级元素
符号 说明 <h1>一级标题</h1>~<h6>六级标题</h6> 标题标签 <p></p> 段落标签 <hr> 水平线标签 <ol><li></li></ol> 有序列表标签 <ul><li></li></ul> 无序列表标签 <div></div> 容器标签 - 行级元素
符号 说明 <b></b> 加粗文本 <i></i> 斜体文本 <em></em> 强调文本，实际效果与斜体文本类似 <strong></strong> 定义粗体文本，作用和<b>基本相同 <small></small> 定义小号文本 <sub></sub> 定义下标文本 <sup></sup> 定义上标文本 <bdo></bdo> 定义文本方向，里面有dir属性，只能取ltr和rtl
-
html表单的属性
- action属性
- action属性定义提交表单时要执行的操作。
- 通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。
- 如果省略action属性，默认action设置为当前页面。
- target属性
值 说明 _blank 显示在新的窗口 _self 显示在当前窗口 _parent 显示在父框架中 _top 显示在窗口的整个body中 framename 显示在命名的iframe中 -
method属性
-
method属性指定提交表单数据时要使用HTTP方法(get/post)。
-
提交表单数据时，默认的HTTP方法是get。
-
- action属性
- 块级元素
CSS知识点
-
css(cascading style sheet): 称为级联样式表，用于调整html中标签样式的语言。
- CSS样式三种使用方式
-
外部样式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css的外部使用方式</title> <link href="./p3.css" type="text/css" rel="stylesheet" /> </head> <body> <!-- 外部样式 : 在css文件中，写样式。在html文件中引用css文件。 --> <p id="p3">段落标签</p> </body> </html> <!--p3.css代码文件--> /*给id为p3的标签设置宽度和背景色*/ #p3{ width: 400px; background-color: aquamarine; } - 内联样式: 直接在标签上，通过style属性进行使用。
<!--内联样式的使用： 设置div盒子的宽为200像素，高为200像素，背景颜色为黄色--> <div id="" style="width: 200px; height: 200px;background-color: yellow;">盒子</div> - 内部样式: 在head标签中，通过<style>css语言</style>标签，进行调整样式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css的内部样式</title> <link href="./p3.css" type="text/css" rel="stylesheet" /> <style> .box{ width: 400px; background-color: black; } </style> </head> <body> <div class="box">盒子模型</div> </body> </html>
-
- 优先级
- 优先级：内联>内部>外部。
- 就近原则。
- 使用!important 可以改变优先级，优先级最高。
- CSS常用属性
- class选择器
- 语法：.class{ 属性: 属性值}
- id选择器
- 语法：#id{ 属性：属性值}
- *通配符/通配选择器
- 语法：*{ 属性：属性值}
- 分组选择器
- 语法：选择符1，选择符2，选择符3...{ 属性：属性值}
- 例如：#top1,#nav1,h1{ width: 450px;}
- 迭代选择器
- 选择符1，选择符2{ 属性： 属性值}
- 说明：选择选择符1中的所有选择符2。
- 伪类选择器
- 语法：
- a:link{ 属性: 属性值} 超链接的初始状态
- a:link{ 属性: 属性值} 超链接被访问的状态
- a:hover{ 属性:属性值} 鼠标悬停，即鼠标划过超链接的状态
- a:active{ 属性: 属性值} 超链接被激活时的状态，即鼠标按下时超链接的状态
- 语法：
- 选择器的权重
- !important>内联样式>包含选择符>id选择器>class类选择器>元素
- class选择器
- CSS文本属性
属性 说明 font-size 字体大小 font-family 字体 color 字体颜色 font-weight bolder更粗的 bold加粗 normal常规 font-style 字体样式italic(斜字体)/oblique(倾斜的文字)/normal(常规) text-align left 水平靠左 right 水平靠右 center 水平居中 justify 水平俩端对齐 text-height 行高 可以实现单行文本垂直居中 text-indent 2em 首行缩进 letter-spacing 字间距 text-docoration none 没有 underline 下划线 overline 上划线 line-through 删除线 text-transform capitalize 每个单词字母大写 lowercase 将大写字母转为小写字母 uppercase 将小写字母转为大写字母
- CSS列表属性
属性 说明 list-style-type disc 实心圆 circle 空心圆 square 实心方块 none 去掉符号 list-style-image url(图片路径) 将图片设置为列表符合样式 list-style-position outside 列表的外面 inside 列表的里面 list-style none 去除列表符号 - CSS背景属性
//背景颜色 background-color: red; background-color: rgb(25,0,0); background-color: rgba(255,0,0,0.6) //0.6为透明度 //背景图片 background-image: url(图片路径); //背景图片的设置 background-repeat: no-repeat; //repeat(重复) 不重复 background-repeat: repeat; //重复 background-repeat: repeat-X; //沿X轴方向重复 background-repeat: repeat-Y; //沿Y轴方向重复 //背景图片定位 background-position: 水平位置 垂直位置;//left左 center居中 right右 top顶 bottom底 //背景图片的固定 background-attachment: scorll(滚动)/fixed(固定，固定之后就相对于浏览器窗口了); //背景图片的大小 background-size: 背景大小; //cover 把背景图片扩展足够大，以使图片完全覆盖背景区域 //contain 把背景图片扩展至最大尺寸，使其宽高完全适应内容区域，但可能留白。 - CSS边框属性
属性 说明 padding 内边距 一个值：四个方向一样 2个值：上下 左右 3个值：上 左右 下 4个值：上边 右边 下边 左边 (顺时针方向) padding-top 上内边距 padding-right 右内边距 padding-bottom 下内边距 padding-left 左内边距 border 边框 solid 实线 double 双实线 dashed 线断线 dotted 点状线 margin 外边距 0 auto 居中 其他与padding相同 - CSS浮动属性
属性 说明 float: left 元素靠左浮动(从左往右浮动) float: right 元素靠右浮动(从右往左浮动) float: none 元素不浮动
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
