likes
comments
collection
share

必须知道的 HTML 基础知识

作者站长头像
站长
· 阅读数 2

📢 大家好，我是小丞同学，一名大二的前端爱好者

📢 这篇文章是 HTML 基础部分的学习笔记

📢 非常感谢你的阅读，不对的地方欢迎指正 🙏

📢 愿你忠于自己，热爱生活

💡 知识点抢先看

  • 关于 HTML 历史

  • HTML 文档结构

  • HTML5 中的语义化标签

这是本系列文的第一篇，这次就简单点，不扯废话了，直接开搞吧！

一、HTML 简介

1. 网页三大元素

说到这个总是要提起前端三剑客，html、css、js ，它们三者在网页中有着明确的分工

  • html：网页的基本结构
  • CSS：网页的展示效果
  • JS：网页的功能与行为

2. HTML 是什么

HTML 也叫超文本标记语言， HyperText Markup Language 的缩写，用于构建网页基本结构及其内容的标记语言

超文本：文本中包含其他文本的链接

标记语言：将⽂本以及⽂本相关的其他信息结合起来，展现出关于⽂档结构，如：HTML、XML、KML、Markdown等

3. 发展历史

关于 HTML 的发展有着一段不短的历史，不断的改进着先前存在的问题

我想这样是我们学习的意义吧，去发现问题，解决问题，不断成长，慢慢变强

  • 伯纳斯-李在 1989年 提出了基于互联⽹的超⽂本系统

  • 1993 年 IETF (互联⽹⼯程任务组)发布⾸个 HTML 提案，由此 HTML 语⾔第⼀版诞⽣

  • 在经历过⼏个草案之后 HTML 2.0 于 1995 年发布，包括了基于表单的⽂件上传、表格、国际化等功能

  • 1994 年 W3C 成⽴，随后接管了 HTML 的标准化⼯作，并在 1997 年发布了 HTML 3.2

  • 随后发布的 HTML4.0 中采⽤许多特定浏览器的元素类型和属性

  • 2014 年 HTML5 作为 W3C 推荐标准发布

没想到我现在天天念叨的 HTML5 已经是 2014 年发布的了 😂

二、HTML 的特点

HTML 标签通常由开始标签、结束标签、内容和元素组成

必须知道的 HTML 基础知识

当然也有一些标签没有结束标签，例如 img、input...

  • HTML ⽂档包含多个 HTML 元素，元素具备不同的特性

  • HTML 元素 = 开始标签 + 结束标签 + 元素内容

  • ⼀些元素只有⼀个标签，如 img、input、br 等

  • HTML 元素标签不区分⼤⼩写

  • 元素可以嵌套在其他元素中间

  • 元素可以拥有属性，属性包含有元素的额外信息

三、HTML 页面结构

1. 固定结构

在 VSCode 中书写 HTML ，让我们常常忘记了 HTML 中的固定结构

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title> 页面标题</title> 
    </head> 
    <body> 
        //xxx
    </body> 
</html>

  • <!DOCTYPE html> 放在 HTML 文档最前面，浏览器会按照 W3C的 HTML5 标准来解析渲染页面

  • <html> 根元素，包含整个页面的内容

  • <head> 对用户不可见，其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等

  • <body> 该元素包含能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等

2. meta

在 head 中我们可以通过 meta 标签来设置一些配置信息

<meta charset="utf-8"> 定义⽂档字符编码
<meta name="keywords" content="HTML"> 关键字
<meta name="description" content="HTML 基础"> ⻚⾯描述
<meta name="viewport" content="width=device-width, initialscale=1.0, maximum-scale=1.0, user-scalable=0"> 主要⽤于移动端，定义设备屏幕上⽤来显示⽹⻚的区域
<meta "http-equiv="expires" content="31 Dec 2021"> http头部

3. link

link 标签用来指定外部资源，建立HTML文档与外部资源的联系

常见的属性有三个

  • ref ：说明 HTML 页面与资源的关系类型，如 icon

  • type：指定 MIME 类型，如 text/css

  • href ：指定外部资源 URL

几种常见的用法

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
当前⻚⾯的favicon
<link rel="stylesheet" href="my-css-file.css">
链接到样式表
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
可替换的样式表

4. script

这里主要讲讲它的两个属性 defer 和 async

添加了 defer 的 script 标签会立即下载，延迟执行

添加了 async 的 script 标签会告诉浏览器不需要等脚本下载和执行完后再加载页面。

三者的区别在图中可以看出

必须知道的 HTML 基础知识

四、常用元素

1. 内联元素 inline

• 只占据它对应标签的边框所包含的空间

• 只能容纳⽂本或其他内联元素

• 只能通过修改水平边距、边框或者行高的⽅式改变尺⼨

• 常⽤的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

2. 块级元素 block

  • 占据其⽗元素的整⾏，总是从新行上开始

  • 能容纳其他块元素或者内联元素

  • 可以控制宽高、行高、边距、边框等改变其尺⼨

  • 常⽤的块级元素： <div>、 <p>、 <h1>、<h6>、 <ol>、 <ul>、 <dl>、 <table>、 <address> 、<blockquote>、 <form>

3. 行内块级元素 inline-block

  • 元素在⾏内排列，不会独占⼀⾏

  • ⽀持设置宽⾼以及垂直边距、边框

  • 常⽤的内联元素：<img>、<input>、<td>

必须知道的 HTML 基础知识

五、语义化标签

在 HTML5 之前，div 标签被滥用，导致了代码可读性降低等问题

在 HTML5 中提出了一套语义化标签，它让代码更利于阅读、可维护性更高，更好的被机器解析

HTML5 标签更加的适合阅读

<header></header>
<section>
	<section>
    	<figure>
        	<img>
            	<figcaption></figcaption>
        </figure>
    </section>
</section>
<footer></footer>

1. 语义化 -- 区块标签

经典神图

这张图很好的展示了语义化标签的分工

必须知道的 HTML 基础知识

1. header

• 展现介绍性信息

• 通常包含⼀组介绍性或是辅助导航的元素，如标题、Logo、搜索框、

作者名称等

• 不能放在 <footer>、<address> 或者另⼀个 <header> 元素内部

通常是用来包裹头部导航的大盒子

必须知道的 HTML 基础知识

（某金代码）

2. nav

  • 在当前⽂档或其他⽂档中提供导航链接，如菜单、⽬录、索引等
  • ⽤来放置⼀些热门的链接，不常⽤的链接通常放到 footer ⾥置于底部
<nav>
	<ol>
        <li><a href="#">HTML</a></li>
        //xxxx
    </ol>
</nav>

3. article

  • 独⽴的⽂档、页面、应⽤、站点
  • 可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提交的评论、交互式组件等

4. section

  • 按主题将内容分组，通常会有标题
  • <section> 通常出现在⽂档的⼤纲中
  • 不要把 <section> 作为普通容器来使用，比如说用于美化片段样式，此时用 <div> 更合适
  • 如果元素里边是独立的整块的内容，可以单独发布，则更适合用 <article>

5. aside

  • 表示一个和其余页面内容几乎无关的部分，或者说单独拆出来不会影响整体的内容
  • 通常放在侧边栏，用于展示广告、 tips 、引用内容等等

6. footer

  • 表示最近一个章节的页脚
  • 通常包含该章节作者、版权数据或者文档链接等信息
  • footer 内的元素不属于章节内容，不包含在大纲中

2. 语义化 -- 分组

1. figure -- figcaption

  • <figure> 包裹被独⽴引⽤的内容：图表、插图、代码等，通常会有个标题
  • <figcaption> 与其相关联的图表的说明 / 标题，通常位于 <figure> 的第⼀个或最后⼀个
<figure>
    <figcaption>xxx</figcaption>
    <img src="" alt="">
</figure>

有点像我们标准的 logo 标签，

2. blockquote

  • 块级引⽤元素
  • cite 属性表示该来源的 url
<blockquote cite="http://baidu.com">
    <p>sdafkl</p>
</blockquote>

3. dl / dt / dd

  • 用于描述一组键值对。
  • 通常用于元数据、术语定义等场景。

3. 语义化 -- 文本

这些东西都没有怎么用过，呼呼呼~

1. cite

  • <cite> 元素通常用于引用作品标题
  • 包括论文、文件、书籍、电影等的引用

2. time

  • 机器可读的时间和日期
  • datetime 表示此元素关联的时间日期，若不指定则该元素不会被解析为日期

3. address

  • 联系信息

4. mark

  • 打标记，表示需要引起注意

5. code

  • 代码片段

6. small

  • 免责声明、注意事项等信息

4. 语义化 -- 多媒体

1. img

  • src 指定文件的路径，必须
  • alt 对图像的描述，当网速差时显示的文字
  • decoding 解码方式：异步还是同步
  • loading 懒加载，期待！
  • title 鼠标放置时显示的文字

2. picture

  • 包含多个 socurce 元素，与 img 不同的是，它可以提供多个版本的图像版本
  • media 类似媒体查询
  • type MIME 类型，根据浏览器支持渲染图片

3. 音视频

这里主要是两个标签 video 和 audio，它们的属性差不多

  • src 指定文件路径
  • controls 指定是否显示控件，也可以自己创建
  • autoplay 是否自动播放
  • source 可替代资源，在加载失败时，加载的资源，或者不同清晰度，不同格式，也就是备胎

📌 总结

最后，从这篇文章我们学到了以下的知识

  • HTML 历史
  • HTML 特点
  • HTML 文档结构
  • HTML5 中的语义化标签

最后的最后，可能有讲诉不明确的地方，请见谅

💌 如果文章有什么错误的地方，或者有什么疑问，欢迎留言，也欢迎私信交流