HTML $ CSS基本用法总结

dnjr

已于 2022-06-16 15:42:00 修改

阅读量1.2k

点赞数

文章标签： html 前端 css

于 2022-06-14 18:40:50 首次发布

本文链接：https://blog.csdn.net/m0_64792558/article/details/125250311

版权

这篇博客详细介绍了HTML和CSS的基础知识，包括HTML的文档结构、标题、文本格式、超链接、图片、表格、列表、表单和CSS的语法、选择器、盒子模型、定位、组合选择器以及其他重要概念。通过实例展示了如何使用HTML和CSS构建网页，帮助读者理解这两门技术的基本用法。

摘要由CSDN通过智能技术生成

HTML & CSS学习总结

前言

本文讲的是关于HTML和CSS的一些基本用法

以下是正文

一、HTML&CSS是什么？

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

二、HTML使用文档

1.文档结构

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。

剖析一个 HTML 元素

如下所示的一个用于展示段落的元素，在这里插入图片描述：

1.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
2.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
3.内容（Content）：元素的内容，本例中就是所输入的文本本身。
4.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

剖析 HTML 文档

对于我们前面创建的 HTML 文档，分析如下：

<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
<html></html>: 这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Title</title>
</head>
<body>
</body>
</html>

2.标题与文本格式 heading

在页面中，标题非常重要：
搜索引擎用标题来索引页面的内容
用户也习惯以标题进行主要内容浏览，以决定是否查看该页面
代码如下（示例）：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

注意：除本节介绍的这些标签可用于文本的格式外，其它标签都不建议用来进行格式的设置，如：<font><big><center>等标签皆为不推荐使用的。HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要使用后面将要学习的 CSS。

<p>吾乃<mark>抽卡不歪真君</mark></p>
<p><del>吾乃抽卡不歪真君</del></p>
<p><s>吾乃抽卡不歪真君</s></p>
<p><ins>吾乃抽卡不歪真君</ins></p>
<p><u>吾乃抽卡不歪真君</u></p>
<p><small>吾乃抽卡不歪真君</small></p>
<p><strong>吾乃抽卡不歪真君</strong></p>
<p><em>吾乃抽卡不歪真君</em></p>

显示效果如下：

吾乃抽卡不歪真君

~~吾乃抽卡不歪真君~~

吾乃抽卡不歪真君

吾乃抽卡不歪真君

吾乃抽卡不歪真君

3.超链接与图片文件路径 img

超链接语法如下

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：

1.href即为要跳转去的地址 URL（Uniform Resource Locator)
2.target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3.超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
例子展示：

<!-- 文档其余部分 -->
<h2 id="C1">第一章 XXX</h2&

最低0.47元/天解锁文章

dnjr

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML $ CSS基本用法总结

本文讲的是关于HTML的一些基本用法HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。如下所示的一个用于展示段落的元素，在这里插入图片描述：1.开
复制链接

扫一扫