简单的html基础入门2,表单,css,js概述!!

表单提交(重点)

action 主要指定的是 表单中的数据 要提交到的位置信息
method  指定提交方法:get post
get:本地化提交工作,把表单中数据提交到指定的action属性值的url地址中
post:连接服务器,把表单中的数据 直接提交给服务器

表单新input元素

1.H5新增了以下input的type类型
color	用于选取颜色
date	从一个日期选择器选择一个日期
datetime    选择一个日期(UTC 时间)(很多浏览器不支持)
datetime-local	选择一个日期和时间 (无时区).
email	包含 e-mail 地址的输入域
month	选择一个月份
number	包含数值的输入域
time	选择一个时间
url	包含 URL 地址的输入域,在提交表单时,会自动验证 url 域的值。
week	选择周和年

number:
请输入数字:<input type="number" max="20" min="0" step="4" value="8" />
max 指定最大值
min 指定最小值
step 指定数字之间的间隔大小值
value 默认值


CSS概述(重点)

1.CSS也叫级联样式单
2.有什么用,可以美化修饰页面,相当于页面的衣服
3.使用CSS的方式:
	1.内部样式表 --CSS只能装饰一份文档
	2.行内样式表 --CSS只能修饰单个元素
	3.外部样式表 --CSS可以修改多个文档
		1.链接
		2.导入

CSS格式(样式表的基本语法)(重点)

1.格式一:内部样式表--基础
	1.放在<head></head>标签中
		<style type="text/css">
			关键词 {属性1:属性值1;属性2:属性值2..}
		</style>
	说明:style表示样式,样式的类型css,关键词的位置放选择器,选择器有很多种,
	直接放我们的html元素就可以了,直接放元素(标签),也叫元素选择器
	如p,ins,del等
	
案例:给段落和标题加样式,样式如下:
{color: red;font-family: "微软雅黑";font-size: 30px;}
03内部样式-基础.html

课堂案例:给ins,del加样式,样式如下:
{color: red;font-family: "微软雅黑";font-size: 30px;}
03内部样式表-基础


2.格式二:内部样式表--共享
	如果多个标签用的样式都一样,如
	{color: red;font-family: "微软雅黑";font-size: 30px;}

	1.那么可以用共享样式的方式:
	<style type="text/css">
		.类名  {属性1:属性值1;属性2:属性值2..}
	</style>

	2.标签引用共享的样式:
	<开始标签  class="类名"></结束标签>

	3.注意类名的命名:字母或者字母加数字

案例:给段落和标题加样式,使用共享的方式,样式如下:
{color: red;font-family: "微软雅黑";font-size: 30px;}


课堂案例:给ins,del加样式,使用共享的方式,样式如下:
{color: red;font-family: "微软雅黑";font-size: 30px;}

04内部样式表-共享

CSS内部样式一(常用的样式属性-文本属性)(重点)

文本属性:
font-style  设置字体的样式
text-align  设置文本的对齐方式
color 颜色
font-size  字体的大小
font-family  字体的类型
案例:
08CSS文本属性.html

注意:当选择器样式表和类样式表做结合,共有的属性会做覆盖,不同的属性会做融合。

CSS内部样式二(常用的样式属性-背景属性)(重点)

背景属性:
background-color 背景色
background-image 背景图片
background-repeat  图片的重复方式
09背景属性
10背景属性-图片

CSS行内样式表(重点)

行内样式表
<开始标签  style="属性1:属性值1;属性2:属性值2.."></结束标签>
课堂练习:
给h2添加行内样式,内容自定义

CSS外部样式表概述(重点)

1.外部样式表,相当于把某些样式单独生成一个css文件,只要某个html文件需要用到该样式,就关联外部样式表即可。
2.这样做的好处是可以重复使用在多个文档中
3.根据样式文件与网页的关联方式又分为:
	链接(LINK )外部样式表
	导入(@import)外部样式表
4.导入和链接差不多,为什么会出现2中方式
因为以前很多浏览器不支持导入外部样式表,并且不支持一些高级CSS属性,
那么很多开发人员就把不支持的高级CSS属性用导入的方式与网页关联,
这样可以保证导入不了CSS的浏览器不会用到不支持的高级CSS属性,
现在还有一些浏览器不太支持大导入,导入会导致闪退
5.CSS文件里写的就是<style></style>包裹的内容


外部样式表链接引用方式(重点)

1.链接的关键字:link
2.要有后缀为.css的文件
3.格式:
<head>
<link href=".css文件的路径" rel="stylesheet" type="text/css">
</head>
注意:.css文件的地址可以是本地地址或互联网上绝对地址
rel="stylesheet" 表示定义了一个外部加载的样式表

外部样式表导入引用方式(重点)

1.使用@import
2.要有后缀为.css的文件
3.格式:
<style type="text/css">
	@import ".css的位置"
</style>

课堂练习:在css文件中写一个类样式,然后用导入的方式导入到html文件中

总结CSS

总结CSS
1.CSS是干嘛的:修饰美化页面
2.修饰多个文件用什么形式样式表:外部样式表
3.内部样式表有几种写法,分别是什么:类样式,选择器
4.如果只要文件中某个标签使用样式,那么用什么方法:行内样式表
5.外部样式表关联html文件有哪几种方式:2种,链接和导入
6.CSS文件中写的是什么:样式
7.三种:
	1.内部样式表 --作用在一个html文件
	2.行内样式表 --作用在单个元素
	3.外部样式表 --作用在多个html文件中

JavaScript概述

1.JavaScript 是一种具有面向对象能力的、解释型的程序设计语言,是脚本语言
说明:脚本语言是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言。直接解析运行就可以,但每次运行都要解析,传统的只要编译成可执行程序就可以运行了
2.可以直接在浏览器上运行
3.目的:验证发往服务器端的数据 、增加 Web互动、加强用户体验度等。

JavaScript的作用(重点)

JS的作用:操作HTML和CSS
增强逻辑性

JavaScript特征

松散型:它的变量不必具有一个明确的类型等]

解释型:不需要编译。浏览器直接解释执行。

基于对象:我们可以直接使用JS已经创建的对象。Math String

安全性:不允许访问本地硬盘,不能将数据写入到服务器上。

跨平台:js依赖于浏览器本身,与操作系统无关。

三核心
1.语法
2.存储语言的文本格式
3.运行他们的对象(浏览器)

JavaScript使用一(内嵌)(重点)

单行注释://
多行注释:/* 

*/
1.使用注意:
	1.js代码一般放到<head></head>标签中间(常用),也可以放到<body></body>中间
	2.格式:
	<script language="javascript">
		js语言
	</script>
	3.<script> </script>成对方式在html中可以出现多次
如:页面弹出"hello world js"
alert("字符串");


案例:页面弹出你自己的名字

JavaScript使用二(外调)(重点)

1.格式:<script language="javascript" src=".js后缀的文件路径"></script>
2.在.js后缀的文件中,不需要使用<script></script>标签对括起来。
3.<body onload="函数名()">表示的是加载页面时调用函数,函数是定义在.js后缀的文件中。(讲函数时讲)
4.注意:如果采用了引用外部js文件的方式,则在对应的script标签将不能再写任何js代码,否则无效
5.script标签可以在同一个html页面中出现多次,执行顺序为从上往下依次执行--
6.如果在head和body中都出现script的时候,先执行head中的,然后再执行js中的
7.最后执行body onload中调用的函数
如:使用外部调用js,弹出 '我是外部js'


案例:页面弹出你自己的名字

小结

1.js是什么:脚本语言
2.js的作用是什么:操控html和css
3.js的5种特征是什么:松散型,解释型,基于对象,安全性,跨平台
4.html文件中使用js有几种方法,别是什么:2种,内嵌,外调
5.内嵌到html中,具体是写到哪个标签对之间:<script></script>
6.外调用js文件,外调代码一般写在头部信息还是正文信息里:头部信息
7.<script>标签在html中可以有多对吗?可以
8.html中的js代码在什么情况下会无效(除写错外):在调用外部js中的<script>标签对之间
9.html中的js代码是从上往下执行还是从下往上执行:从上往下

JavaScript的语法(重点)

JS语法:
1.变量名区分大小
2.每个分句的结尾的分号可以写可不写,建议写生分号
3.标识符:指的是变量,函数,属性的名字
	1.第一字符必须是字母或下划线或$
	2.其他的可以是字母,下划线,$,数字
	3.不能使用关键字
4.注释:
	1.单行//
	2.多行:/* 多行 */
5.定义变量时,通常会用var 来修饰变量,可以不写
	如 var a=10;
6.可以用大括号代表一块代码块:
{
    语句块1;
    语句块2;
    语句块3;
    语句块4;
}


关键字不能用作变量名,函数名以及循环标签。
	abstract  continue  finally    instanceof  private  this
	boolean   default   float      int         public   throw
	break     do        for        interface   return   typeof
	byte      double    function   long        short    true
	case      else      goto       native      static   var
	catch     extends   implements new         super    void
	char      false     import     null        switch   while
	class     final     in         package     with     synchronized

猜你喜欢

转载自blog.csdn.net/BS936/article/details/107642975