HTML & CSS 学习总结

qq_47067103

已于 2022-06-27 00:36:33 修改

阅读量184

点赞数

文章标签： html 学习前端

于 2022-06-27 00:30:11 首次发布

本文链接：https://blog.csdn.net/qq_47067103/article/details/125304845

版权

一、HTML学习

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页，HTML定义了网页内容的含义和结构。

1.HTML 文档结构分析

新建一个html文件(注意添加html的后缀)

如下图

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。一个 HTML 元素包括开始标签、结束标签、内容和元素几部分。

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

●结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

●内容（Content）：元素的内容，本例中就是所输入的文本本身。

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

2.HTML 文档相关说明

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

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

元素的属性

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

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

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

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

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

3.标题（heading）

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

4.超链接

可以把任何东西加上超链接

一个超链接如下:

点击"百度一下",就会跳转到百度界面

href即为要跳转去的地址 URL（Uniform Resorce Locator)

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

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

锚点

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

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

5.图片及文件路径 img

在页面插入一张图片如下：(绝对路径)

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符

相对路径:

6.表格 Table

使用<table>等标签

7.列表 List

列表分为有序列表和无序列表两种

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

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

8.区块元素和内联元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）

内联元素不是以新行开始

二、CSS学习

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

1.CSS的简单使用

在html文件中需要导入外部的css文件，在同一目录下新建一个css文件

注：导入的css文件与新建的css的文件名字要相对应

示例如下：

html文件：

css文件：

最终效果：

以上是外部样式表的使用，此外还有内部样式表和内联样式方法使用css,但引入外部样式表是目前使用样式的主流方式

2.CSS基本语法

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

选择器是需要改变样式的对象，每条声明由一个属性和一个值组成

id 选择器

示例如下：

注：id 选择器适用范围只有一个元素

class 选择器

示例：

class 选择器的前面有 .

元素的class值可以多个，也可以重复

3.颜色, 尺寸, 对齐

颜色

可以采用颜色名称或使用颜色RGB16进制值，来设定前景或背景的颜色

尺寸和对齐

height 和 width 设定元素内容占据的尺寸

常见的尺寸单位有：像数 px，百分比 %等

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right等

示例：

4.盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子

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

示例：

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

5.定位

position属性用于对元素进行定位

static

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。

relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移

fixed

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

此时滑动页面，发现左下角不会随着页面滚动而移动

absolute

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

6.溢出、浮动

溢出

当元素内容超过其指定的区域时，可以通过溢出overflow属性处理溢出的部分。
溢出属性有以下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

滚动可以单独对上下或左右方向进行，示例如下：

浮动

在一个区域或容器内，可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列

图片向右浮动示例如下：

7.不透明度

opacity可以对任何元素（不过常用于图片）设置不透明度
值在[0.0～1.0]之间，值越低，透明度越高

示例如下：

、

8. 组合选择器

后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素

如图，引用“haha”的显示为黄色，不引用的不显示为黄色

子选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素

如图所示，第三行是span元素下的p元素，但不显示为黄色

9.伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等

基本语法：

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

三、总结

html设计基本框架、图片、文本、表格等，css对html元素用选择器加以修饰，使用html与css相结合已经可以设计一些简单的页面；一般使用外部样式表调用css文件，但要注意的是html文件中要有调用css相对应文件名字的语句，html文件中在调用css选择器时也要有正确的调用语句。由于css的整体结构看起来很缭乱，特别是css语句有很多的时候，想修改或删除一些选择器时找起来十分麻烦，所以一般使用scss来代替css编写相关程序，再将scss转化成css格式。使用html和css编写一些简单页面不是很困难，但要设置复杂页面目前来说还很困难，还有待后续学习