经过近半月的学习,对于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 元素不浮动