HTML&CSS学习总结

Galatea117

已于 2023-06-29 23:48:04 修改

阅读量430

点赞数

文章标签：学习

于 2023-06-29 20:59:40 首次发布

本文链接：https://blog.csdn.net/m0_72435248/article/details/131456314

版权

本文介绍了HTML的基本结构和元素，如文档类型声明、头部、主体标签，强调了HTML作为标记语言的角色。接着，概述了CSS的作用，展示了如何通过选择器和属性定义元素样式。内容涵盖颜色、尺寸、对齐方式，以及盒子模型、定位、浮动和不透明度等概念。此外，还提及了HTML的超链接、表格、列表和表单等元素，以及CSS的伪类和伪元素。

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

一、HTML学习总结

1.何为HTML

（1）HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

（2）定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

（3）HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

（4）HTML 文档包含了HTML 标签及文本内容。

2.HTML文档结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑 :) </p>
</body>
</html>

（1）<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无
（2）<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

（3）<head></head>: <head>元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

（4）<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。

（5）<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。

（6）<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

（7）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> 等等。

[元素构成]

（1）开始标签（Opening tag）：包含元素的名称（此处为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

（2）结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。

（3）内容（Content）：元素的内容。

（4）元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

4.HTML文档相关说明

4.1 注释：特殊的记号包括起来。

注：在 code 软件中，输入Ctrl + /即可快捷的进行注释！

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

注：<br>元素放到<p>元素之中——这被称作嵌套！

4.3 元素的属性：元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

一个属性必须包含如下内容：

1）一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)

2）属性名称，后面跟着一个 = 号。

3）一个属性值，由一对引号 "" 引起来。

5.标题（Heading）

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>。

因为搜索引擎使用标题为您的网页的结构和内容编制索引
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推

6. 文本格式

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。这些HTML标签被称为格式化标签。

<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

7. 超链接

超链接语法：

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

说明：

1）href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL(Uniform Resorce Locator)

2）target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）

3）超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

7.1 锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

eg：
<h2 id=“C4”>第四章论零号病人的重要性</h2>

<a> href=“#C4”>跳到第四章</a>

注意：

元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号

8. 图片及文件路径

（1）在页面中插入一张图：

说明：

1）src属性为要显示图片文件的位置 URL，即图片文件的路径

2）alt属性当获取图片出现问题时显示的文字（占位符）

3）可为图片指定高宽度，但不建议（可能导致图片变形）

（2）文件路径

1）绝对路径：<img src=“https://mdbootstrap.com/img/logo/mdb192x192.jpg” alt=“MDB Logo” width=“200” height=“200”>

2）相对路径：

9. 表格 Table

有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可：

  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）

10. 列表 List

我们也可以使用列表来呈现内容，分为无序列表和有序列表。

（1）无序列表

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

例如：

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ul>

(2)与序列表

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

例如：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

11. 表单 Form

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。

<input>:输入框。输入类型由type定义。

1）文本域（Text Fields）
文本域通过 <input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。注意：表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
2）密码字段
密码字段通过标签 <input type=“password”> 来定义, 注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。
3）单选按钮（Radio Buttons）
<input type=“radio”> 标签定义了表单的单选框选项。
4）复选框（Checkboxes）
<input type=“checkbox”> 定义了复选框。复选框可以选取一个或多个选项。
5）提交按钮(Submit)
<input type=“submit”>定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理。

12. 其他

HTML 的元素可以以称为区块 Division 或 内联 Inline 的方式进行显示。

12.1 区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

12.2 内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

12.3 预设格式

如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

12.4 特殊字符

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
原因是：在 HTML 中，某些字符是预留的。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

二、CSS总结

1. 何为CSS

1）CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

2）样式定义如何显示 HTML 元素

3）把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

4）外部样式表通常存储在 CSS 文件中

2.CSS语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器：一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

1）元素选择器：基本语法：元素名称{属性：值；}

例如： div
           {
               color: red;
           }

2）id选择器：

  #sky
           {
               color: blue;
           }

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。

3）类选择器：class选择器前面有.号

           .center
           {
               text-align:center;
           }

提示： 元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。

3. CSS如何生效

我们一般有三种方法：外部样式表，内部样式表，内联样式

3.1 外部样式表

引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

新建如下内容的一个 HTML文件（后缀为.html)；

在同一目录新建一个样式表文件mycss.css（注意后缀名为css）

3.2 内部样式表

我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

提示： 一般而言，只有页面的样式规则较少时可采用这种方式。

3.3 级联的优先级

这就涉及样式的优先级问题，从高到低分别是：

1）内联样式

2）内部样式表或外部样式表

3）浏览器缺省样式

提示： 其实，一句话可总结为哪个样式定义离元素的距离近，哪个就生效。

4. 颜色，尺寸，对齐

4.1 颜色:关键字#

1）十六进制颜色#

h1 {
color: #b71540;
}

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。

十六进制表示法（通常缩写为十六进制）是 RGB 的速记语法，十六进制范围为 0-9 和 A-F。当以六位数序列使用时，它们被转换为RGB数值范围，该范围为0-255，分别对应于红色，绿色和蓝色通道。

2）RGB颜色（红色，绿色，蓝色）#

h1 {
color: rgb(183, 21, 64);
}

RGB 颜色使用 rgb（）颜色函数定义，使用数字或百分比作为参数。这些数字需要在 0-255 范围内，百分比介于 0% 和 100% 之间。RGB在0-255刻度上工作，因此255将相当于100%，0到0%。
3）HSL（色相，饱和度，亮度）#

h1 {
color: hsl(344, 79%, 40%);
}

HSL 代表色调、饱和度和亮度。色相描述色轮上的值，从 0 到 360 度，从红色开始（同时为 0 和 360）。色调为 180 或 50% 将在蓝色范围内。这就是我们看到的颜色的起源。

饱和度是所选色调的鲜艳程度。完全不饱和的颜色（饱和度为）将显示为灰度。最后，亮度是描述添加光从白色到黑色的比例的参数。

4.2 CSS尺寸

height 设置元素的高度
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度
width 设置元素的宽度

4.3 对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐)。

5.盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

注意：一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

6. 边框与边距

无论边框、内边距还是外边距，它们都有上下左右四个方向。

6.1 边框

.example-1 {
border: 1px dotted black; /∗ 上下左右都相同 ∗/
}
.example-2 {
border-bottom: 1px solid blue; /∗ 只设置底部边框∗/
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /∗ 边框圆角 ∗/
}
.example-4 {
border-left: 5px solid purple;
}
6.2 边距

padding: 20px; /∗ 上下左右都相同 ∗/
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /∗ 简写形式，按上，右，下，左顺序设置 ∗/
padding: 25px 10px; /*∗简写形式，上下为25px，左右为10px ∗/

7.定位

position属性用于对元素进行定位。该属性有以下一些值：