Avant d'expliquer ce cours: jetons un coup d'œil à ce qu'est un navigateur:
Le soi-disant navigateur est un outil qui peut interpréter et exécuter le code HTML. Il y a un autre concept que nous devons comprendre, Browser! = IE, IE n'est qu'un des navigateurs. En plus de IE, il existe de nombreux navigateurs, vous pouvez le savoir par Google. Nous n'entrerons pas dans les détails.
Tout d'abord, comprenons ce qu'est HTML
Qu'est-ce que HTMLLe nom complet de HTML: Hyper Text Mark-up Language (Hyper Text Mark-up Language). C'est le texte qui décrit l'apparence de la page Web et le contenu de la page Web. La raison pour laquelle HTML peut montrer divers effets est la fonction du navigateur.
Contenu supplémentaire: ici, nous élargirons le contenu, qui est le même texte HTML, et l'effet peut être différent sans le navigateur. En effet, plusieurs navigateurs apparaissent d'abord, puis des normes correspondantes sont disponibles. Compte tenu de cette situation, nous pouvons utiliser IeTester pour tester les problèmes de compatibilité du même code HTML sur différents navigateurs.
2. Pages statiques et pages dynamiques
Une autre chose que nous devons savoir est la différence entre les pages statiques et les pages dynamiques.
Tout d'abord, les pages d'un site Web sont divisées en pages statiques et pages dynamiques.
Page statique: Toutes les pages statiques avec des suffixes HTML ou HTML sont des pages statiques, et il y a une page HTML fixe sur le serveur.
Page dynamique: il n'y a pas de page sur le serveur que les utilisateurs doivent parcourir, mais le serveur peut générer dynamiquement les pages HTML requises par le client, puis les afficher au client.
Pour résumer la différence entre les deux en une phrase: les pages dynamiques exécutent le code côté serveur, les pages statiques n'exécutent pas le code côté serveur (vous pouvez en apprendre davantage, c'est OK, après tout, les pages statiques sont au centre de notre discussion aujourd'hui)
3. Comment écrire une page HTML?
Il existe de nombreux outils pour écrire HTML. Je crois que tout le monde connaît le bloc-notes et vous pouvez écrire des pages HTML avec le bloc-notes. Bien sûr, vous pouvez également écrire avec des blocs-notes avancés tels que EditPlus / UltraEdit, ou utiliser des outils tels que Dreamweaver.
La figure suivante est la structure de base d'une page Web HTML
À partir de l'image ci-dessus, nous pouvons voir que tout le contenu est dans la balise <html> </html>; <A-Head> </ Head> met les informations de la tête et la description de la page ne sera pas affichée sur la page. Le titre de la page est défini dans <Title> </Title>, et <Titre> ne peut être placé que dans <A-Head>; <body> </body> est le corps principal de la page, et le texte de cette balise sera affiché sur la page Web. Bien sûr, toutes les pages doivent contenir au moins ces pièces.
Astuce: si la balise de fin de la balise de titre n'est pas fermée, la page entière ne sera pas affichée.
4. similitudes et différences entre HTML et XML
Similitudes: ce sont toutes des langues de balisage, elles sont accessibles via DOM, et elles peuvent être modifiées via CSS
Différences:
XML est plus strict que la syntaxe HTML: s'il y a une balise de démarrage, vous devez avoir une balise finale, un cas cohérent, des citations doubles d'attributs, etc. XML se concentre sur le stockage de données, tandis que HTML se concentre sur l'affichage des données.5.xhtml et dhtml
XHTML: Langue de balisage extensible, est un HTML qui est plus conforme à la spécification de syntaxe XML. L'émergence de XHTML est principalement pour passer à XML. XHTML nécessite: tous les deux minuscules, l'appariement de balises et les attributs en doubles citations.
DHTML: L'abréviation du HTML dynamique est un HTML dynamique. Combinaison de html, de feuilles de styles et javascript
Supplément: les normes Web ne sont pas une norme, mais une collection de séries de normes.
La page Web se compose de trois parties: structure, performances et comportements
Structure: texte, images et autres langues correspondantes: xml, xhtml
Expression: également appelée styles, tels que la taille du texte et la couleur, etc. Celles-ci sont également réalisées à travers des styles. CSS
Comportement: L'effet dynamique du client est généralement terminé via JavaScript. Dom, ecmascript
Ensuite, passons au sujet: Apprenez les balises couramment utilisées pour HTML.
6.html Tag
01, h balise (titre), HTML définit six tags H de <h1> </h1> à <h6> </h6>, représentant respectivement des polices de différentes tailles. H1 est le plus grand et H6 est le plus petit.
02, <br/> Entrez juste, c'est la balise qui se ferme
03, <p> est la segmentation. <p> Il y aura des espaces vides relativement grands avant et après, mais il n'y aura pas.
04, <AnSER> CENTER </ CENTER> CENTER> CENTRE. (Non recommandé)
05, <b> a </b> gras, recommandé. <i> b </i> italique. <u> c </u> souligné. <em> impératrice, italique </em>
06, <font> </font> Tag de police, <font color = "red" size = "7" face = "lisu"> rouge </font>
07, <hr> Propriétés communes des lignes horizontales: taille de couleur (épaisseur) Largeur (longueur) Align = gauche / centre / droit (défaut est affiché dans le jeu)
7. HTML Caractères spéciaux
& quot;
& & amp;
<& lt;
> & gt;
Espace & nbsp;
© & Copy;
® & Reg;
² & sup2;
¥ & yen;
«& Sup3;
8. Extension du format d'image
9. Tag d'image: <img alt = "Texte d'invite lorsqu'il ne peut pas être affiché">
Alt: le texte invite lorsque l'image ne peut pas être affichée.
10. Hyperlien:
HREF pointe vers la page cible à connecter, la cible pointant vers la fenêtre cible est la valeur, et la valeur est prise
_blanque: s'ouvre dans une nouvelle fenêtre
_self: ouvrez dans votre propre fenêtre
_parent: Ouvrez dans la fenêtre parent
_top: signifie ouvrir dans la fenêtre de niveau supérieur
Nom de la trame: s'ouvre dans le cadre spécifié. (apprendre)
Lien d'ancrage: 01 Définissez la position d'ancrage
<a name = showbigimg> <img src = image / 02.jpg> </a>
02. Appeler l'ancre
<a href = # showbigimg> Regardez les belles femmes </a>
11. Liste en HTML:
Divisé en listes non ordonnées, listes commandées et listes définies
Regardons les diagrammes d'effet d'affichage de diverses listes
Liste non ordonnée:
<ul>
<li> </li>
<li> </li>
</ul>
Liste commandée
<l>
<li> </li>
<li> </li>
</l>
Liste de définition:
<dl>
<dt> Chine </dt>
<DD> Shanghai </dd>
<DD> Guangzhou </dd>
<DD> Pékin </dd>
</dl>
La valeur du type peut être: 1 , a, a, i, i, disque, cercle, carré.
12. Tableau: affiche des données régulières, parfois utilisées pour la mise en page.
Comme le montre la figure ci-dessus, un tableau se compose de lignes et de colonnes, les lignes sont représentées par TR et les colonnes sont représentées par TD. Vous pouvez également utiliser des lignes (fusion des lignes), Colspan (et parallèle) pour fusionner les cellules.
Exercice 1: Utilisez du code HTML pour sortir le tableau
Exercice 2: Cross Rows and Cross Colonnes of Tables
13. Forme
Action Soumettre les données à cette page par défaut
Si vous souhaitez soumettre des données au serveur, vous devez mettre des éléments de formulaire tels que <fort>, <TextArea>, <lect>, etc. dans le formulaire. La valeur du type d'entrée est la suivante:
L'attribut coché est préparé pour les boutons radio et les cases.
Les boutons radio sont utilisés pour un ensemble de valeurs mutuellement exclusives, le diagramme d'effet est le suivant
Le diagramme d'effet à cocher est le suivant
Il existe trois principaux types de boutons: bouton Soumettre, bouton de réinitialisation et bouton normal
Boîte de liste déroulante
grammaire:
14. Box de texte multi-lignes:
<TextArea> text </ textarea>, cols = "50", les attributs de lignes = "15" représentent le nombre de lignes et de colonnes.
Éléments de forme courants Utilisation:
C'est la fin de notre discussion sur HTML aujourd'hui.