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

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() {// 先将当前播放进度重置为 0bgMusic_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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【高录用、快检索、过往5届均已检索、SPIE 出版】第六届无线通信与智能电网国际会议（ICWCSG 2024）

【高录用、快检索、过往5届均已检索、SPIE 出版】第六届无线通信与智能电网国际会议（ICWCSG 2024）

随着科技的飞速发展和能源需求的日益增长&#xff0c;智能电网技术逐渐成为电力行业的重要发展方向。与此同时&#xff0c;无线通信技术在近年来也取得了显著的进步&#xff0c;为智能电网的发展提供了强有力的支持。为了进一步推动无线通信与智能电网的结合与发展&#xff0c;…
阅读更多...
学IT上培训班真的有用吗？

学IT上培训班真的有用吗？

在学习IT技术的过程中&#xff0c;你是否也被安利过各种五花八门的技术培训班&#xff1f;这些培训班都是怎样向你宣传的&#xff0c;你又对此抱有着怎样的态度呢&#xff1f;在培训班里学技术&#xff0c;真的有用吗&#xff1f; 一、引入话题 IT行业是一个快速发展和不断变化…
阅读更多...
C++初学者指南-4.诊断---未定义行为检测器

C++初学者指南-4.诊断---未定义行为检测器

C初学者指南-4.诊断—未定义行为检测器 未定义行为检测器(UBSAN) 适用编译器&#xff1a;clang,g在运行时检测许多类型的未定义行为 解引用空指针从未对齐的指针读取整数溢出被0除 … 在代码中加入额外的指令:在调试构建中增加运行时约25% 示例&#xff1a;有符号整形溢出 …
阅读更多...
Git在多人开发中的常见用例

Git在多人开发中的常见用例

前言 作为从一个 svn 转过来的 git 前端开发&#xff0c;在经历过git的各种便捷好处后&#xff0c;想起当时懵懂使用git的胆颤心惊&#xff1a;总是害怕用错指令&#xff0c;又或者遇到报错就慌的场景&#xff0c;想起当时查资料一看git指令这么多&#xff0c;看的头晕眼花&am…
阅读更多...
深度学习原理与Pytorch实战

深度学习原理与Pytorch实战

深度学习原理与Pytorch实战 第2版 强化学习人工智能神经网络书籍 python动手学深度学习框架书 TransformerBERT图神经网络&#xff1a; 技术讲解 编辑推荐 1.基于PyTorch新版本&#xff0c;涵盖深度学习基础知识和前沿技术&#xff0c;由浅入深&#xff0c;通俗易懂&#xf…
阅读更多...
家里老人能操作的电视直播软件，目前能用的免费看直播的电视软件app，适合电视和手机使用！

家里老人能操作的电视直播软件，目前能用的免费看直播的电视软件app，适合电视和手机使用！

2024年许多能看电视直播的软件都不能用了&#xff0c;家里的老人也不会手机投屏&#xff0c;平时什么娱乐都没有了&#xff0c;这真的太不方便了。 很多老人并不喜欢去买一个广电的机顶盒&#xff0c;或者花钱拉有线电视。 现在的电视大多数都是智能电视&#xff0c;所以许多电…
阅读更多...
Redis基本命令源码解析-字符串命令

Redis基本命令源码解析-字符串命令

1. set 用于将kv设置到数据库中 2. mset 批量设置kv mset (msetnx) key1 value1 key2 value2 ... mset:msetCommand msetnx：msetnxCommand msetCommand和msetnxCommand都调用msetGenericCommand 2.1 msetGenericCommand 如果参数个数为偶数，则响应参数错误并返回 如果…
阅读更多...
【项目日记（一）】梦幻笔耕-数据层实现

【项目日记（一）】梦幻笔耕-数据层实现

❣博主主页: 33的博客❣ ▶️文章专栏分类:项目日记◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多项目内容 目录 1.前言2.后端模块3数据库设计4.mapper实现4.1UserInfoMapper4.2BlogMapper 5.总结 1.…
阅读更多...
硬件开发笔记（二十四）：贴片电容的类别、封装介绍，AD21导入贴片电容、原理图和封装库3D模型

硬件开发笔记（二十四）：贴片电容的类别、封装介绍，AD21导入贴片电容、原理图和封装库3D模型

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140241817 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…
阅读更多...
存储结构与管理磁盘

存储结构与管理磁盘

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、一切从“/”开始 二、物理设备的命名规则 三、文件系统与数据资料 四、挂载硬件设备 五、添加硬盘设备 六、添加交换分区 七、磁盘容…
阅读更多...
如何在 PostgreSQL 中实现数据的增量备份和恢复？

如何在 PostgreSQL 中实现数据的增量备份和恢复？

文章目录 一、增量备份的原理二、准备工作&#xff08;一&#xff09;环境配置&#xff08;二&#xff09;创建测试数据库和表&#xff08;三&#xff09;插入初始数据 三、全量备份四、基于时间点的增量备份&#xff08;一&#xff09;开启 WAL 归档&#xff08;二&#xff09…
阅读更多...
政策公告与提醒

政策公告与提醒

自 2024 年 4 月 3 日起，您将至少有 30 天的时间来更新应用，使其符合下方所述的政策变更。 我们将推出“儿童安全标准”政策，规定社交应用和约会交友应用必须遵循特定标准，并在 Play 管理中心内以自行认证的形式证明合规后才能发布。 为了提高健康相关应用在 Google Play…
阅读更多...
docker 重要且常用命令大全

docker 重要且常用命令大全

本文将总结一些常见的重要的docker命令&#xff0c;以作备忘。后续如果有新的比较常用重要的也会更新进来。欢迎补充。 docker服务管理 首先我们要解释一下&#xff1a;systemctl和docker命令的不同 systemctl&#xff1a;是许多 Linux 发行版中默认的初始化系统和服务管理器。…
阅读更多...
11.常见的Bean后置处理器

11.常见的Bean后置处理器

CommonAnnotationBeanPostProcessor (Resource PostConstructor PreDestroy) AutowiredAnnotationBeanPostProcessor (Autowired Value) GenericApplicationContext是一个干净的容器&#xff0c;它没有添加任何的PostProcessor处理器。 调用GenericApplicationContext.refre…
阅读更多...
赛元单片机开发工具SOC_Programming_Tool_Enhance_V1.50 分享

赛元单片机开发工具SOC_Programming_Tool_Enhance_V1.50 分享

下载地址&#xff1a; SOC_Programming_Tool_Enhance_V1.50(LIB0D30).rar: https://545c.com/f/45573183-1320016694-557ebd?p7526 (访问密码: 7526)
阅读更多...
docker中实现多机redis主从集群

docker中实现多机redis主从集群

redis主从集群是每个使用redis的小伙伴都必需知道的&#xff0c;那如何在docker中快速配置呢&#xff1f;这篇来教你快速上手&#xff0c;跟着复制完全就能用&#xff01;&#xff01; 1. 前置准备 1.1 docker安装 以防有小伙伴没预先安装docker&#xff0c;这里提供安装步骤…
阅读更多...
视频共享融合赋能平台LnyonCVS国标视频监控平台包含哪些功能

视频共享融合赋能平台LnyonCVS国标视频监控平台包含哪些功能

随着国内视频监控应用的迅猛发展&#xff0c;系统接入规模不断扩大。不同平台提供商的接入协议各不相同&#xff0c;导致终端制造商在终端维护时需要针对不同平台的软件版本提供不同的维护&#xff0c;资源造成了极大的浪费。 为响应国家对重特大事件通过视频监控集中调阅来掌…
阅读更多...
QListWidget 缩略图IconMode示例

QListWidget 缩略图IconMode示例

1、实现的效果如下&#xff1a; 2、实现代码 &#xff08;1&#xff09;头文件 #pragma once #include <QtWidgets/QMainWindow> #include "ui_QListViewDemo.h" enum ListDataType { ldtNone -1, ldtOne 0, ldtTwo 1, }; struct ListData…
阅读更多...
解决后端限制导致前端配置跨域仍请求失败报504的问题

解决后端限制导致前端配置跨域仍请求失败报504的问题

文章目录 问题一、通过配置跨域方式二、直接真实接口请求三、解决方式四、后端这样做的原因 总结 问题 前端项目设置跨域proxy处理&#xff0c;接口请求不会报跨域&#xff0c;但是接口请求报了504&#xff0c;这种情况如何处理呢&#xff0c;后端又为何要这么做&#xff0c;下…
阅读更多...
汽车信息安全--欧盟汽车法规

汽车信息安全--欧盟汽车法规

目录 General regulation 信息安全法规 R155《网络安全及网络安全管理系统》解析 R156《软件升级与软件升级管理系统》解析 General regulation 欧洲的汽车行业受到一系列法律法规的约束&#xff0c;包括 各个方面包括&#xff1a; 1.安全要求&#xff1a;《通用安全条例&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023