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

Love The Way You Lie 2024-03-16 15:25 43阅读 0赞

#### 文章目录 ####

*  零、学习目标
 *  一、HTML基础
 *   *  1、HTML
     *  2、HTML的基本格式
     *  3、<!DOCTYPE>声明
     *  4、html标签
     *  5、head标签
     *  6、body标签
     *  7、编写第一个网页
 *  二、常用的HTML标签
 *   *  （一）段落、行内和换行标签
     *  （二）文本样式标签
     *  （三）表格标签
     *  （四）表单标签
     *  （五）多行文本标签
     *  （六）列表标签
     *   *  1、无序列表
         *  2、有序列表
         *  3、定义列表
     *  （七）超链接标签
     *  （八）图像标签
 *  三、CSS技术
 *   *  （一）初识CSS
     *   *  1、CSS的作用
         *  2、CSS的定义
         *  3、CSS的计量单位
         *  4、CSS中颜色的取值
     *  （二）CSS样式的引用方式
 *  四、JavaScript基础
 *   *  （一）JavaScript概述
     *   *  1、什么是JavaScript？
         *  2、JavaScript的组成
         *  3、JavaScript的引入方式

## 零、学习目标 ##

熟悉HTML标签的使用  
掌握CSS样式的引用方式  
掌握CSS选择器的常用属性  
熟悉DOM与BOM的相关知识  
掌握JavaScript的使用  
熟悉Bootstrap框架的下载与使用  
掌握BootStrap框架的常用组件

## 一、HTML基础 ##

### 1、HTML ###

HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的html代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。

### 2、HTML的基本格式 ###

![在这里插入图片描述][3891918bee554023a433d54b45931003.png]

### 3、<!DOCTYPE>声明 ###

声明必须是 HTML 文档的第一行，位于 标签之前。声明不是 HTML 标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范，网页在开头处使用声明为所有的HTML文档指定HTML版本和类型，这样浏览器将该网页作为有效的HTML文档，并按指定的文档类型进行解析。声明和浏览器的兼容性相关，声明被删除后，如何展示HTML页面的权利就交给了浏览器，即页面的显示效果由浏览器决定。

### 4、html标签 ###

标签位于声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，标签标志着HTML文档的开始，标签则标志着HTML文档的结束，它们之间是文档的头部和主体内容。

### 5、head标签 ###

标签用于定义HTML文档的头部信息，也被称为头部标签。标签紧跟在之后，主要用于封装其他位于文档头部的标签，如 、、及</link></meta>

### 6、body标签 ###

标签用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标签内，才能最终展示给用户。需要注意的是，一个HTML文档只能含有一对标签，且标签必须在标签内，位于标签之后，与标签是并列关系。

### 7、编写第一个网页 ###

![在这里插入图片描述][db20060dde6b4809995bc25c05251bcf.png]

## 二、常用的HTML标签 ##

### （一）段落、行内和换行标签 ###

目标：熟悉HTML的段内、行内和换行标签  
在chapter01文件夹中新建HTML文件htmlDemo02.html

### （二）文本样式标签 ###

目标：熟悉HTML的文本样式标签  
在HTML中，使用标签控制网页中文本的样式，如字体、字号和颜色  
标签的基本语法格式：<font 属性=“属性值”>文本内容  
在chapter01文件夹中新建HTML文件htmlDemo03.html  
![在这里插入图片描述][72ff0711369e481ca29d84edef0c91b8.png]

*  源代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Demo02</title>
    		<link rel="stylesheet" type="text/css" href="style02.css">
    	</head>
    	<body>
    		<div class="two">
    		<p><span class="title">相思</p>
    		<p> <span class="author">唐·王维</p>
    		<p>
    		<span class="content">红豆生南国，<br/>
    		春来发几支。<br/>
    		劝君多采撷，<br/>
    		此物最相思。<br/></span>
    		</p>
    		</div>
    		<div  class="two">
    		<p><span class="title">锦瑟</p>
    		<p> <span class="author">李商隐</span></p>
    		<p><span class="content">
    		锦瑟无端五十弦，一弦一柱思华年。<br/>
    		庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br/>
    		沧海月明珠有泪，蓝田日暖玉生烟。<br/>
    		此情可待成追忆? 只是当时已惘然。<br/>
    		</p>
    	</body>
    </html>

### （三）表格标签 ###

目标：掌握表格标签，学会使用border属性改变表格的边框  
在HTML网页中要想创建表格，需要使用相关的表格标签才能创建表格  
在HTML网页中创建表格的基本语法格式

![在这里插入图片描述][c555b3d56a3247ddbe87eae6d1f866c8.png]

### （四）表单标签 ###

目标：掌握表单标签，学会使用表单标签收集数据信息  
表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。  
![在这里插入图片描述][15789ba6d4864de9a835fcba686c4c9d.png]

### （五）多行文本标签 ###

HTML提供了标签，通过此标签可以创建多行文本框。

标签基本语法格式

![在这里插入图片描述][52462000fb864f1c8cc84698ea92b423.png]

### （六）列表标签 ###

目标：掌握列表标签，包括无序列表、有序列表和定义列表

#### 1、无序列表 ####

无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。  
定义无序列表的基本语法格式

#### 2、有序列表 ####

有序列表是一种强调排列顺序的列表，使用ol标签定义，内部可以嵌套多个li标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。  
定义有序列表的基本语法格式

#### 3、定义列表 ####

定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。  
定义列表的基本语法格式

### （七）超链接标签 ###

目标：掌握超链接标签的使用，可以使用超链接完成页面的跳转  
超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。  
使用标签创建超链接的基本语法格式：文本或图像  
标签是一个行内标签，用于定义超链接，href和target是标签的常用属性

### （八）图像标签 ###

目标：掌握图像标签，学会使用图像标签显示图像  
要想在HTML网页中显示图像就需要使用图像标签  
标签基本语法格式：![Image 1][]  
注意：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是标签的必需属性。图像源可以使本地图片文件，也可以是网络图片资源  
在chapter01文件夹中添加一个名称为bear.png的图片文件，然后创建一个HTML文件htmlDemo11.html  
![在这里插入图片描述][f4ff846c54724955aa007b306e6bbff7.png]

## 三、CSS技术 ##

### （一）初识CSS ###

目标：了解CSS的概念和基本格式，能够知道CSS用于做什么

#### 1、CSS的作用 ####

使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为我们所有的样式都是写在标签中，这样既不利于代码阅读，将来维护代码也非常困难。如果希望页面美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不适用标签属性设置显示样式，所有的样式交由CSS来设置。

#### 2、CSS的定义 ####

CSS 是Cascading Style Sheet的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。  
CSS定义的规则：选择器\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…\}  
在上述的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性:属性值”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。  
通过CSS样式对

标签进行设置  
div\{ border: 1px solid red; width: 600px; height: 400px;\}  
1  
div为选择器，表示CSS样式作用的HTML对象，border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值“1px solid red;”分别表示该边框为1像素、实心边框线、红色。

#### 3、CSS的计量单位 ####

在CSS中，通常使用像素单位px作为计量文本、边框等元素的标准量，px 是相对于显示器屏幕分辨率而言的。而百分比（%）是相对于父对象而言的，例如一个元素呈现的宽度是400px，子元素设置为50%，那么子元素所呈现的宽度为200px。

#### 4、CSS中颜色的取值 ####

（1）预定义的颜色值  
如red、green、blue等  
（2）十六进制表示的颜色值  
如\#FF0000、\#FF6600、\#29D794等。实际工作中，十六进制是最常用的定义颜色的方式  
可以利用颜色对照表选择自己喜欢的颜色对应的十六进制

### （二）CSS样式的引用方式 ###

目标：掌握CSS样式4种的引用方式，分别为行内式、内嵌式、链入式和导入式

![在这里插入图片描述][fde14a99ad8b4aa9a3b1d574c15ba9dd.png]

## 四、JavaScript基础 ##

### （一）JavaScript概述 ###

目标：了解JavaScript的概念和引用方式，能够知道JavaScript的组成

#### 1、什么是JavaScript？ ####

JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

#### 2、JavaScript的组成 ####

（1）ECMAScript  
ECMAScript是JavaScript的核心。ECMAScript 规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。  
（2）DOM（Document Object Model）  
文档对象模型，是W3C组织推荐的处理可扩展标签语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作（如大小、位置、颜色等）。  
（3）BOM（Browser Object Model）  
浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作（如弹出框、控制浏览器导航跳转等）

#### 3、JavaScript的引入方式 ####

（1）行内式  
行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中。  
在chapter01文件夹中创建一个名称为JavaScriptDemo01的HTML文件。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>JavaScript行内式</title>
    	</head>
    	<body>
    		<input type="button" value="单击我" onclick="alert('欢迎使用行内式脚本~')" />
    	</body>
    </html>

*  运行程序，使用浏览器打开文件JavaScriptDemo01。  
    （2）内嵌式  
    在HTML文档中，可以通过标签及其相关属性引入JavaScript代码。当浏览器读取到

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>JavaScript内嵌式</title>
    		<script type="text/javascript">
    			alert('欢迎使用内嵌式脚本~');
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

（3）外嵌式  
外链式是指将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML文件中使用

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>JavaScript外嵌式</title>
    		<script type="text/javascript" src="jsDemo.js"></script>
    	</head>
    	<body>
    	</body>
    </html>

[3891918bee554023a433d54b45931003.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/98f1464b95324e20843910611547dc5c.png
[db20060dde6b4809995bc25c05251bcf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9624bdd37a114747a01e97eb16e10542.png
[72ff0711369e481ca29d84edef0c91b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fa87a11fb49c4c63ad03fdf300e99715.png
[c555b3d56a3247ddbe87eae6d1f866c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/84cdf138ac9545368615479d04a32b69.png
[15789ba6d4864de9a835fcba686c4c9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/15dc50880b234ba9a231d518122295ed.png
[52462000fb864f1c8cc84698ea92b423.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/99d8dd3265984218852e8d0026452b52.png
[Image 1]: 
[f4ff846c54724955aa007b306e6bbff7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0cbea1b58f3748a6b9297b3781b08787.png
[fde14a99ad8b4aa9a3b1d574c15ba9dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1e790da69a4d4ab8af1487eecdad254b.png