Document

HTML & CSS 总结

2023-07-06
dfer
413
html css 前端

一、HTML总结

1.HTML概述

HTML 是超文本标记语言（ HyperText Markup Language ）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS ）或功能与行为（如 JavaScript），人们常把 HTML 、 CSS 、 JavaScript 统称为“Web网页三剑客”。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

2.常用HTML标签汇总

<html>: 定义HTML文档的根元素。
<head>: 定义文档的头部，包含了一些元数据信息。
<title>: 定义文档的标题，显示在浏览器的标题栏或标签页上。
<body>: 定义文档的主体内容。
<h1> to <h6>: 定义标题，从最重要的标题h1到次要的标题h6。
<p>: 定义段落。
<a>: 创建一个链接，可以链接到其他页面、文件或位置。
<img>: 插入图像。
<ul>: 定义无序列表。
<ol>: 定义有序列表。
<li>: 定义列表的项目项。
<div>: 定义文档中的一个分割区块，用于组织内容。
<span>: 定义文档中的一个行内区块，用于标记文本的一部分。
<table>: 定义表格。
<tr>: 定义表格中的一行。
<td>: 定义表格中的一个单元格。
<form>: 定义用户输入表单。
<input>: 定义用户输入字段。
<button>: 定义按钮。
<select>: 定义下拉列表。
<textarea>: 定义多行文本输入框。

3.HTML5

HTML5是HTML的第五个版本，相较于传统的HTML，HTML5引入了一些新的特性和改进。

语义化标签：HTML5引入了一系列语义化的标签，如<header>、<nav>、<section>、<article>、<footer>等，在完成课程设计时便采用了<section>和<footer>两种标签。
新的表单元素：HTML5新增了一些表单元素，如<input type="date">、<input type="email">、<input type="url">等，在完成课程设计的过程中便使用了“email”类型，用于输入用户邮箱。
画布和绘图：HTML5引入了<canvas>元素，使得开发者可以通过JavaScript绘制图形、动画和图像等。
更强大的CSS支持：HTML5对CSS3的支持更好，引入了一些新的样式属性和选择器，如圆角边框、阴影效果、过渡和动画等，可以实现更丰富的页面样式和交互效果。如在本次课程设计中便利用到了HTML5的这项特性，使用@keyframes关键字定义一组关键帧，然后通过animation属性将动画应用到元素上。例如：

@keyframes float{
  0%, 100%{
    transform: translateY(0rem);
  }
  50%{
    transform: translateY(3rem);
  }
}

以上CSS代码便实现了本次课程设计中主页图片的浮动。

4.HTML的一些妙用

使用按钮效果呈现超链接效果

以下是在课程设计中利用按钮效果呈现超链接效果的示例。

首先是HTML中的代码：

<a href="#speciality" class="goto-next btn">时光穿梭……</a>

其次是CSS中对按钮格式的设置：

.btn{
  display: inline-block;
  padding:.8rem 3rem;
  border:.2rem solid var(--red);
  color:var(--red);
  cursor: pointer;
  font-size: 1.7rem;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
}

.btn::before{
  content: '';
  position: absolute;
  top:0; right: 0;
  width:0%;
  height:100%;
  background:var(--red);
  transition: .3s linear;
  z-index: -1;
}

.btn:hover::before{
  width:100%;
  left: 0;
}

.btn:hover{
  color:#fff;
}

最后，进入界面观察，下图中的“时光穿梭……”按钮实质上为一个超链接标签，但在形式上呈现出一个按钮。

在这里插入图片描述

下图为点击按钮后按钮呈现的样式，如下图中左下角显示。当点击该按钮后页面将跳转至“#speciality”对应的页面，即“人物介绍”页面。

在这里插入图片描述

利用按钮效果呈现超链接效果，用户在使用及观感上都会更好，页面将更友好，更具交互性。

二、CSS总结

1.CSS概述

CSS（层叠样式表）是一种用于描述网页样式和布局的语言。它与HTML结合使用，用于控制网页的外观和呈现效果。
CSS的设计目标是将网页的结构（由HTML定义）与样式（由CSS定义）分离，使得样式可以被独立地管理和修改，从而提高开发的灵活性和维护性。
概念解释
- 选择器: CSS使用选择器来选中HTML元素，并将样式应用于这些元素。常用的选择器有元素、类、ID、后代选择器。例如，h1选择器选中所有<h1>标签，.class选择器选中具有某个类名的元素。
- 属性和值: CSS的样式是通过属性来定义的，用于控制元素的具体样式。例如，color属性控制元素的文本颜色，font-size属性控制文本的大小。每个属性都具有一个值（每个CSS属性可以接受一组可能的值，例如，color属性可以接受颜色值如red、#ff0000或者rgb(255, 0, 0)）。
- 响应式设计: CSS可以根据屏幕大小和设备特性来自适应网页的布局和样式。通过使用媒体查询（Media Queries）等技术，开发者可以为不同的设备提供不同的样式和布局。如在本课程设计中设置的响应式设计，代码如下：
```
//使用媒体查询（@media），在屏幕宽度小于等于991像素时作出了一些样式调整。
@media(max-width:991px){
  html{
    font-size: 55%;
  }
  header{
    padding:2rem;
  }
  section{
    padding:2rem;
  }
}

//使用媒体查询（@media）和选择器，根据屏幕宽度小于等于450像素时的情况作出了一些样式调整。
@media(max-width:450px){
  html{
    font-size: 50%;
  }
  .order .row form .inputBox input{
    width:100%;
  }
}
```
  这样的响应式设计能够优化用户体验，并确保网页在不同的设备上都能以最佳方式呈现。

2.使CSS样式作用于HTML的四种方式

内联样式
在HTML标签内部使用style属性，如以下代码所示：

//将p标签设置为文本居中对齐
<p style="align-items: center;"></p>

内部样式
在HTML中定义style标签，在其中用相关选择器进行CSS样式设置。

//将p标签设置为文本居中对齐
<style>
        p{
            text-align: center;
        }
 </style>

外部样式
在HTML中定义link标签，在其href属性中写入外部CSS文件的路径。

//将p标签设置为文本居中对齐
//HTML文件内容
<link href="./demo.css" rel="stylesheet">
//CSS文件内容,其文件名为“demo.css”
p{
     text-align: center;
 }

伪类和伪元素（特殊）
- 伪类：
  伪类用于选择元素的特定状态或行为。它们以冒号（:）开头，并附加在选择器的末尾。本人所熟悉的伪类包括：
  - :hover：当鼠标悬停在元素上时应用的样式。
  - :active：当元素处于活动状态（被点击且未释放鼠标按钮）时应用的样式。
  - :focus：当元素获得焦点时应用的样式。
- 伪元素：
  伪元素用于在元素的特定位置创建虚拟元素并添加样式。它们以双冒号（::）开头，并附加在选择器的末尾。本人所熟悉的伪元素包括：
  - ::before：在元素内容之前插入一个虚拟元素。
  - ::after：在元素内容之后插入一个虚拟元素。

3.CSS常用属性

color：控制文本颜色。
font-size：控制字体大小。
font-family：指定字体系列或字体名称。
text-align：控制文本的对齐方式，如左对齐、右对齐、居中对齐。
background-color：控制元素的背景颜色。
background-image：设置元素的背景图像。
width和height：控制元素的宽度和高度。
margin和padding：控制元素周围的外边距和内边距。
border：设置元素的边框样式，包括宽度、颜色和样式。
display：定义元素的显示类型，如块级元素、内联元素、弹性元素等。
position：控制元素的定位方式，如相对定位、绝对定位、固定定位等。
float：控制元素的浮动方式，使其脱离文档流并与周围的元素进行布局。
opacity：控制元素的透明度。
transition：设置元素进行过渡动画效果的属性。
box-shadow：为元素添加阴影效果。

具体说明一下CSS高度和宽度设置的尺寸单位，现对常见的尺寸单位做如下总结：

像素（px）：最常用的绝对单位，指定具体的像素值，如 width: 200px;。
百分比（%）：相对于父元素的单位，可以用于设置宽度、高度和位置等属性。例如，width: 50%; 表示相对于父元素宽度的 50%。
相对单位：
- rem：相对于根元素的字体大小。例如，如果根元素的字体大小为16px（1rem），font-size: 1.5rem; 表示字体大小为根元素字体大小的 1.5 倍。
- vw：相对于视窗宽度的百分比。例如，width: 50vw; 表示相对于视窗宽度的 50%。
- vh：相对于视窗高度的百分比。例如，height: 50vh; 表示相对于视窗高度的 50%。

这些尺寸单位都有不同的用途和特性，可以根据具体需要选择合适的单位。使用百分比单位可以实现相对布局和响应式设计，而相对单位则可以帮助在整个文档中进行快速的尺寸调整。对于视窗相关的尺寸单位，可以用于创建适应不同屏幕尺寸的响应式布局。

4.Flex布局

Flex布局（弹性盒子布局）是一种用于在容器中灵活排列和对齐元素的CSS布局模型。

首先解释相关概念：

容器：应用Flex布局的父元素称为容器。通过设置容器的display属性为flex或inline-flex，将容器转换为一个Flex容器。
项目：Flex容器内的子元素称为项目。这些项目根据Flex容器的定位规则进行布局和排列。
主轴（Main Axis）和交叉轴（Cross Axis）：Flex布局有两个主要的轴线，分别是主轴和交叉轴。主轴是Flex容器的排列方向，交叉轴则垂直于主轴。

再阐述常用的Flex属性：

flex-direction：指定主轴的方向，可以是row（水平方向，默认值）、column（垂直方向）、row-reverse（水平反向）或column-reverse（垂直反向）。
justify-content：定义项目在主轴上的对齐方式，可以是flex-start（左对齐，默认值）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或space-around（每个项目两侧的间隔相等）等。
align-items：定义项目在交叉轴上的对齐方式，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（第一行文字的基线对齐）或stretch（拉伸以填满容器高度，默认值）等。
flex-grow：定义项目的放大比例，默认为0，即不放大。如果给某个项目设置了非零的值，则该项目将相对于其他项目进行放大。
flex-shrink：定义项目的缩小比例，默认为1，即可以缩小。如果给某个项目设置了非零的值，则该项目将相对于其他项目进行缩小。
flex-basis：定义项目在主轴上的初始尺寸。可以是一个固定的值（如100px），也可以是一个相对的值（如50%）。
flex-wrap：定义项目是否允许换行。可以是nowrap（不换行，默认值）、wrap（换行）或wrap-reverse（反向换行）。

5.Grid布局

Grid布局是一种基于网格的CSS布局模型，用于将元素按行和列进行排列。它将父元素（容器）划分为行和列，然后将子元素（项目）放置在这些行和列上，从而创建灵活的网格布局。

首先解释相关概念：

容器（Grid Container）：通过设置父元素的display属性为grid，将其转换为Grid容器。
网格线（Grid Lines）：Grid容器的行和列都由网格线定义。行和列之间的交叉点形成网格单元格。
项目（Grid Item）：Grid容器内的子元素称为Grid项目。它们被放置在网格单元格中。
行和列的尺寸（Grid Track）：行和列的尺寸可以通过设置Grid容器的grid-template-rows和grid-template-columns属性来定义。可以使用固定的值（如像素、百分比）或自动计算的值。
网格单元格（Grid Cell）：网格单元格是行和列的交叉点，用于放置Grid项目。

再阐述常用的Flex属性：

grid-template-rows：定义网格行的尺寸。
grid-template-columns：定义网格列的尺寸。
grid-template-areas：通过给每个项目指定一个名称，创建一个可视化的网格布局。
grid-gap：定义网格行和列之间的间隙。
grid-row：定义项目跨越的行范围。
grid-column：定义项目跨越的列范围。
grid-area：定义项目的网格区域。
justify-items：定义项目在单个网格单元格内的水平对齐方式。
align-items：定义项目在单个网格单元格内的垂直对齐方式。

上一篇： css+js

下一篇：学习HTML & C