文章目录

一、HTML基础
- 编写第一个网页
二、常用的HTML标签
三、CSS技术
- （二）CSS样式的引用方式
- - 1、行内式
  - 2、内嵌式
四、JavaScript基础
五、Bootstrap框架基础
六、Bootstrap框架的常用组件

一、HTML基础

编写第一个网页

在D:\web_work里创建一个名称为chapter01的文件夹，然后在该文件夹中新建一个文本文件（.txt后缀），将文件的名称更改为htmlDemo01，后缀名改为.html。

请添加图片描述
在htmlDemo01.html文件中编写代码

运行程序，使用浏览器打开htmlDemo01.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表示
课堂练习：将王维诗的标题、作者和正文设置为不同的文本样式，而且文本居中显示
拓展练习：设置页面背景图片（准备图片文件background.png放在chapter01目录）请添加图片描述

（三）表格标签

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

<table>
     <tr>
          <td>单元格内的文字</td>
     </tr>
</table>

注意：

、和

是创建表格的基本标签，缺一不可。用于定义一个表格，用于定义表格中的行(table row)，必须嵌套在

标签中，标签中。

用于定义表格中的单元格（table data），也可称为表格中的列，必须嵌套在

请添加图片描述
运行程序，使用浏览器打开htmlDemo04.html文件

设置表格字体颜色和背景色，让表格文字居中

（四）表单标签

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

1、表单域

在HTML中，标签用于定义表单域，即创建一个表单。

标签基本语法

<form action="url地址" method="提交方式" name="表单名称">
     各种表单控件
</form>

2、表单控件

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用控件可以在表单中定义这些元素。

控件基本语法格式：

type属性为控件最基本的属性，用来指定不同的控件类型。

控件还可以定义很多其他属性，其中，比较常用的有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 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>

注意：

标签用于定义无序列表，

标签嵌套在
标签中，用于描述具体的列表项，每对
中至少应包含一对

。（ul: unordered list；li: list item）
在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>

注意：

标签用于定义有序列表，

为具体的列表项，和无序列表类似，每对
中也至少应包含一对

。（ol: ordered list）
在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>

dl: define list；dt: define title；dd: define description

注意：

标签用于指定定义列表，和

并列嵌套于

中。其中，标签用于指定术语名词，

标签用于对名词进行解释和描述。一对可以对应多对

, 也就是说可以对一个名词进行多项解释。

在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和target是标签的常用属性
在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网页中显示图像就需要使用图像标签
标签基本语法格式：
注意：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是标签的必需属性。图像源可以使本地图片文件，也可以是网络图片资源
在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样式的引用方式

1、行内式

行内式（inline style）也被称为内联式，是通过标签的style属性设置标签的样式。
行内式基本语法格式：<标签名 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</ 标签名>
style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。
行内式是写在根标签中

<h1 style="font- size:20px; color:blue;">
使用CSS行内式修饰一级标题的字体大小和颜色
</h1>

使用

标签的style属性设置行内式CSS样式，用来修饰一级标题的字体和颜色。

2、内嵌式

内嵌式（inner style）是将CSS代码集中写在HTML文档的头部标签中，并用

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

</head>
<body>
	<h2>内嵌式CSS样式</h2>
	<div>
		使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之后。
	</div>
</body>

运行程序，使用浏览器打开cssDemo02.html文件![请添加图片描述](https://img-blog.csdnimg.cn/5c97319dc73b4936898485ee34a8b9ca.png)
![请添加图片描述](https://img-blog.csdnimg.cn/b6811d1adae84df99d1086df99d83200.png)
### 3、外链式
外链式（outer style）也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文件中。
外链式引用CSS的基本语法格式

```xml
<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>

请添加图片描述

<!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>

请添加图片描述
在chapter01文件夹中创建一个HTML文件cssDemo05.html，在标签下编写代码
在cssDemo05.html的HTML文件中使用选择器修改样式。在标签中编写代码

<!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 请添加图片描述

页面文件 - cssDemo06.html

四、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>

运行程序，使用浏览器打开文件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>

请添加图片描述

8、条件if语句

if（执行条件1）{
   语句1   
}
else {
   语句2
}

在chapter01文件夹中创建一个名为JavaScriptDemo04的HTML文件。请添加图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>if语句示例</title>
		<script type="text/javascript">
			function judge() {
        
        				
				var age = 16;
				if (age >= 18) 
					alert("年满18周岁，欢迎访问~");
				else
					alert("未满18周岁，不能访问！");
			}
		</script>
	</head>
	<body>
		<input type="button" value="确定" onclick="judge()">
	</body>
</html>

运行程序，使用浏览器打开文件JavaScriptDemo04 请添加图片描述
单击【确定】按钮，弹出消息框

if（执行条件1）{
     执行语句1   
}
else if（执行条件2）{
     执行语句2
}
else if（执行条件3）{
     执行语句3
}
......

在chapter01文件夹中创建一个名为JavaScriptDemo05的HTML文件。请添加图片描述
运行程序，使用浏览器打开文件JavaScriptDemo05
单击【确定】按钮，弹出消息框

（二）DOM相关知识

//方式1
window.onload = function () {};
//方式2
window. addEventListener ('load', function () {});

function functionName(parameter1, parameter2, …){
       statements;
       return expression;
}

演示页面onload事件

请添加图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScriptDemo06</title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 100;
			var b = 150;
			var sum = a + b;
			window.onload = function() {
        
        
				alert("页面加载……" + sum);
			}
		</script>
	</body>
</html>

在浏览器里打开JavaScriptDemo06 请添加图片描述
演示window对象的open()方法与close()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScriptDemo07</title>
	</head>
	<body>
		<script type="text/javascript">
			var win;
			
			function openWin() {
        
        
				win = window.open("https://www.baidu.com");				
			}
			
			function closeWin() {
        
        
				win.close()
			}
		</script>
		<input type="button" value="打开窗口" onclick="openWin()"/>
		<input type="button" value="关闭窗口" onclick="closeWin()"/>
	</body>
</html>

在浏览器里打开JavaScriptDemo07 请添加图片描述
演示Date对象的常用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScriptDemo08</title>
		<script type="text/javascript">
			function showDateTime() {
        
        
				var myDate = new Date();
				var year = myDate.getFullYear();
				var month = myDate.getMonth() + 1;
				var day = myDate.getDate();
				var dayOfWeek = myDate.getDay();
				var hour = myDate.getHours();
				var minute = myDate.getMinutes();
				var second = myDate.getSeconds();
				
				var week = "";
				if (dayOfWeek == 0) {
        
        
					week = "星期天";
				} else if (dayOfWeek == 1) {
        
        
					week = "星期一";
				} else if (dayOfWeek == 2) {
        
        
					week = "星期二";
				} else if (dayOfWeek == 3) {
        
        
					week = "星期三";
				} else if (dayOfWeek == 4) {
        
        
					week = "星期四";
				} else if (dayOfWeek == 5) {
        
        
					week = "星期五";					
				} else {
        
        
					week = "星期六";
				}
				
				alert("当前日期时间：" + year + "年" + month + "月"
				 + day + "日 " + week + " " + hour + ":" + minute + ":" + second);
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示当前时期时间" onclick="showDateTime()" />
	</body>
</html>

在浏览器里打开JavaScriptDemo08 请添加图片描述
单击【显示当前日期时间】按钮

5、脚本案例 - 登录表单非空校验

在chapter01目录里创建JavaScriptDemo09.html
请添加图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScriptDemo09</title>		
		<script type="text/javascript">
			function checkForm() {
        
        
				var username = document.getElementById('username').value;
				var password = document.getElementById('password').value;
				
				if (username == '') {
        
        
					alert('警告：用户名不能为空！')
					return false;
				} else if (password == '') {
        
        
					alert('警告：密码不能为空！');
					return false;
				} 
				
				alert('很好，输入了用户名和密码~')
				return true;
			}
		</script>
	</head>
	<body>
		<form action="#" method="post">
			<fieldset>
				<legend>用户登录</legend>
				<table cellpadding="2" align="center">
					<tr>
						<td align="right">用户名：</td>
						<td>							
							<input type="text" id="username" name="username" />
						</td>
					</tr>
					<tr>
						<td align="right">密码：</td>
						<td>							
							<input type="password" id="password" name="password" />
						</td>
					</tr>					
					<tr>
						<td colspan="2" align="center">
							<input type="submit" value="登录" onclick="return checkForm();"/>
							<input type="reset" value="重置" />
						</td>
					</tr>
				</table>
			</fieldset>
		</form>
	</body>
</html>

请添加图片描述

五、Bootstrap框架基础

六、Bootstrap框架的常用组件

<!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>

请添加图片描述

<!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>

请添加图片描述

<!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>

请添加图片描述

<!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>

请添加图片描述

<!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>

请添加图片描述

<!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">&laquo;</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">&raquo;</span>
					</a>
				</li>
			</ul>
		</nav>
	</body>
</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>

请添加图片描述

<!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>&nbsp;&nbsp;
				<button type="reset" class="btn btn-primary">重置</button>					
			</div>
		</form>
	</body>
</html>

请添加图片描述

01：网页开发基础

文章目录

一、HTML基础

编写第一个网页

二、常用的HTML标签

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

（二）文本样式标签

（三）表格标签

（四）表单标签

1、表单域

2、表单控件

（五）多行文本标签

（六）列表标签

1、无序列表

2、有序列表

3、定义列表

（七）超链接标签

（八）图像标签

三、CSS技术

（二）CSS样式的引用方式

1、行内式

标签的style属性设置行内式CSS样式，用来修饰一级标题的字体和颜色。

2、内嵌式

四、JavaScript基础

（1）行内式

（3）外嵌式

8、条件if语句

（二）DOM相关知识

5、脚本案例 - 登录表单非空校验

五、Bootstrap框架基础

六、Bootstrap框架的常用组件

猜你喜欢

01：网页开发基础

文章目录

一 、HTML基础

编写第一个网页

二、常用的HTML标签

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

（二）文本样式标签

（三）表格标签

（四）表单标签

1、表单域

2、表单控件

（五）多行文本标签

（六）列表标签

1、无序列表

2、有序列表

3、定义列表

（七）超链接标签

（八）图像标签

三、CSS技术

（二）CSS样式的引用方式

1、行内式

标签的style属性设置行内式CSS样式，用来修饰一级标题的字体和颜色。

2、内嵌式

四、JavaScript基础

（1）行内式

（3）外嵌式

8、条件if语句

（二）DOM相关知识

5、脚本案例 - 登录表单非空校验

五、Bootstrap框架基础

六、Bootstrap框架的常用组件

猜你喜欢

一、HTML基础