HTML 【实用教程】（2024最新版）-阿里云开发者社区

核心思想 —— 语义化

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

仅通过标签便能判断内容的类型，特别是区分标题、段落、图片和表格

增加代码可读性，让人更容易读懂
对SEO更加友好，让搜索引擎更容易读懂

html 文件的基本结构

html 文件的文件后缀为 .html，如 index.html

vscode 中输入英文 ! 可快捷输入

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

浏览器解析 HTML 文档是自上而下的，将 <style></style> 标签要写在<head></head> 中就能先加载样式，再加载元素。

若将 <style></style> 标签写在<body></body> 下方，则是先加载元素，再加载样式，导致用户会看到没有样式的页面结构。

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

浏览器解析 HTML 文档是自上而下的， <style></style> 若未放在<body></body> 内的底部，则会先加载并解析 JS ，再渲染元素，导致页面渲染的时间延长，倘若 JS 中涉及 DOM 操作，还会阻塞页面的渲染。

html 标签的分类

根据标签的默认的 display 样式值分为两类

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

内联元素

宽度由内容决定

display :inline 若非替换元素，不能设置宽高

img，span ,  a ,  b 等

display :inline-block 可以设置宽高

input， button 等

块状元素

宽度由容器决定（宽度会撑满整个容器），可以设置宽高

display: block

div，h1-h6，p，ul, ol ，form , hr 等

display: table

table

display: list-item

li

HTML 中的替换元素

通过修改某属性值（大部分是 src 属性）就能替换其呈现内容的元素，被称为“替换元素”。

以下标签，都是替换元素：

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

替换元素的特征

都是内联元素
内容的外观不受其他标签 CSS 的影响，如替换的内容中的文本等。
替换的内容本身就有尺寸

img 默认的尺寸即其加载的图片的尺寸。

video、iframe、canvas 等默认的尺寸（不包括边框）是300px * 150px。

替换元素的基线（vertical-align 的默认值 baseline 即基线）为元素的下边缘，而不是字符 x 的下边缘

若未加载替换内容（如未设置 src 属性），替换元素就会失去替换元素的特征，变成一个普通的内联元素

替换元素的尺寸

替换元素的最终尺寸由以下三种方式共同决定，它们的 优先级由高到低 依次是：

通过 CSS 的 width、height、max-width/min-width、max-height/min-height 设置的尺寸
替换元素上的 html 属性可以设定尺寸，如 img 的 width 和 height 属性、input 的 size 属性、textarea 的 cols 和 rows 属性等
替换的内容本身有尺寸

HTML5 新增的标签

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

结构性标签

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

多媒体标签

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

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

其他标签

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

HTML 常用标签实战要点

link 外链资源

限 head 标签内使用，可定义文档与外部资源之间的关系，如外链 css 样式，外链页面标题前的小图标等。

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

a 超链接

超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
https://blog.csdn.net/weixin_41192489/article/details/140217094

给段落添加超链接

用 p 包裹 a，而不是 a 包裹 p

<p><a href="">段落</a></p>

普通文本专用标签

br 段落内换行

仅适用于 p 标签内部的换行，段落间的换行或调整元素间的间距请使用样式 padding、margin 等样式。

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

span 行内文本

用于包裹行内的部分文本来添加特殊的样式。

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

sup 上标

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

sub 下标

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

pre 预定义文本

块状元素 display: block

可保留所有空白字符(空格、换行符)，原封不动的输出结果，常用于展示计算机的源代码。

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

code 代码

内联元素 display: inline

用于表示计算机源代码或者其他机器可以阅读的文本内容，为保留代码的缩进格式，通常和 pre 标签一起使用。

code 标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。

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

列表相关标签

ul 无序列表

type 属性可修改序号类型

disc 实心原点【默认】
square 实心方点
circle 空心圆

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

ol 有序列表

type 属性 —— 序号类型，如1( 阿拉伯数字【默认】) 、a、A、i、I
start 属性 —— 计数起点

<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 是一个容器级标签，里面什么都能放，包括 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>

table 表格

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

i 图标

i 标签原用于表示斜体文字，默认有字体倾斜的效果，但现在斜体统一通过css实现。因 i 为图标 icon 的首字母，现习惯用 i 标签来展示图标，所以需添加样式 font-style:normal 取消默认的倾斜。

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

img 图片

display :inline 内联元素

支持的图片格式：jpg(jpeg)、gif、png、bmp，其他格式不支持，如psd、ai

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

src【必要】：图片的地址
alt【重要】：当图片无法显示时，代替图片显示的内容，搜索引擎会抓取此属性。alt 源自单词 alternate “替代”，代表替换资源。（有的浏览器不支持）
要想图片保持宽高比，通常只设置 width 和 height 中的一个
【实战技巧】响应式图片
https://blog.csdn.net/weixin_41192489/article/details/126038175

【实战技巧】图片懒加载（手写）
https://blog.csdn.net/weixin_41192489/article/details/126263221

audio 音频

display :inline 内联元素

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

src【必要】：音频的地址
controls 展示音乐播放器
autoplay 自动播放
loop 循环播放
preload 预加载（设置 autoplay 时，此属性将失效）

下方为使用 vue3 实现的简易音乐播放器，相关属性和方法详见注释

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

【实用技巧】下载音乐到本地电脑
https://blog.csdn.net/weixin_41192489/article/details/122680809

video 视频

display :inline 内联元素

仅支持MP4、WebM、Ogg三种格式，不支持其他格式，如flv、mkv等

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

src【必要】：视频的地址
controls 展示视频播放器
autoplay 自动播放
loop 循环播放
preload 预加载（设置 autoplay 时，此属性将失效）

【实用技巧】下载视频到本地电脑-CSDN博客
https://blog.csdn.net/weixin_41192489/article/details/140223996

iframe 内嵌框架

display :inline 内联元素

在页面内嵌入网页

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

src【必要】：其他网页的地址

表单相关标签

button 按钮

display :inline-block 内联元素

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

HTML 渲染特殊字符

字符	描述	代码
空格	non-breaking spacing
<	小于号less than	<

>	大于号greater than	>
©	版权	©
&	和号	&

更多特殊字符，参考《html特殊字符的html，js，css写法汇总》

https://www.cnblogs.com/starof/p/4718550.html

HTML 常用标签实战范例

页面布局

vue3【实战】语义化首页布局-CSDN博客

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

CSS 【实战】 “四合院”布局-CSDN博客

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

HTML 【实用教程】（2024最新版）

核心思想 —— 语义化

html 文件的基本结构

html 标签的分类

内联元素

块状元素

HTML 中的替换元素

HTML5 新增的标签

HTML 常用标签实战要点

link 外链资源

a 超链接

普通文本专用标签

br 段落内换行

span 行内文本

sup 上标

sub 下标

pre 预定义文本

code 代码

列表相关标签

ul 无序列表

ol 有序列表

列表嵌套

table 表格

i 图标

img 图片

audio 音频

video 视频

iframe 内嵌框架

表单相关标签

button 按钮

HTML 渲染特殊字符

HTML 常用标签实战范例

页面布局

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML 【实用教程】（2024最新版）

核心思想 —— 语义化

html 文件的基本结构

html 标签的分类

内联元素

块状元素

HTML 中的替换元素

HTML5 新增的标签

HTML 常用标签实战要点

link 外链资源

a 超链接

普通文本专用标签

br 段落内换行

span 行内文本

sup 上标

sub 下标

pre 预定义文本

code 代码

列表相关标签

ul 无序列表

ol 有序列表

列表嵌套

table 表格

i 图标

img 图片

audio 音频

video 视频

iframe 内嵌框架

表单相关标签

button 按钮

HTML 渲染特殊字符

HTML 常用标签实战范例

页面布局

热门文章

最新文章

相关课程

相关电子书

相关实验场景