html、css、JavaScript基础教程

最新推荐文章于 2024-08-10 10:42:27 发布

原创最新推荐文章于 2024-08-10 10:42:27 发布 · 841 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

5 篇文章

订阅专栏

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

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

1. html的简介

（Myeclipse10 tomcat7 servlet3.0）http://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>

2、html包含两部分内容

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

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

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

4、html代码不区分大小写

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

2. html中常用的标签

文字标签和注释标签

*文字标签：修改文字的样式，使用的较少

-<font></font>

-属性：

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

*color：文字颜色

-两种方式

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

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

*注释标签

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

*标题标签

-从h1到h6，大小依次变小，同时自动换行

*水平线标签

-<hr/>

-属性：size color

*特殊字符

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

-需要对特殊字符转义

< <

> >

空格 ;

4.列表标签

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

传智播客

财务部

学工部

人事部

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

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

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

代码

<dl>

<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位置

**回到这个位置

8.表格标签

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

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

-border：表格线

-bordercolor：表格线的颜色

-cellspacing：单元格之间的距离

-cellpadding

-width：表格的宽度

-height：表格的高度

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

-这是显示方式 align：left center right

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

-这是显示方式 align：left center right

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

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

*表格的标题

***合并单元格

-rowspan：跨行

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

-colspan：跨列

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

9.表单标签

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

-action：提交到地址，默认提交到当前的页面

-method：表单提交方式

-常用有两种 get和post，默认是get请求

Get和post区别？

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

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

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

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

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

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

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

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

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

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

-name：name的属性值必须要相同

-value：必须有

-默认选中checked=”checked”

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

-name：name的属性值必须要相同

-value：必须有

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

***下拉输入项:

</select>

***文本域

***隐藏项（不会显示在页面上，但是存在于html代码里面）

***提交按钮

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

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

***普通按钮 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两部分组成 head和body

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

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

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

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

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

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

12.框架标签（会用即可，div可替代）

*<frameset>

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

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

*<frame>

-具体显示的页面

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

例子：

</frameset>

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

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

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

CSS

1.css简介

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

很多的属性和属性值

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

2.css和html的结合方式（四中结合方式）

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

（2）使用html的一个标签实现<style>标签，卸载head里面

*<style type=”text/css”>

Div{

background-color:red;

}

</style>

（3）在style标签里面使用语句

@import url（css文件的路径）；

@import url(div.css);

</style>

（4）使用头标签link，引入外部css文件

-创建一个css文件

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

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

***优先级

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

3.css的基本选择器（三种）

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

（1）标签选择器

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

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

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

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

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

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

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

***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 ：hover：active：visited

**记忆方法 lv ha

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

（1）边框

border ： 2px solid blue；

border：统一设置，也可以上下左右分别设置

（2）内边距

padding：20px；统一设置，也可以上下左右分别设置

（3）外边距

margin：20px；统一设置，也可以上下左右分别设置

6.css的布局漂浮（了解）

float -left –right

7.css的定位

*postion

**属性值

-absolute：

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

*可以使top、bottom等属性进行绝对定位

-relative：

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

*可以使top、bottom等属性进行绝对定位

JavaScript

1.javascript的简介

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

-基于对象

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

-事件驱动

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

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

*js的特点

（1）交互性：信息的动态交互

（2）安全性：js不能访问本地磁盘

（3）跨平台性：只能有能够支持js的浏览器，就可以运行

*js的组成

（1）ECMAScript

-ECMA组织制定的js的语法

（2）BOM

-brower object model

（3）DOM

-document object model

2.js和html的结合方式（两种）

第一种

-使用一个标签 <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=“456”str+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.js的Array对象

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

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

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

**属性 length数组的长度

12..js的Date对象

**获取当前时间

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.js的Math对象

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

Math.random()

14.js的函数重载

**js里面不存在重载

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

15.js的bom对象

**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);

**clearTimeout（id）：清除setInterval设置的定时器

DHTML

*dom： document object model：文档对象模型

**文档：

超文本文档：html、xml

**对象：

属性和方法

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

*****可以使用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里面的标签，属性和文本都封装成对象。

*标签节点对应的值

标签节点对应的值

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提交表单

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 创建模版