HTML基础 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天

什么是HTML？

HTML是超文本标记语言，是结构化Web网页及内容的标记语言。

HTML模板详解

<!DOCTYPE html> ：DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，必须声明在HTML文档第一行。
<html></html>：包含整个页面内容，称作根元素。
<head></head> ：内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8">：指定文档使用 UTF-8 字符编码。
<title></title> ：设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> ：包含用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

图像

定义

<img>：创建被引用图像的占位空间，从网页上链接图像。

必需属性

alt：值为text，规定图像的代替文本。

src：值为URL，规定显示图像的URL。

可选属性

width：设置图像的宽度。

height：设置图像的高度。

ismap：将图像定义为服务器端图像映射。

loading：规定浏览器是应该立即加载图像还是推迟加载屏幕外图像。

longdesc：属性规定指向图像描述信息页面的 URL。

标记文本

标题

最大是h1，最常用3-4级

<h1></h1>
...
<h6></h6>

段落

<p></p>: 定义段落, 会自动在其前后创建一些空白，属于块级元素。

列表

<li></li>：标签定义列表项目。

可用于：有序列表：<ul></ul> 无序列表：<ol></ol>

链接

<a></a>：定义超链接，用于从一张页面链接到另一张页面。<a>标签最重要的属性是 href 属性，它指示链接的目标。 w3school a标签详细用法

语义化

理解：用合适的标签元素写合适的内容。代码更简洁，增强了可读性，结构更加清晰，便于开发和维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

前端与HTML | 青训营笔记