动态网站开发学习笔记01：网页开发基础
目录
一、HTML基础
（一）HTML简介
1、HTML
- HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的html代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。
2、HTML语言的基本格式
3、<!DOCTYPE>声明
- 声明必须是 HTML 文档的第一行，位于 标签之前。声明不是 HTML 标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范，网页在开头处使用声明为所有的HTML文档指定HTML版本和类型，这样浏览器将该网页作为有效的HTML文档，并按指定的文档类型进行解析。声明和浏览器的兼容性相关，声明被删除后，如何展示HTML页面的权利就交给了浏览器，即页面的显示效果由浏览器决定。
4、html标签
- 标签位于声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，标签标志着HTML文档的开始，标签则标志着HTML文档的结束，它们之间是文档的头部和主体内容。
5、head标签
- 标签用于定义HTML文档的头部信息，也被称为头部标签。标签紧跟在之后，主要用于封装其他位于文档头部的标签，如
、、及</link></meta>
6、body标签
- 标签用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标签内，才能最终展示给用户。需要注意的是，一个HTML文档只能含有一对标签，且标签必须在标签内，位于标签之后，与标签是并列关系。
7、编写第一个网页
- 在D:\web_work里创建一个名称为chapter01的文件夹，然后在该文件夹中新建一个文本文件（.txt后缀），将文件的名称更改为htmlDemo01，后缀名改为.html。
- 在htmlDemo01.html文件中编写代码
- 运行程序，使用浏览器打开htmlDemo01.html文件
8、关于编写HTML文件的工具
-
读者在编写HTML文件时，可以使用系统自带的记事本编写，也可以使用Notepad++、EditPlus、UltraEdit、HBuilder或IDEA等工具编写HTML文件，当使用工具创建HTML文件时，文件中的基本标签会被自动创建，编辑工具还会有代码颜色和代码提示功能，开发者只需根据需求完善功能代码即可，工具的使用有助于提高编码效率，减少出错率。
-
Notepad++编辑器
-
HBuilder开发工具
-
IDEA开发工具
9、HTML标签概述
（1）单标签
- 单标签也被称为“空标签”，是指用一个标签符号就可以完整地描述某个功能的标签。
- 单标签基本语法格式：<标签名 />
- 注意：在标签名与“/”之间有一个空格，虽然在显示效果上有无空格都一样，但是按照规范的要求，建议加上空格。
- 为什么要有单标签？HTML标签的作用原理是选择网页内容进行描述，也就是说需要描述谁，就选择谁，所以才会有双标签的出现，双标签有开始和结束标签。而单标签本身就可以描述一个功能，不需要选择谁，例如水平线标签
，按照双标签的语法，它应该写成“
”，但是水平线标签不需要选择谁，它本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以单标签的语法格式就是在标签名称后面加一个关闭符，即为<标签名 />。
（2）双标签
- 双标签也称体标签，是指由开始和结束两个标签符组成的标签。
- 双标签基本语法格式：<标签名>内容</标签名>
（3）注释标签
- 在HTML中还有一种特殊的标签——注释标签，如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。
- 注释标签的基本语法格式：
- 注意：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，注释标签可以被下载到用户的计算机上，或者用户查看源代码时也可以看到注释标签。
二、常用的HTML标签
（一）段落、行内和换行标签
- 目标：熟悉HTML的段内、行内和换行标签
- 在chapter01文件夹中新建HTML文件htmlDemo02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo02</title>
</head>
<body>
<p>相思</p> <!--段落标签：paragraph tag-->
<p>唐·王维</p> <!--诗佛-->
<p>
<span>红豆生南国，<br />春来发几枝。<br />愿君多采撷，<br />此物最相思。</span>
</p>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo02.html文件
（二）文本样式标签
- 目标：熟悉HTML的文本样式标签
- 在HTML中，使用标签控制网页中文本的样式，如字体、字号和颜色
- 标签的基本语法格式：<font 属性=“属性值”>文本内容
- 在chapter01文件夹中新建HTML文件htmlDemo03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo03</title>
</head>
<body>
默认样式文本：踏青寻芳<br />
<font face="微软雅黑" size="7" color="green">微软7号绿色文本：春满人间</font>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo03.html文件
- 说明：颜色可以用英文单词来设置，也可以用十六进制来表示，比如green就可以用#00ff00表示，purple可以用#ff00ff表示
- 可以利用颜色对照表选择自己喜欢的颜色对应的十六进制
- https://bbs.bianzhirensheng.com/color01.html
- 课堂练习：将王维诗的标题、作者和正文设置为不同的文本样式，而且文本居中显示
- 拓展练习：设置页面背景图片（准备图片文件background.png放在chapter01目录）
- 课堂练习：欣赏唐诗
（三）表格标签
- 目标：掌握表格标签，学会使用border属性改变表格的边框
- 在HTML网页中要想创建表格，需要使用相关的表格标签才能创建表格
- 在HTML网页中创建表格的基本语法格式
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
- 在chapter01文件夹中创建一个HTML文件htmlDemo04.html
- 运行程序，使用浏览器打开htmlDemo04.html文件
- 此时的表格不好看，需要设置表格属性，大家可以查看HTML表格菜鸟教程
https://www.runoob.com/html/html-tutorial.html
- 设置表格字体颜色和背景色，让表格文字居中
- 注意：如果border属性的值发生改变，那么只有围绕表格的边框尺寸会发生变化，表格内部的边框还是1像素宽。如果将border的属性值设置为0或者删除border属性，将显示没有边框的表格。
(四）表单标签
- 目标：掌握表单标签，学会使用表单标签收集数据信息
- 表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。
1、表单域
- 在HTML中，标签用于定义表单域，即创建一个表单。
- <form标签基本语法
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
- action属性：用于指定表单提交的地址。
- method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。
2、表单控件
-
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用控件可以在表单中定义这些元素。
-
<intput控件基本语法格式：
-
type属性为控件最基本的属性，用来指定不同的控件类型。
-
input>控件还可以定义很多其他属性，其中，比较常用的有id、name、value、size，它们分别用来指定控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。
-
在chapter01文件夹中创建一个HTML文件htmlDemo05.html，添加表单，并设置提交方式为POST，再定义一个2列的表格
-
在htmlDemo05.html中添加用户名输入控件和密码输入框控件
-
在htmlDemo05.html中添加性别选择控件和兴趣复选框控件
-
在htmlDemo05.html中添加文件上传控件、提交按钮控件和重置按钮
-
查看页面完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo05</title>
</head>
<body>
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名：</td>
<td>
<!--1. 文本输入框控件-->
<input type="text" id="username" name="username" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<!--2. 密码输入框控件-->
<input type="password" id="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
</td>
</tr>
<tr>
<td align="right">兴趣：</td>
<td>
<input type="checkbox" name="interest" value="film"/> 看电影
<input type="checkbox" name="interest" value="code"/> 敲代码
<input type="checkbox" name="interest" value="game"/> 玩游戏
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo05.html文件
- 给表单加一个有标题的边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo05</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>新用户注册</legend>
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名：</td>
<td>
<!--1. 文本输入框控件-->
<input type="text" id="username" name="username" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<!--2. 密码输入框控件-->
<input type="password" id="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
</td>
</tr>
<tr>
<td align="right">兴趣：</td>
<td>
<input type="checkbox" name="interest" value="film"/> 看电影
<input type="checkbox" name="interest" value="code"/> 敲代码
<input type="checkbox" name="interest" value="game"/> 玩游戏
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
<input type="reset" value="重填" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo05.html文件
- 在上图中填写表单数据，页面效果如下所示
- 注意：密码输入框中内容为不可见状态，单选按钮只能选择一个值，而复选框可以选择多个值。
（五）多行文本标签
HTML提供了<textarea /textarea>标签，通过此标签可以创建多行文本框。在这里插入代码片textarea /textarea标签基本语法格式
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
- 在chapter01文件夹中创建一个HTML文件htmlDemo06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo06</title>
</head>
<body>
<form action="#" method="post">
评论：<br />
<textarea cols="60" rows="5">
评论时，请注意文明用语。
</textarea>
<br /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo06.html文件
（六）列表标签
- 目标：掌握列表标签，包括无序列表、有序列表和定义列表
1、无序列表
- 无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。
- 定义无序列表的基本语法格式
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
- 在chapter01文件夹中创建一个HTML文件htmlDemo07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo07</title>
</head>
<body>
<font size="5">软件专业课程</font><br />
<ul>
<li>Web前端开发</li>
<!-- 指定type属性值 , disc为默认值-->
<li type="disc">Java高级程序设计</li>
<li type="square">Python面向对象</li>
<li type="circle">Spring Boot框架</li>
</ul>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo07.html文件
2、有序列表
- 有序列表是一种强调排列顺序的列表，使用
- 标签定义，内部可以嵌套多个
- 标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
- 定义有序列表的基本语法格式
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
- 在chapter01文件夹中创建一个HTML文件htmlDemo08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo08</title>
</head>
<body>
<font size="5">软件专业课程</font>
<ol>
<li>Web前端开发</li>
<li>Java高级程序设计</li>
<li>Python面向对象</li>
<li>Spring Boot框架</li>
</ol>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo08.html文件
3、定义列表
- 定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。
- 定义列表的基本语法格式
<dl>
<dt>名词1</dt>
<dd>dd是名词1的描述信息1</dd>
<dd>dd是名词1的描述信息2</dd>
<dt>名词2</dt>
<dd>dd是名词2的描述信息1</dd>
<dd>dd是名词2的描述信息2</dd>
</dl>
- 在chapter01文件夹中创建一个HTML文件htmlDemo09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo09</title>
</head>
<body>
<dl>
<dt>红色</dt>
<dd>光谱的三原色和心理四色之一</dd>
<dd>代表着吉祥、喜庆、火热、幸福、豪放、
斗志、革命、轰轰烈烈、激情澎湃等</dd>
<dt>绿色</dt>
<dd>自然界中常见的颜色</dd>
<dd>绿色有无公害，健康的意思</dd>
<dd>绿色代表着生命，象征着希望</dd>
</dl>
</body>
</html>
-运行程序，使用浏览器打开htmlDemo09.html文件
（七）超链接标签
- 目标：掌握超链接标签的使用，可以使用超链接完成页面的跳转
- 超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
| 属性 | 含义 |
|---|---|
| href | href属性用于指定链接指向的页面的URL，当在标签中使用href属性时，该标签就具有了超链接的功能。 |
| target | target属性用于指定页面的打开方式，其值有_self、_blank、_parent和_top（_self和_blank较为常用）。其中，_self为默认值，意为在原窗口打开，_blank为在新窗口打开，_parent是在父框架集中打开被链接文档，_top是在整个窗口中打开被链接文档。 |
- 在chapter01文件夹中创建一个HTML文件htmlDemo10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo10</title>
</head>
<body>
在新窗口打开：
<a href="http://www.lzy.edu.cn/" target="_blank">泸州职业技术学院</a><br />
在原窗口打开：
<a href="http://www.chinaskills-jsw.org/" target="_self">全国职业院校技能大赛</a>
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo10.html文件
- 当单击“泸州职业技术学院”后，浏览器的效果
- 当单击“全国职业院校技能大赛”后，浏览器的效果
（八）图像标签
-
目标：掌握图像标签，学会使用图像标签显示图像
-
要想在HTML网页中显示图像就需要使用图像标签
-
在chapter01文件夹中添加一个名称为bear.png的图片文件，然后创建一个HTML文件htmlDemo11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo11</title>
</head>
<body>
本地图片：<img src="bear.png" width="160px" height="130px" border="1px"><br />
网络图片：<img src="https://pic.netbian.com/uploads/allimg/230222/005031-167699823179c9.jpg"
width="160px" height="130px" border="1px">
</body>
</html>
- 运行程序，使用浏览器打开htmlDemo11.html文件
三、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;}
- 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等。实际工作中，十六进制是最常用的定义颜色的方式
- 可以利用颜色对照表选择自己喜欢的颜色对应的十六进制
- https://bbs.bianzhirensheng.com/color01.html
- 大家在网上可以搜索取色软件TakeColor来试一试
（3）RGB代码表示的颜色值
- 如红色可以用rgb(255,0,0)或rgb(100%,0%,0%)来表示。如果使用RGB代码百分比方式取颜色值时，即使值为0，也不能省略百分号，必须写为0%
（二）CSS样式的引用方式
- 目标：掌握CSS样式4种的引用方式，分别为行内式、内嵌式、链入式和导入式
1、行内式
- 行内式（inline style）也被称为内联式，是通过标签的style属-性设置标签的样式。
- 行内式基本语法格式：<标签名 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</ 标签名>
- style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。
- 行内式是写在<html根标签中
<h1 style="font- size:20px; color:blue;">
使用CSS行内式修饰一级标题的字体大小和颜色
</h1>
- 使用<h1标签的style属性设置行内式CSS样式，用来修饰一级标题的字体和颜色。
- 注意：行内式是通过标签的属性来控制样式的，这样并没有做到结构域样式分离，所以不推荐使用。
2、内嵌式
- 内嵌式（inner style）是将CSS代码集中写在HTML文档的头部标签中，并用
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
- 在chapter01文件夹中创建一个HTML文件cssDemo02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS内嵌式</title>
<style type="text/css">
h2{ text-align:center;}
div{ border:1px solid #ccc; width:300px;
height:80px; color:purple; text-align:center;}
</style>
</head>
<body>
<h2>内嵌式CSS样式</h2>
<div>
使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之后。
</div>
</body>
</html>
- 运行程序，使用浏览器打开cssDemo02.html文件
3、外链式
- 外链式（outer style）也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML文件中。
外链式引用CSS的基本语法格式
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
- 通过修改文件cssDemo02.html演示链入式CSS的引用方式，在chapter01文件夹中创建一个名称为style.css的文件。
h2{ text-align:center;}
div{ border:1px solid #ccc; width:300px;
height:80px; color:purple; text-align:center;
margin: 0 auto;}
- 在chapter01文件夹中创建一个HTML文件cssDemo03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS外链式</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h2>外链式CSS样式</h2>
<div>
外链式也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中。
</div>
</body>
</html>
- 运行程序，使用浏览器打开文件cssDemo03.html
4、导入式
- 导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用
<style type="text/css" >
@import url (CSS文件路径); 或 @import "CSS文件路径";
/*在此还可以存放其他CSS样式*/
</style>
- 在chapter01文件夹中创建一个HTML文件cssDemo04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS导入式</title>
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<h2>导入式CSS样式</h2>
<div>
导入式针对外部样式表文件的，对HTML头部文档应用
style标签，并在style标签内的开头处使用@import
语句，即可导入外部样式表文件。
</div>
</body>
</html>
- 运行程序，使用浏览器打开文件cssDemo04.html
（三）CSS选择器
- 目标：掌握CSS选择器
1、标签选择器
- 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的样式。
- 标签选择器的基本语法格式：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 所有的HTML标签都可以作为标签选择器的标签名，例如标签、
标签、
标签等。用标签选择器定义的样式对页面中该类型的所有标签都有效，这是它的优点，但同时这也是其缺点，因为这样不能设计差异化样式。
2、类选择器
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
- 类选择器的基本语法格式：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 类名即为HTML页面中元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
3、id选择器
- id选择器使用“#”进行标识，后面紧跟id名。
- id选择器的基本语法格式：#id{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- id名即为HTML页面中元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
4、通配符选择器
-通配符选择器用“”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
-通配符选择器的基本语法格式：{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 在实际网页开发中，不建议使用通配符选择器，因为它设置的样式对所有的HTML标签都生效，这是其优点也是其缺点，因为这样不能设计差异化样式。
- 在chapter01文件夹中创建一个HTML文件cssDemo05.html，在<body标签下编写代码
- 在cssDemo05.html的HTML文件中使用选择器修改样式。在<head标签中编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示CSS选择器</title>
<style type="text/css">
.red {
color: red;
}
.green {
color: green;
}
.font18 {
font-size: 18px;
}
#bold {
font-weight: bold;
}
#font24 {
font-size: 24px;
}
</style>
</head>
<body>
<!--类选择器的使用-->
<h1 class="red">标题一：class="red"，设置文字为红色。</h1>
<p class="green font18">
段落一: class="green font18"，设置文字为绿色，字号为18px。
</p>
<p class="red font18">
段落二: class="red font18"，设置文字为红色，字号为18px。
</p>
<!--id选择器的使用-->
<p id="bold">段落1：id="bold"，设置粗体文字。</p>
<p id="font24">段落2：id="font24"，设置字号为24px。</p>
<p id="font24">段落3：id="font24"，设置字号为24px。</p>
<p id="bold font24">段落4：id="bold font24"，同时设置粗体和字号24px。</p>
</body>
</html>
- 运行程序，使用浏览器打开文件cssDemo05.html
- “段落2…”和“段落3…”的字号均为24像素，这是由于他们引用了相同的id选择器，虽然浏览器并没有报错，但是这种做法是不被允许的，因为在JavaScript等脚本语言中id值是唯一的。
- “段落4”：不显示任何CSS样式，这意味着同一个标签对象不能同时引用多个id选择器。
（四）CSS常用属性
- 目标：掌握CSS常用属性
- 课堂练习：创建cssDemo06.html，欣赏唐诗，采用外部样式表poem.css
- 样式文件 - poem.css
- 页面文件 - cssDemo06.html
- 浏览器里显示效果
四、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文档中，可以通过<script/script>标签及其相关属性引入JavaScript代码。当浏览器读取到<script标签时，就会解释执行其中的脚本。
- 在chapter01文件夹中创建一个名为JavaScriptDemo02的HTML文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript内嵌式</title>
<script type="text/javascript">
alert('欢迎使用内嵌式脚本~');
</script>
</head>
<body>
</body>
</html>
- 运行程序，使用浏览器打开文件JavaScriptDemo02。
（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>
- 运行程序，使用浏览器打开文件JavaScriptDemo03。
4、JavaScript的数据类型
5、JavaScript的变量和关键字
- 在JavaScript中，使用关键字var声明变量，由于JavaScript是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值确定。
- 声明变量的语法格式
var year = 2023;
var college = "泸州职业技术学院";
6、JavaScript的运算符
在JavaScript中，运算符也称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。JavaScript中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种。
六、Bootstrap框架的常用组件
- 目标：掌握Bootstrap中按钮的使用，以及设置按钮状态和大小
（一）按钮
- 目标：掌握Bootstrap中按钮的使用，以及设置按钮状态和大小
- 在chapter01文件夹下新建bootstrap01.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo01</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary">主按钮</button>
</body>
</html>
-
定义按钮结构，设置按钮的type属性值为button，表示按钮；设置按钮的类名为btn和btn-primary，表示在btn类名的基础上添加btn-primary类名，btn-primary主要用于实现主按钮的结构样式。
-
在浏览器中运行bootstrapDemo01.html文件
-
需要注意的是，除了btn-primary之外，Bootstrap还包括btn-secondary、btn-success和btn-danger等类，分别用于实现不同的按钮样式效果。
-
课堂练习：尝试其它按钮样式
-
在实现按钮时，如果按钮中的文本内容超出了按钮的宽度，默认情况下，按钮中的内容会自动换行排列，如果不希望按钮文本换行，可以在按钮中添加text-nowrap类，修改后的BootstrapDemo01.html文件如下所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo01</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary" style="width: 70px;">这是一个主按钮</button>
<button type="button" class="btn btn-primary text-nowrap" style="width: 70px;">这是一个主按钮</button>
</body>
</html>
- 在浏览器中重新运行BootstrapDemo01.html文件
- 在Bootstrap中，除了可以直接设置按钮状态之外，还可以通过类名调节按钮的大小，修改BootstrapDemo01.html代码实现调用不同类名来调节按钮的大小。btn-lg - large button；btn-sm - small button，btn-block - 按钮宽度占满窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo01</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg">大主按钮</button>
<button type="button" class="btn btn-primary btn-sm">小主按钮</button>
<button type="button" class="btn btn-success btn-block">成功按钮</button>
</body>
</html>
- 在浏览器中重新运行BootstrapDemo01.html文件
（二）导航
- 目标：掌握Bootstrap框架导航的使用
- 在chapter01文件夹下新建BootstrapDemo02.html文件，用于设计一个导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo02</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 导航 -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">简介</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">详情</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">联系电话</a>
</li>
</ul>
</body>
</html>
- 使用浏览器打开BootstrapDemo02.html文件
（三）面包屑导航
- 目标：掌握Bootstrap框架面包屑导航的使用
- 在chapter01文件夹下新建BootstrapDemo03.html，用于设计一个面包屑导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo03</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 面包屑导航 -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">简介</a></li>
<li class="breadcrumb-item"><a href="#">详情</a></li>
<li class="breadcrumb-item"><a href="#">联系电话</a></li>
</ol>
</nav>
</body>
</html>
- 使用浏览器打开BootstrapDemo03.html文件
（四）分页
- 目标：掌握Bootstrap框架分页的使用
- 在chapter01文件夹下新建BootstrapDemo04.html，用于实现分页效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo04</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 实现分页效果 -->
<nav aria-label="Page Navigation Example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
- 使用浏览器打开BootstrapDemo04.html文件
(五）列表
- 目标：掌握Bootstrap框架列表的使用
- 在chapter01文件夹下新建BootstrapDemo05.html，用于实现列表页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo05</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 列表组 -->
<ul class="list-group">
<li class="list-group-item active">列表项1</li>
<li class="list-group-item">列表项2</li>
<li class="list-group-item">列表项3</li>
<li class="list-group-item">列表项4</li>
<li class="list-group-item">列表项5</li>
</ul>
</body>
</html>
- 使用浏览器打开BootstrapDemo05.html文件
（六）表单
-
目标：掌握Bootstrap框架表单的使用
-
在chapter01文件夹下新建BootstrapDemo06.html，用于实现表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootstrapDemo06</title>
<link rel="stylesheet" href="../bootstrap-4.6.2/dist/css/bootstrap.min.css">
</head>
<body style="margin: 40px 40px;">
<!-- 表单 -->
<form action="#">
<div class="form-group">
<div style="text-align: center;">
<h3>用户注册</h3>
</div>
<div class="input-group">
<label for="username" style="width: 80px; text-align: right;">用户名：</label>
<input type="text" class="form-control" id="username" placeholder="输入用户名">
</div>
<div class="input-group">
<label for="password" style="width: 80px; text-align: right;">密码：</label>
<input type="password" class="form-control" id="password" placeholder="输入密码">
</div>
<div class="input-group">
<label for="email_address" style="width: 80px; text-align: right;">邮箱地址：</label>
<input type="email" class="form-control" id="email_address" placeholder="输入邮箱地址">
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn-primary">提交</button>
<button type="reset" class="btn btn-primary">重置</button>
</div>
</form>
</body>
</html>
使用浏览器打开BootstrapDemo06.html文件
- 输入表单信息
上一篇： 动态网站开发04：S
下一篇： 2023年动态网站开