HTML & CSS 总结

一、HTML总结

1.HTML概述

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

  • HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS )或功能与行为(如 JavaScript),人们常把 HTMLCSSJavaScript 统称为“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

HTML5HTML的第五个版本,相较于传统的HTMLHTML5引入了一些新的特性和改进。

  • 语义化标签:HTML5引入了一系列语义化的标签,如<header><nav><section><article><footer>等,在完成课程设计时便采用了<section><footer>两种标签。

  • 新的表单元素:HTML5新增了一些表单元素,如<input type="date"><input type="email"><input type="url">等,在完成课程设计的过程中便使用了“email”类型,用于输入用户邮箱。

  • 画布和绘图:HTML5引入了<canvas>元素,使得开发者可以通过JavaScript绘制图形、动画和图像等。

  • 更强大的CSS支持:HTML5CSS3的支持更好,引入了一些新的样式属性和选择器,如圆角边框、阴影效果、过渡和动画等,可以实现更丰富的页面样式和交互效果。如在本次课程设计中便利用到了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属性为flexinline-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-rowsgrid-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:定义项目在单个网格单元格内的垂直对齐方式。