一、 HTML学习归纳

在这几次的学习中，我了解到了什么是HTML以及如何撰写HTML文档

1、HTML及其结构

在这一章节中，我学习到了什么是HTML、如何构建一个HTML文档以及它的结构。
（1）什么是HTML：HTML指的是超文本标记语言，它的用途是构建Web页面，每个网页的背后都是一个HTML文档。
（2）如何构建HTML文档：首先要先新建一个工作目录，然后在该工作目录下后缀名为html的文件，可以通过安装插件open in browser 来查看结果。
（3）HTML的结构：HTML由元素组成，而元素由一对标签构成（包含有开始标签和结束标签），标签中标记了元素的不同类型。注意结束标签中要比开始标签多一个斜杠。并且标签不分大小写，建议使用小写。
在这里插入图片描述

（4）注释：由记号包裹，输入Ctrl + /即可快捷的进行注释

在这里插入图片描述

（5）空元素：只有一个开始标签的元素，作用是为了插入和嵌入一些东西，比如
在这里插入图片描述
（6）元素的属性
属性包含三个元素：分别是一个空格（在属性和元素名称之间），属性名称加一个等号，以及一个属性值，由对引号引起来。

2、标题

HTML有6级标题，编号从1到6
在这里插入图片描述
注意标题的功能不应该用于对正文的文字进行放大加粗。

3、文本格式

需要知道的文本格式标签如下，其余的不建议用于设置格式

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

可以看到效果如下：
在这里插入图片描述

4、超链接a

超链接常用于添加文本或图片

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

在href之后添加要跳转的地址URL
target属性：
_blank 在新的页面打开超链接
_self 在当前页面打开超链接
标签中为显示在页面上以供用户点击的

锚点：用于标记页面的某个元素或位置，用来实现长页面中的跳转。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...

在这里要注意两点：

id的值是唯一的
超链接中的地址要有#号

5、图片及文件路径

插入图片的语句：

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

注意

src为图片文件的路径（这里的目录要注意当路径为相对路径的情况
alt为获取图片有问题时显示的文字
指定高与宽度不推荐

6、表格、表单、列表

在呈现方式上，还可以有表格、表单以及列表三种形式

7、区块和内联

二者的区别在于：

区块以新行开始和结束，有以下这些元素
内联不会新起一行，而是一个接一个

8、特殊格式

需要显示特殊格式的文本，可以使用pre标签

二、CSS学习归纳

1、什么是CSS

网页由HTML的元素构建出来还远远不够，这些元素以什么样的布局、版式以及页面最终呈现出的效果也很重要，这就关系到接下来要学习的CSS了。

2、CSS语法

一条CSS语句由两个部分组成，分别是选择器和由{}所包裹的一条或多条声明。
选择器是需要改变样式的对象，而声明由一个属性和一个值组成，声明可以有一条或者多条。
格式如下：

p{
  color:red;
  text-align:center;  /* 文本居中 */
}

选择其可以分为元素选择器、id选择器和class选择器，其中class选择器使用较为普遍。
选择器还可以组合使用。

3、CSS生效的方法

CSS生效的方法有三种

外部样式表：在项目目录下建一个文件夹专门存放样式表文件
内部样式表：将样式放在HTML文件中，规则较少时使用
内联样式：直接将样式规则写到元素中，较少使用
三者的优先级：哪个离元素距离越近，就生效

4、颜色、尺寸、对齐

颜色可以采用RGB16进制值
尺寸可以用height和width 设置；常见尺寸有：px、%
文本可以通过设置text-align的属性为left,center,right

5、盒子模型

盒子几个部分组成

Content：内容，比如文本、图片
Padding：内边距，内容和边框的距离
Border：边框，默认不显示
Margin：外边距，边框意外与其它元素的区域
从下图看更加清晰：

一个元素真正占的宽度是：左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
注意，width只设置内容的宽度

6、边框与边距

边框的设置可以通过以下代码：

.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;
}

边距的设置：

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属性用于定位，只有使用它之后才能使用top, bottom, left, right它有以下的值：

static：默认，按正常的布局进行
relative：相对于正常位置进行偏移
fixed：固定定位，使元素固定不动
absolute：绝对定位，相对于最近的设置了定位属性（非static）的父元素

8、溢出

元素超过指定区域时，使用overflow属性处理溢出的部分，属性有几个值：visible、hidden、scroll、auto

9、浮动

设置float，让某元素水平方向上向左或右进行移动

10、不透明度

设置opacity ，值从0.0到1.0间，越低，透明度越高

11、伪类和伪元素

定义元素的特定状态或位置
语法如下：

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

三、学习总结

在这一章节的学习中，我先了解到了什么是HTML、HTML的结构以及一些非常基本的知识点。在这里构建的网页只是一些最基本的网页，如果需要完成一个更完整的网页，还需要学习怎样去布局，去进行装饰，这就关系到接下来学习的有关CSS的内容了，它主要是通过选择器对元素进行修饰，我了解到了有关CSS的一些基本知识点。

原文链接：https://blog.csdn.net/chelseafall/article/details/125419230

目录