为了考试复习方便 下面内容摘自前端HTML、CSS、JavaScript知识点总结_敐的博客-CSDN博客
?
前端HTML、CSS、JavaScript知识点总结
一、HTML
1.前端组成
? ? (1)前端的组成:内容(HTML)+样式(CSS)+页面交互特效(javascript);
? ? (2)前端编译(解析)器:浏览器
? ? ? ? 浏览没有统一,所以每个浏览内核不同,导致同一个页面用不同，浏览器 解析出效果不同(兼容性)。
? ? (3)前端开发工具:
? ? ? ? 记事本,nodepad++,HBuilder,Dreamweaver,WebStorm,eclips,myeclips,idea
2.html
? ? (1)定义：超文本标记语言，是一种由标签组成的语言,每个标签都有自己的 意义。
? ? (2)后缀名是.htm 或.html的文件。
? ? (3)html规范:
? ? ? ? 1)html不区分大小写,但是W3C提倡标签名和属性名全用小写。
? ? ? ? 2)html页面必须有根标签,根标签必须是<html></html>
?3)html标签必须关闭:
? ? ? ? ? ? 单标签:<标签名 属性名1="值1" 属性名2="值2" />
? ? ? ? ? ? 双标签:<标签名 属性名1="值1" 属性名2="值2"></标签名>
? ? ? ? 4)html的标签的属性值一定要写在引号中。
? ? ? ? 5)html的标签都已经定义好了,每个标签都有独特含义,不能自定义。
? ? ? ? 6)html的标签可以嵌套,嵌套要正确。
? ? ? ? ? ? <标签名1><标签名2></标签名2></标签名1>
? ? (4)html组成:文档声明+html基本结构.
? ? (5)html的文档声明:
? ? ? ? 1)STRICT（严格类型）:
? ? ? ? ? ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
? ? ? ? 2)TRANSITIONAL（过渡类型):
? ? ? ? ? ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
? ? ? ? 3)FRAMESET（框架类型):
? ? ? ? ? ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
? ? (6)HTML的标准结构
?
<html> - --- 根标签
<head> ---头部分(指定编码以及窗口标题)
<meta /> ---- 执行编码格式
<title>指定标题</title>
</head>
<body>
主体部分,所有的常用的html标签都这里。
</body>
</html>
(7)html注释:<!--注释内容-->
3.html中头部常用标签
? ? (1)页面标题标签:<title></title>
? ? (2)设置页面字符编码:
? ? ? ? <meta http-equiv="charset" content="gb2312"/>
? ? ? ? <meta http-equiv="Content-Type" ?content="text/html;charset=gb2312"/>
? ? (3)网页描述:
? ? ? ? <meta name="description" content="描述内容"/>
? ? (4)设置搜索关键字:
? ? ? ? <meta name="keywords" content="搜索关键字"/>
? ? (5)设置当前页面几秒后跳转到另一个页面:
? ? ? ? <meta http-equiv="refresh" content="3;url=跳转页面地址"/>
? ? (6)导入外部css文件：<link>
? ? (7)囊括书写的css内部样式：<style>...</style>
? ? (8)囊括和导入js代码<script>...</script>
4.html中body常用标签
4.1.块级标签:标签要独占一行
? ? (1)标题标签:设置标题
? ? ? ? <h1>~<h6>字体由大到小。
? ? (2)段落标签:<p></p>
? ? (3)水平线标签:<hr/>
? ? (4)无序列表:类型(实心圆，空心圆，方块)
<ul type="square">
<li>面条</li>
<li>泡面</li>
<li>燕窝</li>
</ul>
? ? (5)有序列表:类型(数字，字母，罗马数字)
<ol type="I">
<li>苹果</li>
<li>梨</li>
<li>橘子</li>
</ol>
? ? (6)自定义列表：用于对概念的解释说明,或图文混排
? ? (7)容器标签:<div></div>
? ? (8)表格标签：<table></table>
? ? (9)表单标签：<form></form>
4.2.行级标签(内联标签):内容有多大占多大的位置
? ? (1)换行标签:<br/>
? ? (2)段落缩进标签:blockquote，段落首行缩进 ? <blockquote></blockquote>
? ? (3)滚动标签:marquee，没有指定滚动方向，默认从右到左。
? ? ? ? 1)behavior:滚动方式
? ? ? ? ? ? slide:滚动到某一边停止
? ? ? ? ? ? alternate:来回滚动(两端)
? ? ? ? ? ? scroll:穿梭滚动
? ? ? ? 2)direction:滚动方向，left(从右往左),right(从左往右)。
? ? ? ? 3)scrollamount:滚动速度。
? ? ? ? 4)举例：
<marquee behavior="scroll" direction="right" scrollamount="20" bgcolor="pink">XXXXXXXXX</marquee>
??????(4)上标标签:sup,给某个文本设置上标。
? ? ? ? 举例：数学中的幂(平方、立方)：X<sup>2</sup>。
? ? (5)下标标签sub，给某个文本设置下标。
? ? ? ? 举例：化学中的化学式：H2O ?H<sup>2</sup>O。
? ? (6)原样输出标签:pre,被包裹的文本原样显示:<pre></pre>
? ? (7)行内标签span:<span></span>
? ? (8)加粗标签,加粗文本:strong,<strong></strong>
? ? (9)斜体标签,是文本以斜体显示:em,<em></em>
? ? (10)字体标签:font
? ? (11)居中标签:center，使内容居中:<center></center>
5.表格：table
? ? (1)属性：border:边框大小。
? ? ? ? width:表格宽度。
? ? ? ? height:表格的高度。
? ? ? ? align:表格在浏览器的位置。
? ? ? ? cellspacing:设置表格边框线和单元格之间的距离。
? ? ? ? cellpadding:设置单元格和单元格的距离。
? ? (2)子标签
? ? ? ? caption:表格的标题标签。
? ? ? ? tr:行标签。
? ? ? ? td:单元格。
? ? ? ? th:表头标签:自动居中并且适当加粗。
? ? (3)单元格的合并:
? ? ? ? 合并行:rowspan:占了几个单元格。
? ? ? ? 合并列:colspan:占了几个单元格。
6.表单标签form
? ? (1)表单:整个表单是块级标签,表单中每个元素是等级标签。
? ? (2)属性：
? ? ? ? action: url 本地地址/后台地址。
? ? ? ? method:常用的提交方式get/post。
? ? (3)应用场景：
? ? ? ? 1)注册
? ? ? ? ? ? 用户填写基本信息，前台校验，提交到后台的地址。
? ? ? ? ? ? 后台查询当前用户是否存在,如果不存在用户才能注册。
? ? ? ? 2)登录
? ? ? ? ? ? 输入用户名和密码,在后台查询数据库中是否存在这个用户名和密 码存在,才可以登录;没有注册,先要注册。
? ? (4)get方式和post方式的区别
? ? ? ? get方式:
? ? ? ? ? ? 1)直接将数据提交到url地址上。
? ? ? ? ? ? ? ? 举例：后台地址?username=zhangsan&password=123
? ? ? ? ? ? 2)不适合提交隐私数据。
? ? ? ? ? ? 3)由于是提交在地址栏上,它提交的数据大小有限制。
? ? ? ? post方式
? ? ? ? ? ? 1)不会将用户数据提交在地址栏上，存在于请求头下面。
? ? ? ? ? ? ? ? 实体内容：form data：username=xxx&password=123456
? ? ? ? ? ? ? ? 提交方式:get/post提交密码数据需要使用MD5加密或 springSecurity。
? ? ? ? ? ? 2)相对于get方式,post更安全。
? ? ? ? ? ? 3)它不是直接提交在地址栏上,提交的数据大小没有限制。
? ? (5)表单中的标签
? ? ? ? input标签
? ? ? ? select标签 :下拉菜单
? ? ? ? 子标签:option:下拉选项
? ? ? ? textarea:文本域，书写文字描述
7.input标签
? ? (1)属性：
? ? ? ? type:类型。
? ? ? ? value:输入框的默认值。
? ? ? ? placeholder:输入内容,自动获取焦点。
? ? ? ? 登录/注册:表单项中必填的属性name。
? ? ? ? name属性:给系统后台写的内容，提交数据的名称(标记)。
? ? (2)type属性的值：
| text | 文本输入框 |
| password | 密码输入框 |
| hide | 隐藏域: 没有效果,可以携带数据。 |
| date | 日期组件 |
| radio | 单项按钮 |
| checkbox | 复选框 |
| file | 文件上传 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图片按纽 |
| button | 文本内容就是当前按钮的名称 |
(3)注意事项:radio和checkbox，同一组类型信息，指定相同的name属性 值。
? ? ? ? 举例：checked="checked" 选中的状态。
8.图像标签:img
? ? (1)属性：
? ? ? ? src :连接到图片资源地址 。
? ? ? ? width:指定图片的宽度。
? ? ? ? height:指定图片的高度。
? ? ? ? ? ? 单位:指定像素px。
? ? ? ? ? ? 指定百分比:占当前50%，宽度和高度占整个分辨率的百分比。
? ? ? ? title:当鼠标悬浮图片上的提示文字
? ? ? ? alt:替换文本图片资源失效的时候,起作用。 ? ?
? ? (2)注意：
? ? ? ? 1)如果一个html页面中有3个图片(网络图片),请求某个服务器,会发 送4次请求。
? ? ? ? 2)请求页面http://域名:端口号/当前html资源文件地址。
? ? ? ? 3)每一个图片src加载都会发送一次请求。
9.超链接:a标签
? ? (1)属性：
? ? ? ? href属性:跳转到资源地址
? ? ? ? target属性:不指定,默认当前窗口直接打开地址。
? ? ? ? ? ? _blank:新建窗口打开资源文件。
? ? ? ? ? ? _self(默认值):当前窗口直接打开。
? ? (2)资源地址：本地资源地址、网络资源地址、指定的服务器地址。
? ? (3)协议：
? ? ? ? http://超文本传输协议
? ? ? ? thunder://:迅雷协议
? ? ? ? ? ? 如果本地有客户端软件，直接打开迅雷软件，没有跳转下载。
? ? ? ? mailto :邮件协议
? ? (4)http协议的执行流程:
? ? ? ? 在C:\Windows\System32\drivers\etc\hosts文件
? ? ? ? hosts文件记录了本地网站域名以及ip地址：localhost:127.0.0.1
? ? (5)如果hosts文件有访问的域名,并且对应ip,直接本地打开文件。
? ? ? ? 如果找不到,调用网卡来联网操作----DNS服务器(网络运营商)。
? ? (6)超链接的应用场景:? ? ? ? 1)连接到：网络资源地址/本地资源地址。 ? ?? ? ? ? 2)锚链接来使用
? ? ? ? ? ? 在同一个html页面的使用
? ? ? ? ? ? ? ?a)打锚点: 定义一个标记位置
? ? ? ? ? ? ? ? ? ?<a name="锚点名称"></a>
? ? ? ? ? ? ? ? b)创建一个跳转链接
? ? ? ? ? ? ? ? ? ? <a href="#锚点名称">跳转</a>
? ? ? ? ? ? 不同html页面的使用
? ? ? ? ? ? ? ? a)在另一个页面的某个位置打锚点: 定义一个标记位置。
? ? ? ? ? ? ? ? b)在当前页面上创建跳转标记
? ? ? ? ? ? ? ? ? ? <a href="跳转页面地址#锚点名称">跳转</a>
?
10.frameset标签:框架集标签
? ? (1)框架集:框架集与<body>标签不共存。页面要么不用框架集,要用框架集, 整个页面必须全用。
? ? (2)作用:用于将页面划分几个模块来布局.
? ? (3)优点:方便布局.
? ? (4)缺点:加载速度慢;灵活性差.
? ? (5)标签:
? ? ? ? frameset:可以整合多个页面与一个页面中。如果一个xxx系统由很多 html页面组成，那么可以使用frameset框架集标签。
? ? ? ? frame：一个frame中包含一个html页面。
? ? (6)frameset属性:
? ? ? ? rows:设置上下页面关系的权重(占整个框架集的百分比);
? ? ? ? cols:设置左右页面关系的权重(占整个框架集的百分比);
11.内联框架
? ? (1)作用:可以在页面上任意地方引入其他页面。
? ? (2)优点:灵活性高.
? ? (3)举例：
?
<iframe src="6.表单.html" frameborder="0" width="100%"></iframe>
12.特殊符号
| 含义 | 符号 |
| 小于号 | < |
| 大于号 | > |
| 与字符 | & |
| 引号 | " |
| 己注册 | ? |
| 版权 | ? |
| 商标 | ? |
| 空格 |
13.元素(标签)的分类
? ? (1)分类：块状元素、行内元素、内联块状元素
? ? (2)块状元素：独自占据一行的元素
? ? ? ? 1)html中的块状元素<div>、<p>、<h1>、<form>、<ul>、<li>等。
? ? ? ? 2)将行内元素显示设置为块状元素：display:block。
? ? ? ? ? ?将行内元素a转换为块状元素，使a元素具有块状元素特点
? ? ? ? ? ? a{display:block;}
? ? ? ? 3)块状元素特点：
? ? ? ? ? ? ①每个块状元素都独占一行。
? ? ? ? ? ? ②元素的高度、宽度、行高以及顶和底边距都可设置。
? ? ? ? ? ? ③元素宽度在不设置的情况下，是它本身父容器的100%（和父元素 的宽度一致），除非设定一个宽度。
? ? (3)行内元素(内联元素)
? ? ? ? 1)html中的行内元素（inline）元素：<span>、<a>、<label>、<input>、 <img>、<strong>、<em>等。
? ? ? ? 2)将块状元素设置为行内元素也可以通过代码display:inline,。
? ? ? ? 3)行内元素特点：
? ? ? ? ? ? ①和其他元素都在一行上；
? ? ? ? ? ? ②元素的高度、宽度、行高及顶部和底部边距不可设置；
? ? ? ? ? ? ③元素的宽度就是它包含的文字或图片的宽度，不可改变。
? ? (4)内联块状元素(css2.1新增)
? ? ? ? 1)描述：内联块状元素（inline-block）就是同时具备内联元素、块状 元素的特点。
? ? ? ? 2)将元素设置为内联块状元素：display:inline-block
? ? ? ? 3)内联块状元素:<img>、<input>
? ? ? ? 4)inline-block元素特点：
? ? ? ? ? ? ①和其他元素都在一行上；
? ? ? ? ? ? ②元素的高度、宽度、行高以及顶和底边距都可设置。
二、CSS
1.CSS
? ? (1)定义：层叠样式表（Cascading Style Sheet)。
? ? (2)页面内容和样式分离：HTML专门用来展示内容,CSS专门用来排版写样式。
? ? (3)CSS文件后缀名:.css
? ? (4)页面引入CSS的方式:
? ? ? ? 1)行内样式:在标签中直接用style属性写样式。
? ? ? ? ? ? 优点:直接方便。
? ? ? ? ? ? 缺点:代码复用性差;内容和样式混在一起,违反W3C要求。
?
? ? eg:<h1 style="color:red;">写代码要细心</h1>
????????2)内部样式:在<head>标签中写
? ? ? ? ? ? 优点:可以实现页面内样式复用
? ? ? ? ? ? 缺点:不能实现页面间的样式.
? ? eg:<style type="text/css"> h2{color:red; }</style>
????????3)外部样式:先写一个外部css文件,那个页面要用这个文件,就在这个 页面的<head>中用<link/>引入就可。
? ? ? ? ? ? 优点:可以实现页面间样式复用。
? ? eg:<link rel="stylesheet" href="css/1.css" />
? ? ? ? 4)(了解)导入样式:在<head>中<style>标签中用@import导入外部CSS 文件。
? ? 举例：<style type="text/css"> @import url("css/1.css"); </style>
? ? ? ? 5)注意:导入样式 VS 外部样式
? ? ? ? ? ? 导入样式只有部分浏览器支持，外部样式所有浏览都支持。
? ? ? ? ? ? 加载时机不同:
? ? ? ? ? ? ? ? 导入样式,先加载完html页面,再加载导入css文件。
? ? ? ? ? ? ? ? 外部样式,执行时就将CSS文件中代码引用了。
? ? (5)优先级(就近原则):内联样式> 嵌入样式> 外部样式。
? ? (6)CSS注释:/*注释内容*/、//
2.CSS的语法
? ? (1)选择器分类：标签选择器、类选择器、ID选择器、通用选择器、后代选 择器、子类选择器、相邻兄弟选择器、群组选择器、属性选择器。
? ? (2)标签选择器:选中页面上所有标签名相同的标签。
? ? ? ? 标签名称{样式代码;}
? ? (3)优先级:id选择器>类选择器>标签选择器
? ? (4)类选择器:先给标签取类名,然后以.类名开头。
?
举例:
给标签取类名
<h3 class="类名">热门新闻</h3>
类选择器
.class属性值{ 书写样式代码;}
????????
?(5)ID选择器:先给标签取id名,然后以#id名开头。
? ? ? ? 注意:在一个 HTML文档中，标签的id属性值不能重复，但可以有多个 不同ID选择器。
举例:
给标签取id名
<h4 id="id值">最新新闻</h4>
id选择器
#id值{书写样式代码;}
????????
(6)通用选择器(全局选择器):用*表示选中页面上所有标签。
? ? 举例:*{color: orangered; }
? ? (7)后代选择器:选择器之间以空格分隔。
? ? 举例:body span{ color: red; }
? ? (8)子选择器:选择器之间以>分隔
? ? 举例:body>span{ color: red; }
? ? (9)相邻兄弟选择器:选中当前标签紧跟着的同级标签,选择器之间以+分 隔。
? ? 举例:h2+h3{ color: red; }
? ? (10)群组选择器:选择器之间以“,”分隔。
? ? 举例:h1,h2,h3{ color: red; }
? ? (11)属性选择器:标签名[属性1][属性名2=值]
? ? 举例:标签名[属性1][属性名2=值]
?
? ? ? ? h3[class]{ color: red; }
? ? (12)伪类选择器：描述标签状态
? ? ? ? 1)状态：
? ? ? ? ? ? link:鼠标没有访问的状态。
? ? ? ? ? ? hover:鼠标经过标签状态。
? ? ? ? ? ? active:激活状态,鼠标点击但是没有松开的状态。
? ? ? ? ? ? visited:已经访问过的,点击后松开的状态。
? ? ? ? 2)格式
? ? ? ? ? ?选择器:状态{
? ? ? ? ? ? ? ? css样式代码
? ? ? ? ? ?}
? ? ? ? 3)注意：
? ? ? ? ? ? 在 CSS 定义中，a:hover必须被置于 a:link 和 a:visited 之后，才是有效的。
? ? ? ? ? ? 在 CSS 定义中，a:active 必须被置于a:hover 之后，才是有效的。
? ? (13)权值：浏览器是根据权值来判断使用哪种css样式的，权值高的就使用 哪种css样式。
? ? ? ? 1)权值的规则：
? ? ? ? ? ? 标签选择器的权值为1，
? ? ? ? ? ? 类选择器的权值为10，
? ? ? ? ? ? ID选择器的权值最高为100。
? ? ? ? 2)例如下面的代码：
?
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
????????3)!Important:为样式设置最高权值。
p{color:red!important;}2.CSS文本属性
? ? (1)color:设置文本颜色
? ? ? ? color: red;
? ? (2)direction:设置文本方向:
? ? ? ? 默认值:ltr
? ? ? ? direction: ltr;
? ? (3)line-height:设置行高 :行间距
? ? ? ? line-height: 5px;
? ? (4)letter-spacing:字符间距
? ? ? ? letter-spacing: 10px;
? ? (5)设置的对齐方式 text-align
? ? ? ? text-align: center;
? ? (6)text-decoration:设置文本修饰
? ? ? ? none:默认值
? ? ? ? text-decoration:none;
? ? (7)line-through:中划线
? ? ? ? overline:上划线
? ? ? ? underline:下划线
? ? (8)word-spacing:单词间距
? ? ? ? 系统默认两个字组成一个单词。
3.CSS字体属性
? ? (1)font-family :字体系列，是字体库中的所有字体。
? ? ? ? font-family: "楷体";
? ? (2)font-size:字体大小
? ? ? ? font-size: 30px;
? ? (3)font-style:字体风格
? ? ? ? 默认值:normal :正常的字体
? ? ? ? font-style: italic;
? ? ? ? font-style: oblique;
? ? (4)font-weight:设置字体的粗细程度
? ? ? ? bold 等价700px 适当加粗
? ? ? ? font-weight: bold;
? ? (5)font字体的简写属性:将所有的字体属性在声明中定义
font:font-style font-weight font-size font-family
font:italic bold 40px "楷体";
4.CSS背景属性
? ? (1)背景颜色:background-color
? ? ? ? background-color: darkgray;
? ? (2)background-image:设置图像为背景
? ? ? ? background-image: url(img/1.jpg);
? ? (3)background-repeat:设置图像是否重复以及如何重复
? ? ? ? repeat:水平方向/垂直方向重复
? ? ? ? repeat-x:水平方向重复
? ? ? ? repeat-y:垂直方向重复
? ? ? ? no-repeat:不重复
? ? (4)backgroun-position:top left
? ? ? ? 图像在浏览器中的垂直位置top/center/bottom
? ? ? ? 图像在浏览器中的水平位置left/center/right
? ? ? ? 如果设置图像不重复,默认的位置：background-position: top left;
? ? (5)背景的简写属性:background
?
格式：background:background-color background-position
background-repeat background-image
举例：background: red top center no-repeat url(img/1.jpg);
错题总结：
