知识点1【HTML概述】

知识点2【文字标签】

知识点3【标题】

知识点4【超链接】

 知识点5【table表格标签】（重要）

 知识点6【form表单】（重要）

知识点7【JavaScript的概述】让网页动起来

1、什么是 Javascript?

2、网页使用js脚本的三种方式

知识点8【js的函数】

知识点9【JS的对象】

1、浏览器对象（window对象）

2、文本对象（Document对象）（重要）

知识点1【HTML概述】

HTML是超文本标记语言(Hyper Text Markup Language)

HTML由各种各样的标签(tag)组成，如

HTML标签

（1）由尖括号包围的关键词比如

（2）通常是成对（开始标签，结束标签）出现的比如,例外：

（3）注释标签：、注释

2、HTML元素

（1）开始标签(start tag)到结束标签(end tag)的所有代码

3、HTML属性

（1）在HTML元素的开始标签中规定

（2）以名称/值对的形式出现:

例子(01_first_html.html)：

hello, HTML!!!

1、元信息标记

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

2、标签位于文档的头部，不包含任何内容。

3、签的属性定义了与文档相关联的名称/值对。

4、在 HTML 中，标签没有结束标签。

5、标签永远位于 head 元素内部。

6、元数据总是以名称/值的形式被成对传递的

 案例1：

例子（02_meta.html）：
5秒后我们将去一个神奇的地方！(这个网页的关键字是：jump)

知识点2【文字标签】

 案例：

b:这些文字是粗体的

i:这些文字是斜体的

u:这些文字带有下划线

em:用于强调的文本，一般显示为斜体字

strong:用于特别强调的文本，显示为粗体字

code:用来指出这是一组代码:int main(void)

small:规定文本以小号字显示

big:规定文本以大号字显示

sup:122=144

sub:硫酸亚铁的分子式是Fe2SO4

运行结果：

知识点3【标题】

—

一级标题 -->6级标题

以及标题字体最大

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
普通段落

运行结果：

知识点4【超链接】

超链接

注：subject ---主题

（2）页面内的超链接

回到顶部：

回到某一位置：

<>

（3）页面外的超链接

外网：

内网：

（4）图片超链接

email to others

去中间看看

千锋，用良心做教育

打开本地一个新的网页



some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
中间
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
some information
回到顶部

 运行结果：

 知识点5【table表格标签】（重要）

案例：（晚上敲） 

统计学生信息 学生信息成绩信息照片 姓名性别专业课程分数 郑涵男电子信息web开发99调皮

运行结果：

 知识点6【form表单】（重要）

HTML页面与服务器交互的手段

(1)属性

name：表单的名称

method：表单数据从浏览器传输到服务器的方法

get：将表单数据附加在URL地址后面，长度不超过8192个字符,不具有保密性，默认为get

post：将表单数据包含在表单的主体中，一起传输到服务器上。没有长度限制,密文传输

action：用来定义表单处理程序

（2）

a、 表单输入标签

常用的文本域、按钮都是使用这个标签

属性：

name 域名称

type 域类型

value 元素值

type属性值:

text 文字域 password 密码域

file 文件域 checkbox 复选框

radio 单选框 button 普通按钮

submit 提交按钮 reset 重置按钮

hidden 隐藏域 image 图像域

b、选择列表

菜单和列表是为了节省网页的空间而产生的

属性

name 菜单和列表的名称

size 显示的选项数目

multiple 列表中的选项为多项

selected 默认被选中的选项(option中的属性)

c、文本域

用来制作多行文本输入域

属性

name 文字域的名称

rows 文字域的行数

cols 文字域的列数

案例1：input输入框

这是一个表单的案例
用户名:
密     码:
请选择你要上传的文件:
请选择你的爱好:LOL王者吃鸡
你的性别：男女

你猜猜这是谁:
         

运行结果：

 a、选择列表

菜单和列表是为了节省网页的空间而产生的

属性

name     菜单和列表的名称

size    显示的选项数目

multiple 列表中的选项为多项

selected 默认被选中的选项(option中的属性)

选择你的车型：BMW玛莎拉蒂火车宝骏自行车

运行结果：

案例3：文本域

a、文本域

用来制作多行文本输入域

属性

name     文字域的名称

rows     文字域的行数

cols     文字域的列数

请输入你的留言：
今天心情挺好！！！！！！！！啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

运行结果：

知识点7【JavaScript的概述】让网页动起来

1、什么是 Javascript?

Javascript是一种基于对象并具有安全性能的脚本语言，是由浏览器内解释器翻译成可执行格式后执行，在概念和设计方面，Java和Jvascript是两种完全不同的语言。

Javascript的四个特点：基于对象的语言、简单性、动态性、跨平台性

2、网页使用js脚本的三种方式

直接添加脚本 使用script标记插入脚本 链接脚本文件（推荐）

1、直接添加脚本

运行结果：

2、使用script标记插入脚本

function my_button(){alert("我就是你的惊吓，哈哈！！！");                }

 运行结果：

3、链接脚本文件（推荐）

运行结果：

4、运算符

（1）算数运算符

+、－、*、/、%、++、－－

（2）逻辑运算符

&&、||、!

（3）比较运算符

==、>、＝、

（4）位运算符

~、&、|、^、>、>>>(无符号右移)

（5）字符串运算符

+(合并运算符)

（6）赋值运算符

=、+=、-=、 *=、/=、%=

（7）条件运算符

? :（条件 ？结果1 ：结果2）

知识点8【js的函数】

函数的语法结构:function 函数名(参数1,参数2,…){函数体
}

案例：

index.html

deal.js

//arg1, arg2, arg3 不用写类型
function my_button(arg1, arg2, arg3)
{var data="";data += arg1;data +=":"data +=arg2;data +=":"data += arg3;//10:hehe:20alert(data);
}

运行结果：

知识点9【JS的对象】

1、浏览器对象（window对象）

Window 对象表示浏览器中打开的窗口，打开一个HTML网页会创建一个window对象

Window 对象是全局对象

window.open()打开一个新的窗口

window.close()关闭当前窗口

window.location.href：返回完整的URL;对其进行赋值，则能够跳转到相应的网页

function my_button()
{//open在新的窗口中打开网页//window.open("http://www.baidu.com");//在当前窗口中打开网页//window.location.href="http://www.baidu.com";//获取当前网页的url//alert(window.location.href);//关闭close关闭窗口window.close();
}

2、文本对象（Document对象）（重要）

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

1、提供了从JS脚本中对 HTML 页面中的所有元素进行访问

2、可以通过getElementById()方法,来根据对应的ID号去访问、控制HTML页面中的标签元素

3、可以通过title，URL属性获取当前文档的标题，URL信息等

4、可以通过write方法在HTML页面中写入HTML表达式

案例1：登录界面 value

index.html

用户名:
密码:
    

 14_js.js

function my_button(arg)
{if(arg == 1)//登录 admin 123456{//获取网页上输入框的用户名密码var usr = document.getElementById("usr").value;//重点var pwd = document.getElementById("pwd").value;if(usr=="admin" && pwd=="123456"){window.location.href="http://www.baidu.com";}else{alert("用户名或密码错误请重新输入");//清空用户名密码的输入框document.getElementById("usr").value="";document.getElementById("pwd").value="";}}else if(arg == 0)//取消{//清空用户名密码的输入框document.getElementById("usr").value="";document.getElementById("pwd").value="";}
}

运行结果：

 总结： document.getElementById("usr").value value一般用于输入框

2、案例 document获得label的内容 innerHTML

var text = document.getElementById("addr").innerHTML;

index.html

地址:BJ

15_js.js

function change_fun()
{//获取label的内容 对于label 而是innerHTMLvar text = document.getElementById("addr").innerHTML;alert("获得的内容为:"+text);//更改label的内容document.getElementById("addr").innerHTML="SZ";}

3、案例 document获得img的内容 src

index.html

此处有帅哥:

16_js.js

function change_fun()
{//更改img的内容 srcdocument.getElementById("img").src="./image/0001.png";
}

4、案例 document获得单选框的内容

index.html

请选择你的性别:男:女:

17_js.js

function sex_fun()
{alert("男:"+document.getElementById("nan").checked);//选中true 否则falsealert("女:"+document.getElementById("nv").checked);//选中true 否则false
}

运行结果：

 5、案例 document获得复选框的内容

请选择你的英雄:德玛西亚烬小法盲僧小炮

18_js.js

function hero_fun()
{//获取下拉列表框被选中的索引号var index = document.getElementById("hero").selectedIndex;//根据索引号 从选项数据中options[]中得到选中的内容var hero_name = document.getElementById("hero").options[index].value;alert("你选择的英雄为:"+hero_name);
}

运行结果：