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 超链接

普通文本专用标签

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

在这里插入图片描述

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>

video 视频

display :inline 内联元素

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

在这里插入图片描述

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

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 常用标签实战范例

页面布局

相关推荐

  1. 2024新版 Xmind for Windows下载安装教程

    2024-07-10 23:50:03       65 阅读

最近更新

  1. redis+spring面试题

    2024-07-10 23:50:03       0 阅读
  2. 线段树分治+可撤销并查集 学习笔记

    2024-07-10 23:50:03       0 阅读

热门阅读

  1. 【创作纪念日】我的三周年创作纪念日

    2024-07-10 23:50:03       7 阅读
  2. Github 2024-07-07 开源项目日报 Top10

    2024-07-10 23:50:03       8 阅读
  3. 部署LVS-DR群集

    2024-07-10 23:50:03       5 阅读
  4. python的列表推导式

    2024-07-10 23:50:03       8 阅读
  5. pip常用命令详解

    2024-07-10 23:50:03       4 阅读
  6. 相机、镜头基础知识及硬件选型介绍

    2024-07-10 23:50:03       6 阅读
  7. 文心一言指令:快速入门手册

    2024-07-10 23:50:03       8 阅读