2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Idée de base——Sémanticisation
【面试题】如何理解 HTML 语义化 ?
Le type de contenu peut être déterminé uniquement par les balises, notamment les titres, les paragraphes, les images et les tableaux.
La structure de base des fichiers HTML
Le suffixe de fichier pour les fichiers HTML est .html, tel que index.html
Entrez l'anglais dans vscode ! Saisie rapide
<!-- HTML5的文档类型声明【必要】 -->
<!doctype html>
<!-- 整个页面，语言为英文【必要】 -->
<html lang="en">
<!-- 页面的头部【必要】 -->
<head>
<!-- 页面的元信息-- 文档的字符编码为 UTF-8 -->
<meta charset="UTF-8" />
<!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width ，即采用设备宽度；intial-scale 为 1 ，即按原比例显示（无缩放）-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 页面的标题【必要】 -->
<title>Document</title>
<!-- 页面中的样式 -->
<style>
html,
body {
height: 100%;
}
</style>
</head>
<!-- 页面的身体【必要】 -->
<body>
<!-- 页面的内容 -->
<div></div>
<!-- 页面的脚本 —— JS 代码 -->
<script></script>
</body>
</html>
【面试题】为什么<style></style> 标签要写在<head></head> 中 ?
Le navigateur analyse les documents HTML de haut en bas. <style></style> L'étiquette doit être écrite en<head></head> Vous pouvez d'abord charger des styles, puis charger des éléments.
Si vous voulez <style></style> L'étiquette est écrite en<body></body> Ci-dessous, les éléments sont chargés en premier, puis les styles, ce qui permet à l'utilisateur de voir une structure de page sans styles.
【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部 ?
Les navigateurs analysent les documents HTML de haut en bas. <style></style> Si non placé<body></body> Au bas de la page, JS sera chargé et analysé en premier, puis les éléments seront rendus, ce qui prolongera le temps de rendu de la page. Si des opérations DOM sont impliquées dans JS, cela bloquera également le rendu de la page. .
Classification des balises html
Selon la valeur de style d'affichage par défaut de l'étiquette, elle est divisée en deux catégories :
【面试题】HTML有哪些内联元素和块状元素 ?
La largeur est déterminée par le contenu
display :inline Sans remplacer l'élément, la largeur et la hauteur ne peuvent pas être définies.img，span , a , b 等
display :inline-block Peut définir la largeur et la hauteurinput， button 等
La largeur est déterminée par le conteneur (la largeur remplira tout le conteneur), et la largeur et la hauteur peuvent être définies
display: blockdiv，h1-h6，p，ul, ol ，form , hr 等
display: tabletable
display: list-itemli
Éléments de remplacement en HTML
Les éléments dont le contenu rendu peut être remplacé en modifiant la valeur d'un attribut (principalement l'attribut src) sont appelés « éléments de remplacement ».
Les balises suivantes sont toutes des éléments de remplacement :
img、video、iframe、canvas、textarea、input、select、object
Caractéristiques des éléments remplacés
Remplacer la taille de l'élément
La taille finale de l'élément remplacé est déterminée par une combinaison des trois méthodes suivantes, leur Priorité de haut en bas Suivi de:
Nouvelles balises HTML5
【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)
balises structurelles
<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。
balises multimédia
<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。
balise de formulaire
<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。
Autres balises
<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。
Points clés pratiques des balises HTML couramment utilisées
Utilisé uniquement au sein de la balise head, il permet de définir la relation entre le document et les ressources externes, comme le style css du lien externe, la petite icône avant le titre de la page du lien externe, etc.
<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Les quatre fonctions principales du lien hypertexte vers une balise (saut de page, défilement dans la page [ancre], actualisation de la page, téléchargement de fichier)
https://blog.csdn.net/weixin_41192489/article/details/140217094
Ajouter des hyperliens aux paragraphes
Enveloppez a avec p au lieu de p avec a
<p><a href="">段落</a></p>
Cela ne s'applique qu'aux sauts de ligne dans les balises p. Pour modifier les lignes entre les paragraphes ou ajuster l'espacement entre les éléments, veuillez utiliser des styles tels que le remplissage et la marge.
<p>广东省<br/>广州市<br/>黄埔大道西601号</p>
Utilisé pour envelopper une partie du texte dans une ligne pour ajouter des styles spéciaux.
<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>
<p>m<sup>2</sup></p>
<p>m<sub>2</sub></p>
éléments de bloc display: block
Il peut conserver tous les caractères d'espacement (espaces, nouvelles lignes) et afficher les résultats intacts. Il est souvent utilisé pour afficher le code source de l'ordinateur.
<pre>
你好：
我昨天给你打了个电话。
</pre>
éléments en ligne display: inline
Utilisé pour représenter le code source d'un ordinateur ou tout autre contenu textuel lisible par machine. Pour préserver le format d'indentation du code, il est généralement utilisé avec la balise pre.
Le texte contenu dans la balise de code sera affiché dans une police de style téléimprimeur à largeur fixe (Courier).
<pre>
<code>
let a = 1;
</code>
</pre>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ol type="a">
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>呵呵</li>
</ol>
<ol type="1" start="4">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
li est une balise au niveau du conteneur qui peut contenir n'importe quoi, y compris ul.
<ul>
<li>
<b>北京市</b>
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>东城区</li>
</ul>
</li>
<li>
<b>广州市</b>
<ul>
<li>天河区</li>
<li>越秀区</li>
</ul>
</li>
</ul>
https://blog.csdn.net/weixin_41192489/article/details/140217983
La balise i était à l'origine utilisée pour représenter du texte en italique, avec l'effet italique de la police par défaut, mais désormais l'italique est implémenté uniformément via CSS. Comme i est la première lettre de l'icône, il est désormais d'usage d'utiliser la balise i pour afficher l'icône, vous devez donc ajouter le style font-style:normal pour annuler l'inclinaison par défaut.
<i style="font-style:normal">☎</i>
display :inline éléments en ligne
Formats d'image pris en charge : jpg (jpeg), gif, png, bmp, les autres formats ne sont pas pris en charge, tels que psd, ai
<img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />
src [obligatoire] : l'adresse de l'image
alt [Important] : Lorsque l'image ne peut pas être affichée, les moteurs de recherche exploreront cet attribut au lieu du contenu affiché dans l'image. alt vient du mot « alternatif », qui signifie remplacer une ressource. (Certains navigateurs ne le prennent pas en charge)
Pour conserver le rapport hauteur/largeur de l’image, définissez généralement uniquement la largeur et la hauteur.
[Compétences pratiques] Images réactives
https://blog.csdn.net/weixin_41192489/article/details/126038175
[Conseils pratiques] Chargement paresseux des images (manuscrites)
https://blog.csdn.net/weixin_41192489/article/details/126263221
display :inline éléments en ligne
<audio controls>
<source src="./test.mp3" type="audio/mp3" />
您的浏览器不支持 audio 标签。
</audio>
Vous trouverez ci-dessous un lecteur de musique simple implémenté à l'aide de vue3. Veuillez consulter les commentaires pour les attributs et méthodes associés.
<script setup>
let bgMusic_ref = ref(null)
function printInfo() {
let musicInfo = {
//currentTime 当前播放进度（单位秒s）
currentTime: bgMusic_ref.value.currentTime,
//duration 音频总时长（单位秒s）
duration: bgMusic_ref.value.duration
}
console.log(musicInfo)
}
function play() {
// 播放音频
bgMusic_ref.value.play()
}
function pause() {
// 暂停播放音频
bgMusic_ref.value.pause()
}
// 重新播放音频（从头开始播放）
function rePlay() {
// 先将当前播放进度重置为 0
bgMusic_ref.value.currentTime = 0
// 再播放音频
bgMusic_ref.value.play()
}
</script>
<template>
<audio ref="bgMusic_ref" controls autoplay>
<source src="./test.mp3" type="audio/mp3" />
您的浏览器不支持 audio 标签。
</audio>
<button @click="play">播放</button>
<button @click="pause">暂停</button>
<button @click="rePlay">重新播放</button>
<button @click="printInfo">打印音频信息</button>
</template>
display :inline éléments en ligne
Ne prend en charge que trois formats : MP4, WebM et Ogg. Les autres formats tels que flv, mkv, etc. ne sont pas pris en charge.
<video controls>
<source src="./test.mp4" type="video/mp4" />
</video>
src [obligatoire] : l'adresse de la vidéo
commandes affichage lecteur vidéo
lecture automatique lecture automatique
lecture en boucle
preload preload (cet attribut sera invalide lors du réglage de la lecture automatique)
[Conseils pratiques] Télécharger des vidéos sur un ordinateur local-CSDN Blog
https://blog.csdn.net/weixin_41192489/article/details/140223996
display :inline éléments en ligne
Incorporer des pages Web dans des pages
<iframe src="https://www.w3school.com.cn/index.html"></iframe>
display :inline-block éléments en ligne
<button onclick="alert('你好!')">点击我！</button>
Caractères spéciaux de rendu HTML
| personnage | décrire | code |
|---|---|---|
| espace | espacement insécable | |
| < | moins que | < |
| > | plus grand que | > |
| © | droits d'auteur | © |
| & | esperluette | & |
Pour plus de caractères spéciaux, reportez-vous à « Résumé de la façon d'écrire des caractères spéciaux HTML, JS et CSS en HTML »
https://www.cnblogs.com/starof/p/4718550.html
Exemples pratiques de balises HTML courantes
vue3 [Pratique] Mise en page sémantique de la page d'accueil-CSDN Blog
https://blog.csdn.net/weixin_41192489/article/details/140215515
CSS [Pratique] Mise en page "Siheyuan"-CSDN Blog
https://blog.csdn.net/weixin_41192489/article/details/139243680
Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.
