HTML的讲解

2023-11-30 00:04:20 浏览数 (1)

什么是HTML？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言我们来看看百度百科对HTML的定义：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

用我自己的一句话来说就是：HTML是用来描述网页的标记语言

那我们为什么要学HTML呢？

  1. 有利于设备解析，让不同的设备（如屏幕阅读器、盲人阅读器、移动设备）更好的渲染网页来反馈给不同的人群去理解网页内容
  2. 有利于SEO,和搜索引擎建立良好沟通,让搜索系统更好的理解网页，然反馈给搜索的用户，提高网页的搜索权重
  3. 当网页加载慢导致CSS文件还未加载时（没有CSS），可以让页面仍然清晰、可读、好看，优化用户体验。
  4. 使代码更具可读性，便于团队开发和维护。

那接下来就让我来学习HTML，首先我们先来了解页面的整体

一、HTML的基本语法规则

  • 文档的扩展名为.html或.htm
  • HTML标签不区分大小写,推荐小写
  • 元素可嵌套，可以包括属性的额外信息
  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta属性值推荐用双引号包裹，某些属性值可以省略，比如required、readonly
  • 某些属性值可以省略，比如required、readonly

二、整体结构

让我们想看看一个完整的HTML代码

代码语言：html复制
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!--用于移动端，定义设备屏幕上用来显示网页的区域-->
    <meta name="keywords" content="html" />
    <meta
      name="description"
      content="这是页面的描述，如果存在，则会在搜索引擎的结果中显示"
    />
    <title>title</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

三、具体标签的意义

<!DOCTYPE html> 放在HTML页面前面的位置，加上之后就会按照W3C的HTML5标准渲染页面

<html> 页面根元素,所有的网页内容元素都要在<html>里面

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

<body> 包含用户可以看到的文本

<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词

script：

代码语言：javascript复制
<script type="text/javascript" src="index.js" defer>  异步下载脚本，页面完全加载后开始加载脚本

常用元素

内联元素(inline)

特性： 只占据它对应标签的边框所包含的空间只能容纳文本或其他内联元素 只能通过修改水平边距、边框或者行高的方式改变尺寸 常用的内联元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块级元素(block)

特性： 占据其父元素的整行。总是从新行上开始能容纳其他块元索或者内联元素 可以控制宽高、行高、边距、边框等改变其尺寸 常用的块级元素:<div>、<p>、ch1>-eh6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

行内块级元素(inline-block)

特性： 元素在行内排列，不会独占一行·支持设置宽高以及垂直边距、边框 常用的内联元素:<img>、<input>、<td>

示例：

image.pngimage.png
区分网页的模块

<header>...</header>

展现介绍性的信息，导航，标题，logo，搜索框，作者名称等

<nav>...</nav>

提供导航链接，如菜单，目录，索引等，常常被包含在<header>里面

<main>

页面主体部分

<article>

独立的文档，页面，应用，帖子

<section>

按主题将内容隔开，内含标题

<aside>

与整体没太大关系的部分或文章目录，例如广告，tips，引用内容等，常在侧边栏

<footer>

表示章节页脚，包含该章节作者，版权数据或文档链接等信息

image.pngimage.png
语义化-文本类

<cite>

引用作品标题

<time datetime="2001-5-15 19:00">May 15</time>

引用机器可读的时间日期，datetime 为此元素关联的日期，会被解析

<address>联系信息

<mark>表示需要注意的部分

<code>代码

<small>免责声明，注意事项

多媒体元素

<img />
  • src 图片路径
  • alt 对图片的文本描述
  • decoding = "async" 异步
  • loading="lazy" 懒加载
<picture />
  • 通过<source>和一个<img>为不同的显示/设备场景提供图像版本
  • media 属性:依据当前环境下支持类型渲染相应的图片，类似媒体查询
  • type 属性：MIME 类型

例：

代码语言：html复制
<picture>
  <source srcset="xxx.webp" type="image/webp" />
  <img  loading="lazy" src="xxx.jpg" />
</picture>
<video>/<audio> 音视频
  • src 属性，嵌入视频的路径
  • controls 是否显示控件或自定义控件
  • autoplay 是否自动播放
  • source 表示视频的代替资源（会在音视频读取失败后尝试此属性）

HTML 解析（dom 树）

字节流->DOM 树->样式计算生成 CSSOM 树->渲染引擎生成 Render 树->布局计算并绘制到页面

image.pngimage.png

最后给大家推荐两个好用的HTML学习/查询网站

MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

W3C HTML5 :https://html.spec.whatwg.org/multipage/

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞