HTML&CSS 学习总结_通过学习css和html学到了什么-CSDN博客

本文链接：https://blog.csdn.net/qq_59826941/article/details/125701590

HTML

1.HTML是什么？

HTML是超文本标记语言（HyperText Markup Language）的缩写，我们用HTML来构建Web页面。它定义了网页内容的含义和结构，HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML文件应是一个后缀名为html的文件。

1.1.HTML文档结构

HTML元素：

HTML使用“标记”来注明文本、图片和其他内容，便于在浏览器中显示。该标记包含一些规定的“元素”，如：<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。

一个元素由开始标签（<p>）,内容和结束标签（</p>）相结合，便是一个完整的元素。

HTML文档：

1.<!DOCTYPE html>

用于声明文档类型。
2.<html></html>:<html>元素

这个元素包裹了整个完整的页面，是一个根元素，其它元素都包含在其中。
3.<head></head>: <head>元素

这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
4.<meta charset="utf-8">:

这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。它能在以后避免很多其他问题。
5.<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">:

指定页面的图标，出现在浏览器标签上。
6.<title></title>:

设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
7.<body></body>: <body>元素

包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

8.<!--和--!>

注释内容

9.<h> </h>

HTML中拥有<h1> <h2> <h3> <h4> <h5> 五级标题，通常用于板块内容的标题。其中<h1> 样式大于其他几个，以此类推。

10.<p> </p>

<p>元素中所包含的文本，自成一个段落。

11.<br> </br>

<br>换行标志，自成一个段落，相当于回车符。

12.<a></a>

通常用于长页面内实现跳转

13.<img> </img>

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

绝对路径：

下面是相对路径的例子：

该图片文件与当前文档在同一目录中

该图片文件在当前目录下的images目录中

该图片文件在上一级目录中

14.<table> </table>

使用<table>标签表示：

15.<ul> </ul>和 <ol></ol>

<ul><li></li></ul>格式为无序列表。

<ol><li></li></ol>格式为有序列表。

16.<form> </form>

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。

2.CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。

2.1CSS语法

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

2.2CSS生效

我们一般有三种方法：外部样式表，内部样式表，内联样式。

2.3CSS盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：

html文件：

CSS文件：

2.4.定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态

relative 相对

fixed 固定

absolute 绝对

2.5.组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。

后代选择器

子选择器

2.6.伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：鼠标移到某元素上变换背景颜色,超链接访问前后访问后样式不同,离开必须填写的输入框时出现红色的外框进行警示,保证段落的第一行加粗，其它正常。

3.HTML&CSS学习总结

虽然第一次接触这门新的课程，但是通过本学期于HTML 和 CSS 的学习，我收获颇丰，对HTML和 CSS 有了基本了解，学会了简单的静态网站的构建，若我想要将网站写的更加美观，我就应该更加注重CSS的学习，若我要使网站的内容更加丰富，那么我就更应该加油努力学号HTML的相关操作。为了探知更多关于WEB的相关知识，我还需要更加的努力学习，学习的同时带有激情和兴趣，才能开发出更加优质的网站。