Point de connaissance 1 [Présentation HTML]
Point de connaissance 2 [Étiquette de texte]
Point de connaissance 3 [Titre]
Point de connaissance 4 [Hyperlien]
Point de connaissance 5 [étiquette du tableau] (important)
Point de connaissance 6 [formulaire] (important)
Point de connaissance 7 [Présentation de JavaScript] Laissez la page Web bouger
2. Trois façons d'utiliser les scripts js sur les pages Web
Point de connaissance 8 [fonctions js]
Point de connaissance 9 [Objets JS]
1. Objet navigateur (objet fenêtre)
2. Objet texte (objet Document) (important)
Point de connaissance 1 [Présentation HTML]
HTML est un langage de balisage hypertexte
HTML est composé de diverses balises, telles que <html></html> <body></body>
Balises HTML
(1) Mots-clés entourés de crochets tels que
(2) Apparaît généralement par paires (balise de début, balise de fin). Par exemple, exceptions :
(3) Balises d'annotation :, annotation
2. Éléments HTML
(1) Tous les codes de la balise de début à la balise de fin
3. Attributs HTML
(1) Spécifié dans la balise d'ouverture de l'élément HTML
(2) Apparaît sous la forme de paires nom/valeur : <img src = "1.png">
例子(01_first_html.html)：
<!-- this is my first html(the content cannot display in html,because it's just a note)-->
<html>
<head>
<title>01_first_html</title>
</head>
<body>
<label>hello, HTML!!!</label>
<br>
<img src="./image/01_first_html.png">
<body>
</html>1. Balise de méta-informations
Fournissez des méta-informations sur la page, telles que la description et les mots-clés pour les moteurs de recherche et la fréquence de mise à jour
2. La balise <meta> est située en tête du document et ne contient aucun contenu.
3. Les attributs de la balise <meta> définissent les couples nom/valeur associés au document.
4. En HTML, les balises n'ont pas de balises de fermeture.
5. La balise <meta> est toujours située à l'intérieur de l'élément head.
6. Les métadonnées sont toujours transmises par paires nom/valeur.
Cas 1:
例子（02_meta.html）：
<html>
<head>
<title>02_meta</title>
<meta charset="UTF-8"/>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com/">
<meta name="keywords" content="jump">
</head>
<body>
5秒后我们将去一个神奇的地方！(这个网页的关键字是：jump)
</body>
</html>Point de connaissance 2 [Étiquette de texte]
Cas:
<html>
<head>
<title>03_char</title>
<meta charset="UTF-8">
</head>
<body>
b:<b>这些文字是粗体的</b>
<br>
<br>
i:<i>这些文字是斜体的</i>
<br>
<br>
u:<u>这些文字带有下划线</u>
<br>
<br>
em:<em>用于强调的文本，一般显示为斜体字</em>
<br>
<br>
strong:<strong>用于特别强调的文本，显示为粗体字</strong>
<br>
<br>
code:<code>用来指出这是一组代码:int main(void)</code>
<br>
<br>
small:<small>规定文本以小号字显示</small>
<br>
<br>
big:<big>规定文本以大号字显示</big>
<br>
<br>
sup:12<sup>2</sup>=144
<br>
<br>
sub:硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>
<br>
<br>
</body>
</html>résultat de l'opération :
Point de connaissance 3 [Titre]
<h1>—<h6>Titre de niveau 1-->Titre de niveau 6
Et la police du titre est la plus grande
<html>
<head>
<title>04_head_style</title>
</head>
<body style="background-color:#90EE90">
<br>
<h1 style="color:red" >一级标题</h1>
<h2 style="color:orange">二级标题</h2>
<h3 style="color:yellow">三级标题</h3>
<h4 style="color:green">四级标题</h4>
<h5 style="color:black">五级标题</h5>
<h6 style="color:blue">六级标题</h6>
<p style="background-color: white; font-family: arial; color: #ff00ff; font-size:50px; text-align: center">普通段落</p>
<br>
</body>
</html>résultat de l'opération :
Point de connaissance 4 [Hyperlien]
Lien hypertexte<a><a>
(1) Lien hypertexte e-mail dans la page
<a href="mailto:[email protected]?subject=Hi"></a>
Remarque : sujet --- thème
(2) Hyperliens dans la page
Retour en haut : <a href="#top"></a>
Revenir à une certaine position : <a name="tome"></a>
<a href="#tome"><></a>
(3) Liens hypertextes en dehors de la page
Réseau externe : <a href="http://www.baidu.com/"></a>
Description :<a href="a.html" target="_blank"></a>
(4) Lien hypertexte image
<a src="a.html"><img src="image/a.jpg"></a>
<html>
<head>
<title>05_a_href</title>
<meta charset="UTF-8">
</head>
<body>
<br>
<a href="mailto:[email protected]?subject=Hi">email to others</a>
<br>
<br>
<a href="#mike">去中间看看</a>
<br>
<br>
<a href="http://www.1000phone.com">千锋，用良心做教育</a>
<br>
<br>
<a href="a.html" target="_blank">打开本地一个新的网页</a>
<br>
<br>
<a href="a.html"><img src="image/a.jpg"></a>
<br>
<br>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p><a name="mike">中间</a></p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<p>some information</p>
<a href="#top">回到顶部</a>
<br>
</body>
</html>résultat de l'opération :
Point de connaissance 5 [étiquette du tableau] (important)
Cas : (frappé la nuit)
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" align="center"><!--border表示线宽-->
<caption>统计学生信息</caption><!--表头信息-->
<tr align="center">
<td colspan="3"><b>学生信息</b></td><!--单元格信息-->
<td colspan="2"><b>成绩信息</b></td><!--colspan 跨列-->
<td rowspan="2">照片</td><!--rowspan 跨行-->
</tr><!--行标签-->
<tr align="center">
<td>姓名</td><!--单元格信息-->
<td>性别</td>
<td>专业</td><!--单元格信息-->
<td>课程</td>
<td>分数</td><!--单元格信息-->
</tr>
<tr align="center">
<td>郑涵</td><!--单元格信息-->
<td>男</td>
<td>电子信息</td><!--单元格信息-->
<td>web开发</td>
<td>99</td><!--单元格信息-->
<td>调皮</td><!--单元格信息-->
</tr>
</table>
</body>
</html>résultat de l'opération :
Point de connaissance 6 [formulaire] (important)
Comment les pages HTML interagissent avec le serveur
(1)Attributs
name : nom du formulaire
méthode : La méthode de transmission des données du formulaire du navigateur au serveur
get : ajoute les données du formulaire à la fin de l'adresse URL. La longueur ne doit pas dépasser 8 192 caractères. Elle n'est pas confidentielle. La valeur par défaut est get.
post : incluez les données du formulaire dans le corps du formulaire et transmettez-les ensemble au serveur. Aucune limite de longueur, transmission de texte chiffré
action : utilisé pour définir les gestionnaires de formulaire
(2) Balises dans <form></form>
a. Balise d'entrée du formulaire <input>
Les champs de texte et les boutons couramment utilisés utilisent cette étiquette.
Les attributs:
nom nom de domaine
type de champ de saisie
valeur de l'élément de valeur
valeur de l'attribut de type :
texte champ de texte mot de passe champ de mot de passe
fichier champ de fichier case à cocher case à cocher
radio bouton radio bouton bouton ordinaire
soumettre le bouton de soumission réinitialiser le bouton de réinitialisation
caché champ caché image champ d'image
B. Liste de sélection
Les menus et les listes sont créés pour économiser de l'espace sur les pages Web
Les attributs
name Le nom du menu et de la liste
taille nombre d'options affichées
multiple Les options de la liste sont multiples
l'option sélectionnée est sélectionnée par défaut (attribut dans l'option)
c. Zone de texte <textarea></textarea>
Utilisé pour créer des champs de saisie de texte multilignes
Les attributs
name le nom du champ de texte
rows Le nombre de lignes dans le champ de texte
cols Le nombre de colonnes dans le champ de texte
Cas 1 : zone de saisie de saisie
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
<h3>这是一个表单的案例</h3>
<form method="GET" action="deal.cgi">
用户名:<input type="text" name="usr">
<br>
密     码:<input type="password" name="pwd">
<br>
请选择你要上传的文件:<input type="file" name="file">
<br>
请选择你的爱好:<input type="checkbox" name="hobby" value="LoL">LOL
<input type="checkbox" name="hobby" value="王者">王者
<input type="checkbox" name="hobby" value="吃鸡">吃鸡
<br>
你的性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
<input type="button" value="错我呀">
<br>
你猜猜这是谁:<input type="image" src="./image/zkd.jpg">
<br>
<input type="submit" value="提交">         <input type="reset" value="复位">
</form>
</body>
</html>résultat de l'opération :
a. Sélectionnez la liste<select><option></option></select>
Les menus et les listes sont créés pour économiser de l'espace sur les pages Web
Les attributs
name Le nom du menu et de la liste
taille nombre d'options affichées
multiple Les options de la liste sont multiples
l'option sélectionnée est sélectionnée par défaut (attribut dans l'option)
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
选择你的车型：
<select>
<option>BMW</option>
<option>玛莎拉蒂</option>
<option>火车</option>
<option selected>宝骏</option>
<option>自行车</option>
</select>
</body>
</html>résultat de l'opération :
Cas 3 : champ de texte
a. Zone de texte <textarea> </textarea>
Utilisé pour créer des champs de saisie de texte multilignes
Les attributs
name le nom du champ de texte
rows Le nombre de lignes dans le champ de texte
cols Le nombre de colonnes dans le champ de texte
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
请输入你的留言：
<br>
<textarea>
今天心情挺好！！！！！！！！啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</textarea>
</body>
</html>résultat de l'opération :
Point de connaissance 7 [Présentation de JavaScript] Laissez la page Web bouger
1. Qu'est-ce que Javascript ?
Javascript est un langage de script basé sur des objets doté de fonctionnalités de sécurité. Il est traduit dans un format exécutable par un interpréteur intégré au navigateur, puis exécuté. En termes de concept et de conception, Java et Javascript sont deux langages complètement différents.
Les quatre caractéristiques de Javascript : langage basé sur les objets, simplicité, dynamique et multiplateforme
| casser |
cas |
attraper |
continuer |
débogueur |
| défaut |
supprimer |
faire |
autre |
FAUX |
| enfin |
pour |
fonction |
si |
dans |
| Exemple de |
nouveau |
nul |
retour |
changer |
| ce |
lancer |
vrai |
essayer |
Type de |
| était |
vide |
alors que |
avec |
2. Trois façons d'utiliser les scripts js sur les pages Web
Ajouter un script directement Utiliser la balise de script pour insérer un fichier de script de lien de script (recommandé)
1. Ajouter un script directement
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="错误呀给你惊喜" onclick='alert("我就是你的惊喜，呵呵！！")' >
</body>
</html>résultat de l'opération :
2. Insérer un script à l'aide de la balise script
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<script type="text/javascript">
function my_button()
{
alert("我就是你的惊吓，哈哈！！！");
}
</script>
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="错误呀给你惊喜" onclick="my_button();" >
</body>
</html>résultat de l'opération :
3. Lier le fichier de script (recommandé)
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="01_js.js"></script>
</head>
<body>
<!--alert会弹出一个对话框-->
<input type="button" value="错误呀给你惊喜" onclick="my_button();" >
</body>
</html>résultat de l'opération :
4. Opérateur
(1) Opérateurs arithmétiques
+、－、*、/、%、++、－－
(2) Opérateurs logiques
&&、||、!
(3) Opérateurs de comparaison
==、>、＝、
(4) Opérateurs de bits
~, &, |, ^, >, >>> (décalage à droite non signé)
(5) Opérateurs de chaînes
+(opérateur de fusion)
(6) Opérateur d'affectation
=、+=、-=、 *=、/=、%=
(7) Opérateur conditionnel
?: (Condition ? Résultat 1 : Résultat 2)
Point de connaissance 8 [fonctions js]
函数的语法结构:
function 函数名(参数1,参数2,…){
函数体
}Cas:
index.html
<input type="button" value="错误呀给你惊喜" onclick='my_button(10,"hehe",20);' >deal.js
//arg1, arg2, arg3 不用写类型
function my_button(arg1, arg2, arg3)
{
var data="";
data += arg1;
data +=":"
data +=arg2;
data +=":"
data += arg3;
//10:hehe:20
alert(data);
}résultat de l'opération :
Point de connaissance 9 [Objets JS]
1. Objet navigateur (objet fenêtre)
L'objet Window représente la fenêtre ouverte dans le navigateur. L'ouverture d'une page Web HTML créera un objet fenêtre.
L'objet Window est un objet global
window.open() ouvre une nouvelle fenêtre
window.close() ferme la fenêtre actuelle
window.location.href : renvoie l'URL complète ; lui attribuer une valeur permettra d'accéder à la page Web correspondante.
function my_button()
{
//open在新的窗口中打开网页
//window.open("http://www.baidu.com");
//在当前窗口中打开网页
//window.location.href="http://www.baidu.com";
//获取当前网页的url
//alert(window.location.href);
//关闭close关闭窗口
window.close();
}2. Objet texte (objet Document) (important)
Chaque document HTML chargé dans le navigateur devient un objet Document.
L'objet Document nous permet d'accéder à tous les éléments de la page HTML à partir de scripts
1. Fournit un accès à tous les éléments de la page HTML à partir de scripts JS
2. Vous pouvez utiliser la méthode getElementById() pour accéder et contrôler les éléments de balise dans la page HTML en fonction du numéro d'identification correspondant.
3. Vous pouvez obtenir les informations sur le titre et l'URL du document actuel via les attributs de titre et d'URL.
4. Vous pouvez écrire des expressions HTML dans des pages HTML via la méthode write.
Cas 1 : valeur de l'interface de connexion
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="14_js.js"></script>
</head>
<body>
<!--id是唯一 标记一个个标签-->
用户名:<input type="text" id="usr">
<br>
密码:<input type="password" id="pwd">
<br>
<input type="button" value="登录" onclick="my_button(1);">
<input type="button" value="取消" onclick="my_button(0);">
</body>
</html>14_js.js
function my_button(arg)
{
if(arg == 1)//登录 admin 123456
{
//获取网页上输入框的用户名密码
var usr = document.getElementById("usr").value;//重点
var pwd = document.getElementById("pwd").value;
if(usr=="admin" && pwd=="123456")
{
window.location.href="http://www.baidu.com";
}
else
{
alert("用户名或密码错误请重新输入");
//清空用户名密码的输入框
document.getElementById("usr").value="";
document.getElementById("pwd").value="";
}
}
else if(arg == 0)//取消
{
//清空用户名密码的输入框
document.getElementById("usr").value="";
document.getElementById("pwd").value="";
}
}résultat de l'opération :
Résumé : la valeur document.getElementById("usr").value est généralement utilisée dans les zones de saisie
2. Le dossier obtient le contenu du label innerHTML
var text = document.getElementById("addr").innerHTML;index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="15_js.js"></script>
</head>
<body>
地址:<label id="addr">BJ</label>
<br>
<input type="button" value="单击改变地址" onclick="change_fun();">
</body>
</html>15_js.js
function change_fun()
{
//获取label的内容 对于label 而是innerHTML
var text = document.getElementById("addr").innerHTML;
alert("获得的内容为:"+text);
//更改label的内容
document.getElementById("addr").innerHTML="SZ";
}3. Le document de cas obtient le contenu src de img
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="16_js.js"></script>
</head>
<body>
此处有帅哥:
<br>
<img src="./image/zkd.jpg" id="img">
<br>
<input type="button" value="单击改变图片" onclick="change_fun();">
</body>
</html>16_js.js
function change_fun()
{
//更改img的内容 src
document.getElementById("img").src="./image/0001.png";
}4. Le dossier obtient le contenu du bouton radio
index.html
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="17_js.js"></script>
</head>
<body>
请选择你的性别:
男:<input type="radio" name="sex" id="nan">
女:<input type="radio" name="sex" id="nv">
<br>
<input type="button" value="单击获取性别" onclick="sex_fun();">
</body>
</html>17_js.js
function sex_fun()
{
alert("男:"+document.getElementById("nan").checked);//选中true 否则false
alert("女:"+document.getElementById("nv").checked);//选中true 否则false
}résultat de l'opération :
5. Le dossier obtient le contenu de la case à cocher
<html>
<head>
<title>table</title>
<meta charset="UTF-8">
<!--这是描述 js中的函数来之哪个js文件-->
<script type="text/javascript" src="18_js.js"></script>
</head>
<body>
请选择你的英雄:
<!--onchange 下拉列表框被选择的时候自动调用hero_fun函数-->
<select onchange="hero_fun();" id="hero">
<option>德玛西亚</option>
<option>烬</option>
<option>小法</option>
<option>盲僧</option>
<option>小炮</option>
</select>
</body>
</html>18_js.js
function hero_fun()
{
//获取下拉列表框被选中的索引号
var index = document.getElementById("hero").selectedIndex;
//根据索引号 从选项数据中options[]中得到选中的内容
var hero_name = document.getElementById("hero").options[index].value;
alert("你选择的英雄为:"+hero_name);
}résultat de l'opération :
