Technology sharing

HTML [Practical Tutorial] (2024 versio novissima)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Core idea--Semanticization

【面试题】如何理解 HTML 语义化 ?

  • 1

Genus contenti solum per tags determinari potest, praesertim titulos, paragraphos, picturas et tabulas.

  • Crescite code readability et facilius ad intellegendum
  • Magis amica SEO, ut facilius ad quaerendas machinas ad intelligendum

Fundamentum structurae HTML modorum

Tabella que est ad HTML modum lima .htmlut index.html

Intra Anglice in vscode ! Velox input

<!-- 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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
【面试题】为什么<style></style> 标签要写在<head></head> 中  ?

  • 1

Parse navigatoris HTML documenta ab summo ad imum. <style></style> Titulus scribendus est<head></head> Primum genera onerare potes et elementa onerare.

Si vis <style></style> Titulus scriptus est in<body></body> Infra, elementa primum styli onusta sunt, inde in utentis structuram sine styli paginam videndo.

【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部  ?

  • 1

Navigantes parse HTML documenta a summo ad imum. <style></style> Nisi positus<body></body> In fundo paginae, JS primo oneratur et parsedetur, et tunc elementa reddentur, quae tempus paginae reddens protrahet .

Classification of html tags

Secundum valorem styli defaltam ostentationis pittacii, in duo genera dividitur;

【面试题】HTML有哪些内联元素和块状元素 ?

  • 1

inline elementis

Latitudo a contento determinatur

  • display :inline Sine loco elementum, latitudo et altitudo erigi non possunt.
img，span ,  a ,  b 等

  • 1
  • display :inline-block Potest pone latitudinem et altitudinem
input， button 等

  • 1

obstructionum elementis

Latitudo a continente determinatur (latitudo autem totum continens implebit), et latitudo et altitudo constitui possunt

  • display: block
div，h1-h6，p，ul, ol ，form , hr 等

  • 1
  • display: table
table

  • 1
  • display: list-item
li

  • 1

Replacement elementa in HTML

Elementa quorum contenta reddita reponi possunt per modificationem valoris attributi (plerumque attributi src) vocantur "elementa substitutio".

Sequuntur tags omnia postea elementa:

img、video、iframe、canvas、textarea、input、select、object

  • 1

Characteres pro elementis

  • Omnia inline elementa sunt
  • Aspectus contenti CSS aliorum textorum non afficitur, ut textus in reposito contentus, etc.
  • Repositum contentus habet dimensiones
    • Magnitudo img defalta est magnitudo imaginis quam onerat.
    • Magnitudo defectus (exclusis limitibus) video, iframe, canvas, etc. est 300px * 150px.
  • Basilinea elementi substituti (defalta valor verticalis-align est baseline) est imum marginem elementi, non imum marginem characteris x.
  • Si contentus postea non oneratur (exempli gratia attributum src non ponitur), elementum tortor amittet notas subrogationis et elementum inlineum ordinarium fiet.

Reponere elementum magnitudine

Magnitudo postrema elementi substituti tribus modis coniunctis determinatur, eorum Prior ab alto ad low Sequitur:

  1. Magnitudo statuta per CSS latitudo, altitudo, max-latitudo/min latitudo, max-altitude/min altitudo
  2. Magnitudinem ponere potes ponendo html attributa in elemento, puta latitudinem et altitudinem attributorum img, magnitudinis attributorum input, colorum et ordinum attributorum textareorum, etc.
  3. Repositum contentus habet dimensiones

HTML5 new tags

【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)

  • 1

structuram principalem tags

<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

multimedia tags

<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

forma tag

<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。

  • 1
  • 2

Aliae tags

<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Practica cardinis communis HTML tags

link external link resources

Solum intra caput tag adhibitum, relationem inter documentum et facultates externas definire potest, qualis est modus css nexus externi, icon parva ante titulum paginae paginae externae, etc.

<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

  • 1
  • 2
  • 3
  • 4

a hyperlink "

Ordinarius textus specialium tags

br linea confractus in paragrapho

Solum ad lineas intra p tags erumpit. Mutare lineas inter paragraphos vel distantiam elementorum accommodare, stylis utere quaeso ut color et margo.

<p>广东省<br/>广州市<br/>黄埔大道西601号</p>

  • 1

Insert imaginem descriptionis hic

spatium inline text

Solebant involvere partem textus intra lineam ad stylos speciales addere.

<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>

  • 1

Insert imaginem descriptionis hic

sup superscript

<p>m<sup>2</sup></p>

  • 1

Insert imaginem descriptionis hic

sub subscript!

<p>m<sub>2</sub></p>

  • 1

Insert imaginem descriptionis hic

praedefinitum illud

obstructionum elementis display: block

Continere potest omnes characteres (spatia, newlines) et omnia integra reddere.

<pre>
你好：
      我昨天给你打了个电话。
</pre>

  • 1
  • 2
  • 3
  • 4

Insert imaginem descriptionis hic

codice codice

inline elementis display: inline

Ad significandum fontem computatrum codicem vel alium textum machinis-readabilem contentum.

Textus in codice tag ostendetur fonti styli teletypi fixum-latitudine (Courier).

<pre>
    <code>
        let a = 1;
    </code>
</pre>

  • 1
  • 2
  • 3
  • 4
  • 5

Insert imaginem descriptionis hic

List related tags

ul inordinatum album

  • Quod genus proprium potest mutare Vide numerum type
    • discus originis solidae [default]
    • quadratum solidum quadratum punctum
    • circulus cavae
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

Insert imaginem descriptionis hic

o iussit album

  • type attributus - serial number type, ut 1 (Arabice [default]), a, A, i, I.
  • satus attributum - computatis principium
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Insert imaginem descriptionis hic

<ol type="a">   
    <li>嘿嘿</li>
    <li>嘿嘿</li>
    <li>呵呵</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Insert imaginem descriptionis hic

<ol type="1" start="4"> 
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Insert imaginem descriptionis hic

Album nidificans

li est vas graduum qui aliquid capere potest, ul incluso.

<ul>
  <li>
    <b>北京市</b>
    <ul>
      <li>海淀区</li>
      <li>朝阳区</li>
      <li>东城区</li>
    </ul>
  </li>

  <li>
    <b>广州市</b>
    <ul>
      <li>天河区</li>
      <li>越秀区</li>
    </ul>
  </li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

Insert imaginem descriptionis hic

mensa mensa

https://blog.csdn.net/weixin_41192489/article/details/140217983

i icon

The i tag was originally used to represent italic text, with the source italic effect by default, but now italics are uniformly implemented through CSS. Quia i littera prima iconis est, nunc solet uti i tag ad iconem proponere, ideo necesse est stilum fonti-styli addere: normalem defectionem inclinationem rescindere.

<i style="font-style:normal">&#9742</i>

  • 1

Insert imaginem descriptionis hic

img imaginibus

display :inline inline elementis

Formatae imaginum suffultae: jpg (jpeg), gif, png, bmp, aliae formatae non sustinentur, ut psd, ai.

 <img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />

  • 1

Insert imaginem descriptionis hic

audio audio

display :inline inline elementis
Insert imaginem descriptionis hic

<audio controls>
  <source src="./test.mp3" type="audio/mp3" />
  您的浏览器不支持 audio 标签。
</audio>

  • 1
  • 2
  • 3
  • 4
  • src [requiritur]: audio electronica
  • controls display music player
  • autoplay ipso fabula
  • loop playback loop
  • preload preload (hoc proprium erit irritum statuendo autoplay)

Infra est simplex musica lusor vue3 utens impletur.

<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

video video

display :inline inline elementis

Tantum sustinet tres formas: MP4, WebM, et Ogg. Aliae formatae ut flv, mkv, etc.

Insert imaginem descriptionis hic

  <video controls>
    <source src="./test.mp4" type="video/mp4" />
  </video>

  • 1
  • 2
  • 3

iframe embedded frame

display :inline inline elementis

Paginae interretiales inter paginas

<iframe src="https://www.w3school.com.cn/index.html"></iframe>

  • 1
  • src [requiritur]: inscriptio aliarum paginarum
    Insert imaginem descriptionis hic

Forma related tags

button button

display :inline-block inline elementis

<button onclick="alert('你好!')">点击我！</button>

  • 1

Insert imaginem descriptionis hic

HTML faciens speciales characteres

characterdescriberecode
locusnon-fractionis iustae&nbsp;
<minor quam&lt;
>maior&gt;
©copyright©
&ampersand&

Pro characteribus specialioribus, refer ad "Summarium quomodo scribendi html, js, css speciales characteres in html"
https://www.cnblogs.com/starof/p/4718550.html

Exempla practica communium HTML tags

Page layout

Personal profile

technologiae technologiae plus quam 30 annos operam dedit et in variis linguis proficit ut java, linux, javascript, php, css, etc. Multas contributiones in aperto fonte campo fecit elit documentorum statione ad communicandas quaestiones in technologia progressus ad futuram referentiam

mihi contactus notitia

Mail