[前端]HTML+CSS教程

HTML

参考视频:前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili

定义：超文本标记语言

超文本: 链接

编辑器：WebStorm或VsCode

标签语法

双标签：

需要包括文字内容的标签

语法： 开始标签–文字–结束标签

例如: <strong>文字内容</strong>

结束标签比开始标签多 /， 表示结束的地方。

单标签：

不需要文字内容的标签

例如水平线标签hr

HTML的基本骨架

1
2
3
4
5
6
7
8
<html>
   <head>
       <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

VS Code快速生成骨架:

在HTML文件中,!+Enter/Tab键

html : 整个网页

head : 网页头部

title : 网页标题

body : 网页主体

标签的关系

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

  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)
1
2
3
4
5
<html>
    <head></head>
    <body>
    </body>
</html>

此处，html与head和body为父子关系，head与body为兄弟关系。

注释

<!--注释内容-->

各种标签

基本标签

功能 标签名 内容 单/双标签
标题 h1~h6 (数字代表标题级别) 使文字成为标题，加粗加大独占一行 双
段落 p 独占一行，段落有间隙 双
换行 br 换行 单
水平线 hr 划分界限 单

文本格式化标签

strong、em、ins、del自带强调含义（语义）

功能 标签名 内容 单/双标签
加粗 strong/b 加粗 双
倾斜 em/i 倾斜 双
下划线 ins/u 下划线 双
删除线 del/s 删除线 双

图像标签

<img> : 插入图片

其必须属性为src, 指定图片的URL

用例: <img src="图片的URL">

若用本地图片，URL既可以用绝对路径，也可以用相对路径(使用./从程序所在位置(的文件夹)出发查找目标文件)

在./前每加一个点.，意味着从上一级文件夹出发访问

例如: ./img/hello.jpg

属性之间用空格’ ‘隔开

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

浏览器缩放图片是等比缩放的，宽缩小，高也可能缩小

超链接标签

<a href="网址的URL">文字</a>

href属性写#，表示空链接，不会跳转

其它属性 作用
target=”_blank” 新窗口跳转页面

音频标签

<audio></audio>

属性 作用 说明
src(必须属性) 音频URL 支持格式：MP3
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放 为了提升用户体验，浏览器一般禁用

视频标签

<video></video>

属性: src、controls、loop、autoplay、muted(静音播放)

autoplay: 对于静音视频浏览器不禁用。

列表

分类: 无序列表ul、有序列表ol、定义列表dl

无序列表

ul 嵌套li, ul是无序列表，li是列表条目

1
2
3
4
<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

代码效果：

  • 第一项
  • 第二项

注意：

  • ul标签只能包括li
  • li里可包括其它标签

有序列表

ol嵌套li, ol是有序列表

1
2
3
4
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

代码效果:

  1. 第一项
  2. 第二项

定义列表

dl嵌套dt和dd, dt是定义列表的标题, dd是定义列表的描述/详情

1
2
3
4
5
<dl>
    <dt>列表标题</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>
列表标题
描述1
描述2

dl里面只能包含dt和dd

dt和dd可以包含其它内容

表格

基本使用

table嵌套tr, tr嵌套td/th

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<--!border属性为表格边框宽度,可无-->
<table border="1"> 
    <tr>
        <th>标签名</th>
        <th>说明</th>
    </tr>
    <tr>
    	<td>table</td>
        <td>表格</td>
    </tr>
    <tr>
    	<td>tr</td>
        <td>行</td>
    </tr>
    <tr>
    	<td>td</td>
        <td>内容单元格</td>
    </tr>
    <tr>
    	<td>th</td>
        <td>表头单元格</td>
    </tr>
</table>

效果展示:

标签名 说明
table 表格
tr 行
td 内容单元格
th 表头单元格

表格结构标签

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

作用：使结构更清晰，无效果。

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1"> 
    <thead>
    	<tr>
            <th>标签名</th>
            <th>说明</th>
        </tr>
    </thead>    
    <tbody>
        <tr>
            <td>table</td>
            <td>表格</td>
        </tr>
    <tbody>
    <tfoot>
    	<tr>
        	<td>总结</td>
            <td>更改展示</td>
        </tr>
    </tfoot>
</table>

合并多元格

合并多元格的步骤:

1.明确合并的目标

2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

  • 跨行合并，保留最上单元格，添加属性rowspawn

  • 跨列合并，保留最左单元格，添加属性colspawn

3.删除其他单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1">
	<thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>张三</td>
            <td>99</td>
            <td rowspan="2">100</td>
        </tr>
        <tr>
        	<td>李四</td>
            <td>98</td>
        </tr>
    </tbody>
</table>

代码效果：

姓名 语文 数学
张三 99 100
李四 98

表单

作用: 收集用户信息

input标签

其type属性不同，功能不同

type属性值 说明
text 文本框，用于输入单行文本
password 密码框，输入密码变成*
radio 单选框
checckbox 多选框
file 上传文件 
1
2
3
4
5
6
7
8
文本框<input type="text">
<br>
密码框<input type="password">
<br>
单选框<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
多选框<input type="checkbox">

文本框


密码框


单选框男
女


多选框


上传文件

input标签占位文本

<input type="..." placeholder="提示信息">

单选框-radio

属性名 作用 特殊说明
name 控件名称 控件分组，同组只能选中一个
checked 默认选中 属性名和属性值相同，简写为一个单词(即不需要被赋值)

上传文件-file

默认情况只能上传一个，想要能同时上传多个，需要有multiple属性。

多选框-checkbox

又称复选框

默认选中属性checked

下拉菜单

select嵌套option

selected属性表示默认选中

1
2
3
4
5
6
7
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option selected>重庆</option>
</select>

文本域

作用:多行输入文本的表单控件

标签:textarea, 双标签

边框可拖拽,但一般禁用。可以有col、row设置尺寸，但一般是css负责。

1
<textarea>请输入评论</textarea>

label标签

作用: 网页中, 某个标签的说明文本

可使用label增大点击范围

支持: 文本框、密码框、上传文件、单选框、多选框、文本域等。

  • 写法一
    • lable标签只包裹内容，不包裹表单控件
    • 设置lable标签的for属性值，和表单控件的id属性值相同
  • 写法二
    • 使用lable标签包裹文字和表达那控件，不需要属性。
1
2
<input type="radio" name="gender" id="man"><lable for="man">男</lable>
<lable><input type="radio">女</lable>

男
女

按钮

button双标签,具有type属性

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

配合form标签

1
2
3
4
5
6
7
8
<--!发送数据的地址-->
<form action="">
    用户名:<input type="text">
    <br><br>
    密码:<input type="password">
    <br><br>
    <button type = "reset">重置</button>
</form>

效果:

用户名:

密码:

无语义的布局标签与字符实体

无语义的布局标签

作用: 布局网页(划分网页区域，摆放内容)

  • div: 独占一行 (被称作大盒子)
  • span: 不换行 (被称作小盒子)

字符实体

作用：在网页中显示预留字符

显示结果 描述 字符实体
空格 &nbsp
< 小于号 &lt
> 大于号 &gt

若不使用字符实体，则即使连续敲出多个空格，网页只显示一个

故若想显示<p>则使用&ltp&gt

CSS

定义： 层叠样式表(Cascading Style Sheets), 是一种样式表语言，用来描述HTML文档的呈现。

head标签里放

1
2
3
4
5
6
7
8
9
10
<style>
    /*选择器{}*/
    p{
        /*CSS属性*/
        /*文字颜色*/
       color: red; 
        /*字号*/
       font-size: 30px;
    }
</style>

CSS引入方式

  • 内部样式表: 学习使用

    • CSS代码写在style标签里面

      在head标签里放

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <style>
          /*选择器{}*/
          p{
              /*CSS属性*/
              /*文字颜色*/
             color: red; 
              /*字号*/
             font-size: 30px;
          }
      </style>

  • 外部样式表： 开发使用

    • CSS代码写在单独的CSS文件中
    • 在HTML使用link标签引入(也放在head内)

​ <link rel="stylesheet" href="./my.css">

  • 行内样式

    • CSS写在标签的style属性值里

      <div style="color:red; font-size:20px;">这是div标签</div>

效果展示:

这是div标签

基础选择器

作用: 查找标签，设置样式

基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

标签选择器

使用标签名作为选择器,即选中同名标签设置相同的样式。

例子

1
2
3
4
5
<style>
p{
    color:red;
}
</style>

缺点:无法差异化同名标签的显示效果

类选择器

作用: 查找标签，差异化设置标签的显示效果。

步骤

  • 定义类选择器 –> .类名
  • 使用类选择器 –> 标签添加class=”类名”
1
2
3
4
5
6
7
8
9
<style>
	/*定义类选择器*/
    .red{
		color:red;
    }
<sytle>
    
<!--使用类选择器-->
<div class="red">这是div</div>

id选择器

查找标签，差异化设置标签的显示效果。

场景: id选择器一般配合JavaScript使用，很少用来设置CSS样式

步骤

  • 定义id选择器 –> #id名
  • 使用id选择器 –> id=”id名”
1
2
3
4
5
6
7
8
9
<style>
	/*定义id选择器*/
    #red{
		color:red;
    }
<sytle>
    
<!--使用id选择器-->
<div id="red">这是div</div>

规则:

同一个id选择器在一个页面只能使用一次

通配符选择器

作用：查找页面所有标签，设置标签为相同样式

例子：

1
2
3
4
5
<style>
	* {
		color: red;
	}
<style>

使全局颜色为红

文字控制属性

描述 属性
字体大小 font-size
字体粗细 font-weight
字体倾斜 font-style
行高 line-height
字体族 font-family
字体复合属性 font
文本缩进 text-indent
文本对齐 text-align
修饰线 text-decoration
颜色 color

字体大小

  • 属性名: font-size
  • 属性值: 文字尺寸(单位px)

字体粗细

属性名:font-weight

属性值

  • 数字
正常 400
加粗 700
  • 关键字
正常 normal
加粗 bold

字体样式(是否倾斜)

常见作用：清除文字默认的倾斜效果

属性名: font-style

属性值

  • 正常(不倾斜): normal
  • 倾斜: italic

行高

作用: 设置多行文本的间距

属性名: line-height

属性值:

  • 数字+px
  • 数字(当前font-size属性值的倍数,)

行高属性值的计算: 字体大小+上下间距(一行文字的顶端(底端)到下一行文字的顶端(底端)的距离)

垂直居中技巧：行高属性值和盒子高度一样。(只适用单行)

字体族

属性名: font-family

属性值：字体名

font-family: 楷体

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。

建议适用sans-serif为无衬线字体(无起笔收笔)

font属性

font是一个可以实现上述的所有效果的复合属性，是一种属性的简写方式，属性值用空格隔开

font必须写自豪和字体，否则不生效

font: italic 700 30px/2 楷体

// 文字倾斜、文字加粗、字体大小是30px\行高2倍、楷体

文本缩进

段落首行前面空出

属性名: text-indent

属性值:

  • 数字+px
  • 数字+em(1em = 当前标签字号大小)

例子:

text-indent: 2em //空2格

文本对齐

作用: 控制内容水平对齐

属性名: text-align

属性值 效果
left 左对齐(默认)
center 居中对齐
right 右对齐

修饰线

属性名: text-decoration

属性值 效果
none 无
underline 下滑线
line-through 删除线
overline 上划线

文字颜色

属性名: color

颜色表示方式 属性值 说明 使用场景
颜色关键字 颜色引文单词 red、green… 学习测试
rgb表示法 rgb(r,g,b) r,g,b表示红绿蓝三原色，取值0-255 了解
rgba表示法 rgba(r,g,b,a) a表示透明度,取值0-1 开发使用，实现透明
十六进制表示法 #RRGGBB #000000,#ffcc00,简写#000,#fc0 开发时使用

例子

1
2
3
4
color:red;
color: rgb(0,255,1);
color: rgba(0,255,1,0.5);
color: #fc0;

调试工具

作用: 检查、调试代码

1.打开调试工具

  • F12

2.使用调试工具

通过选择工具选择查看区域，可以试着取消css功能，若代码有误会有黄色三角提示。

复合选择器

定义: 由两个或多个基础选择器

作用: 更准确、更高效的选择目标元素(标签)

后代选择器

后代选择器: 选中某元素的后代元素。

选择器写法: 父选择器、子选择器{css属性}，父子选择器之间用空格隔开。

1
2
3
4
5
6
7
8
9
10
11
<style>
	div span{
		color:red;
	}
</style>
/*非div后代,颜色正常*/
<span> span标签</span>
/*为div后代,颜色正常*/
<div>
	<span>这是div的儿子span</span>
</div>

子代选择器

只能选中子代，非子代的后代不会被选中

写法: 父选择器>子选择器

1
2
3
div > span{
	color: red;
}

并集选择器

选中多组标签设置相同样式

写法: 选择器之间用,隔开

1
2
3
4
5
p, 
div, 
span {
	color: red;
}

交集选择器

选中同时满足多个条件的元素。

写法: 选择器1选择器2{CSS属性},选择器之间连写,没有任何符号。

1
2
3
4
5
6
/*.box为类*/
p.box{
	color: red;
}

<p class="box">红色</p>

伪类选择器

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

鼠标悬停状态:

选择器:hover{css属性}

1
2
a:hover{color:red;}
.box:hover{color:red;}

伪类-超链接

选择器 作用
:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时(激活)

提示：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。

CSS特性

继承性

定义: 子级默认继承父级的文字控制属性。

例子:

1
2
3
4
5
6
7
8
9
<style>
	body{
		font-size: 30px;
	}
<style>

<body>
	<p>受body影响，字体大小变为30px</p>
</body>

提示: 自己有的样式，会覆盖从父级继承的样式（其它没有的仍会继承）

层叠性

特点:

  • 相同的属性会覆盖: 后面的CSS属性覆盖前面的CSS属性
  • 不同的属性会叠加: 不同的CSS属性都生效
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
	div{
    	color: red;
        font-weight:30px;
	}
    div {
		color:green;
        font-size:700;
    }
</style>

/*等同于*/
div {
    color:green;
    font-weight:30px;
    font-size:700;
}

优先级

又称权重，基于不同种类的选择器的匹配规则。

规则: 选择器优先级高的样式生效。

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

(选中标签的范围越大，优先级越低)

!import 为提权功能，使其权重最高，放在属性值;前慎用。

叠加计算规则

叠加计算: 如果是复合选择器，则需要权重叠加计算。

公式: (每一级不存在进位)

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

规则:

  • 从左向右依次比较个数，同一级个数多的优先级高，如果个数相同则向后比较
  • !important权重最高
  • 继承权重最低

Emmet写法

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

  • HTML

​

说明 标签结构 Emmet
类选择器 <div class="box"></div> 标签名.类名
id选择器 <div id="box"></div> 标签名#Id名
同级标签 <div></div><p></p> div+p
父子级标签 <div><p></p></div> div>p
多个相同标签 <span>1</span><span>2</span><span>3</span> span*3
有内容的标签 <div>内容</div> div(内容)
  • CSS

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

背景属性

背景颜色

网页中的背景颜色

属性名: background-color

属性值: 颜色

背景图

网页中，使用背景图实现装饰性的图片效果。

属性名: background-image (bgi)

属性值: url

1
2
3
4
5
6
div{
	width: 400px;
	height: 400px;
	/*背景图默认平铺*/
	background-image: url;
}

背景图平铺方式

属性名:background-repeat

属性值 效果
no-repeat 不平铺
repeat 平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺

背景图位置

属性名: background-position(bgp)

属性值: 水平方向位置 垂直方向位置

  • 关键字
关键字 位置
left 左侧
right 右侧
center 居中
top 顶部
bottom 底部
  • 坐标（数字+px，正负都行,可与关键词混用)

例如图片在左上角:

background-position: 0 0

background-position: left top

提示:

  • 关键字法，可以颠倒取值顺序
  • 写一个关键字，另一个方向默认居中。写一个数字，其表示水平方向，垂直方向居中。

背景图缩放

属性名: background-size

属性值

  • 关键字
关键字 作用
cover 等比例缩放至完全覆盖背景区域，可能背景图部分不见
contain 等比例缩放至刚好放入背景区域，可能北京区部分空白
  • 百分比: 根据盒子尺寸计算图片大小
  • 数字+单位

背景图固定

作用: 背景不会随着元素的内容滚动(脱离)

属性名:background-attachment (bga)

属性值: fixed

背景复合属性

属性名: background (bg)

属性值: 背景色、背景图、背景平铺方式、缩放…….（用空格隔开）

显示模式

显示模式: 标签(元素)的显示方式

  • 块级元素 (例如div)

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

  • 行内元素 (例如span)

    • 一行共存多个，尺寸由内容撑开
    • 添加宽高属性不生效

  • 行内块元素 (例如img)

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

转换显示模式

属性名: display

属性值: block、inline-block、inline(不常用)

结构伪类选择器

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

选择器 说明
E:first-child 查找第一个E元素
E:lastchild 查找最后一个E元素
E:nth-child(N) 查找第N个E元素（从1开始） 
1
2
3
4
5
6
7
li:first-child{
	background-color: green
}

<ul>
	<li>li 1</li>
</ul>

:nth-child（公式）

例如li:nth-child(2n+1){}

(此时n从0开始)

伪元素选择器

作用: 创建虚拟元素(伪元素)，用来摆放装饰性内容

选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E:after 在E元素里面最后面添加一个伪元素
  • 必须设置content:” “属性。如果没有内容则留空
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同

PxCook

PxCook(像素大厨)是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

  • 开发面板（自动只能识别）
  • 设计面板（手动测量尺寸和颜色）

弹幕说现在用蓝湖

盒子模型

作用: 布局网页，摆放盒子和内容

组成

盒子模型重要组成部分:

  • 内容 - width & height
  • 内边距 - padding (出现在内容于盒子边缘之间)
  • 边框线 - border
  • 外边距 - margin (出现在盒子外面)

边框线

属性名: border (bd)

属性值: 边框线粗细(数字+单位) 线条样式 颜色

属性值 线条样式
solid 实现
dashed 虚线
dotted 点线

若要设置单方向边框线

属性名: border-方位名词(top、bottom、left、right)

内边距

作用: 设置内容与盒子边缘之间的距离

属性名: padding/padding-方位名词

属性值: 数字+单位

如果设置了方位名词，如果当前方向没有数值，默认值和对面一样。

尺寸计算

  • 默认情况

    盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

  • 结论: 给盒子加border/padding会撑大盒子

  • 解决:

    • 手动做减法，宽高减掉border/padding的尺寸
    • 内减模式: box-sizing: box-border

外边距

作用: 拉开两个盒子的距离

属性名: margin

属性值: 数字+单位