HTML总结&CSS学习总结

躺躺躺平

已于 2022-06-22 14:03:44 修改

阅读量1.2k

点赞数 2

文章标签： html css 学习

于 2022-06-21 18:06:24 首次发布

本文链接：https://blog.csdn.net/m0_65791148/article/details/125395988

版权

HTML总结&CSS学习总结

文章目录

HTML总结&CSS学习总结
一、HTML总结
二、CSS总结

一、HTML总结

1. 何为HTML

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种用于定义内容结构的标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容

2. HTML 文档结构

HTML文档结构

<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无
<html></html>: <html>元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中
<head></head>: <head>元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等
<meta charset=“utf-8”>: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字，基本上它能识别你放上去的所有文本内容
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面
<body></body>: <body>元素包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等

3. HTML 元素

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。

3.1 HTML元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性语法

3.2 嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）
HTML 文档由相互嵌套的 HTML 元素构成

4. HTML文档相关说明

4.1 注释

如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释。为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号<!–和–>包括起来,比如：


提示： 在 VS code 软件中，输入Ctrl + /即可快捷的进行注释
注意： HTML 不区分标签的大小写，但建议全部使用小写

4.2 空元素

一般来说，元素都拥有开始标签、内容、结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>,<hr>, <input>, <img>,<a>等等。我们称其为空元素，如下：

<p>我可以<br>换行</p>

<hr>

<input>

4.3 元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容：

一个空格，在属性和元素名称之间 (如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号
一个属性值，由一对引号 “” 引起来

5. 标题 (heading)

标题（Heading）是通过<h1> - <h6>标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。
实例：
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
注意：
浏览器会自动地在标题的前后添加空行。
在页面中，标题非常重要：