HTML & CSS 学习总结

Anthology__

于 2023-06-16 11:16:52 发布

阅读量182

点赞数 1

文章标签： html css web

本文链接：https://blog.csdn.net/Anthology__/article/details/131236081

版权

一、HTML的学习总结

1、HTML含义

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

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

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

2、HTML文档结构

具体实例：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

3、HTML文档的相关说明

3.1、HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

例：<h1>这是一个标题</h1>

3.2、HTML段落

HTML 段落是通过标签 <p> 来定义的，如果在不产生一个新段落的情况下换行，用<br>标签

例：<p>这是一个段落。</p>

<p>这个<br>段落<br>演示了分行的效果</p>

3.3、HTML链接

HTML 链接是通过标签 <a> 来定义的，语法：<a href="url">链接文本</a>

例：<a href="https://www.runoob.com">这是一个链接</a>

——target属性：使用 target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：

例：<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

——id属性：id 属性可用于创建一个 HTML 文档书签。

例：<a id="tips">有用的提示部分</a>

3.4、HTML图像

HTML 图像是通过标签 <img> 来定义的

例：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径除了上述所显示的绝对路径之外，还有相对路径，以下是相对路径的例子：

`<img src="picture.jpg">`	该图片文件与当前文档在同一目录中
`<img src="./images/picture.jpg">`	该图片文件在当前目录下的`images`目录中
`<img src="../picture.jpg">`	该图片文件在上一级目录中
`<img src="/picture.jpg">`	该图片文件在网站根目录中

上表中，./表示当前目录，../表示上一级目录

3.5、HTML属性

常用属性参考：
class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id：定义元素的唯一id
style：规定元素的行内样式（inline style）
title：描述了元素的额外信息 (作为工具条使用)

3.6、HTML注释

开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要。

例：

3.7、HTML<head>

<head> 元素包含了所有的头部标签元素,

在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

3.8、HTML表格Table

代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元

3.9、HTML列表List

列表来呈现内容的时候，分为无序列表和有序列表。

无序列表：

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

有序列表：

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

3.10、HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用 <form> 标签来创建表单:

呈现效果如下：

二、CSS总结

1、何为CSS

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

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

2、CSS语法

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

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

2.1、CSS注释

CSS注释以 /* 开始, 以 */ 结束。例：/*这是另一个注释*/

3、CSS id和class选择器

3.1、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

例：#para1
{
text-align:center;
color:red;
}

注：ID属性和class的类名不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

3.2、class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

例：.center {text-align:center;}

p.center {text-align:center;} /*在此实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:*/

4、CSS样式表

4.1、外部样式表(External style sheet)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>

</head>

4.2、内部样式表(Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表：

4.3、内联样式(Inline style)

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

5、CSS背景

5.1、背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中

例：body {background-color:#b0c4de;}

5.2、背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

例：body {background-image:url('paper.gif');}

5.3、背景图像——水平或者垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺，有些时候如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

6、CSS文本

6.1、文本的对齐方式

h1 {text-align:center;} /*文本居中*/

p.date {text-align:right;} /*文本右对齐*/

p.main {text-align:justify;} /*文本每一行被展开为宽度相等，左，右外边距是对齐*/

6.2、文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

6.3、文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写：

p.uppercase {text-transform:uppercase;} /*文本转换大写*/

p.lowercase {text-transform:lowercase;} /*文本转换小写*/

p.capitalize {text-transform:capitalize;} /*文本转换首字母大写*/

6.4、文本缩进

文本缩进属性是用来指定文本的第一行的缩进：

p {text-indent:50px;}

7、CSS盒子模型

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

例：

div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

8、CSS边框和轮廓

8.1、边框

border-style属性用来定义边框的样式

在CSS中，可以指定不同的侧面不同的边框：

{ border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid; }

在CSS中，也可以指定不同的侧面不同的边距：

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

8.2、CSS轮廓

所有CSS 轮廓（outline）属性：

outline:在一个声明中设置所有的轮廓属性

outline-color:设置轮廓的颜色

outline-style：设置轮廓的样式

outline-width：设置轮廓的宽度

9、CSS Position(定位)

9.1、static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

例：div.static { position: static; border: 3px solid #73AD21; }

9.2、fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed

{ position:fixed;

top:30px;

right:5px; }

9.3、relative 定位

相对定位元素的定位是相对其正常位置。

9.4、absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2 { position:absolute;

left:100px;

top:150px; }

9.5、sticky 定位

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky { position: -webkit-sticky; /* Safari */

position: sticky;

top: 0;

background-color: green;

border: 2px solid #4CAF50; }

10、CSS浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

例：img { float:right; }

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

例：.text_line
{
clear:both;
}

11、CSS组合选择器

11.1、后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p { background-color:yellow; }

11.2、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p { background-color:yellow; }

11.3、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p { background-color:yellow; }

11.4、后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p { background-color:yellow; }

12、伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：

鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常
…
使用伪类/伪元素的语法如下：

/∗选择器后使用 : 号，再跟上某个伪类∗/
selector:pseudo-class/pseudo-element {
property:value;
}
/∗选择器后使用 :: 号，再跟上某个伪元素∗/
selector::pseudo-element {
property:value;
}
为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。