HTML随笔

开发工具：

普通青年：Dremweaver

文艺青年：sublime

高手和傻子：用记事本

<p></p>一个段落

<hr />水平

线标签单标记

<img src=”图像路径” /> 单标签

Autplay自动播放 loop循环播放

<base target=”_blank”/> 所有网站在新标签中打开

Mate标签用法

<mate char=”utf-8”>防止乱码

Charset:字符集

Utf-8：编码格式

Gbk

Gb2312

Big5

设置网页关键字

3设置网页描述信息

给搜索引擎看的

4网页重定向

Link标签

1设置网页图标（在head标签里）

注意事项：1最好将图标放到根目录下

2设置引用外部样式表:<link rel=”stylesheet” href=”1.css”>

列表

无序列表：（经常用无序列表）

</ul>

有type属性

Type=”circle”空心圆 Type=”disc”实心圆 <--默认 Type=”square”实心方块

有序列表：

</ol>

属性Type 默认123 type=”a” ttype=”I ”

自定义列表：

<dl>

</dl>

注意：1dt标签中只能包含行内元素

2 dd标签中可以包含所有的标签

3 网页结尾处的列表处的列表使用自定义列表

路径介绍：

分类两类

绝对路径：-cUserasusDesktop413day01codea.jpg

-http://www.baidu.com/b.jpg 完全的加盘符

相对路径 一个文件相对另一个文件的位置 三种写法

1在一个路径下直接写文件名称 <img src=”a.jpg” alt = “这是一个美女”>

2 图片在html的下层路径

在Html文件中，使用img文件夹下的a.jpg

把两个的绝对路径都拿出来找相同的部分

。。。。。 4.html

。。。。。 imga.jpg

在html中使用图片 4.html和img在一个路径下简单地说图片在html的下层路径

Imga.jpg

3 图片在html文件上层路径

首先把两个的绝对路径都拿出来

。。。。 code4.html

。。。。 c.jpg

怎么表示上层目录路径 ../ 表示相同的部分表示上层的上层../../

超链接

<a href = “链接到的资源路径”>显示在上面的内容</a>

href 链接的资源地址 href=”#”不做任何处理

target=”_blank” 设置打开的方式 _blank 在新标签打开 _self 当前页默认

定位资源

<a href=”top”>顶部</a> 回到这个位置 <a href=”#top”>回到顶部</a>

<pre></pre> 格式标签原样输出

表格

表格中的标签介绍：设置表头<th></th> （表格里面第一行）

快速生成：

table[boder="1" width="100"]>tr*4>td*4

表格结构介绍：

纵向合并 roespan

横向合并 colspan

表单

作用：收集用户信息

组成：

提示信息

表单控件（重点）

表单域

<form action=”” method=”” > action提交地址默认提交到当前界面

</form> method get安全性大小限制携带数据 post

文本输入框：

属性：

Maxlength 设置最大长度

Readonly 设置控件为只读

Disabled 禁止用户输入

Name 设置控件名称

Value 设置默认值

Id 控件编号

Placeholder ：占位符Placeholder=”敬清秋”

autocomplete autocomplete=”on”:输入框有历史记录自动完成；off无历史记录

required 必须输入填写不然提交不了

密码输入框

属性：

Maxlength 设置最大长度

Readonly 设置控件为只读

Disabled 禁止用户输入

Name 设置控件名称

Value 设置默认值

Id 控件编号

单选控件

注意该控件实现单选效果需要给控件设置相同的name名称

属性：

Checked=”checked”默认选中项

下拉列表

</select>

属性:

Selected默认选项在option选项里

Multiple: <select multiple="multiple"> 很少有人去用实现多选效果按住CTRL

其他写法：

</optgroup>

</select>

多选控件：

<input type="checkbox" name="" checked>看书

Checked 默认选择

资源上传：

请上传图片：

按钮

提交按钮：<input type=”submit”> （提交页面数据）

使用图片提交<input type=”image” src=”图片路径”>

普通按钮：<input type=”buttuon”>(普通按钮不能提交表单数据)

重置按钮：<input type=”reset”>（将数据恢复到默认值）

图片上传按钮：<input type=”image” src=”按钮.jpj”> (提交表单数据)

封装表单分组和标题如下：

</fieldset>

邮箱：<input type=”email” name=”em”>

数字：<input type=”number” step=”5”>只能输入数字 step每次叠加5

时间：<input type=”time”> <input type=”date”> <input type=”datetime”>手机用

网址：<input type=”url” name=”url”>

标签语义化（了解）

文本域<textarea cols=”10” row=”10”></textarea>

隐藏项不会显示在界面上存于HTML中<input type=”hidden”/>

Emmet语法：

div>ul>li(+Tab)

div+p+ul>li(+Tab)

<!—重复-->：

ul>li*10(+Tab)

CSS基础

1 、css重点总结

2 、选择器

3 、盒子模型

4 、浮动

5 、定位

1.2概念：
层叠样式表或者级联样式表（Cascading Style Sheets）

层叠：CSS的特性

内嵌式写法：

外链式写法：

行内式写法：

内嵌式写法：将CSS放到HTML中去写

在<head>标签里加入style标签

CSS代码

</style>

CSS语法：选择器 {属性；值；属性；值；} 选择标签的过程：标签选择器、类选择器、ID选择器、通配符选择器、交集选择器（标签指定式）、后代选择器、子代选择器、并集选择器

补充：伪类选择器、属性选择器、伪元素选择器

常用属性：

color:前景色（文字颜色）

background-color 背景色

font-size 设置文字大小

width 设置宽度

height 设置高度

px 像素 em 1em=一个文字大小

颜色表示方式

使用十六进制表示：#0-f之间

使用三原色：

RGB

R:red(0-255)

G:green(0-255)

B：blue(0-255)

扩展半透明效果：

另一种

类选择器：

.自定义类名{属性：值；

}
使用：.p_red{ color：red；}

通过class调用类样式

类选择器注意事项：

1 、一个类可以被多个标签同时调用

2 、一个类标签可以同时调用多个样式（人的名字）：<p class="p_red public">段落文字1</p>

类命名规范：

① 不能使用纯数字或者以数字开头定义的类名

② 不推荐使用汉字（可以不推荐用）

③ 不能使用特殊字符或者开头（%、@、！、&）

④ 个人推荐不使用标签名

复合选择器：

1标签指定式选择器

语法：

后代选择器：
注意后代选择器之间必须是嵌套关系

选择器与选择器之间必须有空格隔开

语法

关联选择器：

div p{ font-color:red;

} /*标签与标签之间有空格*/

组合选择器：

把不同的标签改成相同的样式：

div,p{ font-color:red;

}

伪元素选择器

Css里面提供了一些定义好的，可以直接拿过来用

比如超链接

原始状态鼠标放上去的状态点击点击后

<a href=”http://www.baidu,com.cn”>CSS概述和与html的结合方式超链接一</a>

原始状态: a:link{background-color:rad;}

悬浮状态：a:hover{background-color:green;}

点击状态：a:active{background-color:red;}

点击之后：a:visited{ background-color:red;}

{Text-indet:2em/20px(像素)} 首行缩进在选择器里

ID选择器：

#自定义名称{

}

定义：

#color{

color: red;

}

调用:

注意：页面中标签的id必须唯一；一个标签只能调用一个id样式

通配符选择器：

样式初始化用

Color = red；}

特点：该选择器会将页面所有标签选中

Font属性介绍：

font-size：30px；文字大小

font-weight:normal；文字加粗

700 建议数字 400文字正常显示

bold 文字加粗

font-style：normal；（正常显示）文字是否斜体显示

italic 斜体显示

font-family:微软雅黑可双引号也可以不加

（注意 1一次可以设置多个字体，字体与字体中间用逗号隔开

2要设置常用字体）

文字表示方式直接设置对应的名称

设置字体对应的英文方式

设置字体对应的编码（不常用已经落后）浏览器控制台 escape(“宋体”)回车 %相当于

line-height：20px；设置文字行高

font属性联写

例如：/* font-weight:700; font-style:italic; fon-size:30px;/line-height:20px; font-family:微软雅黑/

font:700 italic 30px/20px 微软雅黑;.

}

注意 1属性联写中必须设置font-size、font-family

2在属性联写中font-size 必须放到font-family前面设置

3如果font 属性联写中的属性都要设置，那么按照图片中的顺序设置

(黄色例子)

布局div+css

Css的盒子模型

1边框 2内边框 3外边框

1、border：统一设置

上border-top

下border-bottom

左border-left

右border-right

border-style边框的样式 border-color颜色

2、内边距：padding统一设置

padding:20px; 使用padding统一设置也可分别设置上下左右四个内边框

分别设置：padding-top

3、外边距

margin统一设置

分别设置：margin-top:20px;….

Css的布局的漂浮

float属性值：

left:文本流向对象右边

right:文本流向对象左边

css布局定位

position:属性（广告经常使用）

absolute:将对象从文档中拖出可以使用top、bottom等属性进行定位

relative对象不可以层叠，但将依据left、right、top，bottom等属性在正常文档中偏移位置可以使用top、bottom等属性进行定位

#div{position:relative;

top:80px;

left:120px;
}

图文混排：

文字写进图片中图片签名

JavaScript

是基于对象事件驱动的语言，应用于客户端

基于对象：提供了很多对象，可以直接拿来用

事件驱动：html做静态效果，javascript动态效果

应用于客户端：专门指的浏览器

JS特点：1、交互性：信息的动态交互 2、安全性：JS不能访问本地磁盘

3、跨平台型：(java里面跨平台虚拟机) 能够支持JS的浏览器都能运行

组成：1、ECMAScript: ECMA:欧洲计算机协会有ECMA制定的js语法、语句…

2、BOM：borject model:浏览器对象模型

3、DOM：document object model 文档对象模型

JS与HTML结合方式：

两种结合方式1使用一个标签：<script type=”test/javascript”></script>

2、第二种结合方式使用script标签引入外部的js文件

创建一个js文件，写js代码

Js的原始类型和声明变量：

Java的基本类型 byte short int long float double char Boolean

Js的原始类型：

string: var str = “abc”; number: var m = 123;

boolean: true和false var flag = true;

null: var date = new Date(); 获取对象的引用，null表示对象引用为空，所有对象的引用也是obhect

undefined: 定义一个变量没有赋值 var aa;

typeof(变量名称);

js的语句：

java里面的语句：if判断语句、switch语句、循环语句

JS里面的语句：if

switch:

Js的运算符: 不区分小数和整数

字符串的相加和相减： var str = “456”; alert(str+1)；输出4561

做减法变为 455

Boolean true 1 false：0

== ===区别：

== 两个等号比较的是值不在乎类型三个等号比较的的是值和类型

页面输入值： document.write(“aaaaaaaaaa”); document.write(“<br/>”);

document.write(“<hr/”);

write里面是双引号，如果设置标签的属性使用单引号

可以输出代码和HTML代码

JS数组：第一种：var arr ={1,2,3,4}; var ar ={1,”12”,true} ;

第二种：使用内置对象Array ：var arr1 = new Array; //定义一个数组，数组长度是5

arr1[0] = “1”；

使用内置对象Array

var arr2 = new Array{3,4,5,6};//定义一个数组，数组里面元素是3、4、5、6

数组里面有一个属性length

在JS里面定义方法有三种：

1、使用到一个关键字 function

第一种：function方法名（参数列表）{方法体；返回值可有可无；}

第二种：匿名函数：var add = funtion(参数列表){方法体和返回值;}

第三种：(用得少，了解) 动态函数使用到JS里面的一个内置对象Function

var add = new function(“x,y”,”var sum;sum = x+y;return sum;”);

alter(add(2,5));

②var canshu = “x,y”;

var fangfati = ” var sum;sum = x+y;return sum;”

var add = new function(canshu, fangfati);

alter(add(2,5));

局部变量和全局变量：

全局变量：在script标签里面定义的一个变量，这个变量在页面使用中js部分可以用

在方法的外部使用在方法的内部使用在别的script标签使用

局部变量：在方法内部定义一个变量，只能在方法内部使用

如果在方法的外部调用会报错

Ie自带一个调试工具 ie8及其以上的版本中按f12 在页面下方出现一个条

Script标签放置位置规范：

方法的重载：

内容总结：

css和html的四种结合方式

1、在每个html标签上都有一个属性style，把css和html结合在一起

2、使用html的一个标签实现<style>标签，写在head里面

例如：<style type=”text/css”> div{ background-color:red; color:red;} </stype>

3、在style标签里面适用语句（在某些浏览器不能用）

@import url(css文件路径);

第一步创建一个css文件

4、使用头标签 link 引入外部css文件

第一步创建一个 css文件

第三种结合方式缺点：在某些浏览器下不起作用

优先级（一般情况下）

由上到下，由外到内，优先级由高到低

后加载优先级高

格式：选择器名称{属性名：属性值；属性名：属性值;…}

Css的基本选择器:

标签选择器 div{css 代码;}

Class选择器（类选择器） .名称{}

Id选择器 #名称{}

Css的扩展选择器（了解）

关联选择器:嵌套标签的样式的设置

组合选择器：不同标签设置的相同样式

伪元素选择器： a标签的状态

Css里面提供了一些定义好的样式，可以直接拿过来用

例如超链接状态

原始状态鼠标放上去的状态点击点击后

:link :hover :active :visited

记忆方法： lv ha

Css的盒子模型

*边框:border 上下左右

*内边距：padding 上下左右

*外边距：margin 上下左右

漂浮：float:left right 定位：position:absolute relative

Javascript

*****什么是javascript 基于对象和事件驱动的语言，应用与客户端。

特点：交互性安全性跨平台性

Javascript 和java区别

组成（三部分）

*EAScript

*bom

*dom

**Js和html的结合方式（两种）

第一种：<script type=”text/javascript”>js代码</script>

第二种：<script type=”text/javascript” src=”js的路径”>

**Js数据类型

*五种原始类型 string number boolean null undefined

*定义变量的使用：var

**Js语句 *if *switch *for while do-while

**Js的运算符字符穿的操作： *相加：连接 *相减：执行相减运算

*Boolean类型相加：true:1 false:0 *==和===的区别 ==判断值 ; ===判断值和类型

**Js的数组：三种的定义方式 ** var arr = {1,2,”3”}; **var arr = new Array(9);//长度9

**var arr = new Array{1,2,3}; //元素是1,2,3 属性：length：数组的长度

** js的函数

** function add(z,b){方法体和返回值;};

** var add = function(m,n){方法体和返回值;}

** var add = new Function(“a,b”,”方法体和返回值”); ******不要忘记调用，不然不起作用

**js的全局变量和局部变量

**script标签的位置

**重载