web前端基础-优快云博客

本文链接：https://blog.youkuaiyun.com/gp3056/article/details/53444888

一、基本简介
1.背景：HTML不是变成语言，一种描述性的标记语言，全称是超文本标记语言，其中还有另一种XHTML，现在常用的HTML版本基本上是

HTML4.01和HTML5
2.编写工具：windows记事本、Editplus、notepad++、Dreamweaver....
3.编写规范：文件的后缀名为html或者htm
二、HTML的基本的标签和结构框架
1.基本框架

<html>
         <head>
		<title>test</title>
	</head>
        <body>
		<marquee>welcome to huaxin</marquee>
	</body>
</html>

其中head标签是头部标签基本上是标题，还有设置代码格式和搜索引擎关键字等等
body是整个页面的主体部分，网页的可视化部分
2.基本标签介绍：
<p></p> 为段落标记标签
<br> 换行标记标签
<hr> 分割线标记标签
<div></div> 区域布局标记标签
<marquee></marquee> 文字滚动标记标签
<center></center> 居中标记标签
<strong><B> 字体加粗
<I><VAR><CITE><DFN><ADDRESS> 字体添加倾斜效果
<H1><H2><H3><H4><H5><H6> 字体由大到小、由粗到细
<form><form> 数据提交标记标签
<ol><li> 有序清单
<ul><li> 无序清单
<MENU><DIR> 无序清单
<DL><DT><DD> 定义清单，仅仅只是列表清单，不做序号标识
<table><tr><td> 表格标记的三元素分别是：容器、列、单元格
<th> 等价于<td>，但是文字会自动加粗，用于显示主栏目
<caption> 表格标题列
<input> 输入框标记，种类分别是：Text、Radio、CheckBox、password、submit/reset、Image、file、hidden、button
<select><option> 下拉选单，select为选单对象，option为被选项
<textarea> 文本输入域
<a></a> 超链接标记标签
<frameset><frame> 框架标记标签
<noframes> 不支持框架则显示此标签内容
<iframe> 以框架模式插入另一个页面文件
二、div+css布局
1.css
a.基本定义:中文全称是层叠样式表，属于标记型语言，不需要编译，浏览器自动执行，div+css是web设计标准，是一种网页布局方法，

，css的最新版本是css3，是能购做到网页表现与内容分离的一种样式设计语言
b.作用:css是通过获取标签的标签名、name或者id属性来设置style属性，让代码清新，不冗余
几中style设置：标签内部属性设置、head标签style标签、外部css文件标签
c.css样式的基本语法:
行内模式(使用标签内部样式):<div style="设置样式代码">其他标签文本内容</div>
内联模式(适用于head标签里):<style type = "text/css"></style>
外部样式(外部css文件):<link href="样式文件路径" rel = "stylesheet" type = "text/css">
2.选择器:通用选择器、class选择器、id选择器、标签选择器、复合选择器、超链接选择器(主要是通过class和标签名来设置布局)

3.基本语法:

4.基本样式表:

属性名称	含义	取值范围
font-family	使用什么字体	所有的字体
font-style	字体是否斜体	Normal、italic、oblique
font-variant	是否用小体大写	Normal、small-caps
font-weight	字体的粗细	Normal、bold、bolder、lithter等
font-size	字体的大小	Absolute-size、relative-size、length、percentage

属性	含义	取值范围
Color	定义前景色	颜色
Background-color	定义背景色	颜色
Background-image	定义背景图案	路径
Background-repeat	重复方式	Repeat-x、repeat-y、no-repeat
Background-attachmen	设置滚动	Scroll、Fixed
Background-position	初始位置	Percentage、length、top、left、right、bottom等

属性	含义	取值范围
Word-spacing	单词之间的间距	Normal <length>
Letter-spacing	字母之间的间距	Normal <length>
Text-decoration	文字的装饰样式	None\|underline\|overline\|line-through\|blink
Vertical-align	垂直方向的位置	Baseline\|sub\|super\|top\|text-top\|middle\|bottom\|text-bottom\|
Text-transform	文本转换	Capitalize\|uppercase\|lowercase\|none
Text-align	对齐方式	Left\|right\|center\|justify
Text-indent	首行的缩进方式	<length>\|<percentage>
Line-height	文本的行高	Normal\|<number>\|<length>\|<percentage>

属性	含义	取值范围
Margin-top	外边距顶端边距	Length\|percentage\|auto
Margin-right	外边距右侧边距	Length\|percentage\|auto
Margin-bottom	外边距底端边距	Length\|percentage\|auto
Margin-left	外边距左侧边距	Length\|percentage\|auto
Padding-top	内边距顶端边距	Length\|percentage
Padding-right	内边距右端边距	Length\|percentage
Padding-bottom	内边距底端边距	Length\|percentage
Padding-left	内边距左端边距	Length\|percentage

属性	含义	取值范围
Border-top-width	顶端边框宽度	Thin\|medium\|thick\|length
Border-right-width	右侧边框宽度	Thin\|medium\|thick\|length
Border-bottom-width	底端边框宽度	Thin\|medium\|thick\|length
Border-left-width	左侧边框宽度	Thin\|medium\|thick\|length
Border-width	一次定义宽度	Thin\|medium\|thick\|length
Border-color	设置边框颜色	Color
Border-style	设置边框样式	None\|dotted\|dash\|solid等
Border-top	一次定义顶端	Border-top-width\|color等
Border-right	一次定义右侧	Border-top-width\|color等
Border-bottom	一次定义底端	Border-top-width\|color等
Border-left	一次定义左侧	Border-top-width\|color等

属性	含义	取值范围
Width	定义宽度属性	Length\|percentage\|auto
Height	定义高度属性	Length\|auto
Float	文字环绕	Left\|right\|none
Clear	哪一边环绕	Left\|right\|none\|both

属性	含义	取值范围
Display	定义是否显示	Block、inline、list-item、none
White-space	怎样处理空白	Normal、pre、nowrap
List-style-type	加项目编号	Disc、circle、square等
List-style-image	加图案	<url>\|none
List-style-position	第二行起始位置	Inside、outside
List-style	一次定义列表	<keyword>\|<position> \|<url>
Cursor	鼠标样式	Auto、Crosshair 、efault、Hand、Move、e-resize、Ne-resize 、Nw-resize、n-resize、Se-resize、Sw-resize、s-resize、w-resize、Text、Wait、Help

三、div+css+javascript

1、定义：可以自定义的切换效果，通过不同的事件监听来改变style属性

2.javascript编写规范:分为外部js和内部js

内部js编写格式:<script type="text/javascript">alert(1);</script>

外部js文件编写格式:<script type="text/javascript src="js文件路径"></script>

3.javascript基本语法:

定义变量的基本格式:var 变量名 = 字面量(定义字面量类型全部都用var关键字声明)

注释的基本格式:单行注释以双斜杠开头：//

多行注释以单斜杠星号开头，以星号单斜杠结尾：/*......*/

函数的基本定义格式:function 函数名(参数列表){函数体}

var 变量名 = function(参数列表){函数体}

var 变量名 = new function(参数1,参数2,函数体);

javascript数据类型:原始数据类型和引用数据类型

五个原始数据类型:undefined、null、boolean、number、string

一个复杂数据类型:object，也属于原始数据类型

自定义类引用类型

typeof和instanceof判断

typeof判断变量的具体类型，返回类型仅有如下几种:number,boolean,string,function,object,undefined(所有引用类型通过type校验都属object)

instanceof比typeof更精确到具体复杂类型

javascript核心对象:

数组对象(Array):用于存储一类型的数据（定义数组var 变量名 = new Array() var 变量名 = [值，值，值......])

Boolean对象:Boolean对象表示true或者false(注意：值为0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false)

日期对象(Data):可以获取当前日期时间

数学运算对象(Math):可以用于执行数学运算任务

数学对象(Number):可以是整数、小数或者科学计数

字符串对象(String):可以用单引号可以或者双引号引起来

全局函数对象(Function):包括顶层函数和顶层属性用于提供调用

时间对象(Event):时间通常与函数配合使用，这样可以通过事件来驱动函数执行

获取窗体宽度：document.documentElement.clientWidth

获取窗体高度：document.documentElement.clientHeight

循环调用方法：setInterval

停止循环调用：clearInterval

•获取键盘事件：

document.onkeydown=function(event){

var e = event || window.event || arguments.callee.caller.arguments[0];

var code = e.keyCode;

}

•鼠标事件

document.onmousemove =function(event){

e= event|| window.event;

var x = e.pageX || e.clientX;

var y = e.pageY || e.clientY;

};

dom对象

节点对象属性:

fristChild 指向childNode列表中的第一个节点

lastChid 指向最后一个

parentNode 返回给定一个父节点

childNodes 返回所有的子节点的列表

innerHTML 向节点中插入文本内容

节点对象方法:

createElement("tagname") 创建一个元素节点

createTextNode("text") 创建一个文本节点

appendChild(node) 将node添加到childNodes末尾

removeChild(node) 从childNodes中删除

replaceChild(newnode,oldnode) 在childNodes中的oldnode替换成newnode

insertBefore(newnode,refnode) 在childNodes中的refnode之前插入newnode

document对象方法:

getElementById() 根据节点对象的id属性来获取当前节点的对象

getElementsByName 根据节点对象的name属性来获取当前节点的对象

getElementsByTagName()根据节点对象的标签名来获取当前节点对象

write() 往html文档中写入html代码

事件添加:

行内模式:onclick=函数名()

事件绑定模式:window.onload=function(){

obj.onclick=function(){函数体}

}