前端静态入门html+css

Html

标题标签<h1>~<h6>

段落标签<p>~</p>

<br/>段内换行

&nbsp;空格

预留文本，保存原格式<pre></pre>

<span>组合行内元素 段落当中某一部分采取单独的样式

<hr/>水平分割线

<!--注释-->     em strong 强调标签

 

<a href=”网址”>文字或图片</a>

Jpg gif png

<img src=”” alt=”” />

绝对路径 c：/site/logo.gif

相对路径 ../logo .Gif

锚点<a href=“# 锚点名称“></a>

<a name=“锚点名称”></a>

 

区域标签 <div></div>

无序列表<ul>

<li></li>

</ul>

有序列表<ol>

<li></li>

</ol>

 

<table border=”1”>表格

<tr>行

  <th></th>表头单元格自动加粗

<td>具体数据</td>单元格

</tr>

</table>

 

表单，采集用户信息

<form action=”处理页面”>

 <input type=”text文本框 | password 密码框| submit 提交按钮 value按钮上显示的文字

| reset 重置 value 重置按钮显示的文字” name=“”/>

<input type=”radio 单选框| checkbox多选框”>

<select>

 <option>选项</option>下拉列表

</select>

<textarea>内容<textarea>文本框

</form>

Css

行内

内部

外部

 

标签选择器

<style type=”text/css”>

body{color:blue:}

</style>

 

类别选择器

<style type=”text/css”>

.one{color:blue;}

<p class=”one”></p>

 

id选择器  只能被引用一次

<style type=”text/css”>

#one{color:blue;}

<p id=”one”></p>

 

嵌套声明

<style type=”text/css”>

p span{color:blue;}   只针对span标签内部来进行格式规定

<p><span>天使投资</span>1234</p>

 

集体声明

<style type=”text/css”>

h1,p{color:blue;}

<p>111111</p>

<h1>22222</h1>

 

全局声明

<style type=”text/css”>

*{color:blue;}

<p>111111</p>

<h1>22222</h1>

 

叠加引用选择器用空格隔开

<div class=”one yellow left”></div>

 

Div中组合选择器

{后代 空格

子元素 >   相邻兄弟 +   下面所有兄弟 ~}

伪类选择器（点击效果这一类）

{a:visited 点完

a:link 原本

a:hover 悬停

a:active 长按}

 

奇偶选择器

:nth-child(old | even)

文本

字体

 

背景

列表

表格

 

Css布局与定位

1. 盒子的实际宽度高度：content+padding+border+margin
2. overflow （hidden超出部分不可见  scroll 显示滚动条  auto如果有超出部分，显示滚动条）
3. border  width/style/color    border/top/left/right/bottom
4. padding margin（15px 20px 30px 15px；）  

text-align：center 图片文字水平居中

margin：0 auto； div水平居中  

1. 文档流flow，浮动定位float，层定位（网页元素的叠加）layer，position
2. 文档流定位
3. 块状元素独占一行block（height/width/margin/padding）常见<div><p><h1><ol/ul><table><form>
4. 行内元素 inline不独占一行，无法设置宽高，常见<span><a><b>    display:转换元素；
5. 行内块 inline-block 不独占一行 （height/width/margin/padding） 常见<img><input>
6. 浮动定位
7. float left左浮动/right右浮动/none不浮动
8. clear both清楚左右两边的浮动，left/right只清除一个方向的浮动
9. 层定位
10. position（相对于谁定位）  fixed固定定位（相对于浏览器窗口）/relative相对定位（相对于其直接父元素）/absolute绝对定位（相对于static定位意外的第一个父元素）

top/right/left/bottom      z-index：值大在上面

1. border top-left-radius/ top-right-radius/ bottom-left-radius/ bottom-right-radius 圆角边框
2. box-shadow （阴影 水平偏移 垂直偏移 模糊距离颜色）
3. text-shadow 文本阴影 （水平偏移 垂直偏移 阴影大小 颜色）0

word-wrap 允许长单词，url强制进行换行

@font-face 网页特殊字体

1. transform rotate （deg）旋转/scale（x，y）缩放 x水平方向缩放 y垂直方向缩放

0~1缩小 >1放大       2D转换

1. transition  过度

@keyframes定义动画  animation 调用动画

1. 3D变换 transform-style：preserve-3d

rotate X（deg）/Y（deg）/Z（deg）

perspective 透视

java script

js运行于js解释器中的解释型语言

1. Ecma script 核心
2. 文档对象模型dom 让js有能力与网页进行对话
3. 浏览器对象模型 bom 让js有能力与浏览器对话
4. 浏览器内核 内容排版引擎解析html/css 脚本解释引擎 java script
5. 行内添加  <button οnclick=”alert(‘行内js’)”>单击试试</button>

内嵌添加<script></script>可以出现在任何位置  

外部引用js文件引用< script src=””></script>

1. var 变量声明 变量名=值；console.log（）输出
2. 数字类型 字符串类型 布尔类型 空 未定义

toString（）parseInt parseFloat number强制类型转换

8.  + - * / %  ！==不全等 ===全等  &&与 ||或！非

9.  function 函数名（）{可执行语句：} 注意函数的作用域，局部变量，全局变量

10.  if-else switch-case 选择 while do-while for 循环 break continue

11. 数组 var arr=[元素];  不知道数组中有多少元素var arr=new Array(元素);

12.关联数组 自定义下标名称 book[‘price’]=35.5;

13.数组转字符串 String（arr） arr.join（“连接词“）

拼接 concat（值1，值2……）

选取slice（starti，endi）返回现有数组的一个子数组 含头不含尾

数组名.splice（starti，n）直接修改原数组

插入 数组名.splice（starti，0，值1，值2……）可替换

颠倒 数组名.reverse（）；

排序 数组名.sort（）

14.  dom 查找  对网页增删改查

（1）按id属性，精确查找一个元素对象

     var elem=document.getElementById（“id”）效率极高

 

（2）按标签名查找

Var elems =parent.getElementsByTagName(“tag ”)

(3) 通过name属性查找

Document.getElementsByName（“name属性值”）

（4）通过class 查找

var elems=parent.getElementsByClassName（“class”）

（5）通过css 选择器查找

var elem=parent.querySelector（“selector”）查一个

var elem=parent.querySelectorAll（“selector”）查多个

 

15. 修改   核心dom/html dom

核心dom：修改elem.setAttribute（“属性名”，value）；

           判断是否包含指定的属性 var bool=elem.hasAttribute（“属性名”）

          

 

 

删除属性 elem.removeAttribute（“属性名”）

修改样式

16.dom 添加

1.创建空元素 2.设置关键属性 3.将元素添加到dom树

 （1）创建空元素

   var elem=document.createElement（‘元素名’）

 （2）设置关键属性

（3）将元素添加到dom树

ParentNode.appendChild（childNode）

文档片段 1.创建var frag=document.createDocumentFragment（）；

         2.添加子元素 frag.appendChild（child）；

         3.将文档片段追加到页面 parent.appendChild（frag）；

append后frag自动释放不占用内存

17.Bom 专门操作浏览器窗口的apl

定时器 让程序按照时间间隔自动执行  网页特效等

1. 周期性

  1.var timer=定时器    给定时器取名

2.ClearInterval（timer）停止定时器   

（2）一次性定时器