Technology Sharing

HTML 【Practical Tutorial】（2024 Latest Edition）

2024-07-12

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

Core idea: semantics

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

  • 1

Identify the type of content by just looking at the tags, especially distinguishing between headings, paragraphs, images, and tables

  • Increase code readability and make it easier to understand
  • More friendly to SEO, making it easier for search engines to understand

The basic structure of an html file

The file extension of the html file is .html, such as index.html

Input English in vscode ! Quick 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

The browser parses the HTML document from top to bottom. <style></style> Labels should be written on<head></head> You can load the style first and then load the elements.

If you will <style></style> Tags written on<body></body> Below, the elements are loaded first, and then the styles are loaded, resulting in the user seeing a page structure without styles.

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

  • 1

The browser parses the HTML document from top to bottom. <style></style> If not placed<body></body> At the bottom of the JS, JS will be loaded and parsed first, and then the elements will be rendered, which will extend the page rendering time. If DOM operations are involved in JS, it will also block the page rendering.

Classification of html tags

According to the default display style value of the tag, it is divided into two categories

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

  • 1

Inline elements

Width is determined by content

  • display :inline If it is not a replaced element, the width and height cannot be set
img，span ,  a ,  b 等

  • 1
  • display :inline-block You can set the width and height
input， button 等

  • 1

Block elements

The width is determined by the container (the width will fill the entire container), and the width and height can be set

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

  • 1
  • display: table
table

  • 1
  • display: list-item
li

  • 1

Replaced Elements in HTML

Elements whose rendered content can be replaced by modifying a certain attribute value (mostly the src attribute) are called "replaced elements".

The following tags are all replaced elements:

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

  • 1

Replace element characteristics

  • All are inline elements
  • The appearance of the content is not affected by other tag CSS, such as text in replaced content, etc.
  • The replaced content has its own size
    • The default size of img is the size of the image it loads.
    • The default size of video, iframe, canvas, etc. (excluding borders) is 300px * 150px.
  • Replace the element's baseline (the default value of vertical-align is the baseline) with the element's bottom edge, rather than the bottom edge of the character x
  • If the replacement content is not loaded (for example, the src attribute is not set), the replaced element will lose its characteristics and become a normal inline element.

Replace the size of an element

The final size of the replaced element is determined by the following three methods: Priority from high to low Followed by:

  1. Sizes set by CSS width, height, max-width/min-width, max-height/min-height
  2. The html attributes on the replacement element can set the size, such as the width and height attributes of img, the size attribute of input, the cols and rows attributes of textarea, etc.
  3. The replaced content itself has size

New tags in HTML5

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

  • 1

Structural 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

Form Tags

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

  • 1
  • 2

Tags

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

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

Key points of common HTML tags

link External link resources

Only used in the head tag, it can define the relationship between the document and external resources, such as the external link CSS style, the small icon before the external link page title, 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

Special tags for normal text

br Line break within a paragraph

It is only applicable to line breaks within p tags. To break lines between paragraphs or adjust the spacing between elements, please use styles such as padding and margin.

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

  • 1

insert image description here

span inline text

Used to wrap part of the text within a line to add special styles.

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

  • 1

insert image description here

sup superscript

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

  • 1

insert image description here

sub

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

  • 1

insert image description here

pre predefined text

Block elements display: block

It can retain all whitespace characters (spaces, newlines) and output the results intact. It is often used to display computer source code.

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

  • 1
  • 2
  • 3
  • 4

insert image description here

code

Inline elements display: inline

Used to represent computer source code or other machine-readable text content. To preserve the indentation format of the code, it is usually used with the pre tag.

The text inside the code tag will be displayed in a fixed-width, teletype-style font (Courier).

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

  • 1
  • 2
  • 3
  • 4
  • 5

insert image description here

List related tags

ul Unordered list

  • The type attribute can modify the serial number type
    • disc solid origin【default】
    • square Solid square
    • circle hollow circle
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

insert image description here

ol ordered list

  • type attribute - serial number type, such as 1 (Arabic numerals [default]), a, A, i, I
  • start attribute - starting point of counting
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

insert image description here

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

  • 1
  • 2
  • 3
  • 4
  • 5

insert image description here

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

  • 1
  • 2
  • 3
  • 4
  • 5

insert image description here

Nested Lists

li is a container-level tag that can hold anything, including 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>

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

insert image description here

table

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

i Icon

The i tag was originally used to indicate italic text, and the font has a tilted effect by default, but now italics are uniformly implemented through CSS. Because i is the first letter of icons, it is customary to use the i tag to display icons, so you need to add the style font-style:normal to cancel the default tilt.

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

  • 1

insert image description here

img images

display :inline Inline elements

Supported image formats: jpg (jpeg), gif, png, bmp, other formats are not supported, such as psd, ai

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

  • 1

insert image description here

audio

display :inline Inline elements
insert image description here

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

  • 1
  • 2
  • 3
  • 4
  • src【Required】: The address of the audio
  • controls displays the music player
  • autoplay
  • loop
  • preload preload (this property will be invalid when autoplay is set)

Below is a simple music player implemented using vue3. For details on related properties and methods, see the comments.

<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

display :inline Inline elements

Only supports MP4, WebM, Ogg formats, and does not support other formats such as flv, mkv, etc.

insert image description here

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

  • 1
  • 2
  • 3

iframe

display :inline Inline elements

Embed a web page within a page

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

  • 1
  • src【Required】: The address of other web pages
    insert image description here

Form related tags

button

display :inline-block Inline elements

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

  • 1

insert image description here

HTML rendering special characters

characterdescribeCode
Spacenon-breaking spacing&nbsp;
<less than&lt;
>greater than&gt;
©copyright&copy;
&And&amp;

For more special characters, refer to "Summary of HTML, JS, and CSS Writing Methods for HTML Special Characters"
https://www.cnblogs.com/starof/p/4718550.html

HTML Common Tags Practical Examples

Page Layout

Personal profile

I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages ​​such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.

my contact information

Mail