Web开发基础教程：从HTML到CSS

需积分: 8 29 浏览量更新于2024-07-25 收藏 2.23MB PDF 举报

"Web开发基础教程" 本教程主要涵盖Web开发的基础知识，包括Html、Css和JavaScript三大核心部分，旨在帮助初学者了解Web基础知识，掌握Html常用标签，运用Css美化页面，并学会使用JavaScript脚本语言。一、Html基础知识 1. 第一讲：介绍Html、Web和Internet的关系，讲解Internet的起源，以及浏览器的作用，同时对Html进行简要概述。 2. 第二讲：讲解Html文件的结构，包括标签元素的基本概念，常见的Html标签，以及如何创建首个Html页面。 3. 第三讲：设计美观的Html文档，如使用字符实体，设定页面背景，调整文字颜色、字体和大小，以及设置链接颜色。 4. 第四讲：利用<head>标签来定义文档元信息，如<title>标签用于设置页面标题，<meta>标签则用于设置搜索关键字和字符集。 5. 第五讲：正文格式化技巧，包括设置标题、段落，预格式化文本，使用列表以及各种修饰文本的标签。 6. 第六讲：在页面中创建链接，添加链接的描述信息，控制链接的跳转方式，指定窗口打开链接，以及设置链接的快捷键。 7. 第七讲：如何在网页中插入和布局图像，设置图像尺寸、边框和位置，图文混排，以及添加多媒体内容和背景音乐。 8. 第八讲：利用表格展示信息，学习表格结构，数据布局，单元格合并，表格背景设置，以及嵌套表格的使用。 9. 第九讲：框架技术的应用，包括框架的目的，创建和管理框架，框架的嵌套，调整框架显示属性，以及处理不支持框架的浏览器。 10. 第十讲：通过<form>标签创建表单，理解不同类型的Input控件，使用下拉列表和多行文本框，以及自定义按钮。二、Css美化页面 1. 第十一讲：介绍样式表的引入，理解样式表的优势，学习如何创建和应用样式表。 2. 第十二讲：掌握选择器的概念，如元素选择器、类选择器和ID选择器，以及伪类和伪元素的使用。 3. 第十三讲：学习盒模型，包括边距、填充、边框和内容区域，以及如何调整元素的尺寸和位置。 4. 第十四讲：色彩和背景处理，包括颜色值、透明度、背景图片和背景重复等属性。 5. 第十五讲：文本样式，如字体、字号、行高、对齐方式、文本装饰和变换等。 6. 第十六讲：布局技术，包括浮动、定位和Flexbox或Grid布局系统。三、JavaScript脚本语言 1. 第十七讲：JavaScript的基础语法，变量、数据类型、运算符和流程控制语句的介绍。 2. 第十八讲：函数的使用，包括函数定义、参数传递和返回值。 3. 第十九讲：事件处理，如点击、鼠标移动和表单提交等事件的监听和响应。 4. 第二十讲：DOM操作，学习如何通过JavaScript选择、创建、修改和删除HTML元素。 5. 第二十一讲：AJAX异步通信，实现页面无刷新的数据更新。 6. 第二十二讲：JavaScript面向对象编程，包括构造函数、原型和继承。通过以上课程，学习者将具备构建静态网页的基本能力，为进一步学习动态Web开发打下坚实基础。

s now y v al le

. bo k ee . com

我们要学会使用强制换行标签 , 看到了吗 , 强制换行标签在这里已经折行显示

了 .

</body>

</h t m l>

我想看一下 : h t m lCod e \ 折行标签 .HTML

<!--

-->

--> 注释标签 :

: 注释标签用来在 HTML

HTML

HTML 源文件中插入注释。注释会被浏览器忽略。你可

以使用注释来解释你的代码，这样在你以后的维护很重要。

代码 :

</head>

<center > 千山鸟飞绝 ,</center>

<center > 万径人踪灭 .</center>

<center > 孤舟蓑笠翁 ,</center>

<center > 独钓寒江雪 .</ c enter>

</body>

</h t m l> 我想看一

下 : h t m lCod e \s n o wCo mm ent.HTML 注意 :

注释标签只有一个 !

! 号 ,

, 注释信息不会显示在浏览器中 .

我们也不要期望使用空格 ,

, 来进行排版 ,

, 浏览器对多个空格会当一个空格来处理

我们也不建议使用

</

</ p

p >

> 来插入空行 ,

, 我们要使用 <b

<b

<b r

r >

> 去插入空行 .

. <

< p

p >

> 可以不使

用 </p

</p

> 标记 ,

, 但我们还是尽量保持标签的对应性 .

2.5

2.5 标签的嵌套

我们在使用 H t m l 标签的时候是可以嵌套的 , 任何正文信息都是嵌套在 标

签中 , 同样 <bo d y> 标签又嵌套在 <ht m l></h tm l> 标签中 , 其它的嵌套的例子比如 :

加粗和斜体的嵌套

或者可以 :

加粗和斜体的嵌套

s now y v al le

. bo k ee . com

美的文章 . 在接下来的课程中我们将向你讲述如何组合 H t m l 的标签展示漂亮的 ht m l 文档 , 在

这一讲你将学会 : 设定文档的背景改变文

字的颜色 ,

, 字体大小 ,

, 字体风格设置链

接的颜色

综合应用各种标签

3.1

3.1 标签的缩进

我们在书写 H t m l 时 , 我们也提倡像写代码一样进行缩进 , 利用缩进我们可以创造出像诗

一样有韵律的代码 , 增加代码的美感 , 采用缩进的原则 , 也有利于代码的阅读和维护 . 你可以在

严格缩进的代码中迅速找出不匹配的标签等错误 . 杂乱无章的代码 , 我们也没有心情去修改和

维护 .

我们在对代码进行缩进时 , 一般要缩进 4 个空格 , 我们也可以使用 t a b 键去缩进代码 .

我们可以回头看一下 ” 爬楼与人生 .h t m l ” 的源码 , 采用缩进的写法后是不是更像一首诗呢 , 如果

你不信我把这段代码打乱给你看 , 看看你有多大的耐心把它读完 :

爬楼和人生 .

. h

h tml

tml

<ht m l><he a d><t i tl e > 爬楼和人生 </ t i t l e >< / he a d > < h3 > 爬楼和人生

</h3> < hr> 有一对兄弟，有一天他们出去爬山 , 然后一起回家。他们的家住在八十层楼他

们一人背着一大包的行李回家

，

却发现大楼停电了。于是哥哥就说 : 弟弟

，

我们一起爬楼梯

上去吧。于是他们就一起爬上去。到了二十楼的时候，哥哥又告诉弟弟 : 包包太重了，

我们把它放在二十楼，我们爬上去，明天再下来拿。弟弟说 : 好。于是他们就把他们的包

包放在二十楼

，

继续往上爬。到了四十楼

，

弟弟开始抱怨

，

于是就跟哥哥吵起来了。他们

边吵边爬，爬到了六十楼，哥哥就对弟弟说 : 只剩二十层楼了，我们不要吵了，默默的爬完

它吧 !! 于是他们就各走各的

，

终于到了家门口。哥哥就摆出了很帅的姿势 : 弟弟开门。弟

弟就对哥哥说 : 别闹了，钥匙不是在你那儿。结果，他们把钥匙留在二十楼的包包里了。

这个故事其实在反映我们的人生 , 有很多人在二十岁以前是活在家人的期望和老师

的期许之下 , 背负着很多的压力 ; 在二十岁之后离开了众人的压力 , 开始满腔的热血 , 开始有

很多的梦想要完成 ; 可是工作了二十年后 , 开始发觉工作不如意 ... 于是就开始抱怨老板、抱怨

公司

、

抱怨社会

、

抱怨政府。就在这抱怨中又渡过了二十年。于是告诉自己

，

六十岁了没

什么好抱怨的了，就默默的走完自己的这些年吧。到了八十岁快要死掉的前夕，才想起自

己好像有什么事还没完成 .. . .... 原来

，

他二十岁的梦想还没有完成。 所以，希望现

在的你 . ... 充满着理想 ... 充满着热情 .... 去做自己想做的事。人生短短数十载 , 也没有什么好担

心的不是吗 ? 尤其是在经历那么多的遭遇 , 更应该能体会 , 把握现在

。

记得吗 ? 今天就

是礼物 ! <hr> < /body>< / ht m l>

3.2

3.2 Ht

Ht m

m l

l 的空格规则

在 H t m l 中的空格规则为 : 多个空格 , 制表符 , 回车将转换为单一的空格 . 我们看一下含有空

格的源码和显示后的结果进行对比 :

代码 :

<he a d > <t i tl e> 在 H t m l 中使用空格 </t i t le >< / he a d >

剩余193页未读，继续阅读

哼奇奇2010

粉丝: 0
资源: 1

Web开发基础教程：从HTML到CSS

E32系列无线模块通信例程（UART）.rar_E32_E32无线模块_E32系列无线模块通信例程（UART）_e32模块_无线

OMRON光纤(E32系列)

E32-TTL-100

E32如何和stm32通信

可以用串口3和E32通信嘛

Lora E32和单片机

E32-433T30s

e32-433t20d

E32_get_setpara(uint8_t _para[])

linux e32,linux PXE无人值守安装出现 PXE-E32:TFTP OPen timeout的解决方法

最新资源