Table des matières
HTML (Hypertext Markup Language) est un langage de balisage utilisé pour créer des pages Web. Il définit la structure et le contenu des pages Web et constitue la base du développement frontal.
1. Structure de base et étiquettes
1. Structure des documents HTML
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>HTML 全面入门教程：从基础到高级</h1>
</body>
</html>
Dans le code, une structure de document HTML simple est affichée, qui contient <!DOCTYPE>des déclarations, htmldes éléments, headdes éléments, bodydes éléments et h1des éléments.
2. Balises communes
- Balises d'en-tête (
<h1>-<h6>) : Utilisées pour définir les niveaux d'en-tête :<h1>标题一</h1> - Balises de paragraphe (
<p>) : Utilisées pour définir le texte du paragraphe :<p>这是一个段落。</p> - Balises de lien (
<a>) : utilisées pour créer des liens :<a href="https://www.example.com">点击这里</a> - balise d'image (
<img>) : pour insérer des images :<img src="image.jpg" alt="图片"> - Balises de liste (
<ul>,<ol>,<li>) : utilisées pour créer des listes non ordonnées et ordonnées :
<ul>
<li>列表项一</li>
<li>列表项二</li>
</ul>
- Balises de tableau (
<table>,<tr>,<td>) : utilisées pour créer des tableaux :
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
2. Formulaires et éléments de saisie
1. Libellé du formulaire ( <form>)
<form>
<!-- 表单内容 -->
</form>
Les balises de formulaire sont utilisées pour créer des formulaires de saisie utilisateur et contiennent divers éléments pour l'interaction de l'utilisateur.
2. Élément d'entrée
- Zone de saisie de texte (
<input type="text">) : utilisée pour recevoir la saisie de texte :<input type="text" name="username"> - Zone de saisie du mot de passe (
<input type="password">) : utilisée pour recevoir la saisie du mot de passe :<input type="password" name="password"> - bouton radio (
<input type="radio">)
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
- case à cocher (
<input type="checkbox">)
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
- Liste déroulante (
<select>,<option>)
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
3. Exemples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 入门教程：注册实例</title>
</head>
<body>
<h1 align="center">HTML 入门教程：注册实例</h1>
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label> </td>
<td><input type="text" name="username" id="username"> </td>
</tr>
<tr>
<td><label for="password">密码</label> </td>
<td><input type="password" name="password" id="password"> </td>
</tr>
<tr>
<td><label for="email">邮箱</label> </td>
<td><input type="email" name="email" id="email"> </td>
</tr>
<tr>
<td><label for="name">姓名</label> </td>
<td><input type="text" name="name" id="name"> </td>
</tr>
<tr>
<td><label for="tel">手机号</label> </td>
<td><input type="text" name="tel" id="tel"> </td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
<input type="checkbox" name="hobby" value="music"> 音乐
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
<option value="chongqing">重庆</option>
</select>
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label> </td>
<td><input type="date" name="birthday" id="birthday"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>
3. Style et mise en page
1. Styles en ligne
Utilisez l'attribut à l'intérieur de l'élément stylepour spécifier les styles en ligne :
<p style="color: red; font-size: 16px;">这是一个红色的段落。</p>
2. Feuilles de style internes
<head>Utilisez la balise à l'intérieur de l'élément pour <style>définir une feuille de style interne :
<style>
p {
color: red;
font-size: 16px;
}
</style>
3. Feuilles de style externes
Utilisez un fichier CSS externe pour définir les styles :
<link rel="stylesheet" href="styles.css">
styles.cssDéfinir des règles de style dans un fichier :
p {
color: red;
font-size: 16px;
}
4. Contenu multimédia et intégré
1. Image
Utilisez <img>la balise pour insérer des images :
<img src="image.jpg" alt="图片">
2. Audio et vidéo
Utilisez <audio>les <video>balises et pour intégrer l'audio et la vidéo :
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>
3. Contenu intégré
Utilisez <iframe>la balise pour intégrer d'autres pages Web ou contenus :
<iframe src="https://www.example.com"></iframe>
5. Balises sémantiques
Balises sémantiques
L'utilisation de balises HTML sémantiques peut contribuer à améliorer la lisibilité et l'accessibilité des pages Web :
<header>头部内容</header>
<nav>导航菜单</nav>
<main>主要内容</main>
<footer>底部内容</footer>