HTML+CSS基础语法

HTML学习

1.排版标签

标题h系列 段落p 换行br 水平线hr

2.html文本格式化标签

b 加粗 u下划线 i 倾斜 s 删除线

strong 加粗 ins 下划线 em 倾斜 del 删除线

3.媒体标签

3.1图片标签

格式

<img src="" alt="" >

(1)属性名:src

属性值:目标图片的路径

*路径

同级和下级目录:./ 之后选择即可

上级目录:…/ 之后选择即可

(2)属性名:alt

属性值:替换文本

(3)属性名:title

属性值:提示文本

当鼠标悬停时，才显示的文本

(4)属性名:width和height

属性值:宽度和高度(数字)

3.2.音频标签

格式

<audio src="" controls></audio>

(1)src:音频路径

(2)controls:音频控件

(3)autoplay:自动播放

(4)loop:循环播放

3.3视频标签

格式

<video src="./video/1.mp4" controls width="300px"></video>

(1)src:视频路径

(2)controls:视频控件

(3)autoplay:自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放

(4)loop:循环播放

3.4链接标签

格式

<a href=""></a>

(1)target属性

取值1:_self:在当前窗口中跳转

取值2:_blank:在新窗口中跳转

*空链接

<a href="#"></a>

功能：

点击之后回到网页顶部

开发中不确定该链接最终跳转位置，用空链接占个位置

4.列表标签

种类:无序列表、有序列表、自定义列表

4.1无序列表

ul标签:表示无序列表的整体

ul标签中只允许嵌套li标签

li标签:表示无序列表的每一项

标签中可以嵌套任意内容

4.2有序列表

ol标签:表示无序列表的整体

ol标签中只允许嵌套li标签

li标签:表示无序列表的每一项

标签中可以嵌套任意内容

4.3自定义列表

dl标签:表示自定义列表的整体

dl标签中只允许嵌套dt/dd标签

dt标签:表示自定义列表的主题

dt/dd标签中可以嵌套任意内容

dd标签:表示对于主题的每一项内容

5.表格标签

表格基本标签的嵌套规范 table > tr > td

table标签:表格整体

tr标签:表格每行

td标签:对于主题的每一项内容

5.1表格相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

5.2表格标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

5.3合并单元格

合并单元格步骤:

1. 明确合并哪几个单元格

2. 通过左上原则，确定保留谁删除谁

​ 上下合并→只保留最上的，删除其他

​ 左右合并→只保留最左的，删除其他

3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

6.表单标签

6.1input标签

input标签可以通过type属性值的不同，展示不同效果

标签名	type 属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合 js 添加功能

6.2select下拉菜单标签

6.3textarea文本域标签

7.字符实体

常见字符实体

显示结果	描述	实体名称
空格		空格
小于号	<	小于号
大于号	>	大于号
和号	&	和号
引号	"	引号
=	无描述内容	无描述内容
撇号（IE 不支持）	'	撇号
(cent)	¢	cent
f (pound)	£	pound
¥（元(yen)）	¥	yen
C（欧元(euro)）	€	euro
S（小节）	§	小节
版权(copyright)	©	版权

8.CSS引入方式

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS 写在 style 标签中	当前页面	小案例
外联式	CSS 写在单独的 css 文件中，通过 link 标签引入	多个页面	项目中
行内式	CSS 写在标签的 style 属性中	当前标签	配合 js 使用

9.基础选择器

9.1标签选择器

结构:标签名 { css属性名:属性值; }

作用:通过标签名，找到页面中所有这类标签，设置样式

9.2类选择器

结构:.类名 { css属性名:属性值; }

作用:通过类名，找到页面中所有带有这个类名的标签，设置样式

9.3id选择器

结构:#id属性值 { css属性名:属性值; }

作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式

9.4通配符选择器

结构: { css属性名:属性值; }

作用:找到页面中所有的标签，设置样式

10.字体文本样式

10.1字体样式

10.1.1字体大小

属性名:font-size

取值:数字 + px

10.1.2字体粗细

属性名:font-weight ➢ 取值:

关键字:

正常：normal

加粗：bold

纯数字:100~900的整百数:

正常：400

加粗：700

10.1.3字体样式(是否倾斜)

属性名:font-style

取值:

正常(默认值):normal

倾斜:italic

10.1.4字体系列 font-family

属性名:font-family

常见取值:具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列

10.2文本样式

10.2.1文本缩进

属性名:text-indent

取值:

数字+px

数字+em(推荐:1em = 当前标签的font-size的大小)

10.2.2文本水平对齐方式

属性名:text-align

取值:

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

10.2.3水平居中方法总结 text-align : center

10.2.4文本修饰

属性名:text-decoration

取值:

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

10.3line- height行高

10.3.1行高

作用:控制一行的上下行间距

属性名:line-height

取值:

数字+px

倍数(当前标签font-size的倍数)