目的
HTML
HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的元素（或标签）组成，这些元素可以用来描述网页的结构和内容。HTML通过使用各种标签和属性来呈现文本、图像、链接、多媒体以及其他形式的内容，并且为这些内容赋予结构化的语义含义。
HTML文档由一系列的HTML元素组成，每个元素可能包含了文本内容和/或其他元素。HTML还允许通过超链接将一个页面与另一个页面连接起来，并且支持嵌入多媒体文件，如图像和视频。这使得HTML成为构建网页内容的基础工具。
HTML的基本结构包括<html>、<head>、<title>和<body>等标签，其中<html>标签用于定义整个HTML文档的根元素，<head>标签用于包含文档的元数据（如标题、样式表、脚本等），<title>标签用于指定文档的标题，<body>标签则包含可见的文档内容。
除了基本的结构标签外，HTML还包括很多其他标签，比如<h1>到<h6>用于定义标题的级别，<p>用于定义段落，<a>用于创建链接，<img>用于插入图像等。这些标签提供了丰富的语义来描述和呈现网页的内容。
总结：html构成了整个网页的骨架、结构
HTML标签的分类
当涉及到HTML标签的语义，可以将其内容分为以下几个主要类别：
-
文档结构标签：
<html>: 定义HTML文档。<head>: 包含了文档的元数据，如标题、样式表和脚本等信息。<title>: 定义文档的标题，显示在浏览器的标题栏或页签上。<body>: 包含可见的文档内容。
-
内容分区标签：
<header>: 定义文档或节的页眉部分。<footer>: 定义文档或节的页脚部分。<nav>: 定义导航链接的部分。<main>: 定义文档的主要内容区域。<section>: 定义文档中的一个区域。<article>: 定义独立的、完整的内容块，比如新闻文章。<aside>: 定义页面内容之外的部分，如侧边栏或广告。<div>: 定义内容，没有特殊语义
-
标题与文本：
<h1>到<h6>: 定义标题的级别。<p>: 定义段落。<span>: 定义行内文本的容器，通常用于设置样式或处理文本。
-
表单标签：
<form>: 定义表单。<input>: 创建输入字段。<textarea>: 创建文本域。<select>: 创建下拉列表框。<label>: 为表单控件定义标注。
-
列表标签：
<ul>: 定义无序列表。<ol>: 定义有序列表。<li>: 定义列表项。
-
表格标签：
<table>: 定义表格。<tr>: 定义表格行。<th>: 定义表头单元格。<td>: 定义表数据单元格。
-
多媒体标签：
<img>: 插入图像。<audio>: 定义音频内容。<video>: 定义视频内容。
-
超链接标签：
<a>: 创建超链接。
-
其他语义标签：
<strong>: 强调文本的重要性。<em>: 强调文本的语气。<br>: 插入换行。<hr>: 创建水平分隔线。
通过对HTML标签按照语义进行分类，我们可以更好地理解它们在页面结构和语义上的作用，有助于提高网页的可访问性和可维护性。
案例
-
上中下的例子 （三峡学院首页）
-
列表例子 （三峡学院的一个例子）
-
导航的例子 （复杂）
css概念
CSS（层叠样式表，Cascading Style Sheets）是一种用来描述文档样式和布局的样式表语言。它被广泛应用于网页设计中，用于控制网页的外观和样式，包括文字的颜色、大小和位置，背景的颜色或图片，元素的尺寸和布局等。CSS 赋予了开发者对网页外观和布局方面更精细的控制，使得网页设计和开发更加灵活。
以下是 CSS 的一些基本概念：
- 选择器（Selectors） ： 选择器用于指定应用样式的HTML元素。例如，可以通过元素名称、类、ID等来选择特定的元素。
- 属性（Properties） ： 属性是要改变的样式的具体特征，比如颜色、大小、边距等。
- 值（Values） ： 值定义了样式属性的具体取值，如颜色值、长度值等。
- 样式规则（Style Rules） ： 样式规则由选择器和一组样式属性-值对组成，用于指定特定元素的样式。
- 盒模型（Box Model） ： 盒模型描述了在CSS布局中每个元素都被描绘成一个矩形的盒子，这个盒子包含内容、内边距、边框和外边距。
- 层叠（Cascading） ： 当多个样式规则作用于同一个元素时，层叠规则决定了最终应用哪些样式。
- 布局（Layout） ： CSS通过控制盒模型、浮动、定位等技术来实现网页的布局。
- 媒体查询（Media Queries） ： 使用媒体查询可以根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式，从而实现响应式设计。
总的来说，CSS 是一种强大的样式表语言，它为网页设计者提供了丰富的样式控制手段，使得网页能够以各种形式和风格呈现，并且适应不同的设备和屏幕尺寸。
样式按钮
- 给一个div设置高度和宽度。
- 给一个div设备背景颜色
- 给一个div设置边框
- 给文字设置样式
- 文字大小
- 文字颜色
- 文字的粗细
布局介绍
CSS 提供了多种布局方式，用于控制网页中元素的位置、尺寸和排列。以下是一些常见的 CSS 布局方式：
- 流动布局（Flow Layout） ： 这是最基础的布局方式，元素按照其在 HTML 中的出现顺序自上而下、自左而右进行排列。可以通过设置元素的宽度、高度、浮动等属性来影响其在流中的位置。
- 浮动布局（Float Layout） ： 通过设置元素的浮动属性（float），可以使元素脱离文档流，并沿着容器的左侧或者右侧浮动。这种布局方式常用于实现多栏布局。
- 弹性盒子布局（Flexbox Layout） ： 弹性盒子布局是一种灵活的布局模型，通过设置容器和其内部元素的属性，可以实现各种复杂的布局结构，包括水平居中、垂直居中、等高列布局等。
- 栅格布局（Grid Layout） ： 栅格布局是一种二维的布局系统，通过将容器划分为行和列，可以更精确地控制元素的位置和大小，适用于复杂的网格布局需求。
- 定位布局（Positioning Layout） ： 通过设置元素的定位属性（position），可以将元素相对于其包含块进行定位，包括相对定位、绝对定位、固定定位等。
- 响应式布局（Responsive Layout） ： 通过使用媒体查询（media queries）和相对单位（如百分比、em 等），可以创建能够自适应不同设备和屏幕尺寸的布局，从而实现响应式设计。
