記事ディレクトリ
1. HTMLの基本
初めての Web ページを作成する
D:\web_work に Chapter01 という名前のフォルダーを作成し、そのフォルダー内に新しいテキスト ファイル (拡張子 .txt) を作成し、ファイル名を htmlDemo01 に変更し、拡張子を .html に変更します。
htmlDemo01.html ファイルにコードを記述します
。プログラムを実行し、ブラウザを使用して htmlDemo01.html ファイルを開きます。
2. よく使われるHTMLタグ
(1) 段落タグ、インラインタグ、改行タグ
目標: HTML の段落内タグ、行内タグ、および改行タグに精通する
新しい HTML ファイル htmlDemo02.html を Chapter01 フォルダーに作成します。
<!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 ファイルを開きます。
(2) 文字スタイルラベル
目標: HTML テキスト スタイル タグについて理解します。HTML
では、フォント、フォント サイズ、色など、Web ページ内のテキストのスタイルを制御するためにタグを使用します。タグの基本構文形式: <fontattribute="attribute value"
>テキストコンテンツは
、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 ファイルを開きます。
注: 色は英単語で設定することも、16 進数で表すこともできます。たとえば、緑は #00ff00 で、紫は #ff00ff で表すことができます。座学演習
：王偉の詩のタイトル、作者、本文を異なる文字スタイルに設定し、テキストを中央に表示 拡張演習：
ページの背景画像を設定（画像ファイルbackground.pngを用意し、 Chapter01ディレクトリ)
(3) 表のラベル
目標: table タグをマスターし、border 属性を使用してテーブルの境界線を変更する方法を学びます。HTML
Web ページでテーブルを作成するには、関連する table タグを使用してテーブルを作成する必要があります。
作成のための基本的な構文形式HTML Web ページ内のテーブル。
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
知らせ：
、そしてテーブル作成の基本タグであり、必須です。テーブルを定義するために使用され、テーブル内の行 (テーブル行) を定義するために使用されます。
|
プログラムを実行し、ブラウザを使用して htmlDemo04.html ファイルを開き、
表のテキストが中央に配置されるように表のフォントの色と背景色を設定します。
(4) フォームタグ
目標: フォーム タグをマスターし、フォーム タグを使用してデータ情報を収集する方法を学びます。
フォームは、情報を入力するために使用される Web ページ上の領域です。その主な機能は、データ情報を収集し、この情報をバックグラウンド情報処理モジュールに転送することです。たとえば、登録ページのユーザー名とパスワードの入力、性別の選択、送信ボタンなどはすべて、フォーム内の関連タグで定義されます。
1. フォームフィールド
HTML では、タグはフォーム フィールドを定義する、つまりフォームを作成するために使用されます。
タグの基本構文<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
2. フォームコントロール
Web を閲覧していると、単一行のテキスト入力ボックス、ラジオ ボタン、チェック ボックス、リセット ボタンなどをよく目にします。これらの要素は、コントロールを使用してフォームで定義できます。
コントロールの基本的な構文形式:
type 属性はコントロールの最も基本的な属性であり、さまざまなコントロール タイプを指定するために使用されます。
コントロールでは、他にも多くの属性を定義できます。中でもよく使用されるのは、ID、名前、値、サイズであり、コントロールの ID 値、名前、デフォルト値、およびコントロールの表示幅を指定するために使用されます。それぞれのページにあります。
Chapter01 フォルダーに HTML ファイル htmlDemo05.html を作成し、フォームを追加し、送信方法を POST に設定し、2 列のテーブルを定義します 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 ファイルを開き、
上の図のフォーム データを入力します。ページの効果は次のとおりです。
(5) 複数行のテキストラベル
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 ファイルを開きます。
(6) リストタグ
目標: 順序なしリスト、順序付きリスト、定義済みリストを含むリスト タグをマスターする
1. 順序なしリスト
順序なしリストは、並べ替えられていないリストです。リスト項目間に順序レベルはなく、通常は並べて配置されます。
順序なしリストの基本的な構文形式を定義する
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
知らせ：
- ネストされたタグ
- 。(ul: 順序なしリスト、li: リスト項目)
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. 順序付きリスト
順序付きリストとは、並び順を重視したリストです。
- タグ定義、内部に複数のネストが可能
- ラベル。たとえば、Web ページ上の一般的な曲のランキングやゲームのランキングは、順序付きリストを通じて定義できます。
順序付きリストの基本構文形式を定義する
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol>知らせ：
- 順序なしリストと同様の特定のリスト項目であり、各ペアは
- 。(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. 定義一覧
定義リストは順序付きリストや順序なしリストとは異なり、dl、dt、dd の 3 つのタグが含まれます。
リストの基本的な構文形式を定義する<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: リストの定義; dt: タイトルの定義; dd: 説明の定義
知らせ：
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 ファイルを開きます。
(7) ハイパーリンクタグ
目標: ハイパーリンク タグの使用をマスターします。ハイパーリンクを使用してページ ジャンプを完了できます。ハイパーリンクは、
Web ページで最も一般的に使用される要素です。Web サイトは通常、複数のページで構成されます。Web サイトに入ると最初に表示されるのはホームページです。ホーム ページからサブページにジャンプするには、ホーム ページ上の対応する場所にハイパーリンクを追加する必要があります。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 ファイルを開きます
。 「蘆州職業技術学院」をクリックしたときのブラウザの効果
「全国職業学院技能競技大会」をクリックした後のブラウザの効果
(8) 画像タグ
目標: イメージ タグをマスターし、イメージ タグを使用してイメージを表示する方法を学びます。HTML
Web ページでイメージを表示するには、イメージ タグを使用する必要があります。
基本的なタグ構文形式:
注: 上記の構文では、src 属性を使用して、画像ファイルのパスであり、属性値は絶対パスまたは相対パスであり、ラベルの必須属性です。画像ソースには、ローカル画像ファイルまたはネットワーク画像リソースを使用できます
。bear.png という名前の画像ファイルを Chapter01 フォルダーに追加し、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 ファイルを開きます。
3.CSS技術
(2) CSSスタイルの参照方法
1. インライン
インライン スタイル (インライン スタイルとも呼ばれます) は、ラベルの style 属性を通じてラベルのスタイルを設定します。
インライン基本構文形式: <tag name style="属性 1: 属性値 1; 属性 2: 属性値 2; 属性 3: 属性値 3;">コンテンツ</ タグ名> スタイルは、実際にはタグの属性です。
すべての HTML タグには、インライン スタイルの設定に使用される style 属性があります。属性および属性値の記述規則は CSS のスタイル規則と同じです。インラインは、それが配置されているタグとその中にネストされているサブタグにのみ影響します。
インライン式はルートタグに記述されます<h1 style="font- size:20px; color:blue;"> 使用CSS行内式修饰一级标题的字体大小和颜色 </h1>使用
タグの style 属性は、第 1 レベルのタイトルのフォントと色を変更するために使用されるインライン CSS スタイルを設定します。
2. 埋め込み型
内部スタイルは、HTML文書のheadタグ内にCSSコードをまとめて記述し、
<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>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 を作成し、タグの下にコードを記述し、
セレクターを使用して HTML ファイル cssDemo05.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を開きます。
4. JavaScriptの基本
(1) インライン
インラインとは、HTML タグのイベント属性に 1 行または少量の JavaScript コードを記述することを指します。
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のコードを別ファイルに記述することを指し、HTMLファイルでは拡張子として「js」が使用されるのが一般的です。
<!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 ファイルを開き、
[OK] ボタンをクリックするとメッセージ ボックスが表示されます。
if（执行条件1）{ 执行语句1 } else if（执行条件2）{ 执行语句2 } else if（执行条件3）{ 执行语句3 } ......Chapter01 フォルダーに JavaScriptDemo05 という名前の HTML ファイルを作成します。
プログラムを実行し、ブラウザで JavaScriptDemo05 ファイルを開き、
[OK] ボタンをクリックするとメッセージ ボックスが表示されます。
(2) DOM関連の知識
//方式1 window.onload = function () {}; //方式2 window. addEventListener ('load', function () {});function functionName(parameter1, parameter2, …){ statements; return expression; }デモページのオンロードイベント
<!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 を開いて、
ウィンドウ オブジェクトの 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>
5. Bootstrap フレームワークの基本
6. ブートストラップ フレームワークの共通コンポーネント
<!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>
