HTML与CSS基础学习

前端AC
103 阅读14分钟

1.HTML基础标签

HTML（HyperText Markup Language，超文本标记语言）是构建网页和其他信息可以在网页浏览器中查看的内容的标准标记语言。以下是一些基础的HTML标签：

文档结构标签

  • <!DOCTYPE html>: 声明文档类型和HTML版本。
  • <html>: 根标签，包裹所有网页内容。
  • <head>: 包含元信息，如文档标题、字符集定义、样式表链接等。
  • <title>: 定义文档的标题，显示在浏览器标签页上。
  • <body>: 包含网页的所有可见内容。

文本标签

  • <h1> to <h6>: 定义HTML标题，<h1> 是最高级别，<h6> 是最低级别。
  • <p>: 定义段落。
  • <br>: 换行。
  • <strong> 或 <b>: 定义加粗文本。
  • <em> 或 <i>: 定义斜体文本。
  • <small>: 定义小号文本。
  • <mark>: 定义标记或高亮文本。
  • <del>: 定义被删除的文本。
  • <ins>: 定义被插入的文本。
  • <sub>: 定义下标文本。
  • <sup>: 定义上标文本。

链接和图像标签

  • <a>: 定义超链接。
  • <img>: 定义图像。

列表标签

  • <ul>: 定义无序列表。
  • <ol>: 定义有序列表。
  • <li>: 定义列表项。
  • <dl>: 定义定义列表。
  • <dt>: 定义定义列表中的项目。
  • <dd>: 定义定义列表中的描述。

表格标签

  • <table>: 定义表格。
  • <tr>: 定义表格行。
  • <th>: 定义表格头。
  • <td>: 定义表格单元格。

表单和输入标签

  • <form>: 定义HTML表单。
  • <input>: 定义输入字段。
  • <label>: 定义输入字段的标签。
  • <select>: 定义下拉列表。
  • <option>: 定义下拉列表中的选项。
  • <textarea>: 定义多行文本输入控件。

分区和框架标签

  • <div>: 定义文档中的分区或节。
  • <span>: 用于组合文档中的行内元素。

元信息标签

  • <meta>: 提供关于HTML文档的元信息，如字符集、页面描述、关键字等。

注释标签

  • <!-- -->: 注释标签，用于在HTML中插入注释。 这些标签构成了HTML的基础框架，通过这些标签，可以创建结构化的网页内容。随着HTML5的推出，更多的标签和功能被引入，以更好地适应现代网页设计的需要。

2.HTML新特性

HTML5 引入了许多新特性，这些特性旨在更好地支持多媒体内容、增强网页的交互性和结构化数据。以下是一些主要的 HTML5 新特性：

语义标签

  • <article>: 定义独立的内容区域，如博客条目或新闻文章。
  • <section>: 定义文档中的一个区段，通常包含一个标题。
  • <nav>: 定义导航链接的部分。
  • <header>: 定义页面或区段的页眉。
  • <footer>: 定义页面或区段的页脚。
  • <aside>: 定义页面内容之外的内容，如侧边栏。
  • <figure> 和 <figcaption>: 定义媒体内容的分组及其标题。

多媒体

  • <audio>: 用于嵌入音频内容。
  • <video>: 用于嵌入视频内容。
  • <source>: 定义 <audio> 或 <video> 元素的多媒体资源。

表单增强

  • 新的表单元素，如 <datalist>, <keygen>, <output>。
  • 新的表单属性，如 placeholder, required, pattern, min, max, step 等。

API 和接口

  • Canvas API: 用于绘制图形和动画。
  • SVG: 用于嵌入矢量图形。
  • Geolocation API: 用于获取用户的地理位置。
  • Web Storage API: 提供了 localStorage 和 sessionStorage，用于在浏览器中存储数据。
  • Web Workers: 允许后台脚本运行，不会影响页面的性能。
  • WebSocket API: 允许服务器和客户端之间进行全双工通信。

其他

  • <canvas>: 用于绘制图形和动画的画布。
  • 新的语义化属性，如 contenteditable, contextmenu, draggable, dropzone。
  • 新的拖放（Drag and Drop）API。
  • MathML: 用于在网页中显示复杂的数学公式。
  • Microdata: 用于在HTML文档中嵌入机器可读的元数据。 HTML5 的这些新特性极大地丰富了网页的表现形式和功能，为开发者提供了更多的工具来创建富交互式的网页应用。随着浏览器对这些新特性的支持，HTML5 已经成为现代网页开发的标准。

3.HTML5本地存储

HTML5 引入了两种在客户端存储数据的方法，这些方法允许网站存储信息在用户的计算机上，即使浏览器关闭后，这些信息仍然可用。这两种方法是：

1. localStorage

  • localStorage 用于长久保存整个网站的数据，没有过期时间，直到手动去除。
  • 数据在同一个域的所有页面中共享。
  • 大小限制通常为5MB左右，但具体取决于浏览器。
localStorage 方法：
  • setItem(key, value): 存储数据。
  • getItem(key): 获取数据。
  • removeItem(key): 删除单个数据项。
  • clear(): 清除所有存储的数据。
  • key(index): 获取存储的数据项的键名。 示例：
localStorage.setItem('name', 'John Doe');
let name = localStorage.getItem('name');
localStorage.removeItem('name');
localStorage.clear();

2. sessionStorage

  • sessionStorage 与 localStorage 类似，但数据只在当前会话（页面）中有效，一旦页面关闭，数据就会被清除。
  • 数据仅在当前标签页或窗口中有效，不同标签页或窗口之间不共享。
  • 大小限制与 localStorage 类似。
sessionStorage 方法：
  • 与 localStorage 使用相同的方法。 示例：
sessionStorage.setItem('color', 'blue');
let color = sessionStorage.getItem('color');
sessionStorage.removeItem('color');
sessionStorage.clear();

注意事项：

  • 存储的数据类型只能是字符串。如果需要存储复杂的数据类型（如对象），可以使用 JSON.stringify() 将其转换为字符串，再存储；读取时使用 JSON.parse() 转换回原始格式。

  • 本地存储的数据不受同源策略限制，即同一域名下的不同子域名可以共享存储的数据。

  • 本地存储的数据对用户是可见的，因此不要存储敏感信息。

  • 存储在 localStorage 或 sessionStorage 中的数据在浏览器隐私模式下可能不可用。 本地存储是HTML5提供的一个非常有用的特性，它使得开发者可以在不依赖服务器的情况下，在客户端保存大量数据。

4.CSS 基础语法

CSS（层叠样式表，Cascading Style Sheets）用于定义HTML文档的样式和布局。CSS基础语法由选择器和一对花括号内的声明组成。以下是CSS语法的简单概述：

CSS 语法结构

selector {
  property: value;
  property: value;
  /* 更多属性-值对 */
}

组件说明：

  • 选择器（Selector）：选择器用于指定要样式化的HTML元素。它可以是一个元素名称、类名、ID或者更复杂的选择器。

    示例选择器：

    • 元素选择器：h1
    • 类选择器：.classname
    • ID选择器：#idname
    • 属性选择器：input[type="text"]

  • 声明（Declaration）：一个声明包括一个CSS属性和一个值，它们被冒号分开。

    示例声明：

    • color: red;

  • 属性（Property）：属性是你要设置的样式特性，如字体大小、颜色等。

    常见属性包括：

    • font-size
    • color
    • margin
    • padding
    • background-color
    • border

  • 值（Value）：值定义了属性的设置。它可以是关键字、数字、长度、百分比、颜色等。

    示例值：

    • 16px
    • 100%
    • red
    • solid

CSS 示例

/* 这是一个注释 */
h1 {
  color: blue; /* 文本颜色 */
  font-size: 24px; /* 字体大小 */
  margin: 20px 0; /* 外边距 */
}
p {
  font-family: Arial, sans-serif; /* 字体族 */
  line-height: 1.6; /* 行高 */
}
.classname {
  background-color: yellow; /* 背景颜色 */
  padding: 10px; /* 内边距 */
}
#idname {
  border: 1px solid black; /* 边框 */
}

多个选择器

你可以为多个选择器指定相同的样式：

h1, h2, h3 {
  color: green;
}

继承和层叠

CSS的一个关键特性是继承，某些样式会被子元素继承，例如字体和颜色。层叠指的是当多个规则应用于同一个元素时，CSS决定哪个规则将最终生效。

注意事项

  • 每个声明应以分号结束。
  • CSS不区分大小写，但按照惯例，属性名和选择器使用小写字母，而值使用大写字母（例如font-size: 16px;）。
  • 注释以 /* 开始，并以 */ 结束。

5.盒子模型

在CSS中，"盒子模型"（Box Model）是理解和布局页面中元素的关键概念。它描述了如何计算一个元素的总宽度和高度。盒子模型由以下几个部分组成：

  1. 内容（Content）：元素的内容，比如文本、图片等。
  2. 内边距（Padding）：内容周围的空白区域，位于内容和边框之间。
  3. 边框（Border）：围绕在内边距和外边距之间的线条。
  4. 外边距（Margin）：边框周围的空白区域，用于分隔不同的元素。 以下是盒子模型的视觉表示：
+--------------------------------+
|                 Margin         |
| +----------------------------+ |
| |         Border             | |
| | +------------------------+ | |
| | |   Padding              | | |
| | | +--------------------+ | | |
| | | |   Content           | | | |
| | | +--------------------+ | | |
| | +------------------------+ | |
| +----------------------------+ |
+--------------------------------+

以下是盒子模型中各部分的详细说明：

  • 内容（Content）：
    • 宽度（width）和高度（height）属性设置内容区域的宽度和高度。
    • 内容区域是元素的直接子元素和文本内容所在的地方。
  • 内边距（Padding）：
    • 内边距位于内容和边框之间。
    • 可以使用padding属性来设置元素的内边距，它可以接受1到4个值（上、右、下、左）。
  • 边框（Border）：
    • 边框位于内边距和外边距之间。
    • 可以使用border属性来设置元素的边框，它可以是宽度、样式和颜色的组合。
  • 外边距（Margin）：
    • 外边距位于元素的边框之外，用于控制元素之间的空间。
    • 可以使用margin属性来设置元素的外边距，它也可以接受1到4个值。

标准盒子模型与替代盒子模型

  • 标准盒子模型（W3C标准）：在标准盒子模型中，元素的width和height属性只包括内容区域，不包括内边距、边框或外边距。
  • 替代盒子模型（IE传统）：在替代盒子模型中，元素的width和height属性包括内容、内边距和边框，但不包括外边距。 在CSS中，可以通过box-sizing属性来切换这两种模型：
/* 标准盒子模型 */
box-sizing: content-box;
/* 替代盒子模型 */
box-sizing: border-box;

在现代网页设计中，border-box通常更为常用，因为它使得元素的总宽度和高度更容易预测和控制。

6.CSS3 新特性

CSS3 引入了许多新特性，极大地扩展了前端开发者的设计能力和网页的表现力。以下是一些 CSS3 的主要新特性：

选择器

  1. 属性选择器：允许根据属性值选择元素。
  2. 伪类选择器：例如 :nth-child(), :nth-of-type(), :last-child, :only-child, :checked, :disabled 等。
  3. 伪元素选择器：例如 ::before, ::after（与 CSS2 中的 :before 和 :after 类似，但双冒号是新的语法）。

颜色和透明度

  1. RGBA 和 HSLA 颜色模式：允许设置颜色的透明度。
  2. 不透明度（Opacity）：可以用 opacity 属性设置元素的不透明度。

文本效果

  1. 文本阴影（Text-shadow）：为文本添加阴影效果。
  2. Word-wrap 和 Word-break：允许文本在达到容器边缘时进行换行。

边框和背景

  1. 边框图片（Border-image）：允许使用图片作为边框。
  2. 圆角边框（Border-radius）：创建圆角边框。
  3. 背景尺寸（Background-size）：可以指定背景图片的大小。
  4. 背景原点（Background-origin）：定义背景图片的定位区域。
  5. 背景裁剪（Background-clip）：定义背景的绘制区域。

渐变

  1. 线性渐变（Linear-gradient）：创建线性渐变背景。
  2. 径向渐变（Radial-gradient）：创建径向渐变背景。

过渡和动画

  1. 过渡（Transitions）：允许属性值在一定时间区间内平滑地过渡。
  2. 动画（Animations）：通过关键帧（@keyframes）创建复杂动画。

布局

  1. Flexbox：为盒模型提供一种更加灵活的布局方式。
  2. Grid 布局：CSS 网格布局允许你使用网格来设计页面布局。
  3. 多列布局（Multi-column）：允许将内容分为多列。

响应式设计

  1. 媒体查询（Media queries）：允许根据不同的设备特征（如屏幕宽度、分辨率等）应用不同的样式。

形状和视觉效果

  1. 形状（Shapes）：允许定义元素的形状，比如 shape-outside。
  2. 遮罩（Masking）：使用图像或渐变来遮罩元素。
  3. 滤镜（Filters）：如模糊、亮度、对比度等视觉效果。

其他

  1. 盒阴影（Box-shadow）：为元素添加阴影效果。
  2. 变形（Transforms）：包括旋转、缩放、倾斜或平移元素。
  3. 弹性盒子（Flexbox）：提供一种更灵活的方式来布局、对齐和分配容器内元素的空间。
  4. 变量（CSS Custom Properties）：允许在 CSS 中定义和使用变量。 这些特性大大增强了 CSS 的功能，让开发者能够创建更加丰富和响应式的网页设计。随着 Web 平台的不断发展，CSS3 还将继续引入新的特性和改进。

7.弹性盒子

弹性盒子（Flexbox）是 CSS3 中引入的一种布局模式，旨在提供一种更加有效的方式来排列、对齐和分配容器内元素的空间，即使它们的大小是未知的或是动态的。Flexbox 能够在不同屏幕尺寸和显示设备上提供一致的布局结构。 以下是 Flexbox 的一些核心概念和属性：

容器和项目

  • 弹性容器（Flex Container）：使用 display: flex; 或 display: inline-flex; 属性声明的元素。它的直接子元素将成为弹性项目（Flex Items）。
  • 弹性项目（Flex Items）：弹性容器的子元素自动成为弹性项目。

主轴和交叉轴

  • 主轴（Main Axis）：弹性容器的主轴是弹性项目的主要布局方向。可以是水平方向（默认）或垂直方向。
  • 交叉轴（Cross Axis）：垂直于主轴的轴称为交叉轴。

Flexbox 属性

容器属性
  • flex-direction：定义主轴的方向（row, row-reverse, column, column-reverse）。
  • flex-wrap：定义如何处理子元素的换行（nowrap, wrap, wrap-reverse）。
  • flex-flow：是 flex-direction 和 flex-wrap 的简写形式。
  • justify-content：定义了项目在主轴上的对齐方式（flex-start, flex-end, center, space-between, space-around, space-evenly）。
  • align-items：定义项目在交叉轴上如何对齐（stretch, flex-start, flex-end, center, baseline）。
  • align-content：定义了多行之间的对齐方式，如果项目只有一行，则不起作用（stretch, flex-start, flex-end, center, space-between, space-around）。
项目属性
  • order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
  • flex-grow：定义项目的放大比例，即如果存在剩余空间，项目应该放大的比例。
  • flex-shrink：定义项目的缩小比例，即如果空间不足，项目应该缩小的比例。
  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。它可以设为跟 width 或 height 属性一样的值（如 350px），默认值为 auto。
  • flex：是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值是 0 1 auto。
  • align-self：允许单个项目有与其他项目不一样的对齐方式，可以覆盖 align-items 属性。 Flexbox 布局非常适合于响应式设计，因为它能够轻松地适应不同的屏幕尺寸和方向。这使得它成为现代 Web 开发中非常重要的工具之一。

8.媒体查询

媒体查询（Media Queries）是 CSS3 中的一项功能，它允许内容的呈现可以根据不同的媒体类型和设备特性（如屏幕宽度、分辨率、设备方向等）来改变。媒体查询通常用于创建响应式网页设计，这意味着网页能够自动适应不同的设备和屏幕尺寸，为用户提供最佳的浏览体验。 以下是媒体查询的一些基本概念和使用方法：

基本语法

@media not|only mediatype and (expressions) {
  CSS-Code;
}
  • not：否定媒体查询，如果指定的媒体类型不匹配，则应用样式。
  • only：用于指定某些样式只应用于符合查询条件的设备，而不影响不支持媒体查询的旧版浏览器。
  • mediatype：指定媒体类型，如 screen（屏幕）、print（打印机）、all（所有设备）等。
  • expressions：是测试条件，如 min-width、max-width、orientation（方向）等。

示例

以下是一些媒体查询的示例：

根据屏幕宽度应用样式
/* 当屏幕宽度小于 600px 时应用这些样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
/* 当屏幕宽度在 600px 和 900px 之间时应用这些样式 */
@media screen and (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}
/* 当屏幕宽度大于 900px 时应用这些样式 */
@media screen and (min-width: 900px) {
  body {
    background-color: lightcoral;
  }
}
根据设备方向应用样式
/* 当设备处于横向模式时应用这些样式 */
@media all and (orientation: landscape) {
  body {
    background-color: lightgoldenrodyellow;
  }
}
/* 当设备处于纵向模式时应用这些样式 */
@media all and (orientation: portrait) {
  body {
    background-color: lightpink;
  }
}

在 HTML 中使用媒体查询

媒体查询也可以在 HTML 中通过 <link> 标签的 media 属性来引用不同的 CSS 文件：

<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

或者直接在 <style> 标签中使用：

<style>
  @media print {
    /* 打印时应用的样式 */
  }
</style>

响应式设计

媒体查询是实现响应式设计的关键技术之一。通过使用媒体查询，开发者可以确保网页在不同设备和屏幕尺寸上都能提供良好的用户体验。例如，可以调整布局、字体大小、图片尺寸等，以适应不同的显示环境。

avatar
文章
阅读
粉丝