一、HTML CSS介绍
CSS （层叠样式表又称为级联样式表，英文 Cascading Style Sheets 的缩写）是用于渲染 HTML 元素标签的样式。
CSS 是 HTML 的搭档。在编码过程中，它们发挥不同的作用：
- HTML 负责网页的具体内容（结构）
- CSS 则修饰网页的表现形式（布局）
CSS 可以通过以下方式添加到HTML中：
- 内联样式：在HTML元素中使用
<style> 属性。 - 内部样式表：在HTML文档头部
<head> 区域使用<style> 元素来包含 CSS。 - 外部引用：使用外部CSS文件。
注意：
- 最好的方式是通过外部引用CSS文件。
1、内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。
使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
内联样式实例：
我们使用
font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式。
2、内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表。
内部样式表实例：
我们在 HTML 文档中使用 <style> 元素。
3、外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部
外部样式表实例：
链接到外部样式文件。
运行结果：
二、HTML图像
1、<img> 标签
在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性 src。src 是单词 "source"的缩写。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url">
属性：
- src：路径（图片地址与名字）
- alt：规定图像的替代文本
- width：规定图像的宽度
- height：规定图像的高度
- title：鼠标悬停在图片上给予提示
三、HTML列表
HTML 支持有序列表、无序列表和自定义列表。
1、HTML 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<ul> 标签定义无序列表。将 <ul> 标签与 <li> 标签一起使用，创建无序列表。
记忆方法：ul: unordered lists 无序列表 li是list item的缩写 （列表项目）
实例：下面是一个无序列表。
type属性：
- disc默认实心圆
- circle空心圆
- square小方块
- none不显示
快捷键：
在vscode中快速生成ul+li的布局：ul>li*3(数字根据自己需要的li的数量修改)
2、HTML 有序列表
有序列表也是一列项目，列表项目使用数字进行标记。
<ol> 标签定义了一个有序列表，列表排序以数字来显示。使用 <li> 标签来定义列表选项。
记忆方法：ol: ordered lists 有序列表
实例：下面是个有序列表。
type属性：
- 1 表示列表项目用数字标号（1，2，3...）
- a 表示列表项目用小写字母标号（a,b,c...）
- A 表示列表项目用大写字母标号（A,B,C...）
- i 表示列表项目用小写罗马数字标号（i，ii，iii...）
- I 表示列表项目用大写罗马数字标号（I,II,III...）
快捷键：
在vscode中快速生成ol+li的布局：ol>li*3(数字根据自己需要的li的数量修改)
3、HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的描述以 <dd> 开始。
记忆方法：
dl是definition lists的英文缩写 (自定义列表)dt是definition term的缩写 (自定义列表组)dd是definition description的缩写（自定义列表描述）
实例：下面是一个自定义列表。
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
