<p>举例：

<p>ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：

---

使用<code><ol>，添加顺序列表

<p>如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<code><ol>标签来制作有序列表来展示。

<p>
语法：

<p>举例：

<p>下面是一个热点课程下载排行榜：

<p><code><ol>在网页中显示的默认样式一般为：每项<code><li>前都自带一个序号，序号默认从1开始，如下图所示：

---

初识<code>div

认识div在排版中的作用

<p>在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

<p>语法：<code><div>…</div>

<p>确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

给div命名，使逻辑更加清晰

<p>在上一小节中，我们把一些标签放进<code><div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<code><div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

<p>如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。

<p>语法：<code><div id="版块名称">…</div>

---

table标签，认识网页上的表格

table标签 ＝ 我们平时看到到表格

<p>有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：

<p>
想在网页上展示上述表格效果可以使用以下代码：

<p>创建表格的四个元素： <code>table、tbody、tr、th、td

<li><p><code><table>…</table>：整个表格以<code><table>标记开始、<code></table>标记结束。
<li><p><code><tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<code><tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
<li><p><code><tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
<li><p><code><td>…</td>：表格的一个单元格，一行中包含几对<code><td>...</td>，说明一行中就有几列。
<li><p><code><th>…</th>：表格的头部的一个单元格，表格表头。
<li><p>表格中列的个数，取决于一行中数据单元格的个数。

<p>上述代码在浏览器中显示的默认的样式为：

<p>总结：

<li><p>table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
<li><p>表头，也就是th标签中的文本默认为粗体并且居中显示

用css样式，为表格加入边框

<p>Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
代码中加入：

<p>上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。

<p>结果窗口显示出结果样式：

caption标签，为表格添加标题和摘要

<p>表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下

<p>
摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<code><table summary="表格简介文本">

<p>标题 用以描述表格内容，标题的显示位置：表格上方。
语法：

---

初识<code><a>标签

使用<code><a>标签，链接到另一个页面

<p>使用<code><a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

<p>语法 ：
<code><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

<p>例如：
<code><a href="http://www.zhaolion.com" title="点击进入我的博客">click here!</a>

<p>上面例子作用是单击click here!文字，网页链接到这个网页。

<p>title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好)
提醒
还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。

在新建浏览器窗口中打开链接

<p><code><a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。只需要添加一个属性 <code>target="_blank"
如下代码：
<code>click here!

使用mailto在网页中链接Email地址

<p><code><a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：

<p>提醒:如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
下面是一个完整的实例: 在浏览器中显示的一个发送按钮

<p>点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图：

---

认识<code><img>标签，为网页插入图片

<p>在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<code><img>标签来插入图片。
语法： <code>[站外图片上传中……(48)]

<p>举例： <code><img src = "myimage.gif" alt = "My Image" title = "My Image" />

<p>讲解：

<li><p>src：标识图像的位置；
<li><p>alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
<li><p>title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
<li><p>图像可以是GIF，PNG，JPEG格式的图像文件。

---

认识表单

使用表单标签，与用户交互

<p>网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<p>语法： <code><form method="传送方式" action="服务器文件">

<p>讲解：

<li><p><code><form> ：<code><form>标签是成对出现的，以<code><form>开始，以<code></form>结束。
<li><p>action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
<li><p>method ： 数据传送的方式（get/post）。

<form    method="post"   action="save.php">
     <label for="username">用户名:</label>
     <input type="text" name="username" />
     <label for="pass">密码:</label>
     <input type="password" name="pass" />
</form>

Copier après la connexion

<p>注意

<li><p>所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<code><form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。
<li><p>method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以问谷哥

文本输入框、密码输入框

<p>当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

<p>语法：

<li><p>type：
<li><p>当type="text"时，输入框为文本输入框;
<li><p>当type="password"时, 输入框为密码输入框。

<li><p>name：为文本框命名，以备后台程序ASP 、PHP使用。
<li><p>value：为文本输入框设置默认值。(一般起到提示作用)

<p>举例：

<p>在浏览器中显示的结果：

文本域，支持多行文本输入

<p>当用户需要在表单中输入大段文字时，需要用到文本输入域。

<p>语法： <code><textarea rows="行数" cols="列数">文本</textarea>

<li><p><code><textarea>标签是成对出现的，以<code><textarea>开始，以<code></textarea>结束。
<li><p>cols ：多行输入域的列数。
<li><p>rows ：多行输入域的行数。
<li><p>在<code><textarea></textarea>标签之间可以输入默认值。

<p>举例：

<p>在浏览器中显示结果：

Utilisez des boutons radio et des cases à cocher pour permettre aux utilisateurs de choisir

<p>Lors de l'utilisation de formulaires pour concevoir des questionnaires, afin de réduire les opérations des utilisateurs, il est judicieux d'utiliser des cases de sélection. Il existe deux types de cases de sélection. en HTML, c'est-à-dire un bouton radio et une case à cocher. La différence entre les deux est que l'utilisateur ne peut sélectionner qu'une seule option dans la zone du bouton radio, tandis que l'utilisateur peut sélectionner plusieurs, voire toutes les options, dans la case à cocher. Veuillez consulter l'exemple suivant : <br/> Syntaxe : <code><input type="radio/checkbox" value="值" name="名称" checked="checked"/>

<li><p>type:
<li><p>Quand type="radio" , le contrôle est un bouton radio
<li><p>Lorsque type="checkbox", le contrôle est une case à cocher

<li><p>valeur : Soumettre les données Valeur au serveur (utilisée par le programme d'arrière-plan PHP)
<li><p>nom : Nom du contrôle à utiliser par les programmes d'arrière-plan ASP et PHP
<li><p>coché : Lorsque checked="checked" est défini, l'option est sélectionnée par défaut

<p> comme indiqué dans le code suivant :

<p> est affiché dans le navigateur Le résultat :

<p>Remarque : Les valeurs de nom des boutons radio d'un même groupe doivent être cohérentes. Par exemple, l'exemple ci-dessus a le même nom. "radioLove", pour que les boutons radio d'un même groupe portent le même nom. Le bouton de sélection peut fonctionner comme une sélection radio.

Utilisez les zones de liste déroulante pour économiser de l'espace

<p>Les listes déroulantes sont également souvent utilisées sur les pages Web et peuvent efficacement économiser de l'espace sur les pages Web. Vous pouvez sélectionner des sélections simples et multiples. Le code suivant :

<p>
Explication :

<li><p>valeur : <br/>

<li><p>selected="selected": Définissez l'attribut selected="selected", puis l'option sera sélectionnée par défaut.

Utilisez la zone de liste déroulante pour plusieurs sélections

<p>La liste déroulante peut également effectuer plusieurs opérations de sélection. Définissez l'attribut <code><select> dans <🎜. > balise pour réaliser plusieurs sélections. Sous le système d'exploitation Windows, lorsque vous effectuez plusieurs sélections, appuyez sur la touche Ctrl et cliquez simultanément (utilisez Commande + clic sous Mac) pour sélectionner plusieurs options. Le code suivant : <code>multiple="multiple"

Les résultats affichés dans le navigateur : <p>

Utilisez le bouton Soumettre pour soumettre les données

Il existe deux types de boutons pouvant être utilisés dans le formulaire, à savoir : le bouton Soumettre et Réinitialiser. Cette section explique le bouton Soumettre : lorsque l'utilisateur doit soumettre les informations du formulaire au serveur, le bouton Soumettre doit être utilisé. <p>Syntaxe : <br/><code><input type="submit" value="提交">

<li>type : Ce n'est que lorsque la valeur de type est définie sur soumettre que le bouton peut soumettre <p>
<li>valeur. : Texte affiché sur le bouton <p>

Exemple : <p>

Résultats affichés dans le navigateur : <p>

Utilisez le bouton de réinitialisation pour réinitialiser les informations du formulaire

Lorsque l'utilisateur doit réinitialiser les informations du formulaire à leur état initial, par exemple, après que l'utilisateur ait saisi le « nom d'utilisateur » et trouvé un erreur d'écriture, vous pouvez utiliser le bouton de réinitialisation pour remettre la zone de saisie à son état initial. Réglez simplement le type sur "réinitialiser". <p>Syntaxe : <br/><code><input type="reset" value="重置">

<li>type : Ce n'est que lorsque la valeur du type est définie sur réinitialiser que le bouton a une fonction de réinitialisation <p>
<li> value : Texte affiché sur le bouton <p>

Exemple : <p>

Résultat affiché dans le navigateur : <p>Entrer le numéro de compte

<p>Cliquez sur le bouton de réinitialisation