Apprentissage HTML

1. Étiquette de base

Les touches de raccourci par défaut de VSCode génèrent !automatiquement des extraits de code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.1 Déclaration de document Doctype

< !docType html >

1.2 balises html vers html

où lang="zh-CN" signifie chinois

1.3 tête d'en-tête

étiquette dans la tête	expliquer
titre	titre
méta	Fournir des informations aux moteurs de recherche
lien	Importez des fichiers css externes, des fichiers js et définissez le logo rel="stylesheet" type="text/css" href="mystyle.css"
style	style css
scénario	code js

L' attribut name dans meta

nom de la valeur d'attribut	contenu descriptif
mots clés	Mot-clé de la page Web (peut être plus d'un)
description	descriptif de la page
auteur	auteur de la page
droits d'auteur	Informations sur le droit d'auteur
fenêtre	Rapport de taille de la fenêtre d'affichage Web

attribut http-equiv dans la méta

<!--定义网页所使用的编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--简写 （中文编码）-->
<meta charset="utf-8" />

Définir le saut d'actualisation automatique de la page Web

<!--表示当前页面6秒后跳转百度页面-->
<meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>
<!--30秒刷新当前页面-->
<meta http-equiv="refresh" content="30">

1.4 Corps de la page principale

Raccourci commentaire ctrl+/

Deux, le texte du texte

2.1 Balises de base

Étiqueter	illustrer
h	Titre 1 ~ 6
p	Paragraphes (il y a une certaine distance entre les paragraphes et les paragraphes) les paragraphes seront automatiquement renvoyés à la ligne
Br	saut de ligne (pas d'espacement)
heure	ligne horizontale
div	Étiquette de boîte (une seule grande boîte peut être placée dans une ligne) (petite vue du programme)
portée	Étiquette de boîte (plusieurs petites boîtes peuvent être placées sur une ligne)

2.2 Formatage du texte (Formatage)

Étiqueter	illustrer
fort	gras
em	italique
sup、sous	exposant et indice
tu	tirets et traits de soulignement
grande petite	Grandes et petites tailles de police

Les balises peuvent être divisées en balises générales et en balises à fermeture automatique

< meta /> 、< lien/> 、< br />、< hr />、< img />、< input />

Peut également être divisé en éléments de bloc et éléments en ligne

Élément de bloc (block): une ligne exclusive, qui peut accueillir des éléments de bloc et des éléments en ligne tels que div

Éléments en ligne (en ligne) : peuvent être sur la même ligne, ne peuvent pas contenir d'éléments de bloc, tels que span

2.3 Symboles spéciaux

Caractère d'espace (rappelez-vous simplement)

facile à taper

symboles spéciaux	illustrer	code;
`"`	guillemets doubles (anglais)	"
`‘`	apostrophe gauche	&lsquo
`’`	apostrophe fermante	&rsquo
`×`	Signe de multiplication	&fois
`÷`	signe de division	&diviser
`>`	supérieur à signe	>
`<`	Moins de signe	<
`&`	symbole "et"	& amp
`—`	em tiret	&mdash
\|	ligne verticale	\|

Difficile à taper

symboles spéciaux	illustrer	code;
`§`	saut de section	§e
`©`	Symbole du droit d'auteur	&copie
`®`	Marque déposée	®
`™`	marque déposée	&commerce
`€`	EUR	&euro
`£`	GBP	&broyer
`¥`	JPY	¥
`°`	À chaque fois	& toi

Trois, la liste liste

Étiqueter	illustrer
ordonné ol (liste ordonnée)	Il y a une commande et ne peut contenir que li
ul non ordonné (liste non ordonnée)	Pas de commande, ne peut contenir que li
définir dl (liste de définitions)	dt est utilisé pour ajouter un nom à expliquer, et dd est utilisé pour ajouter une explication spécifique de ce nom.

L'essence du HTML réside dans la sémantique des balises, être sémantique

Quatrièmement, la table de formulaire

<table alian=center border="1" cellpadding="10" cellspacing="0" width="300">
	<caption>考试成绩表</caption>
    <thead>    
    	<tr>
        	<th>姓名</th><th>语文</th><th>英语</th>
        </tr>
     </thead>
     <tbody>
     	<tr>
        	<td>小明</td><td>80</td><td>80</td>
        </tr>
        <tr>
        	<td>小红</td><td>90</td><td>90</td>
        </tr>
        <tr>
        	<td>小杰</td><td>100</td><td>100</td>
        </tr>
      </tbody>
      <tfoot>
      	<tr>
        	<td>平均</td><td>90</td><td>90</td>
        </tr>
      </tfoot>
    </table>

Titre : légende

En-tête : th

Ligne du tableau : tr

Cellule : td

Indique la zone d'en-tête du tableau avec une étiquette, sur la première ligne
Les étiquettes sont utilisées pour représenter la zone principale du corps de la table, qui est principalement utilisée pour mettre l'ontologie des données
ligne de fond

4.1 Propriétés du formulaire

Nom d'attribut	valeur d'attribut	décrire
aligner	gauche, centre, droite	Spécifie l'alignement de la table par rapport aux éléments environnants
frontière	1 ou " "	Spécifie si l'unité de table a une bordure, la valeur par défaut est " ", ce qui signifie pas de bordure
rembourrage cellulaire	Valeurs de pixels	Spécifie la marge entre le bord de la cellule et son contenu, la valeur par défaut est de 1 pixel
espacement des cellules	Valeurs de pixels	Spécifie l'espace entre les cellules, la valeur par défaut est de 2 pixels
largeur	valeur de pixel ou pourcentage	Spécifie la largeur du tableau

4.2 Fusionner des tableaux

Fusionner les lignes : rowspan="le nombre de cellules fusionnées"
Colonne de fusion : colspan="le nombre de cellules fusionnées"

5. Photo img

<img src="" alt="" />

chemin absolu
chemin relatif

Bitmap jpg, png, gif

illustration vectorielle

Six, lien hypertexte

<a href="链接地址" target="打开方式">文本或图片</a>

_self 在原来窗口打开(默认值)
_blank 在新窗口打开

跳转外部链接

跳转内部链接

跳转锚点链接

<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

七、表单 form

<form action="url地址" method="提交方式" name="表单域的名称">
 
</form>

form属性

属性	说明
name	表单名称（以区分同页面多个表单）
method	提交方式（get或post）
action	提交地址（url地址）
target	打开方式（_blank）
anctype	编码方式（一般用于上传文件功能）

<input type="表单类型" />

type的属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button、submit、reset	按钮
file	文件上传

7.1 单行文本框

<input type="text" value="单行文本框" size="50" maxlength="10"/>

value：值
size：长度
maxlength：最多可输入的字符数

7.2 密码文本框

<input type="password" />

与单行文本框相同，有value、size、maxlength

7.3 单选框

<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女

7.4 复选框

<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉" checked/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜

7.5 按钮

<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮" />
<button>按钮</button>

7.6 文件上传

<input type="file"/>

7.7 多行文本框

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

7.8 下拉列表

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select属性

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

option属性

<option value="内容" selected>内容</option>

7.9文本标签lable

lable标签for属性与id属性相同

<lable for="sex"> 男 </lable>

八、框架 iframe

<iframe src="链接地址" width="数值" height="数值"></iframe>

<iframe src="https://www.itnanls.cn"></iframe>

九、HTML5

color

<input type="color" name="favcolor">

date

<input type="date" name="bday">

datetime

<input type="datetime" name="bdaytime">

datetime-local

<input type="datetime-local" name="bdaytime">

<input type="email" name="email">

month

<input type="month" name="bdaymonth">

number

<input type="number" name="quantity" min="1" max="5">

属性	说明
disabled	禁用
max	最大值
maxlength	最大字符长度
min	最小值
pattern	验证输入字段模式
readonly	输入值无法修改
required	输入值无法修改
size	输入字段可见字符数
step	输入数字间隔
value	输入字段默认值

range

<input type="range" name="points" min="1" max="10">

<input type="search" name="googlesearch">

tel

<input type="tel" name="usrtel">

time

<input type="time" name="usr_time">

url

<input type="url" name="homepage">

新属性

属性值	说明
autocomplete	自动提示以输入过的内容
autofocus	自动获取焦点
height、width	长、宽
min、max	小、大
pattern	正则
placeholder	提示
required	必须

HTML5图像

< canvas >
< svg >

Notes de base HTML et affichage du code HTML5