html、css、JavaScript基础教程

本文详细介绍了HTML的基础知识,包括HTML的基本结构、常用标签及其属性,如标题标签、图像标签、超链接、表单等,并讲解了如何使用这些标签构建简单的网页。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. html的简介                           

Myeclipse10 tomcat7 servlet3.0http://www.my-eclipse.cn/history.html下载

什么是html                                

 http://www.zixue.it/forum.php 搜索“全部软件打包”下载开发工具

         - Hyper Text  Markup  Language:超文本标记语言,网页语言

          **超文本:超出文本的范畴,使用html可以轻松实现这样的操作

          **标记:html所有的操作都是通过标记实现的,标记就是标签,<标签></标签>

html的规范

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 是严格类型,兼容性好

         1、一个html文件开始标签和结束标签<html></html>

         2html包含两部分内容

                   1.<head>设置相关信息</head>,主要给机器看

                   2.<body>显示在页面上的内容都写在body里面</body>

         3html的标签有开始标签,也要有结束标签

         4html代码不区分大小写

         5、有些标签,没有结束标签,在标签内结束,如<br/> <hr/>

2. html中常用的标签

文字标签和注释标签

        *文字标签:修改文字的样式,使用的较少

                 -<font></font>

                                 -属性:

                                          *size:文字大小,取值范围1-7,超出了7,默认还是7

                                          *color:文字颜色

                                                   -两种方式

                                                         **英文单词:red green blue black white …..

                                                         **使用十六进制位  #ffffffRGB通过工具实现不同的颜色

       *注释标签   <!--   -->

3. 标题标签、水平标签和特殊标签

*标题标签

<h1><h1>  <h2> </h2>…….<h6></h6>

-h1h6,大小依次变小,同时自动换行

*水平线标签

-<hr/>

-属性:size  color

*特殊字符

-想在页面上显示这样的内容  <html>:这是页面的开始

-需要对特殊字符转义

<   <

>   >

空格  ;

4.列表标签

-比如现在显示这样的效果

传智播客

财务部

学工部

人事部

**<dl> <dl>:表示列表的内容

**dl里面<dt></dt>:上层内容

**dl里面<dd></dd>:下层内容

代码

<dl>

<dt>传智播客</dt>

<dd>财务部</dt>

<dd>学工部</dt>

<dd>人事部</dt>

<dl>

**<ol><ol>:有序列表的范围

-属性 type:设置排序方式1(默认)a  i

**ol标签里<li>具体内容</li>

**<ul></ul>:表示无序列表

属性 type 空心圆circle。。。。。

**ul标签里<li>具体内容</li>

5.图像标签

*<img src=” 图像的路径”/>

-src:图像的路径 –height  -width  –alt(兼容性差)图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容(不常用)。

6.路径的介绍

绝对路径:

相对路径:一个文件相对于另外一个文件的位置

三种:**html文件和图片在一个路径下,可以直接写文件名称

  **图片在html的下层目录

**图片在html文件的上层目录  ../表示上层路径

7.超链接

*链接资源

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

**href:连接的资源地址

** target:设置打开的方式,默认是当前页面打开

--_blank:在一个新窗口打开

--_self: 在当前页面打开 默认

   -当超链接不需要到任何的地址 href里面添加#

*定位资源
**如果想要定位资源:定义一个id位置

**回到这个位置

<a href=”#top”> 回到顶部</a>

8.表格标签

*可以对数据进行格式化,是数据显示更加清晰

*<table></table>:表示表格的范围

-border:表格线

-bordercolor:表格线的颜色

-cellspacing:单元格之间的距离

-cellpadding

-width:表格的宽度

-height:表格的高度

*table里面<tr></tr> 定义一行

-这是显示方式 alignleft   center  right

*tr里面<td></td> 定义一个单元格

-这是显示方式 alignleft   center  right

*<th></th> 也可以表示单元格

-表示可以实现居中和加粗

*表格的标题

<caption></caption>

***合并单元格

-rowspan:跨行

**<td rowspan=”2”>评价</td>

-colspan:跨列

**<td colspan=”3”>人员信息</td>

9.表单标签

*<form></form>:定义一个表单范围

-action:提交到地址,默认提交到当前的页面

-method:表单提交方式

-常用有两种 getpost,默认是get请求

Getpost区别?

1. get请求地址栏会携带提交的数据,post不会带

2.  get请求安全级别较低,post较高

3. Get请求数据大小的限制,post没有限制

**enctype:一般请求不需要这个属性,做文件上传需要这个属性

**输入项:可以输入内容或者选择内容的部分

***输入项需要有一个name属性

-大部分的输入项  使用 <input type=”输入项的类型”/>

***普通输入项:<input type=”text”/>

***密码输入项:<input type=”password”/>

***单选输入项:<input type=”radio”/>

-namename的属性值必须要相同

-value:必须有

-默认选中checked=”checked”

***复选框输入项:<input type=”checkbox”/>

-namename的属性值必须要相同

-value:必须有

***文件输入项:<input type=”file”/> 用于文件上传

***下拉输入项:

<select name=”brith”>

<option value=”1991”>1991</option>

</select>

***文本域

<textarea cols=”10” rows=”10”></textarea>

***隐藏项(不会显示在页面上,但是存在于html代码里面)

<input type=”hidden”/>

***提交按钮

<input type=”submit” value=”注册”/>

***使用图片进行提交,与submit作用相同

<input type=”image” src=””/>

***重置按钮,回到输入初始状态

<input type=”reset” value=”重置”/>

***普通按钮 button

**?输入项name的值=输入的值&  ,参数类似于key—value形式

Day01  16案例非常好

案例:使用表单实现注册页面

-使用表格实现页面效果

-超链接不想要他有效果 href =”#”

-如果表格里面的单元格没有内容,使用空格作为占位符 

-使用图片提交表单<input type=”image” src=””/>

10.html中的其他的常用标签

b:加粗  i:斜体 u:下划线 s:删除线

pre:原样输出

p:段落标签 比br标签多一行

sub:下标  sup:上标

div:自动换行

span:在一行显示

11.html的头标签的使用

*html两部分组成 headbody

**head里面的标签就是头标签

**title:表示在标签上显示的内容

**meta:设置页面的一些相关内容

**base标签:设置超链接的基本设置

-可以统一设置超链接的打开方式

<base target=”_blank”/>

**link标签:引入外部文件

12.框架标签 (会用即可,div可替代)

*<frameset>

-rows 按行进行划分  <frameset rows=”80,*”>

-cols 按列进行划分   <frameset cols=”80,*”>

*<frame>

-具体显示的页面

-<frame name=”name1” src=”a.html”>

 

例子:

<frameset rows=”80,*>

<frame name=”top”src=”a.html>

<frameset cols=”80,*”>

<frame name=”left” src=”b.html”>

<frame name=”right” src=”c.html”>

</frameset>

</frameset>

***使用框架标签时候,不能写在body里面,使用了框架标签,需要把body去掉

*如果在左边的页面超链接,想让内容显示在邮编的页面中

-设置超链接里面属性 target值设置成名称

<a href=”hello.html” target=”right”>

 

CSS

1.css简介

*css 层叠样式表,提高了面的显示效果

很多的属性和属性值

*css将页面内容和显示样式进行分离,提高了显示功能

2.csshtml的结合方式(四中结合方式)

1)在每个html标签上面都有一个属性style,把csshtml结合在一起

<div style=”background-color:red;color:green;”>哈哈</div>

2)使用html的一个标签实现<style>标签,卸载head里面

*<style type=”text/css”>

Div{

background-color:red;

}

</style>

3)在style标签里面 使用语句

@import urlcss文件的路径);

<style type=”text/css”>

@import url(div.css);

</style>

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

-创建一个css文件

-<link rel=”stylesheet” type=”text/css” href=”css文件的路径">

***第三种结合方式,缺点:在某些浏览器下不起作用,一般使用第四种方式

***优先级

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

3.css的基本选择器(三种)

**要对哪个标签里面的数据进行操作

(1) 标签选择器

*使用标签名作为选择器的名称

2class选择器 div.haha{}  .haha{}

  *每个html标签都有一个属性class

-<div class=”haha”></div>

-<p>class=”haha”></p>

3id选择器  div#hehe{} #hehe{}

*每个html标签都有一个id属性

<div id=”hehe”></div>

***3个选择器的优先级 style>id选择器>class选择器>标签选择器

4.css的扩展选择器

(1)关联选择器 div p{}

*<div><p>wwww</p></div>

*设置div标签里面p标签的样式,嵌套标签里的样式

div p{background-color red;}

2)组合选择器 div,p{}

*把不同的标签设置成具有相同的样式

3)伪元素选择器

*CSS里面提供了一些定义好的样式,可以拿过来用

*比如超链接

**超链接的状态

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

link hoveractivevisited

**记忆方法  lv ha

5.盒子模型  详情参见博文HTML+CSS+DIV实战演练笔记

1)边框

border 2px solid blue

border:统一设置,也可以上下左右分别设置

2)内边距

padding20px;统一设置,也可以上下左右分别设置

3)外边距

        margin20px;统一设置,也可以上下左右分别设置

6.css的布局漂浮(了解)

float  -left –right

7.css的定位

*postion

**属性值

-absolute

*将对象从文档流中拖出,会依托其上一个div(文档流可以理解为div固定的格式顺序)

*可以使topbottom等属性进行绝对定位

-relative

*不会将对象从文档流中拖出

*可以使topbottom等属性进行绝对定位

JavaScript

1.javascript的简介

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

-基于对象

**提供了很多对象,可以直接拿过来使用

-事件驱动

**html做网站静态效果,javascript动态效果

-客户端:专门指的是浏览器 .

*js的特点

1)交互性:信息的动态交互

2)安全性:js不能访问本地磁盘

3)跨平台性:只能有能够支持js的浏览器,就可以运行

*js的组成

1ECMAScript

-ECMA组织制定的js的语法

2BOM

-brower object model

3DOM

-document object model

2.jshtml的结合方式(两种)

第一种

-使用一个标签 <script type=”text/javascript”> </script>

第二种

-使用script标签,引入一个外部的js文件

***创建一个js文件,写js代码

-<script type=”text/javascript” src=”1.js”> </script>

**第二种方式中标签里面不要写代码,不会执行

3.js的原始类型和声明变量

**js的原始类型(五个)

-string 字符串

**var str=”abc”;

-number 数字类型

**var m=123;

-boolean

**var flag=true;

-null

**var date = new Date();

**获取对象的引用,null表示对象引用为空,所有对象的引用也是object

-undifined

**定义一个变量 ,没有赋值

**var aa

**typeof():查看当前变量的数据类型

 4.js的语句

**if判断语句和java中一样

**switch语句,写法一样

Js里面所有类型都支持

**while一样

**for循环中 把int改成var

**++i   i++都一样

5.js的运算符

**js中不区分整数和小数123/1000*1000=123

**字符串的相加和相减的操作

Var str=456str+1=4561

**str-1=455 相减的时候执行减法运算 提示NaN:表示不是一个数字

**boolean类型也可以操作var flag=false flag+1=1;

**如果设置成true,相当于这个值是1

**如果设置成false.,相当于这个值是0

**=====区别

**==比较的只是值

**===比较的是值和类型

6.7.数组和函数的定义及使用 略

8.全局变量和局部变量

**全局变量:在script标签里面定义的一个变量,这个变量在页面中的js部分都可以使用(在方法外部使用,在方法内部使用,在另外一个script标签中使用)

**局部变量:在方法内部定义一个变量,只能在方法内部使用

**IE自带 了一个调试工具,ie8及以上版本,键盘上F12

9. script标签的位置存放

**建议把script标签放到</body>后面

10.string对象

*属性length:字符串的长度

*方法:

1)与html相关的方法

2)与java相似的方法

11.jsArray对象

*var arr1=[1,2,3];

*var arr2=new Array(3); 长度是3

*var arr3=new Array(1,2,3);数组的元素是1 2 3

**属性 length数组的长度

12..jsDate对象

**获取当前时间

var date =new Date()

document.write(date.toLocaleString());转换成习惯的格式

**获取当前的年的方法

getFullYear() 返回四位的年份

**获取当前月的方法

getMonth(): 返回的数字0-11

var month=date.getMonth+1;

**获取当前的星期 返回0-6星期日是每周的第一天

getDay()

**得到当前的天 返回1-13

getDate()

**得到当前的小时:getHours()

**获取当前分钟:getMinutes()

**获取当前秒:getSeconds()

**获取毫秒数: getTime() 返回时1970 1至今的毫秒数

13.jsMath对象

Math.floor(0  Math.ceil()  Math.round()

Math.random()

14.js的函数重载

**js里面不存在重载

**但是可以通过其他方式模拟重载的效果,通过 arguments数组来实

15.jsbom对象

**brower object model 浏览器对象模型

**有那些对象?

*navigator:获取浏览器的信息 navigator.appName

*screen:获取屏幕信息 sreen.height

*location:请求url地址

-href属性

***获取到请求的url地址  location.href

***设置url地址

-页面上设置一个按钮,按钮上绑定一个事件,当我点击这个按钮,页面可以跳转到另外一个页面

-location.href=”hello.html”;

***<input type=”button” value=”click” onclick=”hello()”/>

*history:请求的url地址

**history.back()  上一个页面

**history.forward() 下一个页面

*window

**js层级中的顶层对象,所有的bom对象都是在window里面操作的

**方法

-alert():页面弹出一个框,显示内容

-confirm():确认框  var flag=window.confirm(“删除?”);

-prompt(): 输入的对话框

-open():打开新的窗口

-close():关闭窗口

--做定时器

**setInterval(“js代码”,毫秒数)

window.setInterval(“alert(‘123’)”,3000);  3秒出现一次123

**setTimeout(“js代码”,毫秒数)

-表示在毫秒数之后执行,但只会执行一次

window.setTimeout (“alert(‘123’)”,3000);3秒后出现123

**clearInterval( id):清除setInterval设置的定时器

var id= window.setInterval(“alert(‘123’)”,3000);

clearInterval( id);

**clearTimeoutid):清除setInterval设置的定时器

DHTML

*domdocument object model:文档对象模型

**文档:

超文本文档:htmlxml

**对象:

属性和方法

**模型:使用属性和方法操作超文本标记型文档

*****可以使用js里面的dom里面提供的对象,对标记型文档进行操作

***想要对标记型文档进行操作,首先需要对标记型文档里面的所有内容封装成对象

---需要把html里面的标签、属性、文本内容都封装成对象

***想要对标记型文档进行操作,解析标记型文档

***解析过程


根据html的层级结构,在内存中分配一个树形结构,需要把html的每个部分封装成对象

-document对象:整个文档

-element对象:标签对象

-属性对象

-文本对象

--Node节点对象:这个对象是这些对象的父对象

**如果在对象里面找不到想要的方法,这个时候到Node对象里面去找

1.document对象

*表示整个文档

**常用文档

***write()方法:页面输出变量或html代码

***getElementById(); 传入的参数是标签的id,返回object对象  通过“.value”获得对象的属性值,修改属性值

***getElementsByName():返回指定名称的对象集合

-通过标签的name的属性值得到标签,返回的是一个数组,通过遍历数组,得到每个标签里面的

***getElementsByTagName(“标签名称”):通过标签名称得到对象集合

****注意:

只有一个标签,这个标签只能使用name获取到,使用getElementsByName返回的数组只有一个元素,这时不需要遍历,而是可以直接通过数组的下标获取到值

2.element对象

操纵element对象属性首先要获取到element

-使用document里面相应的方法获取

**方法

**获取属性 getAttribute(“属性名称”)

与.value效果相同,但是.class是取不到的,因为它是关键字,只能用getAttribute(“class”)得到

**设置属性值setAttribute("属性名称","属性值");

**删除属性removeAttribute(“属性名称”); 注意:value属性是删不掉的


*获得子标签

使用childNodes()函数,在火狐浏览器下会产生不兼容的问题

在Element对象的范围内,可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。

3.Node对象属性

getAttributeNode();

*nodeName

*nodeType

*nodeValue

*使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象。

*标签节点对应的值

<span id="spanid">asd </span>

标签节点对应的值

var span1=document.getElementById("spanid");
alert(span1.nodeType);//1
alert(span1.nodeName);//span
alert(span1.nodeValue);//null

属性节点对应的值
var id1=span1.getAttributeNode("id");
alert(id1.nodeType);//2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid

文本对应的值

var t1=span1.firstChild;
alert(t1.nodeType);//3
alert(t1.nodeName);//#text
alert(t1.nodeValue);//文本内容

父节点、子节点、同辈节点

parentNode

childNodes、firstNode、lastNode

nextSibling、previousSibling

4.操作DOM树

茶如节点

**appendChild 添加子节点到末尾

**insertBefore(newNode,oldNode)在某个节点之前插入一个新的节点 

删除节点

removeChild:删除节点,只能通过父节点删除,而不能自己删除自己

替换节点:

**replaceChild(newNode,oldNode)

**cloneNode(boolean)复制节点

innerHTML属性

这个属性不是dom的组成部分,但是大多数浏览器都支持的属性

第一个作用:获取文本内容

第二个作用:向标签里面设置内容(可以是html代码)

其他

一、

表单提交方式

1.<input type=”submit” value=”提交”>

2.使用button提交表单

<input type=”button” value=”提交” onclick=”form1();”>

<script>

Function form1(){

var form1=document.getElemntById(“form1”);

form1.action=”hello.html”;

form1.submit();

}

</script>

3.超链接提交

<a href=”www.baidu.com?username=12323”>使用超链接提交</a>

快捷键

sublime快捷键

html +tab   创建模版
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值