HTML/CSS基础-CSDN博客

本文介绍了HTML的基本概念及其常见标签，重点阐述了HTML5的新特性，如语义化标签、多媒体支持、绘图动画等。同时讲解了CSS的作用、选择器及盒子模型，最后讨论了响应式设计的关键技术和实现方法，如媒体查询、流式布局以及Flexbox和GridLayout等。

HTML（超文本标记语言）是一种用于创建网页结构的标记语言。常见标签包括:

语义化标签：HTML5引入了一些新的语义化标签，如<header>、<footer>、<nav>、<article>等，使得开发者能更清晰地表示页面的结构和内容。
多媒体播放：HTML5提供了<video>和<audio>标签，以便在网页上直接嵌入视频和音频文件，而无需使用插件。
绘图和动画：HTML5引入了<canvas>元素，使得开发者可以通过JavaScript实时绘制图形和动画，而无需使用插件。
本地存储：HTML5提供了本地存储API，如LocalStorage和SessionStorage，使得开发者可以在客户端存储数据，而无需依赖于服务器。
表单增强：HTML5提供了一些新的表单类型（如日期、时间、电子邮件等），以及一些新的表单属性（如自动完成、输入限制等），使得开发者能更好地处理表单数据。
支持WebSockets：HTML5提供了WebSockets API，使得开发者可以在客户端和服务器之间建立持久的双向通信连接。
地理定位：HTML5引入了Geolocation API，使得开发者能够获取用户的地理位置信息。
离线应用：HTML5提供了离线应用缓存（Application Cache）机制，使得开发者可以让网页在离线状态下仍然可访问。

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用来控制网页内容样式的标记语言。

CSS选择器用于选择HTML文档中应用样式的元素。常用的CSS选择器有：

除了以上常用的选择器，还有许多其他选择器，如兄弟选择器、相邻选择器、通用选择器等。通过使用这些选择器，可以更加精确地选择要应用样式的元素。

盒子模型（Box Model）是CSS中一个重要的概念，用于描述网页中的元素在页面中所占空间的方式。

每个HTML元素都可以看作是一个矩形的盒子，盒子模型由四个部分组成：

这四个部分按照从内到外的顺序依次排列，它们共同决定了元素在页面中所占的空间大小。对于一个盒子来说，它的总宽度由内容宽度、左右内边距、左右边框以及左右外边距的总和构成；总高度由内容高度、上下内边距、上下边框以及上下外边距的总和构成。

通过调整盒子模型的各个部分的属性，比如宽度、高度、内边距、边框、外边距等，可以控制元素在页面中的布局和样式。

响应式设计是一种网页设计的方法，它使得网页能够在不同的设备和屏幕尺寸上提供最佳的用户体验。响应式设计能够根据用户所用的设备自动调整网页布局、字体大小和图像大小等，以适应不同屏幕大小和设备类型。

实现响应式布局主要依赖于媒体查询（Media Queries）和流式布局（Fluid Layout）：

媒体查询：媒体查询允许我们根据设备的特定条件（如屏幕宽度、屏幕分辨率等）来应用不同的CSS样式。通过使用媒体查询，我们可以根据设备的尺寸和特征来自定义不同的布局、字体大小和图像大小等。
流式布局：流式布局是一种相对于视口大小而非固定像素大小的布局方式。使用百分比、em单位或rem单位等相对单位来定义元素的宽度和高度，使得元素能够随着视口尺寸的改变而自动调整大小。

除了媒体查询和流式布局外，还可以使用弹性盒子布局（Flexbox）和网格布局（Grid Layout）等CSS布局技术来实现响应式设计。这些技术可以使网页中的元素自适应不同设备和屏幕尺寸，并实现良好的布局和排列。