首页 >> 大全

网页开发基础,HTML、CSS技术、JavaScript基础

2023-06-25 大全 53 作者:考证青年

属性()是您希望设置的样式属性(style )。每个属性有一个值。属性和值被冒号分开。

2)CSS的样式引用方式

要想使用 CSS 修饰网页,就需要在HTML 文档中引入CSS。引入CSS的方式有4种,分别为链入式、行内式(也称为内联样式)、内嵌式和导入式。下面对开发中常用的内嵌式和链入式这2种引入方式进行讲解。

a.内嵌式

内嵌式是将CSS代码集中写在HTML文档的< head>头部标记中,并用< style>标记定义,其基本语法格式如下。



在上述语法中,< style>标记一般位干< head>标记中的< title>标记之后,因为浏览器是从上到下解析代码的,把 CSS 代码放在头部便于提前被加载和解析,以避免网页内容加载后没有样式修饰带来的问题。同时,必须设置type的属性值为“text/css”,这样浏览器才知道< style>标记包含的是 CSS 代码。接下来通过一个案例来学习如何在 HTML文件中使用内嵌式加入 CSS。

b. 链入式

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过< link />,标记将外部样式表文件链接到 HTMI立件由其其本语法格式如下:


"CSS文件的路径" type="text/css" rel="stylesheet" />

在上面语法中,< link />标记需要放在< head>头部标记中,并且必须指定< link />标记的3个属性,具体如下:

· href:定义所链接外部样式表文件的地址,可以是相对路径,也可以是绝对路径。

· type:定义所链接文档的类型,这里需要指定为“text/css",表示链接的外部文件为CSS。

· rel:定义当前文档与被链接文档之间的关系,这里需要指定为“”,表示被链接的文档是一个样式表文件。

3.基础

DOM基础知识:

HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型( Model)。

HTML DOM 模型被构造为对象的树:

通过可编程的对象模型, 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

3.1 特点:

是一种轻量级的编程语言。

是可插入 HTML 页面的编程代码。

插入 HTML 页面后,可由所有的现代浏览器执行。

3.2 的使用

(1) 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 :

function functionname()
{// 执行代码
}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 在任何位置进行调用。

lamp 对大小写敏感。关键词 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

(2)调用带参数的函数

在调用函数时,您可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

可以发送任意多的参数,由逗号 (,) 分隔:

myFunction(argument1,argument2)

当我们声明函数时,请把参数作为变量来声明:

function myFunction(var1,var2)
{
代码
}

三、实际运用

1.HTML技术

注意:对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p>
</body>
</html>

解析:

< !DOCTYPE html >声明为HTML5文档
< html >元素是HTML页面的根元素
< head >元素包含了文档的元(meta)数据,如< meta charset="utf-8">定义网页编码格式为utf-8。
< title >元素描述了文档的标题
< body >元素包含了可见的页面内容< h1>元素定义一个大标题
< p >元素定义一个段落

1)HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思,严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素:< p >这是一个段落。< /p >

2)Web 浏览器

Web浏览器(如谷歌浏览器, ,,)是用于读取HTML文件,并将其作为网页显示。浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:

3)HTML 表格

代码示例:

"1">
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

运行展示:

4)HTML 表单

a. 文本域(Text )

文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。代码示例:

First name: "text" name="firstname">
Last name: "text" name="lastname">

运行展示:

b. 密码字段

密码字段通过标签 来定义:

Password: "password" name="pwd">

运行展示:

c. 单选按钮(Radio )

标签定义了表单单选框选项代码示例:

"radio" name="sex" value="male">Male
"radio" name="sex" value="female">Female

d.复选框()

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。代码示例:

"checkbox" name="vehicle" value="Bike">I have a bike
"checkbox" name="vehicle" value="Car">I have a car

e. 提交按钮( )

定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理:

"input" action="html_form_action.php" method="get"> Username: "text" name="user"> "submit" value="Submit">

运行展示:

这些在HTML的学习中都有 ,具体就可以自己去搜索资料学习。

2.CSS技术

1)CSS 实例

CSS声明总是以分号(;)结束,声明总以大括号({})括起来:

p {color:red;text-align:;}

为了让CSS可读性更强,你可以每行只描述一个属性:

p
{color:red;text-align:center;
}

2)CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{text-align:center;/*这是另一个注释*/color:black;font-family:arial;
}

3.基础

3.1 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

实例

测试实例 点我

收获:1. 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在HTML 4.01 中, 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML( 标准通用标记语言)。

HTML 4.01 规定了三种不同的 声明,分别是:、 和 。

HTML5 不是基于 SGML,因此不要求引用 DTD。

2. 对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了