HTML

concept

HTML ( Hyper Text Markup Language HTML ) est le plus langage de développement web de base

Hypertext : Hypertext est un lien hypertexte méthode texte de maillage, avec une variété de messages texte organisation spatiale.
Markup Language : une balise configuration de la langue. <Nom de Tag> en html, xml
- Markup n'est pas un langage de programmation

Mise en route

grammaire

html document de nom de suffixe est .htmlou .htmdeux exactement le même sens
étiquette classement
- Confinement Tags: début et une balise fermante <html> </html>
- Fermeture automatique et balises: début et balises de fin ensemble <br/>
Les balises peuvent être imbriquées : la nécessité de bien imbriqué, vous ne pouvez pas me faire, je vous ai.
Et puis commencer attributs peut être définie balise. Une propriété Constituer marques clé est la valeur requise (marques peuvent être simples ou doubles)
les balises HTML ne sont pas sensibles à la casse, mais il est recommandé d'utiliser les minuscules

Exemple de code

<html>
    <head>
        <title>这是Title</title>
    </head>

    <body>
        <font color="red">Hello World</font> <br/>
        <font color="green">Hello World</font>
    </body>
</html>

balise HTML - étiquette de fichier

Constituer le plus de balises html de base

<html>

Html document de balise racine
<head>

tag tête. Certains attribut est utilisé pour indiquer tout autre document html. L'introduction des ressources externes
<title>

balise de titre.
<body>

tag corps.
<!DOCTYPE html>

type de document personnalisé

balises HTML - l'étiquette de texte

Et des étiquettes de texte connexes

<h1> to <h6>: Titre Tag
- Ce dernier chiffre représentant différents niveaux d'étiquettes
- Comme le nombre augmente, la police décroissante
<p>: Balise de paragraphe, après un passage de ligne automatique d'alimentation
<br>: Tag Pause
<hr>: Étiquette horizontale h5 pas pris en charge
- couleur: les propriétés de couleur
- largeur: largeur
- Taille: Epaisseur
- align: alignement de centre droite à gauche
<b>: Caractères gras
<i>: Italique
<font>: Balises de polices h5 pas de support plus
- Couleur:
- taille:
- visage: le style de police
<center> h5 n'a pas supporté de telle sorte que les éléments d'étiquetage dans le centre de la balise centre
Définition des attributs:
- Couleur:
  - rouge vert bleu
  - Plage de valeurs (val1, val2, val3) rgb 0 ~ 255
  - ffffff
- largeur:
  - Valeurs: largeur = « 20 » est la valeur par défaut de l'unité pixel px
  - Valeur%: exprimé comme le rapport par rapport à l'élément parent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!-- 注释内容 -->
    <!-- br 换行 -->
    白日依山尽<br/>
    黄河入海流<br>

    <!-- 标题标签 h1~h6 -->
    这是一个标题<br/>
    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>
    <h4>这是一个标题</h4>
    <h5>这是一个标题</h5>
    <h6>这是一个标题</h6>

    <!-- 段落标签 <p> -->
    1 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    2 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    3 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    4 这是一段话，这是一段话，这是一段话，这是一段话。<br/>
    <p>1 这是一段话，这是一段话，这是一段话，这是一段话。</p>
    <p>2 这是一段话，这是一段话，这是一段话，这是一段话。</p>
    <p>3 这是一段话，这是一段话，这是一段话，这是一段话。</p>
    <p>4 这是一段话，这是一段话，这是一段话，这是一段话。</p>

    <!-- 显示水平线 hr -->
    <hr color="blue" size="5" align="left" width="200"/>

    <!--  加粗 斜体 <b> <i> -->
    正常样式<br/>
    <b>加粗</b>---------<i>斜体</i><br/>

    <!-- 字体标签 <font> -->
    <font color="red" size="5" face="楷体">字体标签测试</font>

    <!-- 展示一张图片 img -->
    <img src="imgs/pic.png"/>
</body>
</html>

tag HTML - une balise d'image

Pour afficher des images

<img> Pour afficher les images, et une étiquettes auto-fermeture.

paramètres d'attribut:
- src : URL d'affichage de l'image
  - En utilisant un chemin relatif , comme « ./image/pic.png","../WEB-2/image/pic.png », où un point représentant le répertoire courant, un répertoire au nom des deux points.
- alt : Si l'image ne se charge pas , il affiche la valeur de alt
- align: image Localisation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!-- 展示一张图片 img -->
    <img src="imgs/pic.png" alt="这是一张图片"/>
</body>
</html>

Tags HTML - Liste des balises

liste ordonnée
- <ol> Liste des commandes liste ordonnée
  - tapez: peut choisir une variété de propriétés: nombre, a, A, i, I
  - commencer: de quelques start
- <li> Chaque colonne représente la liste
liste non ordonnée
- <ul> Liste UNORDER liste non ordonnée
  - du type: H5 n'est plus pris en charge par les dispositions de la liste riche style élément
    - disque cercle carré carré cercle origine
- <li> Chaque colonne représente la liste

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <!-- 有序列表 ol -->
    起床要做的事情：<br/>
    <ol type="A" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ol><br/>

    <!-- 无序列表 ul -->
    起床要做的事情：<br/>
    <ul type="disc" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul><br/>
    <ul type="square" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul><br/>
    <ul type="circle" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul><br/>
</body>
</html>

tag HTML - étiquette lien

<a> Définir un lien hypertexte.

paramètres d'attribut
- href: URL spécifié l'accès aux ressources (Uniform Resource Locator), vous pouvez également spécifier les ressources internes actuelles du projet, peut être inséré dans l'adresse e-mail à l'utilisation « mailto: [email protected] »
- cible: valeur par défaut _self dans la page ouverte _blank Open in page blanche

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
    <!-- 链接标签 <a> -->
    <a href="https://www.baidu.com/">点我</a>
    <br/>

    <a href="https://www.baidu.com/" target="_blank">打开新的选项卡</a>
    <br/>

    <a href="mailto:[email protected]">联系我们</a>
    <br/>

    <!-- 实现点击图片跳转链接的效果 -->
    <a href="2-TextLable.html"><img src="imgs/pic.png"/></a>
    <br/>
</body>
</html>

balises HTML - Étiquette bloc

<span> Lui-même n'a pas d'effet, les informations de texte affiché dans une rangée, également connu en tant que balises inline, les balises inline

<div> Et par rapport durée, div style n'a pas d'effet

Chaque div peut remplir une rangée

Ces deux étiquettes n'ont pas d'effets de style, peut être utilisé conjointement avec css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
    <!-- div span -->
    <span>span测试1</span>
    <span>span测试2</span>
    <hr/>
    <div>div测试1</div>
    <div>div测试2</div>
</body>
</html>

Les balises HTML - tags sémantiques

html5 afin d'améliorer la lisibilité du programme, il fournit des onglets. L'étiquette lui-même pas de style, avec l'utilisation de CSS

Tels que:

<header><header/>
<footer><footer/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签</title>
</head>
<body>
    <!-- 头部标签 -->
    <header>

    </header>

    <!-- 尾部标签 -->
    <footer>

    </footer>
</body>
</html>

balises HTML - tags de table

<table><table/> : Définit une table

largeur: largeur
frontières: frontières
cellpading: et définir le contenu de la cellule de
Espac: Définit la distance entre les cellules, Si 0 est spécifié, la distance entre la table 0
bgcolor: couleur de fond

<tr><tr/> : Ligne de définition

<td><td/> : Définir la cellule

colspan: colonne de fusion
rowspan: lignes de fusion

<th><th/> : Définit la cellule d'en-tête

<caption> : Définit une légende de table

Ce qui suit trois n'a pas eu d'effet, nous devons utiliser avec CSS:

Remarque! Si les rangs de la fusion lorsque la ligne est sur une étiquette différente, ne sont pas fusionnées. Dans la cellule d'un tel <thead>, l'autre <tbody>puis les deux cellules ne peuvent pas être fusionnées

<thead>La tête d'une table
<tbody>: Objet d'une table
<tfoot>: Indique la fin de la liste

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!-- 表格标签 -->
    <table border="2" width="50%" cellpadding="0" cellspacing="0">
        <caption>学生成绩信息表</caption>
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>60</td>
        </tr>
        </tbody>

        <tfoot>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>90</td>
        </tr>
        </tfoot>
    </table>

    <hr/>

    <table border="2" width="50%" cellpadding="0" cellspacing="0">
        <caption>学生成绩信息表</caption>
        <tr>
            <th rowspan="2">编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>60</td>
        </tr>

        <tr>
            <td>2</td>
            <td colspan="2">李四</td>
        </tr>
    </table>
</body>
</html>

Les balises HTML - étiquettes en

formes

Concept: une entrée d'utilisateur pour acquérir des données
<form>: Prévu pour être utilisé pour le formulaire, peut définir une plage , la plage représente la plage de l'acquisition de données d'utilisateur
- attributs:
  - Action: Indique les données d'attributs soumis URL
  - Méthode: Indique la soumission (un total de 7 deux plus couramment utilisé)
    - obtenir :( valeur par défaut )
      1. Paramètres de la requête sera dans la barre d'adresse, encapsule la ligne de demande
      2. Longueur du paramètre de demande est limitée
      3. obtenir demande moins sécurisée
    - Publier:
      1. paramètre de demande n'est pas affiché dans la barre d'adresse, il encapsule le corps de la demande en
      2. Longueur du paramètre de demande est sans limite
      3. Demander après plus sûr
- Les données (élément de tableau) sous forme de commande est soumise, vous devez spécifier son attribut name.

Formulaire article

<input>: Les valeurs d'attribut de type peuvent adapter, adapter les éléments de spectacle de style
- Type de propriété:
  - texte: zone de saisie de texte
    1. espace réservé: un message spécifiant la zone de saisie, boîte d'entrée lorsque les changements de contenu, l'invite automatiquement vider le contenu
    2. Valeur: définir des valeurs par défaut
  - Mot de passe: zone de saisie de mot de passe
  - Radio: bouton radio
    1. Pour parvenir à la radio, vous devez définir la valeur du même nom
    2. En général, donner chaque boîte de jour pour un attribut de valeur indique la valeur qui a été sélectionnée après la présentation
    3. attribut cochée, vous pouvez spécifier une valeur par défaut
  - case à cocher: case à cocher
  - fichier: boîte de sélection de fichier
  - cachés: champs cachés
  - soumettre: bouton Soumettre
  - Bouton: bouton poussoir
  - Image: l'image bouton d'envoi
    - src: Indique le chemin de l'image
  - couleur: sélecteur de couleur
  - Date: Sélectionnez l'heure
  - datetime local: heures avec un temps de minutes
  - email: dispositif d'entrée de boîte aux lettres, et détecte l'expression régulière vient
<lable>: Saisie de texte spécifie les informations descriptives
- valeur de l'attribut id lable de l'attribut correspondant pour l'entrée et, si le correspondant, l'entrée obtenir la boîte d'entrée de mise au point.

<select>: Liste déroulante

Structure:

<select>
    <option></option>
    <option></option>
    <option></option>
</select>

<textarea>: Les champs de texte
- : Indique le cols nombre de colonnes
- Lignes: Indique le nombre de lignes

Exemple de code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--
        form  用于定于表单的，可以定义一个范围，范围代表采集用户数据的范围
     -->
    <form action="#" method="get">
        <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br/>
        密码：<input type="password" name="password" placeholder="请输入密码"><br/>

        性别：<input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女<br/>

        爱好：<input type="checkbox" name="hobby" value="shpping">逛街
        <input type="checkbox" name="hobby" value="java" checked>Java
        <input type="checkbox" name="hobby" value="game">游戏<br/>

        上传头像：<input type="file" name="file"><br/>

        隐藏域：<input type="hidden" name="hide" value="aaa"><br/>
        取色器：<input type="color" name="color"><br/>
        生日：<input type="date" name="brithday"><br/>
        生日：<input type="datetime-local" name="brithday"><br/>
        邮箱：<input type="email" name="email"><br/>
        年龄：<input type="number" name="age"><br/>

        省份：
        <select name="province">
            <option>-----请选择-----</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">山西</option>
        </select><br/>
        自我描述：<textarea cols="50" rows="5"></textarea>

        <input type="button" name="button" value="这是一个按钮">
        <input type="image" src="imgs/pic.png">
        <input type="submit" value="登录">
    </form>
</body>
</html>

Finition simple connaissance HTML

HTML

concept

Mise en route

grammaire

Exemple de code

balise HTML - étiquette de fichier

balises HTML - l'étiquette de texte

ffffff

tag HTML - une balise d'image

Tags HTML - Liste des balises

tag HTML - étiquette lien

balises HTML - Étiquette bloc

Les balises HTML - tags sémantiques

balises HTML - tags de table

Les balises HTML - étiquettes en

formes

Formulaire article

Exemple de code

Je suppose que tu aimes