Document

HTML5+CSS3概念与简介

2024-12-13
dfer
58
html 前端 CSDN

HTML（HyperText Markup Language）即超文本标记语言，它是构建网页的基础语言。

一、起源与发展

HTML 的第一个公开描述是在 1991 年，由蒂姆・伯纳斯 - 李（Tim Berners - Lee）提出。最初它是为了让科学家们能够更方便地共享和链接文档而设计的。随着互联网的蓬勃发展，HTML 也经历了多个版本的演变。从早期的 HTML 1.0，功能相对简单，主要用于文本的展示和简单的链接，到 HTML 4.01，它增加了更多的多媒体支持、样式表（CSS 开始与之协作）和脚本语言（如 JavaScript）的交互功能。现在，HTML5 已经成为主流，它进一步强化了对多媒体的支持，比如原生的音频和视频播放，并且提升了语义化程度，使搜索引擎能够更好地理解网页内容。

二、工作原理

浏览器解析
- 当你在浏览器中输入一个网页的网址时，浏览器会向服务器发送请求，服务器将 HTML 文件发送回浏览器。浏览器接收到文件后，会按照 HTML 的语法规则进行解析。它会识别各种 HTML 标签，如<head>、<body>等，根据这些标签的含义来确定如何在屏幕上显示内容。
- 例如，当浏览器遇到<h1>标签时，它知道这是一个一级标题，会以较大的字体和合适的样式来显示其中的内容；遇到<p>标签时，就会将其内容作为一个段落进行显示，并且会根据浏览器窗口的宽度自动换行。
文档对象模型（DOM）
- 浏览器在解析 HTML 文件时，会构建一个 DOM 树。DOM 把 HTML 文档表示为一个树形结构，其中每个 HTML 标签都是这个树的一个节点。例如，<html>标签是根节点，<head>和<body>标签是它的子节点。
- 这个结构对于 JavaScript 等脚本语言与网页进行交互非常重要。通过操作 DOM 树，JavaScript 可以动态地改变网页的内容、样式和行为。比如，可以通过 JavaScript 代码添加新的 HTML 元素、修改元素的属性或者删除元素。

三、基本语法

标签（Tag）
- HTML 是由一系列标签组成的。标签通常是成对出现的，包括开始标签和结束标签。例如，<body>是开始标签，</body>是结束标签，它们之间的内容就是<body>标签所定义的部分。
- 也有一些自闭合标签，如<img>（用于插入图像）和<br>（用于换行）。以<img src="image.jpg" alt="这是一张图片">为例，它不需要结束标签，因为它自身就包含了完整的信息，通过src属性指定图片的来源，alt属性指定图片的替代文字。
属性（Attribute）
- 标签可以有属性，属性用于提供关于标签的更多信息。如在<a href="https://www.example.com">链接</a>中，href就是<a>标签的一个属性，它的值是链接的目标网址。属性通常是在开始标签中定义，格式为属性名="属性值"。
嵌套（Nesting）
- HTML 标签可以相互嵌套。例如，在一个段落<p>标签中，可以包含<strong>（用于加粗）标签来强调某些内容，像<p>这是一个包含<strong>强调内容</strong>的段落。</p>。

四、语义化 HTML

重要性
- 语义化的 HTML 能够让搜索引擎更容易理解网页的内容结构。例如，使用<article>标签来标记文章内容，搜索引擎可以更好地识别这部分内容是独立的文章，从而提高在搜索结果中的排名。
- 对于屏幕阅读器等辅助技术也很重要。视力障碍者使用的屏幕阅读器可以根据语义化标签来更准确地为用户朗读网页内容，比如，当遇到<nav>（导航）标签时，用户就知道这部分内容是网页的导航信息。
常用语义标签
- <header>：通常用于网页的头部区域，包含网站标题、标志、导航栏等内容。
- <nav>：用于定义网页的导航链接部分。
- <article>：用于表示独立的文章内容，如博客文章、新闻报道等。
- <section>：用于划分网页的不同部分，如一个网页可以划分为多个部分，每个部分用<section>标签包裹。
- <footer>：用于网页的底部区域，包含版权信息、联系方式等内容。

什么是CSS3

CSS3（Cascading Style Sheets 3）是层叠样式表的第三个主要版本，它在网页设计和布局中起着至关重要的作用。

一、历史与发展

CSS 的发展经历了多个阶段。从早期的 CSS1，它主要用于简单的文本格式设置和基本的布局，如字体、颜色、边距等基础样式。CSS2 则进一步扩展了功能，包括更复杂的选择器、定位方式以及对媒体类型的初步支持。CSS3 在 CSS2 的基础上进行了大量的改进和新增功能，它并不是一个全新的技术，而是在 CSS2 的基础上逐步添加新模块。这些新模块使得网页设计更加灵活、高效和富有创意。

二、主要功能和特点

选择器增强
- CSS3 引入了许多新的选择器，使得对 HTML 元素的定位更加精准。例如：
  - 属性选择器：可以根据元素的属性来选择元素。如input[type="text"]，这个选择器会选择所有type属性为text的input元素，方便为特定类型的表单元素设置样式。
  - 伪类选择器的扩展：像:nth - child()伪类，可以选择某个父元素下的特定子元素。例如，li:nth - child(odd)会选择列表中所有奇数位置的li元素，这样就可以为奇数行和偶数行设置不同的背景颜色，增强列表的视觉效果。
  - 伪元素选择器：如::before和::after，它们可以在元素内容的前面或后面添加虚拟的内容。例如，通过p::before可以在每个段落的开头添加一个特殊的符号，丰富了文本的呈现方式。
盒模型的扩展
- CSS3 允许对盒模型进行更多的控制。除了传统的content、padding、border和margin属性外，还可以使用box - sizing属性来改变盒模型的计算方式。例如，设置box - sizing: border - box会将border和padding计算在元素的宽度和高度之内，这样在设置元素尺寸时就更容易控制布局。
背景和边框的创新设计
- 背景：
  - CSS3 支持多个背景图像，可以在一个元素上同时设置多个背景，并且可以分别对它们进行定位和调整。例如，background: url(bg1.jpg) no - repeat left top, url(bg2.jpg) no - repeat right bottom;可以在一个元素的左上角设置一个背景图像，在右下角设置另一个背景图像。
  - 还可以使用background - size属性来控制背景图像的大小，如background - size: cover会使背景图像覆盖整个元素，同时保持其纵横比，这在创建全屏背景等场景中非常有用。
- 边框：
  - 可以创建圆角边框，通过border - radius属性实现。例如，border - radius: 10px可以使一个矩形元素的四个角都变成半径为 10px 的圆角，让元素看起来更加柔和。
  - CSS3 还支持边框图像，通过border - image属性可以将一个图像应用到边框上，创造出独特的边框效果。
文本效果
- 文本阴影（text - shadow）：可以为文本添加阴影效果，增强文本的立体感。例如，text - shadow: 2px 2px 2px #ccc;会为文本添加一个水平和垂直偏移量为 2px，模糊半径为 2px，颜色为浅灰色（#ccc）的阴影。
- 多列布局（column - count和column - width）：能够将文本内容分为多列显示，模拟报纸或杂志的排版方式。例如，设置column - count: 3可以将一个长段落分成三列进行展示，提升页面的可读性和视觉吸引力。
2D 和 3D 转换
- 2D 转换：包括translate（平移）、rotate（旋转）、scale（缩放）和skew（倾斜）等操作。例如，transform: translate(50px, 100px);会将元素在水平方向移动 50px，在垂直方向移动 100px。这些转换操作可以通过transition属性实现平滑的过渡效果，当元素状态发生变化时，如鼠标悬停，能够以动画的形式展现变化过程。
- 3D 转换：CSS3 允许创建具有深度感的 3D 效果。例如，通过perspective属性设置透视效果，再结合rotateX、rotateY和rotateZ等操作，可以让元素在 3D 空间中旋转，为网页带来更具动感和立体感的视觉体验。
动画（@keyframes）
- CSS3 提供了强大的动画功能。通过@keyframes规则定义动画的关键帧，然后使用animation属性将动画应用到元素上。例如：

@keyframes myAnimation {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}
div {
    animation: myAnimation 3s ease - in - out infinite;
}

如何在HTML中引入和使用CSS3样式表？

在 HTML 中引入和使用 CSS3 样式表主要有以下三种常见方法：

一、内联样式（Inline Styles）

概念和语法
- 内联样式是直接在 HTML 标签内部使用style属性来定义样式。这种方式将样式直接应用于特定的元素，样式的作用范围仅限于该元素。
- 语法为：<标签名 style="属性1:值1;属性2:值2;...">元素内容</标签名>。例如，要将一个段落的文字颜色设置为红色，字体大小设置为 16px，可以这样写： <p style="color:red; font - size:16px;">这是一个带有内联样式的段落。</p>
- ```
   <p style="color:red; font - size:16px;">这是一个带有内联样式的段落。</p>
```
优点和缺点
- 优点：
  - 简单直接，对于只需要对个别元素进行快速样式调整的情况非常方便。
  - 样式的应用范围明确，不会影响其他元素的样式。
- 缺点：
  - 当需要对多个元素应用相同的样式时，需要在每个元素中重复编写样式代码，代码冗余度高。
  - 不利于样式的维护和更新，因为样式代码分散在各个 HTML 元素中。
二、内部样式表（Internal Style Sheet）
概念和语法
- 内部样式表是在 HTML 文档的<head>部分使用<style>标签来定义样式。这种方式可以为整个 HTML 文档中的元素定义样式，样式规则可以应用于多个元素。
- 语法为：

   <html>
   <head>
       <style>
           选择器 {
               属性1:值1;
               属性2:值2;
              ...
           }
       </style>
   </head>
   <body>
       <p>这是一个段落。</p>
   </body>
   </html>

例如，要将文档中所有段落的文字颜色设置为蓝色，字体为宋体，可以这样写：

  <html>
   <head>
       <style>
           p {
               color:blue;
               font - family:SimSun;
           }
       </style>
   </head>
   <body>
       <p>这是第一个段落。</p>
       <p>这是第二个段落。</p>
   </body>
   </html>

优点和缺点
- 优点：
  - 可以集中管理一个 HTML 文档的样式，方便对整个文档的样式进行维护和修改。
  - 样式代码与 HTML 文档结构在同一个文件中，对于简单的网页，易于理解和查看样式与内容的关联。
- 缺点：
  - 如果有多个 HTML 页面需要共享相同的样式，就需要在每个页面的<head>部分重复编写样式代码，造成代码冗余。
  - 不利于大型项目的样式管理，因为样式代码与 HTML 内容混在一起，使得代码结构不够清晰。

三、外部样式表（External Style Sheet）

概念和语法
- 外部样式表是将 CSS 代码单独保存为一个文件（通常以.css为扩展名），然后在 HTML 文档中通过<link>标签来引用这个文件。这种方式实现了样式和内容的完全分离，是大型项目中最常用的样式管理方式。
- 首先创建一个 CSS 文件，例如styles.css，内容如下：

 p {
       color:green;
       font - size:14px;
   }

然后在 HTML 文档的<head>部分使用<link>标签引用这个 CSS 文件，语法为

   <html>
   <head>
       <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
       <p>这是一个段落。</p>
   </body>
   </html>

其中，rel="stylesheet"表示引用的是样式表，type="text/css"说明文件类型是 CSS，href属性指定了 CSS 文件的路径（可以是相对路径或绝对路径）。

优点和缺点
- 优点：
  - 样式和内容完全分离，使得 HTML 文件专注于内容结构，CSS 文件专注于样式设计，提高了代码的可读性和可维护性。
  - 多个 HTML 页面可以共享同一个 CSS 文件，减少了代码冗余。只要修改 CSS 文件中的样式，所有引用该文件的 HTML 页面的样式都会随之改变。
- 缺点：
  - 需要管理多个文件，对于简单的小型项目，可能会增加一定的复杂性。
  - 当 CSS 文件路径发生变化或者丢失时，HTML 页面的样式将无法正确显示。

列举一些常用的CSS3选择器

元素选择器（Type Selectors）
- 概念：根据 HTML 元素的标签名来选择元素，是最基本的选择器类型。
- 语法：元素名 {属性：值；}。例如，p{color: red;}会选择所有的<p>段落元素，并将它们的文字颜色设置为红色。
- 应用场景：用于对同一类型的元素进行统一的样式设置，如设置所有<h1> - <h6>标题元素的字体大小和字体族，或者所有<a>链接元素的默认颜色和下划线样式。
类选择器（Class Selectors）
- 概念：通过元素的class属性值来选择元素。一个class属性可以被多个元素共享，这样可以方便地对具有相同类别的元素应用相同的样式。
- 语法：.类名{属性: 值;}。例如，在 HTML 中有<div class="box">和<p class="box">，使用.box{background - color: blue;}就可以将这两个元素的背景颜色都设置为蓝色。
- 应用场景：当需要对不同类型的元素应用相同的样式时非常有用。比如，创建一个名为highlight的类，用于在文本中的重要内容（如<p>段落、<span>内联元素等）添加背景颜色来突出显示。
ID 选择器（ID Selectors）
- 概念：通过元素的id属性值来选择元素。在一个 HTML 页面中，id属性的值应该是唯一的，所以 ID 选择器主要用于选择特定的、独一无二的元素。
- 语法：#id名{属性: 值;}。例如，如果有一个<div id="header">，使用#header{height: 100px;}可以设置这个div元素的高度为 100px。
- 应用场景：用于对页面中的关键元素进行单独的样式设置，如页面的导航栏（id="nav"）、主要内容区域（id="main - content"）或页脚（id="footer"）等，确保这些重要元素的样式不会被其他元素的样式规则干扰。
后代选择器（Descendant Selectors）
- 概念：用于选择某个元素的后代元素。后代元素是指某个元素内部的所有子元素、孙元素等。
- 语法：祖先元素后代元素{属性: 值;}。例如，div p{color: green;}会选择所有在<div>元素内部的<p>元素，并将它们的文字颜色设置为绿色。
- 应用场景：当需要对某个容器元素内部的特定类型元素进行样式设置时使用。比如，在一个文章内容区域（<article>）内对所有的<img>图像元素设置统一的边框样式，就可以使用article img{border: 1px solid black;}。
子选择器（Child Selectors）
- 概念：用于选择某个元素的直接子元素，与后代选择器不同，它只选择直接的下一代元素。
- 语法：父元素 > 子元素{属性: 值;}。例如，ul > li{list - style - type: square;}会选择所有<ul>元素的直接子元素<li>，并将它们的列表样式类型设置为方块。
- 应用场景：当只想对父元素的直接子元素进行样式设置，而不影响更深层次的后代元素时使用。比如，在一个导航栏（<nav>）中，对直接的菜单项（<li>）进行样式设置，而导航栏中的子菜单（<li>元素内部的<ul>和<li>）可能需要不同的样式。
相邻兄弟选择器（Adjacent Sibling Selectors）
- 概念：用于选择紧挨着的兄弟元素。即选择紧跟在某个元素后面的同层级元素。
- 语法：元素1 + 元素2{属性: 值;}。例如，h1 + p{margin - top: 10px;}会选择紧挨着<h1>标题后的<p>段落元素，并将段落元素的上外边距设置为 10px。
- 应用场景：用于在两个相关元素之间创建特定的视觉关系。比如，在一个标题和紧随其后的段落之间设置合适的间距，或者在一个表单元素和其对应的提示标签之间设置样式。
属性选择器（Attribute Selectors）
- 概念：根据元素是否具有某个属性或者属性的值来选择元素。
- 语法有多种形式：
  - [属性名]{属性: 值;}：选择具有指定属性的所有元素。例如，[title]{color: purple;}会选择所有带有title属性的元素，并将它们的颜色设置为紫色。
  - [属性名 = "属性值"]{属性: 值;}：选择属性值等于指定值的元素。例如，input[type = "text"]{width: 200px;}会选择所有type属性为text的input元素，并将它们的宽度设置为 200px。
  - 还有其他形式，如[属性名~ = "属性值"]（选择属性值包含指定单词的元素）、[属性名^ = "属性值"]（选择属性值以指定字符串开头的元素）、[属性名$ = "属性值"]（选择属性值以指定字符串结尾的元素）等。
- 应用场景：在表单元素的样式设置中非常有用。可以根据input元素的不同type属性（如text、password、checkbox等）来设置不同的样式，或者根据img元素的alt属性来设置图像的样式。
伪类选择器（Pseudo - classes Selectors）
- 概念：用于选择处于特定状态的元素，这些状态通常是用户与元素交互时产生的，或者是元素在文档结构中的特定位置。
- 语法：元素:伪类{属性: 值;}。例如，a:hover{color: orange;}会在鼠标悬停在<a>链接元素上时，将链接的颜色变为橙色。
- 常见的伪类包括：
  - :hover：用于鼠标悬停状态。
  - :active：用于元素被激活（如鼠标按下时）的状态。
  - :visited：用于已经访问过的<a>链接元素。
  - :first - child：选择元素的第一个子元素。例如，li:first - child{font - weight: bold;}会将列表中的第一个<li>元素的字体加粗。
  - :last - child：选择元素的最后一个子元素。
  - :nth - child(n)：选择元素的第 n 个子元素。例如，tr:nth - child(even){background - color: #f2f2f2;}会将表格中偶数行的<tr>元素的背景颜色设置为浅灰色。
伪元素选择器（Pseudo - elements Selectors）
- 概念：用于向元素的内容之前或之后添加虚拟的内容，或者对元素的部分内容进行样式设置。
- 语法：元素::伪元素{属性: 值;}。例如，p::first - letter{font - size: 20px;}会将每个段落<p>的第一个字母的字体大小设置为 20px。
- 常见的伪元素包括：
  - ::before：在元素内容之前添加内容。可以与content属性一起使用，例如，p::before{content: ">> ";}会在每个段落的开头添加>>符号。
  - ::after：在元素内容之后添加内容。
  - ::first - line：用于对元素内容的第一行进行样式设置。例如，div::first - line{color: red;}会将div元素内容的第一行颜色设置为红色。

Document

HTML5+CSS3概念与简介

什么是CSS3

如何在HTML中引入和使用CSS3样式表？

列举一些常用的CSS3选择器

推荐一些优质的HTML教程网站