动态网站开发01——HTML基础

一、HTML基础

1.1、编写一个网页

在E:\web_work里创建一个名称为chapter01的文件夹然后创建一个名为htmlDemo01的HTML文件。

保存并运行程序，使用浏览器打开。

2.2、常用的HTML标签

1.2.1 段落、行内和换行标签

在chapter01文件夹中新建HTML文件htmlDemo02.html

保存并运行程序，使用浏览器打开。

1.2.2 文本样式标签

在chapter01文件夹中新建HTML文件htmlDemo03.html

保存并运行程序，使用浏览器打开。

创建htmlEx01.html将王维诗的标题、作者和正文设置为不同的文本样式，而且文本居中显示，设置背景。

保存并运行

1.2.3 表格标签

运行查看效果

设置样式

查看效果

1.2.4 表单标签

在chapter01文件夹中创建一个HTML文件htmlDemo05.html

保存并运行程序可以在里面输入内容。

1.2.5 多行文本标签

在chapter01文件夹中创建一个HTML文件htmlDemo06.html

保存并运行程序

1.2.6 列表标签

*无序列表
在chapter01文件夹中创建一个HTML文件htmlDemo07.html

保存并运行

*有序列表
在chapter01文件夹中创建一个HTML文件htmlDemo08.html

保存并运行

*定义列表
在chapter01文件夹中创建一个HTML文件htmlDemo09.html

保存并运行

1.2.7 超链接标签

在chapter01文件夹中创建一个HTML文件htmlDemo10.html

保存并运行

单击泸州职业技术学院的效果

单击全国职业院校技能大赛的效果

1.2.8 图像标签

在chapter01文件夹中添加一个名称为img.png的图片文件，然后创建一个HTML文件htmlDemo11.html

保存运行查看效果

二、css样式

2.1 CSS样式的引用方式

2.1.1 行内式

在chapter01=文件夹中创建一个HTML文件cssDemo01.html

运行查看效果

2.1.2 内嵌式

在chapter01文件夹中创建一个HTML文件cssDemo02.html

运行查看效果

2.1.3 外链式

在chapter01文件夹中创建一个名称为style.css的文件。

在chapter01文件夹中创建一个HTML文件cssDemo03.html

运行查看效果

2.1.4 导入式

在chapter01文件夹中创建一个HTML文件cssDemo04.html

运行查看效果

2.2 CSS选择器

1、标签选择器
2、类选择器
3、id选择器
4、通配符选择器
在chapter01文件夹中创建一个HTML文件cssDemo05.html

运行查看效果

编辑poem.css

创建编辑cssDemo06.html

运行查看效果

三、JavaScript基础

3.1 JavaScript的引入方式

3.1.1 行内式

在chapter01文件夹中创建一个JavaScriptDemo01的HTML文件

运行查看效果

3.1.2 内嵌式

在chapter01文件夹中创建JavaScriptDemo02.html

运行查看效果

3.1.3 外嵌式

在chapter01文件夹中创建一个名为jsDemo.js的文件

在chapter01文件夹中创建一个名为JavaScriptDemo03的HTML文件。
在这里插入图片描述

运行查看效果

3.2 条件if语句

3.2.1 单向判断语句

3.2.2 双向判断语句

在chapter01文件夹中创建一个名为JavaScriptDemo04的HTML文件

运行查看效果

3.2.3 多向判断语句

在chapter01文件夹中创建一个名为JavaScriptDemo05的HTML文件。