Annuaire d'articles
- 1. Bases du HTML
- 2. Balises HTML couramment utilisées
- 3. Technologie CSS
- 4. Bases de JavaScript
- 5. Bases du framework Bootstrap
- 6. Composants communs du framework Bootstrap
1. Bases du HTML
Écrivez votre première page Web
Créez un dossier nommé chapitre01 dans D:\web_work, puis créez un nouveau fichier texte (suffixe .txt) dans le dossier, changez le nom du fichier en htmlDemo01 et changez le suffixe en .html.
Écrivez le code dans le fichier htmlDemo01.html
. Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo01.html.
2. Balises HTML couramment utilisées
(1) Balises de paragraphe, en ligne et de saut de ligne
Objectif : Se familiariser avec les balises HTML de paragraphe, de ligne et de saut de ligne.
Créez un nouveau fichier HTML htmlDemo02.html dans le dossier chapitre01.
<!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>
Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo02.html
(2) Étiquette de style de texte
Objectif : se familiariser avec les balises de style de texte HTML.
En HTML, utilisez des balises pour contrôler le style du texte dans les pages Web, tel que la police, la taille et la couleur de la police. Le
format de syntaxe de base des balises : <fontattribute="valeur d'attribut"> Le contenu du texte
est créé dans le fichier HTML du dossier chapitre01 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>
Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo03.html.
Remarque : La couleur peut être définie en mots anglais ou représentée en hexadécimal. Par exemple, le vert peut être représenté par #00ff00 et le violet peut être représenté par #ff00ff. Exercices en classe
: Le titre, l'auteur et le texte du poème de Wang Wei sont définis dans différents styles de texte, et le texte est affiché au centre. 
Exercice approfondi : Définissez l'image de fond de la page (préparez le fichier image background.png et placez-le dans le répertoire chapitre01)
(3) Étiquettes de tableau
Objectif : Maîtriser la balise table et apprendre à utiliser l'attribut border pour modifier la bordure du tableau.
Pour créer un tableau dans une page Web HTML, vous devez utiliser la balise table appropriée pour créer le tableau. Le
format de syntaxe de base pour créer un tableau dans une page Web HTML.
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
Avis:
,etC'est la balise de base pour créer des tableaux et elle est indispensable. Utilisé pour définir un tableau, utilisé pour définir des lignes dans le tableau (ligne du tableau), doit être imbriqué dans
|
Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo04.html.
Définissez la couleur de la police du tableau et la couleur d'arrière-plan pour centrer le texte du tableau.
(4) Balises de formulaire
Objectif : Maîtriser les balises de formulaire et apprendre à utiliser les balises de formulaire pour collecter des informations sur les données.
Un formulaire est une zone d'une page Web utilisée pour saisir des informations. Sa fonction principale est de collecter des informations sur les données et de transférer ces informations vers le module de traitement des informations d'arrière-plan. Par exemple, la saisie du nom d'utilisateur et du mot de passe, la sélection du sexe, le bouton de soumission, etc. sur la page d'inscription sont tous définis avec des balises pertinentes dans le formulaire.
1. Champs du formulaire
En HTML, les balises sont utilisées pour définir des champs de formulaire, c'est-à-dire pour créer un formulaire.
Syntaxe de base des balises<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
2. Contrôles de formulaire
Lorsque vous naviguez sur le Web, vous voyez souvent des zones de saisie de texte sur une seule ligne, des boutons radio, des cases à cocher, des boutons de réinitialisation, etc. Ces éléments peuvent être définis dans le formulaire à l'aide de contrôles.
Format de syntaxe de base du contrôle :
L'attribut type est l'attribut le plus basique du contrôle et est utilisé pour spécifier différents types de contrôle.
Les contrôles peuvent également définir de nombreux autres attributs. Parmi eux, les plus couramment utilisés sont l'identifiant, le nom, la valeur et la taille, qui sont utilisés pour spécifier la valeur de l'ID, le nom, la valeur par défaut du contrôle et la largeur d'affichage du contrôle. sur la page respectivement.
Créez un fichier HTML htmlDemo05.html dans le dossier chapitre01, ajoutez un formulaire, définissez la méthode de soumission sur POST et définissez un tableau à 2 colonnes. Ajoutez le contrôle de saisie du nom d'utilisateur
et le contrôle de la zone de saisie du mot de passe 
dans htmlDemo05.html. Ajoutez le contrôle de sélection du sexe. et contrôle de case à cocher d'intérêt. 
Ajoutez un contrôle de téléchargement de fichier, un contrôle de bouton de soumission et un bouton de réinitialisation dans htmlDemo05.html. 
Consultez le code complet de la 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>
Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo05.html.
Ajoutez une bordure intitulée au formulaire.
<!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>
Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo05.html. 
Remplissez les données du formulaire dans l'image ci-dessus. L'effet de page est le suivant
(5) Étiquettes de texte multilignes
HTML fournit des balises grâce auxquelles des zones de texte multilignes peuvent être créées.
Format de syntaxe de base des balises<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
Créez un fichier HTML htmlDemo06.html dans le dossier chapitre01
<!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>
Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo06.html
(6) Balises de liste
Objectif : balises de liste principale, y compris les listes non ordonnées, les listes ordonnées et les listes définies
1. Liste non ordonnée
Une liste non ordonnée est une liste qui n'est pas triée. Il n'y a pas de niveau d'ordre entre les éléments de la liste et ils sont généralement juxtaposés.
Définir le format de syntaxe de base des listes non ordonnées
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
Avis:
- balises imbriquées dans
- . (ul : liste non ordonnée ; li : élément de liste)
Créez un fichier HTML htmlDemo07.html dans le dossier chapitre01
<!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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo07.html
2. Liste ordonnée
Une liste ordonnée est une liste qui met l’accent sur l’ordre de disposition.
- Définition de balise, plusieurs peuvent être imbriquées à l'intérieur
- Étiquette. Par exemple, les classements courants des chansons et les classements des jeux sur les pages Web peuvent être définis au moyen de listes ordonnées.
Définir le format de syntaxe de base pour les listes ordonnées
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol>Avis:
- est un élément de liste spécifique, similaire à une liste non ordonnée, chaque paire
- . (ol : liste ordonnée)
Créez un fichier HTML htmlDemo08.html dans le dossier chapitre01
<!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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo08.html
3. Liste de définitions
La liste de définition est différente de l'utilisation de listes ordonnées et de listes non ordonnées. Elle contient 3 balises, à savoir dl, dt et dd.
Définir le format syntaxique de base des listes<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 : définir la liste；dt : définir le titre；dd : définir la description
Avis:
Créez un fichier HTML htmlDemo09.html dans le dossier chapitre01
<!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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo09.html
(7) Balises de lien hypertexte
Objectif : Maîtriser l'utilisation des balises de liens hypertexte. Vous pouvez utiliser des liens hypertexte pour effectuer des sauts de page. Les liens hypertextes
sont les éléments les plus couramment utilisés dans les pages Web. Un site Web se compose généralement de plusieurs pages. La première chose que vous voyez lorsque vous entrez sur un site Web est la page d'accueil. Si vous souhaitez passer de la page d'accueil à une sous-page, vous devez ajouter un lien hypertexte vers l'emplacement correspondant sur la page d'accueil. Créer un lien hypertexte en HTML est aussi simple que d'entourer l'objet qui doit être lié avec une balise.
Le format de syntaxe de base pour créer des hyperliens à l'aide de balises : texte ou image.
Tag est une balise en ligne utilisée pour définir un lien hypertexte. href et target sont des attributs courants des balises.
Créez un fichier HTML htmlDemo10.html dans le dossier chapitre01.
<!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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo10.html
. L'effet du navigateur lorsque vous cliquez sur "Luzhou Vocational and Technical College". L'effet du navigateur
après avoir cliqué sur "National Vocational College Skills Competition".
(8) Balises d'image
Objectif : Maîtriser les balises d'image et apprendre à utiliser les balises d'image pour afficher des images.
Pour afficher des images dans des pages Web HTML, vous devez utiliser des balises d'image.
Format de syntaxe de balise de base :
Remarque : Dans la syntaxe ci-dessus, l'attribut src est utilisé pour spécifier le chemin du fichier image, et la valeur de l'attribut peut être C'est un chemin absolu ou un chemin relatif. C'est un attribut obligatoire de l'étiquette. La source de l'image peut être un fichier image local ou une ressource d'image réseau.
Ajoutez un fichier image nommé Bear.png au dossier Chapter01, puis créez un fichier 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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier htmlDemo11.html
3. Technologie CSS
(2) Méthode de référence du style CSS
1. En ligne
Le style en ligne, également appelé style en ligne, définit le style d'une étiquette via l'attribut style de l'étiquette.
Format de syntaxe de base en ligne : <tag name style="Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3;">Content</ tag name> est un attribut de la balise, en fait
toutes les balises HTML ont toutes l'attribut style, qui est utilisé pour définir les styles en ligne. Les conventions d'écriture des attributs et des valeurs d'attribut sont les mêmes que les règles de style CSS. Inline n'affecte que la balise dans laquelle il se trouve et les sous-balises qui y sont imbriquées.
Les expressions en ligne sont écrites dans la balise racine<h1 style="font- size:20px; color:blue;"> 使用CSS行内式修饰一级标题的字体大小和颜色 </h1>utiliser
L'attribut style de la balise définit le style CSS en ligne, qui est utilisé pour modifier la police et la couleur du titre de premier niveau.
2. Intégré
Le style interne consiste à écrire du code CSS ensemble dans la balise head du document HTML et à utiliser
<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>Démontrez la méthode de référence du CSS lié en modifiant le fichier cssDemo02.html et créez un fichier nommé style.css dans le dossier chapitre01.
h2{ text-align:center;} div{ border:1px solid #ccc; width:300px; height:80px; color:purple; text-align:center; margin: 0 auto;}Créez un fichier HTML cssDemo03.html dans le dossier chapitre 01.
Insérez la description de l'image ici
<!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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier cssDemo03.html
4.
Type d'importation Le type d'importation est le même que le type de lien, les deux sont destinés aux fichiers de feuille de style externes. Appliquer au document d'en-tête 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>
Créez un fichier HTML cssDemo05.html dans le dossier chapitre01, écrivez le code sous la balise et
utilisez les sélecteurs pour modifier le style dans le fichier HTML cssDemo05.html. Écrire le code dans les balises
<!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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier
d'échange cssDemo05.html - cssDemo06.html
4. Bases de JavaScript
(1) En ligne
Inline fait référence à l'écriture d'une seule ligne ou d'une petite quantité de code JavaScript dans l'attribut event de la balise HTML.
Créez un fichier HTML nommé JavaScriptDemo01 dans le dossier chapitre01.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript行内式</title> </head> <body> <input type="button" value="单击我" onclick="alert('欢迎使用行内式脚本~')" /> </body> </html>Exécutez le programme et ouvrez le fichier JavaScriptDemo01 à l'aide d'un navigateur.
Cliquez sur le bouton "Cliquez sur moi" dans l'image ci-dessus pour voir l'effet du navigateur
(2) Intégré
Dans les documents HTML, le code JavaScript peut être introduit via des balises et leurs attributs associés. Lorsque le navigateur lit<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript内嵌式</title> <script type="text/javascript"> alert('欢迎使用内嵌式脚本~'); </script> </head> <body> </body> </html>Exécutez le programme et ouvrez le fichier JavaScriptDemo02 à l'aide de votre navigateur.
(3) Type intégré externe
Les liens externes font référence à l'écriture de code JavaScript dans un fichier séparé. Généralement, "js" est utilisé comme extension de fichier et est utilisé dans les fichiers 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. Déclaration if conditionnelle
if（执行条件1）{ 语句1 } else { 语句2 }Créez un fichier HTML nommé JavaScriptDemo04 dans le dossier chapitre01.
<!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>Exécutez le programme et utilisez le navigateur pour ouvrir le fichier JavaScriptDemo04.
Cliquez sur le bouton [OK] et une boîte de message apparaîtra.
if（执行条件1）{ 执行语句1 } else if（执行条件2）{ 执行语句2 } else if（执行条件3）{ 执行语句3 } ......Créez un fichier HTML nommé JavaScriptDemo05 dans le dossier chapitre01.
Exécutez le programme et utilisez le navigateur pour ouvrir le fichier JavaScriptDemo05.
Cliquez sur le bouton [OK] et une boîte de message apparaîtra.
(2) Connaissances liées au DOM
//方式1 window.onload = function () {}; //方式2 window. addEventListener ('load', function () {});function functionName(parameter1, parameter2, …){ statements; return expression; }Événement de chargement de la page de démonstration
<!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>Ouvrez JavaScriptDemo06 dans le navigateur
pour démontrer la méthode open() et la méthode close() de l'objet window
<!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>Ouvrez JavaScriptDemo07 dans le navigateur
pour démontrer la méthode courante de l'objet 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>Ouvrez JavaScriptDemo08 dans le navigateur
et cliquez sur le bouton [Afficher la date et l'heure actuelles]
5. Cas de script - Vérification non vide du formulaire de connexion
Créez JavaScriptDemo09.html dans le répertoire chapitre01
<!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. Bases du framework Bootstrap
6. Composants communs du framework 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>
