文章目录
一 、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),必须嵌套在
|
运行程序,使用浏览器打开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">«</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>
<!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> <button type="reset" class="btn btn-primary">重置</button> </div> </form> </body> </html>