Maison >interface Web >tutoriel HTML >Introduction détaillée aux routines HTML de base
Introduction détaillée aux routines HTML de base
- 高洛峰original
- 2017-03-23 10:15:551837parcourir
Cette note enregistre les balises et les routines d'utilisation les plus élémentaires. Elle est enregistrée ici pour faciliter la consolidation future, et également pour que d'autres collègues puissent s'y référer et des exemples simples. La Grande Muraille commence dès le plus jeune âge, et quelque chose d'aussi trivial que le HTML. 5 doit être abordé étape par étape. Allez, il n'y a pas d'autre bon moyen !
De plus, mon environnement de programmation est configuré comme suit : l'IDE d'édition HTML 5 utilise Brackets, php utilise Notepad ++. Le déploiement utilise xammn.
Routine 1 : bonjour le monde
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个教程</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>Explication : 8b05045a5be5764f313ed5b9168a17e6 est déclaré comme un document HTML5. L'élément 100db36a723c770d327fc0aef2ce13b1 >L'élément 93f0f5c25f18dab9d176bd4f6de5d30e contient les métadonnées du document
b2386ffb911b14667cb8f0f91ea547a7 L'élément décrit le titre du document
6c04bd5ca3fcae76e30b72ad730ca86d content
L'élément4a249f0d628e2318394fd9b75b4636b1 définit un grand titre
e388a4556c0f65e1904146cc1a846bee L'élément définit un paragraphe
Routine 2 : Titre
Routine 3 : paragraphe html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<h1>我的标题1</h1>
<h2>我的标题2</h2>
<h3>我的标题3</h3>
<h4>我的标题4</h4>
<h5>我的标题5</h5>
<h6>我的标题6</h6>
</body>
</html>Routine 4 : lien html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<h1>我的标题1</h1>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</body>
</html>Routine 5 image html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<a href="http://www.runoob.com">网易</a>
</body>
</html>Routine 6 : Ajouter une ligne au Ligne de page Web<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<img src="screenshots/quick-edit.png" width="200" height="200">
</body>
</html>Routine 7 : Ajouter des commentaires au programme<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<img src="screenshots/quick-edit.png" width="200" height="200">
<hr>
<p>段落1</p>
<hr>
<p>段落2</p>
<hr>
</body>
</html>Routine 8 Sortie de formatage des polices<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<!-- 在网页上显示图片 -->
<img src="screenshots/quick-edit.png" width="200" height="200">
<hr>
<!-- 段落1的内容 -->
<p>段落1</p>
<hr>
<p>段落2</p>
<hr>
</body>
</html>Routine 9 html css<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html> Routine 10 Table<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的例程</title> </head> <body> <a href="http://www.163,com/" >访问网易!</a> <h1 style="text-align:center">居中对齐</h1> </body> </html>Routine 11 Liste non ordonnée
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的例程</title>
</head>
<body>
<table border="1">
<tr>
<th>头部1</th>
<th>头部2</th>
</tr>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
</body>
</html>Routine 12 : Liste ordonnée<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的例程</title>
</head>
<body>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</body>
</html>Routine 13 : Zone de bloc <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的例程</title>
</head>
<body>
<ol>
<li>呵呵</li>
<li>呵呵</li>
<li>呵呵</li>
</ol>
<ol start="50">
<li>呵呵</li>
<li>呵呵</li>
<li>呵呵</li>
</ol>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!