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 属性），替换元素就会失去替换元素的特征，变成一个普通的内联元素

替换元素的尺寸

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

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

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&nbsp;
<小于号less than&lt;
>大于号greater than&gt;
©版权&copy;
&和号&amp;

更多特殊字符，参考《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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/780968.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

移动硬盘“需格式化”预警：专业数据恢复指南

移动硬盘“需格式化”预警：专业数据恢复指南

移动硬盘“需格式化”危机&#xff1a;了解背后的真相 在日常的数字生活中&#xff0c;移动硬盘作为我们存储重要数据的“保险箱”&#xff0c;其稳定性与安全性直接关系到我们信息的完整与便捷访问。然而&#xff0c;当您尝试打开移动硬盘时&#xff0c;屏幕上赫然出现的“需…
阅读更多...
科技赋能智慧应急：“数字孪生+无人机”在防汛救灾中的应用

科技赋能智慧应急：“数字孪生+无人机”在防汛救灾中的应用

近期&#xff0c;全国多地暴雨持续&#xff0c;“麻辣王子工厂停工”“水上派出所成水上的派出所了”等相关词条冲上热搜&#xff0c;让人们看到了全国各地城市内涝、洪涝带来的严重灾情。暴雨带来的影响可见一斑&#xff0c;潜在的洪水、泥石流、山体滑坡等地质灾害更应提高警…
阅读更多...
aardio —— 今日减bug

aardio —— 今日减bug

打字就减bug 鼠标双击也减bug 看看有多少bug够你减的 使用方法&#xff1a; 1、将资源附件解压缩&#xff0c;里面的文件夹&#xff0c;放到aardio\plugin\plugins 目录 2、aardio 启动插件 → 插件设置 → 选中“今日减bug” → 保存。 3、重启 aardio&#xff0c;等aa…
阅读更多...
BUUCTF[PWN][fastbin attack]

BUUCTF[PWN][fastbin attack]

fastbin_attack例题 题目&#xff1a;[BUUCTF在线评测 (buuoj.cn)](https://buuoj.cn/challenges#[ZJCTF 2019]EasyHeap) 整体思路&#xff1a;利用编辑时edit_heap函数的栈溢出漏洞&#xff0c;覆盖heaparray中的栈指针指向free的got表&#xff0c;将其改为system的plt表&…
阅读更多...
make工具

make工具

1、什么是make&#xff1f; make是个命令&#xff0c;是个可执行程序&#xff0c;是个工具&#xff0c;用来解析Makefile文件的命令&#xff0c;这个命令存放在/usr/bin/目录下 -rwxr-xr-x 1 root root 250K 2月 15 2022 make -rwxr-xr-x 1 root root 4.8K 2月 15 2022 ma…
阅读更多...
Linux_实现简易日志系统

Linux_实现简易日志系统

目录 1、认识可变参数 2、解析可变参数 3、打印可变参数 3.1 va_list 3.2 va_start 3.3 va_arg 3.4 va_end 3.5 小结 4、实现日志 4.1 日志左半部分 4.2 日志右半部分 4.3 日志的存档归类 结语 前言&#xff1a; 在Linux下实现一个日志系统&#xff0c;该日…
阅读更多...
Open3D 删除点云中重叠的点（方法二）

Open3D 删除点云中重叠的点（方法二）

目录 一、概述 1.1原理 1.2应用 二、代码实现 三、实现效果 3.1原始点云 3.2处理后点云 3.3数据对比 一、概述 在点云处理中&#xff0c;重叠点&#xff08;即重复点&#xff09;可能会对数据分析和处理的结果产生负面影响。因此&#xff0c;删除重叠点是点云预处理中常…
阅读更多...
一招解决找不到d3dcompiler43.dll,无法继续执行代码问题

一招解决找不到d3dcompiler43.dll,无法继续执行代码问题

当您的电脑遇到d3dcompiler43.dll缺失问题时&#xff0c;首先需要了解d3dcompiler43.dll文件及其可能导致问题的原因&#xff0c;之后便可以选择合适的解决方案。在此&#xff0c;我们将会为您提供寻找d3dcompiler43.dll文件的多种处理方法。 一、d3dcompiler43.dll文件分析 d…
阅读更多...
【C++第十课 - stack_queue】stack、queue的使用、适配器模型stack、queue和priority_queue的底层实现、deque

【C++第十课 - stack_queue】stack、queue的使用、适配器模型stack、queue和priority_queue的底层实现、deque

目录 一、stack使用1、push2、pop3、empty4、top题目1、最小栈2、栈的压入、弹出序3、逆波兰表达式求值 二、queue的使用priority_queue习题 三、适配器stack的底层实现queue的底层实现priority_queue的底层实现仿函数/函数对象函数指针 四、deque 一、stack使用 stack是个容器…
阅读更多...
【74LS163做24进制计数器】2021-11-19

【74LS163做24进制计数器】2021-11-19

缘由用74LS163做24进制计数器-其他-CSDN问答,仿真multisim两个74LS163芯片如何构成47进制计数器-吐槽问答-CSDN问答 参考74ls163中文资料汇总&#xff08;74ls163引脚图及功能_内部结构图及应用电路&#xff09; - 电子发烧友网
阅读更多...
1.pwn的汇编基础（提及第一个溢出：整数溢出）

1.pwn的汇编基础（提及第一个溢出：整数溢出）

汇编掌握程度 能看懂就行&#xff0c;绝大多数情况不需要真正的编程(shellcode题除外) 其实有时候也不需要读汇编&#xff0c;ida F5 通常都是分析gadget&#xff0c;知道怎么用&#xff0c; 调试程序也不需要分析每一条汇编指令&#xff0c;单步执行然后查看寄存器状态即可 但…
阅读更多...
【Python机器学习】模型评估与改进——多分类指标

【Python机器学习】模型评估与改进——多分类指标

多分类问题的所有指标基本是上都来自于二分类问题&#xff0c;但是要对所有类别进行平均。多分类的精度被定义为正确分类的样本所占的比例。同样&#xff0c;如果类别是不平衡的&#xff0c;精度并不是很好的评估度量。 想象一个三分类问题&#xff0c;其中85%的数据点属于类别…
阅读更多...
Java（七）——多态

Java（七）——多态

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…
阅读更多...
Go语言如何入门，有哪些书推荐？

Go语言如何入门，有哪些书推荐？

Go 语言之所以如此受欢迎&#xff0c;其编译器功不可没。Go 语言的发展也得益于其编译速度够快。 对开发者来说&#xff0c;更快的编译速度意味着更短的反馈周期。大型的 Go 应用程序总是能在几秒钟之 内完成编译。而当使用 go run编译和执行小型的 Go 应用程序时&#xff0c;其…
阅读更多...
VMware虚拟机搭建CentOS7环境

VMware虚拟机搭建CentOS7环境

相关资料 安装VMware 双击VMware-workstation(16.1.1软件安装包.exe安装文件，点下一步 激活码文件复制激活码激活安装linux 1、点击创建虚拟机
阅读更多...
Open3D 删除点云中重叠的点（方法一）

Open3D 删除点云中重叠的点（方法一）

目录 一、概述 二、代码实现 三、实现效果 3.1原始点云 3.2处理后的点云 3.3计算结果 一、概述 在点云处理中&#xff0c;重叠点&#xff08;即重复点&#xff09;可能会对数据分析和处理的结果产生负面影响。因此&#xff0c;删除重叠点是点云预处理中常见且重要的步骤。…
阅读更多...
【网络安全】实验一（网络拓扑环境的搭建）

【网络安全】实验一（网络拓扑环境的搭建）

一、本次实验的实验目的 学习利用 VMware 创建虚拟环境 学习利用 VMware 搭建各自网络拓扑环境 二、创建虚拟机 三、克隆虚拟机 选择克隆的系统必须处于关机状态。 方法一&#xff1a; 方法二&#xff1a; 需要修改克隆计算机的名字&#xff0c;避免产生冲突。 四、按照要求完…
阅读更多...
机器学习原理之 -- 神经网络：由来及原理详解

机器学习原理之 -- 神经网络：由来及原理详解

神经网络&#xff08;Neural Networks&#xff09;是受生物神经系统启发而设计的一类计算模型&#xff0c;广泛应用于图像识别、语音识别、自然语言处理等领域。其基本思想是通过模拟人脑神经元的工作方式&#xff0c;实现对复杂数据的自动处理和分类。本文将详细介绍神经网络的…
阅读更多...
Scrapy框架的基本使用教程

Scrapy框架的基本使用教程

1、创建scrapy项目 首先在自己的跟目录文件下执行命令&#xff1a; PS D:\BCprogram\python_pro\bigdata> scrapy startproject theridion_grallatorscrapy startproject 项目名 具体执行操作如下&#xff1a;1、创建项目目录&#xff1a;Scrapy会在当前工作目录下创建一…
阅读更多...
【python中级】图像从从笛卡尔坐标系转换为极坐标系

【python中级】图像从从笛卡尔坐标系转换为极坐标系

【python中级】图像从从笛卡尔坐标系转换为极坐标系 1.背景2.生成二维图3.极坐标转换1.背景 笛卡尔坐标系就是我们常说的直角坐标系。 笛卡尔坐标系，也称为直角坐标系，是由法国数学家和哲学家勒内笛卡尔（Ren Descartes）发明的一种二维或三维坐标系统。它使用两个或三个相互…
阅读更多...
最新文章

Copyright @ 2022~2023