Maison > Article > interface Web > Une compréhension préliminaire de la structure de base et des balises du HTML

Une compréhension préliminaire de la structure de base et des balises du HTML

巴扎黑original: 2017-06-23 14:51:112272parcourir

1. Une compréhension préliminaire du HTML

HTML est un langage de balises hypertextes, et le navigateur est un outil utilisé pour « interpréter et exécuter » le code source HTML.

La structure de base du HTML

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>

Où est la déclaration du type de document, qui déclare que ce fichier doit être un fichier HTML5, permettant au navigateur de l'analyser selon La préparation HTML5, et doit être en HTML5, doit être présente et doit être écrite en haut du fichier.

est le titre de la page web, le texte affiché en haut :

<span style="font-size: 16px"><span style="font-family: 宋体"><head> </head>是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。</span>。</span><span style="font-size: 18px"><span style="font-size: 16px">。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！</span><br></span>

<span style="font-family: 宋体; font-size: 16px"> <body> </body>则是所有的代码都写在其中。<br><span style="font-size: 18pt; background-color: #cc99ff">二、初步了解标签<br></span></span>

1. Partie d'en-tête

1) lien : Web Icône de titre de la page

链接网页的小图标，网页选项卡上面的小图片

où rel="icon" signifie que le lien actuel est utilisé pour créer un lien vers l'icône de la page Web

href="img/ss.gif" indique l'emplacement de l'adresse de l'icône

<link rel="icon" href="img/sss.gif" />

2) méta : diverses informations utilisées pour décrire des pages Web

<span style="font-family: 宋体; font-size: 16px; background-color: #ffffff"><span style="font-family: 宋体"><span style="line-height: 36px"><span style="color: #ff6600; background-color: #ffffff">①</span>其中<meta charset="utf-8" />设置网页的编码格式为utf-8格式<br>常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文<br><span style="color: #ff0000">utf-8：万国码，兼容各种语言编码，常用！<br></span></span></span></span>

<meta charset="utf-8" />

<br>

②Vous pouvez définir des mots-clés pour les pages Web afin d'aider les moteurs de recherche à utiliser des virgules pour. plusieurs mots-clés Séparez

<meta name="keywords"content="杰睿教育,网页开发" />

③ pour définir les informations détaillées de la page Web et un paragraphe de texte sous le titre lors de la recherche pour les moteurs !

name="description" signifie que cette balise méta définit les informations de description de la page Web ; content="" signifie le détail ; contenu des informations de description! !

<br>

<meta name="description"content="这是我在，，，，"/>

<br>

2、主体部分

1）标签的分类

①块级标签：显示为块状，独占一行，自动换行。 ②行级标签：在一行中，从左往右依次排列，不会自动换行。

2）块级标签

常见的块级标签有：

a.标题标签：

......

特点:h1最大，h6最小且自动加粗。

b.水平线标签：

c.段落标签：

d.换行标签：

e.引用标签：

要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示，浏览器一般显示为首行缩进

f.预格式标签：

浏览器默认显示样式：①显示为等宽字体

②代码中的换行，空格等元素可在浏览器中直接显示。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6><hr/><p>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈！<br/>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><p>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><pre class="brush:php;toolbar:false">if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型  
    jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型  
}

光明正大的不要脸！这段话就是抄的！你能咋地！

g.有序列表

h.无序列表

i.定义描述列表

一般只有一项: 可以有很多项; 132; 123

g.组合标签显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。

k.分区标签

可以包裹任何标签，也可以被包裹进任何标签。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><ul><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ul>
        <ol><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ol>
        <dl><dt>这是dl列表的标题</dt><dd>这是dl列表的描述项1</dd><dd>这是dl列表的描述项2</dd><dd>这是dl列表的描述项3</dd></dl>
        <figure><img src="img/icon.jpg" /><figcaption>图片的描述标题</figcaption></figure>
        <div style="width: 500px; height: 100px; background-color: yellow;">这是div里面的文字！！！<p>11111</p></div>
                <div style="height: 500px;"></div></body></html>

3) Balises au niveau de la ligne

Balises courantes au niveau de la ligne :

(1) Balise de texte span

① La balise span est juste une fonction d'habillage et n'a aucune autre signification ② La fonction span ; est similaire à celui d'un div et doit être utilisé avec CSS. C'est juste que div est une balise au niveau du bloc et span est une balise au niveau de la ligne

(2) Accent sur les balises em et la balise italique grasse b ; ; entre les quatre La différence

① eux et moi pouvons être inclinés. Fort et b peuvent être rendus audacieux ! Cependant, i et b sont simplement gras et inclinés, tandis que em et strong ont une sémantique plus accentuée. ②em et fort indiquent tous deux l'accent, mais fort met l'accent sur un niveau supérieur ! ! Remarque : 1. Le but de l'accentuation : Faire savoir aux moteurs de recherche ce que la page Web met en valeur ! Facile à afficher sur les moteurs de recherche ! 2. Strong et em peuvent être imbriqués dans plusieurs couches pour indiquer une emphase croissante !

(3) Balise de citation courte q : indique une citation courte. attribut cite : utilisé pour déclarer la source de la citation.

[ balises de citation couramment utilisées]

Utilisé pour citer un élément de contenu
Utilisé pour citer une phrase Couramment utilisé pour citer le titre d'œuvres, de calligraphies et de peintures, etc. Similitude : Les trois balises de citation utilisent toutes l'attribut cite pour indiquer la source de la citation Différence : ① Le le contenu de la citation est différent. Blockquote-> un paragraphe, q-> une phrase, citer-> le nom de l'œuvre ② Les effets affichés par défaut sont différents. blockquote->Le paragraphe entier est en retrait vers la droite par défaut ; q->Les citations sont ajoutées par défaut ; cite->Italique par défaut !

(4) Réduire la balise petite : réduire la police d'une taille grande balise : agrandir la police d'une taille ; taille.

Remarque : ① petit et grand peuvent être imbriqués dans plusieurs niveaux jusqu'à ce que la police atteigne le minimum ou le maximum ② Ces deux balises ont été supprimées et leur utilisation n'est pas recommandée.

(5) Balise d'image img

① Attribut src : Indique le chemin de l'image [Voie légale du chemin de l'image] A. Lien Internet : Étant donné que les images se trouvent sur d'autres sites Web, si d'autres sites Web suppriment les images, nous ne pouvons pas y accéder, il n'est donc pas recommandé d'utiliser cette méthode 

 B. Chemin absolu : les images utilisant des chemins absolus ne sont accessibles qu'en utilisant le protocole de fichier sur ce machine! Il est donc strictement interdit d’utiliser cette méthode ! 

 C. Chemin relatif : a L'image est dans le même dossier que le document actuel : écrivez directement le nom de l'image < img src="icon.jpg" /> b L'image se trouve dans le dossier sous le document actuel : nom du dossier/nom de l'image < img src="img/icon.jpg" /> c. L'image se trouve dans le dossier un niveau au-dessus du document actuel : ../nom de l'image (../ signifie aller retour d'un niveau) Cependant, assurez-vous de noter : la photo doit être incluse dans le projet et ne sont pas accessibles en dehors des images du projet. ② hauteur : la hauteur de l'image largeur : la largeur de l'image ;img src="img/icon.jpg" title="Texte d'invite affiché lorsque la souris est pointée sur" /> ④ alt : Texte affiché lorsque l'image ne peut pas être chargée ⑤ align: image Comment le texte environnant est aligné par rapport à l'image. Valeurs optionnelles : haut->haut du centre de l'image->milieu de l'image bas->bas de l'image 12345 (6) Balise de lien hypertexte a 
A Attribut href : indique la page vers laquelle le lien hypertexte renvoie.
① Vous pouvez écrire l'adresse réseau :
Ceci est un lien hypertexte
 ② Vous pouvez ouvrir un fichier html local : Utilisez un chemin relatif pour déterminer l'adresse du fichier. Déterminé de la même manière que la balise img.

Ceci est un lien hypertexte B. attribut title : le texte d'invite affiché après le pointage de la souris sur Ceci est un lien hypertexte< /a> ;

C、target属性：设置新页面打开的窗口位置 可选值：_self自身页面打开（默认） _blank 新窗口打开 这是一个超链接 【超链接的特殊应用】 1、功能性链接：（了解） mailto:// 点击链接给指定邮箱发送邮件 点击发送邮件 tencent://message/?uin=1105093212" 还有：tell://手机端点击打电话 message://手机端点击发送短信 ftp://使用ftp协议进行文件的上传下载 2、锚点链接： >>>本页面锚链接 ① 在页面的指定位置中设置一个锚点，用那么属性表示锚点名字： a name="top"> 
 ② 将超链接的href属性，设置为#加锚点名字 点击链接，跳转到top锚点位置 >>>页面间锚链接 ① 在新页面的指定位置中设置一个锚点，用那么属性表示锚点名字： a name="top"> 
 ② 将超链接的href属性，设置为“新页面地址#加锚点名字”： 点击链接，跳转到锚地.html的top锚点位置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本行级标签</title></head><body><a name="e"></a>
        
        糖糖真帅！！！ 
        这是em标签 这是strong标签 这是i标签 这是b标签 这是b标签 
        <q cite="http://www.jianghaozhenshuai.com">我是q标签引用</q><blockquote>我是blockqoute的引用！！！！！</blockquote><cite cite="">我是cite标签的引用！！</cite> 
        我比正常小两号 <big>我比正常大一号</big> 
        
              <img src="img/icon.jpg" align="top" />12345
        --><img src="img/icon.jpg" align="bottom" />12345        <a href="tencent://message/?uin=1105093212"target"_blank">点击发送邮件</a><div style="background-color: aqua;height: 1000px"></div><a href="#e">点击</a><a href="锚点.html#1">1</a><a href="锚点.html#2">2</a><a href="锚点.html#3">3</a></body></html>
4）块级标签与行级标签的区别

1、块级标签：默认宽度100%(占满一行)； 块级标签自动换行(独占一行，右边不能有任何东西)； 块级标签可以使用CSS设置宽度高度！ 2、行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)； 行级标签不会自动换行(一行当中，从左往右依次排列)； 行级标签的宽度高度不能设置！

5）表格

（1）表格table

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示 th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。 （2）table的常用属性 A、border：给表格加边框。默认给所有td加边框，并且给整个table加外边框。当增大border的值时，td上的边框不变化，只有最外层大边框变宽。 B、cellspacing：单元格与单元格之间的距离。 cellspacing="0" 表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。 [注意] 表格边框合并的CSS写法： style="border-collapse: collapse;" 这条CSS与cellspacing="0"有什么区别？ cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线； border-collapse: collapse; 是将表格相邻的两条边框进行合并处理，只有一条线存在。(一旦边框合并，cellspace属性将会失效。) C、cellpadding：单元格中的文字与单元格边框的距离。 D、 height：表格的高度 width：表格的宽度 使用表格宽、高属性设置大小： 
 使用CSS样式设置大小： 
 E、align：设置表格在浏览器中的位置。不建议使用了。 可选值：left 表格居左 /center 表格居中/right 表格居右 F、bgcolor：背景色 bordercolor:边框颜色 background:背景图 background="img/computer.jpg" 背景色和背景图同时存在时，背景图会覆盖背景色 （3）tr与td常用属性 A、width：单元格宽度 height：单元格的高度 B、bgcolor：单元格的颜色 C、align:设置单元格中的文字，水平对齐方式。 left、center、right valign:设置单元格中的文字，垂直对齐方式。 top、middle、bottom D、 nowrap="nowrap" 当单元格文字过多时，设置单元格文字不断行显示。但是，会把表格的宽度撑大!!! （4）表格的跨行与跨列 ①跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。 ②跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格</title></head><body><table border="1"><tr><th >标题一</th><th colspan="2">标题二</th></tr><tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-2</td><td>2-3</td></table>
        
            <table border="10" width="500" height="400" bordercolor="#ff99cc" style="border-collapse: collapse;"><tr><td rowspan="7"></td><td rowspan="4"></td><td rowspan="2"></td><td ></td></tr><tr><td ></td></tr><tr><td rowspan="2"></td><td></td></tr><tr><td rowspan="4"></td>
                </tr><tr><td rowspan="2"></td><td rowspan="2"></td></tr><tr>
                
                </tr><tr><td colspan="2"></td>
            
                </tr></table>
        </body></html>
3. Ce qui est écrit à la fin

C'est la première fois que je contacte un blog. J'étais un peu excité lorsque j'ai posté mon premier message. . En tant que personne codeuse, je pense que le code est un endroit magique, à la fois magique et amusant.

J'ai toujours pensé que ces choses étaient très profondes et hors de ma portée, mais quand je suis entrée en contact avec elles, je les aimais toujours.

Enfin, s'il vous plaît, prenez soin de moi.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tableau de messages de contact pour les cas JSArticle suivant：Tableau de messages de contact pour les cas JS

Articles Liés

Voir plus