HTML 和 CSS 是构建网页的基础技术，它们为网页提供了结构、样式和交互性。本文旨在介绍 HTML 和 CSS 的基础知识，包括它们的作用、语法结构和基本运用。首先，我们将深入探讨 HTML（超文本标记语言），它是网页的基本构建块，用于定义页面上的各种元素，如标题、段落、图像等。我们将学习如何创建基本的 HTML 结构以及常见的 HTML 元素的用法。接着，我们将介绍 CSS（层叠样式表），它用于为网页添加样式和布局。我们将讨论如何使用 CSS 来设置字体、颜色、布局和响应式设计。通过本文，读者将能够建立对 HTML 和 CSS 的基础理解，为进一步学习网页开发打下坚实的基础。
一.HTML基础
1-标签语法
HTML 超文本标记语言——HyperText Markup Language。
-
超文本：链接
-
标记：标签，带尖括号的文本
标签结构
-
标签要成对出现，中间包裹内容
-
<>里面放英文字母（标签名）
-
结束标签比开始标签多 /
-
标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>
<hr>
2-HTML骨架
-
html：整个网页
-
head：网页头部，用来存放给浏览器看的信息，例如 CSS
-
title：网页标题
-
-
body：网页主体，用来存放给用户看的信息，例如图片、文字
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>3-标签的关系
-
父子关系（嵌套关系）：子级标签换行且缩进（Tab键）
<html>
<head></head>
</html>-
兄弟关系（并列关系）：兄弟标签换行要对
<head></head>
<body></body>4-注释
概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。
注释不会再浏览器中显示。
<!-- 我是 HTML 注释 -->5-标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>显示特点：
-
文字加粗
-
字号逐渐减小
-
独占一行（换行）
效果
6-段落标签
一般用在新闻段落、文章段落、产品描述信息等等。
<p>段落</p>显示特点：
-
独占一行
-
段落之间存在间隙
7-换行和水平线
-
换行：br
-
水平线：hr
<br>
<hr>8-文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
9-图像标签
作用：在网页中插入图片
<img src="图片的 URL">src用于指定图像的位置和名称，是 <img> 的必须属性。
图像属性
属性语法
-
属性名="属性值"
-
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
10-路径
概念：路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
-
相对路径：从当前文件位置出发查找目标文件
-
绝对路径：从盘符出发查找目标文件
-
Windows 电脑从盘符出发
-
Mac 电脑从根目录出发
-
相对路径
查找方式：从当前文件位置出发查找目标文件
特殊符号：
-
/ 表示进入某个文件夹里面 → 文件夹名/
-
. 表示当前文件所在文件夹 → ./
-
.. 表示当前文件的上一级文件夹 → ../
<!-- 当前文件夹下 -->
<img src="./mao.jpg">
<!-- 上一文件夹 -->
<img src="../images/mao.jpg">绝对路径
查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发
<img src="C:\images\mao.jpg">11-超链接标签
作用：点击跳转到其他页面。
<a href="https://www.baidu.com">跳转到百度</a>href 属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。
拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。
<a href="https://www.baidu.com/">跳转到百度</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./网页.html" target="_blank">跳转到网页</a>
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>12-音频
<audio src="音频的 URL"></audio>常用属性
拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。
<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>13-视频
<video src="视频的 URL"></video>常用属性
<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>14-列表
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>注意事项：
-
ul 标签里面只能包裹 li 标签
-
li 标签里面可以包裹任何内容
有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>注意事项：
-
ol 标签里面只能包裹 li 标签
-
li 标签里面可以包裹任何内容
定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>注意事项：
-
dl 里面只能包含dt 和 dd
-
dt 和 dd 里面可以包含任何内容
-
多数用于底部导航栏
15-表格
基本使用
标签：table 嵌套 tr，tr 嵌套 td / th。
提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>效果
表格结构标签-了解
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息。
合并单元格的步骤：
-
明确合并的目标
-
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
-
跨行合并，保留最上单元格，添加属性 rowspan
-
跨列合并，保留最左单元格，添加属性 colspan
-
-
删除其他单元格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）
16-表单
作用：收集用户信息。
使用场景：
-
登录页面
-
注册页面
-
搜索区域
input 标签
input 标签 type 属性值不同，则功能不同。
<input type="..." >
input 标签占位文本
占位文本：提示信息，文本框和密码框都可以使用。
<input type="..." placeholder="提示信息">单选框
常用属性
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女提示：name 属性值自定义。
上传文件
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
<input type="file" multiple>多选框
多选框也叫复选框，默认选中：checked。
<input type="checkbox" checked> 我爱前端下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>默认显示第一项，selected 属性实现默认选中功能。
文本域
作用：多行输入文本的表单控件。
<textarea>默认提示文字</textarea>label 标签
作用：网页中，某个标签的说明文本。
用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
-
写法一
-
label 标签只包裹内容，不包裹表单控件
-
设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
-
<input type="radio" id="man">
<label for="man">男</label>-
写法二：使用 label 标签包裹文字和表单控件，不需要属性
<label><input type="radio"> 女</label>提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮
<button type="">按钮</button>
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<!-- 如果省略 type 属性，功能是 提交 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>效果
提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。
17-语义化
无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
-
div：独占一行
-
span：不换行
<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>有语义的布局标签
18-字符实体
二.CSS基础
1-认识CSS
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
<title>认识CSS</title>
<style>
/* 选择器 { } */
p {
/* CSS 属性 */
color: red;
}
</style>
<p>体验 CSS</p>2-CSS引入方式
-
内部样式表：学习使用
-
CSS 代码写在 style 标签里面
-
-
外部样式表：开发使用
-
CSS 代码写在单独的 CSS 文件中（.css）
-
在 HTML 使用 link 标签引入
-
<link rel="stylesheet" href="./my.css">-
行内样式：配合 JavaScript 使用
-
CSS 写在标签的 style 属性值里
-
<div style="color: red; font-size:20px;">这是 div 标签</div>3-选择器
作用：查找标签，设置样式。
标签选择器
标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a, img......
<style>
p {
color: red;
}
</style>类选择器
作用：查找标签，差异化设置标签的显示效果。
步骤：
-
定义类选择器 → .类名
-
使用类选择器 → 标签添加 class="类名"
<style>
/* 定义类选择器 */
.red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>注意：
-
类名自定义，不要用纯数字或中文，尽量用英文命名
-
一个类选择器可以供多个标签使用
-
一个标签可以使用多个类名，类名之间用空格隔开
id选择器
作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
步骤：
-
定义 id 选择器 → #id名
-
使用 id 选择器 → 标签添加 id= "id名"
<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>规则：同一个 id 选择器在一个页面只能使用一次。
通配符选择器
作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
* {
color: red;
}通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。
4-盒子尺寸和背景色
5-文字控制属性
字体大小
-
属性名：font-size
-
属性值：文字尺寸，PC 端网页最常用的单位 px
p {
font-size: 30px;
}字体样式（是否倾斜）
作用：清除文字默认的倾斜效果
属性名：font-style
属性值
-
正常（不倾斜）：normal
-
倾斜：italic
行高
作用：设置多行文本的间距
属性名：line-height
属性值
-
数字 + px
-
数字（当前标签font-size属性值的倍数）
line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;
行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
单行文字垂直居中
垂直居中技巧：行高属性值等于盒子高度属性值
注意：该技巧适用于单行文字垂直居中效果
div {
height: 100px;
background-color: skyblue;
/* 注意：只能是单行文字垂直居中 */
line-height: 100px;
}字体族
属性名：font-family
属性值：字体名
font-family: 楷体;拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
-
font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;font复合属性
使用场景：设置网页文字公共样式
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
div {
font: italic 700 30px/2 楷体;
}注意：字号和字体值必须书写，否则 font 属性不生效 。
文本缩进
属性名：text-indent
属性值：
-
数字 + px
-
数字 + em（推荐：1em = 当前标签的字号大小）
p {
text-indent: 2em;
}文本对齐方式
作用：控制内容水平对齐方式
属性名：text-align
text-align: center;text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
<style>
div {
text-align: center;
}
</style>
<div>
<img src="./images/1.jpg" alt="">
</div>文本修饰线
属性名： text-decoration
color 文字颜色
本篇到此结束，后续还有css高级，盒子模型，Flex等内容。
2310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
