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&