Article directory
1. HTML basics
Write your first web page
Create a folder named chapter01 in D:\web_work, then create a new text file (.txt suffix) in the folder, change the file name to htmlDemo01, and change the suffix to .html.
Write code in the htmlDemo01.html file
. Run the program and use the browser to open the htmlDemo01.html file.
2. Commonly used HTML tags
(1) Paragraph, inline and line break tags
Goal: Be familiar with the in-paragraph, in-line and line break tags of HTML.
Create a new HTML file htmlDemo02.html in the chapter01 folder.
<!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>
Run the program and use the browser to open the htmlDemo02.html file
(2) Text style label
Goal: Be familiar with HTML text style tags.
In HTML, use tags to control the style of text in web pages, such as font, font size and color. The
basic syntax format of tags: <font attribute="attribute value">Text content
is created in the chapter01 folder HTML file 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>
Run the program and use the browser to open the htmlDemo03.html file.
Note: The color can be set in English words or represented in hexadecimal. For example, green can be represented by #00ff00, and purple can be represented by #ff00ff. Classroom exercises 
: The title, author and text of Wang Wei's poem are set to different text styles, and the text is displayed in the center. 
Extended exercise: Set the page background image (prepare the image file background.png and place it in the chapter01 directory)
(3) Table labels
Goal: Master the table tag and learn to use the border attribute to change the border of the table.
To create a table in an HTML web page, you need to use the relevant table tag to create the table. The
basic syntax format for creating a table in an HTML web page.
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
Notice:
,andIt is the basic tag for creating tables and is indispensable. Used to define a table, used to define rows in the table (table row), must be nested in
|
Run the program and use the browser to open the htmlDemo04.html file.
Set the table font color and background color to center the table text.
(4) Form tags
Goal: Master form tags and learn to use form tags to collect data information.
A form is an area on a web page used to input information. Its main function is to collect data information and transfer this information to the background information processing module. For example, username and password input, gender selection, submit button, etc. in the registration page are all defined with relevant tags in the form.
1. Form fields
In HTML, tags are used to define form fields, that is, to create a form.
Tag basic syntax<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
2. Form controls
When browsing the web, you often see single-line text input boxes, radio buttons, check boxes, reset buttons, etc. These elements can be defined in the form using controls.
Basic syntax format of control:
The type attribute is the most basic attribute of the control and is used to specify different control types.
Controls can also define many other attributes. Among them, the more commonly used ones are id, name, value, and size, which are used to specify the ID value, name, default value of the control, and the display width of the control on the page respectively.
Create an HTML file htmlDemo05.html in the chapter01 folder, add a form, set the submission method to POST, and define a 2-column table. Add the username input control
and password input box control 
in htmlDemo05.html. Add gender selection control and interest check box control. 
Add file upload control, submit button control and reset button in htmlDemo05.html. 
View the complete code of the page.
<!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>
Run the program and use the browser to open the htmlDemo05.html file.
Add a titled border to the form.
<!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>
Run the program and use the browser to open the htmlDemo05.html file. 
Fill in the form data in the picture above. The page effect is as follows
(5) Multi-line text labels
HTML provides tags through which multi-line text boxes can be created.
Tag basic syntax format<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
Create an HTML file htmlDemo06.html in the chapter01 folder
<!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>
Run the program and use the browser to open the htmlDemo06.html file
(6) List tags
Goal: Master list tags, including unordered lists, ordered lists and defined lists
1. Unordered list
An unordered list is a list that is not sorted. There is no order level between the list items, and they are usually juxtaposed.
Define the basic syntax format of unordered lists
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
Notice:
- tags nested in
- . (ul: unordered list; li: list item)
Create an HTML file htmlDemo07.html in the chapter01 folder
<!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>Run the program and use the browser to open the htmlDemo07.html file
2. Ordered list
An ordered list is a list that emphasizes the order of arrangement. Use
- Tag definition, multiple can be nested inside
- Label. For example, common song rankings and game rankings on web pages can be defined through ordered lists.
Define the basic syntax format for ordered lists
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol>Notice:
- is a specific list item, similar to an unordered list, each pair
- . (ol: ordered list)
Create an HTML file htmlDemo08.html in the chapter01 folder
<!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>Run the program and use the browser to open the htmlDemo08.html file
3. Definition list
The definition list is different from the use of ordered lists and unordered lists. It contains 3 tags, namely dl, dt, and dd.
Define the basic syntax format of lists<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
Notice:
Create an HTML file htmlDemo09.html in the chapter01 folder
<!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>Run the program and use the browser to open the htmlDemo09.html file
(7) Hyperlink tags
Goal: Master the use of hyperlink tags. You can use hyperlinks to complete page jumps.
Hyperlinks are the most commonly used elements in web pages. A website usually consists of multiple pages. The first thing you see when entering a website is the home page. If you want to To jump from the home page to a subpage, you need to add a hyperlink to the corresponding location on the home page. Creating a hyperlink in HTML is as simple as surrounding the object that needs to be linked with a tag.
The basic syntax format for creating hyperlinks using tags: text or image.
Tag is an inline tag used to define a hyperlink. href and target are common attributes of tags.
Create an HTML file htmlDemo10.html in the chapter01 folder.
<!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>Run the program and use the browser to open the htmlDemo10.html file
. The effect of the browser when clicking "Luzhou Vocational and Technical College". The effect of the browser
after clicking "National Vocational College Skills Competition"
(8) Image tags
Goal: Master image tags and learn to use image tags to display images.
To display images in HTML web pages, you need to use image tags.
Basic tag syntax format:
Note: In the above syntax, the src attribute is used to specify the path of the image file, and the attribute value can be It is an absolute path or a relative path. It is a required attribute of the label. The image source can be a local image file or a network image resource.
Add an image file named bear.png to the chapter01 folder, and then create an HTML file 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>Run the program and use the browser to open the htmlDemo11.html file
3. CSS technology
(2) Reference method of CSS style
1. Inline
Inline style, also known as inline style, sets the style of a label through the style attribute of the label.
Inline basic syntax format: <tag name style="Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3;">Content</ tag name> style is an attribute of the tag, in fact
any HTML tags all have the style attribute, which is used to set inline styles. The writing conventions for attributes and attribute values are the same as CSS style rules. Inline only affects the tag in which it is located and the subtags nested within it.
Inline expressions are written in the root tag<h1 style="font- size:20px; color:blue;"> 使用CSS行内式修饰一级标题的字体大小和颜色 </h1>use
The style attribute of the tag sets the inline CSS style, which is used to modify the font and color of the first-level title.
2. Embedded
Inner style is to write CSS code together in the head tag of the HTML document, and use
<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文件  ### 3、外链式 外链式（outer style）也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文件中。 外链式引用CSS的基本语法格式 ```xml <head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>Demonstrate the reference method of linked CSS by modifying the file cssDemo02.html and create a file named style.css in the chapter01 folder.
h2{ text-align:center;} div{ border:1px solid #ccc; width:300px; height:80px; color:purple; text-align:center; margin: 0 auto;}Create an HTML file cssDemo03.html in the chapter01 folder.
Insert image description here
<!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>Run the program and use the browser to open the file cssDemo03.html
4. Import
type The import type is the same as the link type, both are for external style sheet files. Apply to HTML header document<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>
Create an HTML file cssDemo05.html in the chapter01 folder, write code under the tag, and
use selectors to modify the style in the HTML file cssDemo05.html. Write code in tags
<!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>Run the program and use the browser to open the file cssDemo05.html
page file - cssDemo06.html
4. JavaScript Basics
(1) Inline
Inline refers to writing a single line or a small amount of JavaScript code in the event attribute of the HTML tag.
Create an HTML file named JavaScriptDemo01 in the chapter01 folder.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript行内式</title> </head> <body> <input type="button" value="单击我" onclick="alert('欢迎使用行内式脚本~')" /> </body> </html>Run the program and open the file JavaScriptDemo01 using a browser.
Click the "Click Me" button in the picture above to view the browser effect
(2) Embedded
In HTML documents, JavaScript code can be introduced through tags and their related attributes. When the browser reads<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript内嵌式</title> <script type="text/javascript"> alert('欢迎使用内嵌式脚本~'); </script> </head> <body> </body> </html>Run the program and open the file JavaScriptDemo02 using your browser.
(3) External embedded type
External linking refers to writing JavaScript code in a separate file. Generally, "js" is used as the file extension and is used in HTML files.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript外嵌式</title> <script type="text/javascript" src="jsDemo.js"></script> </head> <body> </body> </html>
8. Conditional if statement
if（执行条件1）{ 语句1 } else { 语句2 }Create an HTML file named JavaScriptDemo04 in the chapter01 folder.
<!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>Run the program and use the browser to open the file JavaScriptDemo04.
Click the [OK] button and a message box will pop up.
if（执行条件1）{ 执行语句1 } else if（执行条件2）{ 执行语句2 } else if（执行条件3）{ 执行语句3 } ......Create an HTML file named JavaScriptDemo05 in the chapter01 folder.
Run the program and use the browser to open the file JavaScriptDemo05.
Click the [OK] button and a message box will pop up.
(2) DOM related knowledge
//方式1 window.onload = function () {}; //方式2 window. addEventListener ('load', function () {});function functionName(parameter1, parameter2, …){ statements; return expression; }Demo page onload event
<!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>Open JavaScriptDemo06 in the browser
to demonstrate the open() method and close() method of the window object
<!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>Open JavaScriptDemo07 in the browser
to demonstrate the common method of Date object
<!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>Open JavaScriptDemo08 in the browser
and click the [Show current date and time] button
5. Script case - Login form non-empty verification
Create JavaScriptDemo09.html in the chapter01 directory
<!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>
5. Basics of Bootstrap framework
6. Common components of the Bootstrap framework
<!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>
