HTML+CSS

HTML+CSS基础

HTML

概念：

超文本标记语言；超文本： 链接；标记 ：标签<>

标签成对出现，中间包裹内容<>里面放英文字母，结束标签比开始标签多/

双标签：成对出现的标签

单标签：只有开始标签，没有结束标签

基本骨架：

HTML的基本骨架是网页模板。

html：整个网页

head：网页的头部，存放给浏览器的代码，如CSS

body：网页主体，存给用户的代码，如图片，文字

title：网页标题

标签的关系

作用：明确代码的书写位置

父子关系（嵌套关系）外父内子

兄弟关系（并列关系）

标签的属性：一个标签中属性可以出现多个，书写没有顺序规定。

注释

对代码的解释和说明，提高代码的可读性。在关键代码旁添加注释可以方便理解、方便查找修改或他人了解你的代码。

**<!-- --是注释标签用来在源文档中插入注释，不会在浏览器中显示。

添加/删除注释的快捷键：ctrl+/

常用标签

标题标签h1-h6 双标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等位置。

显示特点：文字加粗，字号逐渐减小，独占一行。

h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo。

**段落标签p **双标签

一般用在新闻段落、文章段落、产品描述信息等位置。

显示特点：独占一行，段落之间存在间隙。

换行标签br单标签

水平线标签hr单标签

文本格式化标签双标签

作用：为文本添加特殊格式以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

标签名	效果
strong/b	加粗
em/i	倾斜
ins/u	下划线
del/s	删除线

前者标签都自带强调含义，两个文本格式化标签在一行显示

图像标签img单标签

图像格式分为JPG. GIF. PNG;JPG是有损压缩，常用于色彩丰富的图片；GIF用于简单动画或背景透明的图片；由GIF发展而出的PNG格式是无损压缩，具有透明交错动画等特点。

透明指某一颜色或背景透明；交错是在显示图片的过程中从概貌到全貌显示。

插入图片：img src=" " alt=" ">其中src用于指定图像的位置和名称（URL），alt是当图片无法显示时用于替换的文字。

属性	作用	说明
alt	替换文本	图片无法显示时显示的文字
title	提示文本	鼠标选停在图片上面时候显示的文字
*width	图片的宽度	值为数字，没有单位
*height	图片的高度	值为数字，没有单位

后两个不常用，做了解。

路径

指查找文件时，从起点到终点经历的路线。

绝对路径：以根目录为基准，如img src=“C:/site/logo.gif”/

相对路径：以该文档所在位置为基准，如：img src=“logo.gif”/

./表示在当前文件所在的文件夹；…/表示上一级文件夹

超链接标签a双标签

分为文字超链接，图片超链接以及导航栏。

如：a href=“网址”>文字或图片 /a>

实现打开新窗口：设置新属性 target=“_blank”

超链接用途：链接到本站点的其他网页；链接到其他站点需要带有协议部分；虚拟超链接"#"。

多媒体标签

音频标签 双标签

audio src=“音频的URL

属性	作用	特殊说明
src	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

视频标签 双标签

video src=“视频的URL”

属性	作用	特殊说明
src	视频URL	支持格式：MP4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

区域标签双标签

div标签，用于确定一个单独的区域，板块或元素结合。

如：<div align="center"对齐方式></div

常用于结合CSS样式，对页面形成排版布局。

表格标签双标签

table标签，早期用于排版，现在还保留用于表示数据信息。

如：<table border="1"边界>

tr表示行元素，td表示列元素。

<th表头单元标签。

表格结构标签

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

合并单元格

将多个单元格合并成一个单元格，以合并同类信息。 可以跨行合并 ，跨列合并

明确合并的目标，保留最左最上的单元格，添加属性 rowspan/colspan 取值为数字，表示需要合并的单元格数量

列表标签双标签

ol表示有序列表，ul表示无序列表，列表项用<li</li表示。

定义列表 dl ：dl嵌套dt和dd ，dt是定义列表的标题，dd是定义列表的描述或详情。

dl中只能包含dt和dd dt和dd里面可以包含任何内容

表单标签双标签

form标签，采集用户信息的区域 。表单元素有文本框、按钮、单选、复选、下拉列表、文本域。

如<form action=" " action 表示将收集来的数据交给哪个页面处理。

下拉列表 select

如：<select

<option选项一</option

</select

textarea文本域

如：textarea rows行=" " cols列=" ">文本

button按钮

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JS使用

input类型

文本框<input type=“text明文/password密文***”

按钮<input type=“submit提交/reset重置”

单选/复选<input type=“radio/checkbox”

CSS

引入方法

第一种行内引入，如：p style=“color:red;”>;

第二种内嵌样式，内嵌到head>中,如:head>

style type=“text/css”>

p{

color:red;

}/style>/head>

CSS只对当前页面有效，所以多个页面公用css代码时每个页面也要定义；

第三种单独文件引入文件后缀名为.css，引用时：head>

link rel=“stylesheet” href=“css/style.css”/>

head> 优点是维护方便，修改方便，可以在同一个HTML文档内部引用多个外部样式表。

三种引入方法的优先级：行内引入>内嵌引入>单独文件引入

选择器

选择器分为标签选择器、类别选择器、ID选择器、嵌套声明、集体声明、全局声明。选择器之间可以混合使用。

标签选择器

内嵌样式引入，选择器名字就是标签名字。如：

p{

color:red;

}

类别选择器

内嵌样式引入 以 . 开始命名，可以自主命名。

如： .one{ }

引用类别选择器时用“class”属性不需要带“ . ” ，如：p class=“one”>

ID选择器

内嵌样式引入，以 # 开始命名，可以自主命名。

如：#one{ }

引用ID选择器时用“id”属性不需要带"#" ，如：p id=“one”>

注意：与类别选择器不同的是 ID选择器只能被引用一次，类别选择器可以多次引用。

---

嵌套声明

不同标签选择器可以嵌套使用，中间用空格隔开，如：

p span{ } 表示作用于p标签中的span标签内的部分。

集体声明

不同标签选择器之间可以进行集体使用，中间用,隔开，如：

h1,p{ }，表示作用于h1标签和p标签。

全局声明

如：*{ }

画盒子

属性名	作用
width	宽度
height	高度
background-color	背景色

CSS常用属性

单位：px 像素； em 字符 一般自适应 ； %百分比

颜色的表示方法：① 英文名称 如 color：red；

​ ②rgb（0_255，0255,0~255）

​ ③rgb（x%，x%，x%）

​ ④rgba（ ， ， ，0.0~1.0）a表示透明度

​ ⑤#rrggbb 重复的可以删除如红色#ff0000 可以表示为#f00

CSS文本属性

color	文本颜色	red
letter-spacing	字符间距	2px
line-height	行高	14px
text-align	对齐	center left right justify两端对齐
text-decoration	装饰线	none；overline；underline；line-through
text-indent	首行缩进	2em

常利用line-height进行垂直居中，如：

---

p{height：40px；

---

background-color： ；

---

font-size： 14px；

---

line-height： 40px；/line-height和height设置成相同数值/

---

}

常用text-decoration：none；来消除超链接的下划线，如：

---

a{

text-decoration: none;

---

}

CSS字体属性

font	在一个声明中设置所有的字体属性
font-family	字体系列
font-size	字 号	14px 120%
font-style	斜 体	italic
font-weight	粗 体	bold

如果在一个font声明中进行声明需要有一定顺序：斜体 粗体 字号/行高 字体系列。

---

font-family 可设置多个字体 ，字体名称中间有空格时需要用双引号引起，字体之间用逗号隔开，字体按写入顺序查找。

---

CSS背景属性

background	所有背景设置	utl（“aaa.jpg”） repeat-x
background-color	背 景 颜 色	red/#ccc/rgb(255,0,0)
background-image	背 景 图 片	url（“aaa.jpg”）
background-repeat	重 复 方 式	repeat-x/repeat-y/no-repeat

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式

鼠标悬停状态：选择器 : hover {CSS 属性}

伪类-超链接四个状态：
选择器 作用
:link 访问前 提示:如要给超链接设以上四个状态，
:visited 访问后 需要按 LVHA 的顺序书写
:hover 鼠标悬停
:active 点击时(激活)

CSS特性

继承性：子级默认继承父级的文字控制属性，如果子标签有自己的样式则用自己的，不继承

层叠性：相同的属性会覆盖：后面的 CSS 属性覆盖前面的CSS 属性

不同的属性会叠加：不同的 CSS属性都生效

优先级

公式:通配符选择器<标签选择器<类选择器<id选择器<行内样式< ! important

（选中标签的范围越大，优先级越低）（! important 提高优先级至最高，慎用）

优先级 - 叠加计算：如果是复合选择器，则需要权重叠加计算

公式:(每一级之间不存在进位）每个复合选择器都按该公式算

(行内样式，id选择器个数，类选择器个数，标签选择器个数)

规则:从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较

! important 权重最高 继承权重最低

Emmet写法

代码的简写方式，输入缩写，VS Code会自动生成对应的代码

HTML

说明	标签结构	emmet
类选择器		标签名.类名
id选择器		标签名#id名
同级标签		div+p
父子级标签		div>p
多个相同标签		span*3
有内容的标签		div{内容}

CSS：大多数简写方式为属性单词的首字母

标签的显示模式

元素的显示方式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素

独占一行，宽度默认是父级的100%，添加宽高属性生效。

行内元素

一行存多个，尺寸有内容撑开，加宽高属性不生效。

行内块元素

一行存多个，默认尺寸由内容撑开，加宽高属性生效。

转换显示模式

display

属性值	效果
block	块级
inline-block	行内块
inline	行内

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器	说明
E：first-child	查找第一个E元素
E：last-child	查找最后一个E元素
E：nth-child（N）可选任意个标签	查找第N个E元素（第一个元素N值为1）

nth-child

根据元素的结构关系查找多个元素

功能	公式
偶数	2n
奇数	2n+1
找到5的倍数的标签	5n
找到第五个以后的标签	n+5
找到第五个以前的标签	-n+5

n从零开始

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E：：before	在E元素里面最前面添加一个伪元素
E：：after	在E元素里面最后面添加一个伪元素

注意：**必须设置content：“ “**属性来设置伪元素的内容，如果没有内容，引号留空，否则伪元素失效

伪元素默认为行内显示模式

权重和标签选择器相同