admin管理员组

文章数量:1794759

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

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

一、学习目标 1.HTML技术 2.CSS技术 3.JavaScript基础 二、重要知识点 1.HTML技术 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言；可以使用 HTML 来建立自己的 Web站点，HTML 运行在浏览器上，由浏览器来解析。 1.1 什么是HTML?

HTML 是用来描述网页的一种语言 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面

1.2 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 < html > HTML 标签通常是成对出现的，比如 < b > 和 < /b > 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 <标签>内容</标签> 1.3 HTML 网页结构 下面是一个可视化的HTML页面结构：

<html> <head> <title>页面标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> <p>这是另外一个段落。</p> </body> </html>

1.4 通用声明 HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1.5 标记 1）HTML 文本格式化标签 HTML 使用标签 < b>(“bold”) 与 < i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体 这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

通常标签 < strong> 替换加粗标签 < b> 来使用, < em> 替换 < i>标签使用。 然而，这些标签的含义是不同的： < b> 与< i> 定义粗体或斜体文本。 < strong> 或者 < em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
  • 2）HTML 图像- 图像标签（ < img>）和源属性（Src） 在 HTML 中，图像由< img> 标签定义。 < img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。 要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。 定义图像的语法是： < img src="url" alt="some_text"> URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob 的 images 目录中，那么其 URL 为 www.runoob/images/pulpit.jpg。 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
  • HTML 图像- Alt属性 alt 属性用来为图像定义一串预备的可替换的文本。 替换文本属性的值是用户定义的。 <img src="boat.gif" alt="Big Boat"> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信，并且对于那些使用纯文本浏览器的人来说是非常有用的。
  • HTML 图像- 设置图像的高度与宽度 height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。 属性值默认单位为像素: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> 提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

3）HTML 表格 表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 4）HTML 表单 表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等。 表单使用表单标签 < form> 来设置:

<form> . input 元素 . </form>

HTML 表单 - 输入元素 多数情况下被用到的表单标签是输入标签（< input >）。 2.CSS技术 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一个。 2.1 CSS语法 1）CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 2）CSS的样式引用方式 要想使用 CSS 修饰网页,就需要在HTML 文档中引入CSS。引入CSS的方式有4种，分别为链入式、行内式(也称为内联样式）、内嵌式和导入式。下面对开发中常用的内嵌式和链入式这2种引入方式进行讲解。 a.内嵌式 内嵌式是将CSS代码集中写在HTML文档的< head>头部标记中,并用< style>标记定义，其基本语法格式如下。

<head> <style type= "text/css"> 选择器属性1:属性值1:属性2:属性值2;属性3:属性值 </style> </head>

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

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

在上面语法中，< link />标记需要放在< head>头部标记中，并且必须指定< link />标记的3个属性，具体如下: · href:定义所链接外部样式表文件的地址，可以是相对路径,也可以是绝对路径。 · type:定义所链接文档的类型，这里需要指定为“text/css",表示链接的外部文件为CSS。 · rel:定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。 3.JavaScript基础 DOM基础知识： HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

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

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 3.1 JavaScript 特点： JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 3.2 JavaScript 的使用 （1）JavaScript 函数语法 函数就是包裹在花括号中的代码块，前面使用了关键词 function：

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

当调用该函数时，会执行函数内的代码。 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。 lamp JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。 （2）调用带参数的函数 在调用函数时，您可以向其传递值，这些值被称为参数。 这些参数可以在函数中使用。 可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

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

function myFunction(var1,var2) { 代码 }

三、实际运用 1.HTML技术 注意：对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</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浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户： 3）HTML 表格 代码示例：

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

运行展示： 4）HTML 表单 a. 文本域（Text Fields） 文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。代码示例：

<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>

运行展示： b. 密码字段 密码字段通过标签 来定义:

<form> Password: <input type="password" name="pwd"> </form>

运行展示: c. 单选按钮（Radio Buttons） 标签定义了表单单选框选项代码示例：

<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>

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

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>

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

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

运行展示： 这些在HTML的学习中都有 ，具体就可以自己去搜索资料学习。 2.CSS技术 1）CSS 实例 CSS声明总是以分号(;)结束，声明总以大括号({})括起来: p {color:red;text-align:center;} 为了让CSS可读性更强，你可以每行只描述一个属性:

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

2）CSS 注释 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注释以 /* 开始, 以 */ 结束, 实例如下:

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

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

实例

测试实例 点我

收获：1.doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。 在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。 HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 不是基于 SGML，因此不要求引用 DTD。 2. 对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。

本文标签： 基础网页技术htmlcss

版权声明：本文标题：网页开发基础，HTML、CSS技术、JavaScript基础 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968692a123593.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。