一、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的缩写(自定义列表描述)
实例:下面是一个自定义列表。