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

news2024/11/27 14:45:20

核心思想 —— 语义化

【面试题】如何理解 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() {
  // 先将当前播放进度重置为 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

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

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

相关文章

VMware虚拟机配置桥接网络

VMware虚拟机配置桥接网络

转载&#xff1a;虚拟机桥接网络配置 一、VMware三种网络连接方式 VMware提供了三种网络连接方式&#xff0c;VMnet0, VMnet1, Vmnet8&#xff0c;分别代表桥接&#xff0c;Host-only及NAT模式。在VMware的编辑-虚拟网络编辑器可看到对应三种连接方式的设置&#xff08;如下图…
阅读更多...
深度解析Ubuntu版本升级：LTS版本升级指南

深度解析Ubuntu版本升级：LTS版本升级指南

深度解析Ubuntu版本升级&#xff1a;Ubuntu版本生命周期及LTS版本升级指南 Ubuntu是全球最受欢迎的Linux发行版之一&#xff0c;其版本升级与维护策略直接影响了无数用户的开发和生产环境。Canonical公司为Ubuntu制定了明确的生命周期和发布节奏&#xff0c;使得社区、企业和开…
阅读更多...
viscode-插件

viscode-插件

vue组件生成&#xff1a; vue.json {"Print to console": {"prefix": "vue", "body": ["<!-- $1 -->","<template>","<div>","</div>","</template>&q…
阅读更多...
全面解析 TypeScript 泛型的二三事

全面解析 TypeScript 泛型的二三事

2024年了相信大家都已经在日常开发的过程中使用上了 TypeScript 了。TypeScript 增强了代码可靠性和可维护性&#xff0c;确保减少运行时错误并提高开发人员的工作效率。 TypeScript 通过类型声明 使得 javascript 拥有了强类型校验。而泛型的是类型声明中最重要的一环&#x…
阅读更多...
Git在多人开发中的常见用例

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

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

STM32F103C8T6核心板原理图和PCB分享

PCB图 原理图 资料下载地址&#xff1a; 原理图PCB库: https://545c.com/d/45573183-61875742-29897c?p7526 (访问密码: 7526)
阅读更多...
Unity【入门】场景切换和游戏退出及准备

Unity【入门】场景切换和游戏退出及准备

1、必备知识点场景切换和游戏退出 文章目录 1、必备知识点场景切换和游戏退出1、场景切换2、鼠标隐藏锁定相关3、随机数和自带委托4、模型资源的导入1、模型由什么构成2、Unity支持的模型格式3、如何指导美术同学导出模型4、学习阶段在哪里获取模型资源 2、小项目准备工作需求分…
阅读更多...
小柴带你学AutoSar系列一、基础知识篇（7）术语

小柴带你学AutoSar系列一、基础知识篇（7）术语

目录 缘起 AUTOSAR 专业术语 RH850 专业术语 其他相关术语 flechazohttps://www.zhihu.com/people/jiu_sheng 小柴冲刺嵌入式系统设计师系列总目录https://blog.csdn.net/qianshang52013/article/details/
阅读更多...
WordPress网站违法关键词字过滤插件下载text-filter

WordPress网站违法关键词字过滤插件下载text-filter

插件下载地址&#xff1a;https://www.wpadmin.cn/2025.html 插件介绍 WordPress网站违法关键词字过滤插件text-filter由本站原创开发,支持中英文关键字自动替换成**号&#xff0c;可以通过自定义保存修改按钮增加“预设关键字”&#xff0c;也可以导入定义好的txt文本形式的关…
阅读更多...
医院挂号系统小程序的设计

医院挂号系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;患者管理&#xff0c;医生管理&#xff0c;专家信息管理&#xff0c;科室管理&#xff0c;预约信息管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;专家信息&#xff0…
阅读更多...
算法011：最大连续的1的个数

算法011：最大连续的1的个数

最大连续的1的个数. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/max-consecutive-ones-iii/ 乍一看&#xff0c;这道题很奇怪&#xff0c;什么叫最多翻转k个0&a…
阅读更多...
Raylib实现拖拽视口显示

Raylib实现拖拽视口显示

拖拽看左上角数字 #include <raylib.h> // 重整原因&#xff1a;解决新函数放大缩小之下&#xff0c;raylib 的网格采样部分&#xff0c;选择数组的一部分刷新倒缓冲区里 // 从直接建立缓冲区&#xff0c;到先在数组里进行移动&#xff0c;然后再设置检查缓冲区// 最大距…
阅读更多...
批量文本编辑管理神器：一键修改多处内容，轻松转换编码，助力工作效率飞跃提升！

批量文本编辑管理神器：一键修改多处内容，轻松转换编码，助力工作效率飞跃提升！

在信息爆炸的时代&#xff0c;文本处理已成为我们日常工作中不可或缺的一部分。无论是处理文档、整理数据还是编辑资料&#xff0c;都需要对大量的文本进行管理和修改。然而&#xff0c;传统的文本编辑方式往往效率低下&#xff0c;容易出错&#xff0c;难以满足现代工作的高效…
阅读更多...
JimuReport 积木报表 v1.7.7 版本发布，一款免费的报表工具

JimuReport 积木报表 v1.7.7 版本发布，一款免费的报表工具

项目介绍 一款免费的数据可视化报表工具&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完…
阅读更多...
go语言的异常处理机制

go语言的异常处理机制

error 在go语言中&#xff0c;异常被定义为实现了error接口的类型&#xff0c;error接口只定义了一个返回string类型Error&#xff08;&#xff09;方法&#xff0c;任何实现了Error()方法的类型都可以被定义为异常&#xff0c;以下是一个自定义的异常类型&#xff1a; typ…
阅读更多...
28行代码完成深度学习模型——线性模型 01

28行代码完成深度学习模型——线性模型 01

在这里插入代码片## 线性模型 机器学习中的线性模型是一种预测模型&#xff0c;它基于线性关系来预测输出值。这种模型假设输入特征&#xff08;自变量&#xff09;和输出&#xff08;因变量&#xff09;之间存在线性关系。线性模型通常具有以下形式&#xff1a; y x*w b 其…
阅读更多...
代码随想录算法训练营第二十七天|452. 用最少数量的箭引爆气球、435. 无重叠区间、763.划分字母区间

代码随想录算法训练营第二十七天|452. 用最少数量的箭引爆气球、435. 无重叠区间、763.划分字母区间

452. 用最少数量的箭引爆气球 如何使用最少的弓箭呢&#xff1f; 直觉上来看&#xff0c;貌似只射重叠最多的气球&#xff0c;用的弓箭一定最少&#xff0c;那么有没有当前重叠了三个气球&#xff0c;我射两个&#xff0c;留下一个和后面的一起射这样弓箭用的更少的情况呢&am…
阅读更多...
生成式AI的短板在于“Token”的存在

生成式AI的短板在于“Token”的存在

生成式AI模型处理文本的方式与人类不同。理解它们基于“token”的内部环境&#xff0c;可能有助于解释一些奇怪行为和固有局限性。 从小型设备上的Gemma到OpenAI领先行业的GPT-4o&#xff0c;大多数模型都是基于一种称为Transformer的架构。由于Transformer在将文本与其他类型…
阅读更多...
Golang | Leetcode Golang题解之第220题存在重复元素III

Golang | Leetcode Golang题解之第220题存在重复元素III

题目&#xff1a; 题解&#xff1a; func getID(x, w int) int {if x > 0 {return x / w}return (x1)/w - 1 }func containsNearbyAlmostDuplicate(nums []int, k, t int) bool {mp : map[int]int{}for i, x : range nums {id : getID(x, t1)if _, has : mp[id]; has {retu…
阅读更多...
电商利器——淘宝商品月销量API接口解析

电商利器——淘宝商品月销量API接口解析

在电商时代&#xff0c;数据就是金钱。对于淘宝商家而言&#xff0c;掌握商品的销量数据无异于掌握了市场的脉搏。如今&#xff0c;淘宝商品月销量API接口的出现&#xff0c;联讯数据让商家如虎添翼&#xff0c;能够更加精准地把握市场动态&#xff0c;优化商品策略。 淘宝商…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023