HTML 与 CSS

HTML

一、基础认知

1.1 Web标准

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色，大小）
行为	JavaScript	网页模型的定义与页面交互

1.2 HTML的概念

超文本标记语言

1.3 标签

例如：strong>加粗

双标签：标签由两部分构成，前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。

单标签：少数标签由一部分组成。

1.HTML页面固定结构-----HTML标签

2.网页注释

3.标题标签

从大到小

4.段落标签

我是一段文字

段落之间存在间隙，自成一行

5.换行
,单标签，强制换行

水平线标签

---

,单标签，在页面中显示一条水平线、

• html中加入虚线

6.文本格式化标签

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

7.图片标签

属性名：alt 属性名：title

属性值：替换文本 属性值：提示文本

当图片加载失败时，才显示alt的文本 当鼠标悬停时，才显示的文本

当图片加载成功时，不会显示alt的文本

（1）图片标签的width和height属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

如果同时设置了width和height两个，若设置不当时图片可能会变形

8.路径

相对路径：从当前文件开始出发找目标文件的过程

9.音频标签

目前只支持三种格式：MP3、Wav、Ogg

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

10.视频标签

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

11.超链接

超链接

双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

12.列表

无序列表 ul标签中只允许li标签，li标签可以嵌套任何内容

有序列表：在网页中表示一组有顺序之分的列表

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

自定义列表：

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

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

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

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

dd前会默认显示缩进效果；dl标签中只允许包含dt/dd标签；dt/dd标签可以包含任何内容

13.表格

标签的嵌套关系：table>tr>td

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格多行，可用于包裹td
td	表格单元格，可用于包裹内容

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

使用场景：在大表格中表示整体大标题和一列小标题

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

caption标签书写在table标签内部；th标签在tr标签内部（用于替换td标签）

• 表格的结构标签（可以省略）

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

• 合并单元格

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

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

  跨行合并，跨列合并

  属性名	属性值	说明
  rowspan	合并单元格的个数	跨行合并，将多行的单元和垂直合并
  colspan	合并单元格的个数	跨列合并，将多行的单元格水平合并

  只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）

14.表单

• input

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

  type的属性值

  标签名	type属性值	说明
  input	text	文本框，用于输入单行文本（写什么就显示什么）
  input	password	密码框，用于输入密码(书写的内容会变成点点显示)
  input	radio	单选框，用于多选一
  input	checkbox	多选框，用于多选多
  input	file	文件选择，用于之后上传文件
  input	submit	提交按钮，用于提交
  input	reset	重置按钮，用于重置
  input	button	普通按钮，默认无功能，之后配合js添加功能

  占位符：placeholder，提示用户输入内容（在网页中显示输入单行文本的表单控件）

  • 单选框-----radio

    属性名	说明
    name	分组，有相同name属性值的单选框为一组，一组中同事只能有一个被选中
    checked	默认选中

  • 文件选择-----file

    属性名	说明
    multiple	多文件选择

  • 按钮-----button

    标签名	type属性值	说明
    input	submit	提交按钮，点击之后提交数据给后端服务器
    input	reset	重置按钮，点击之后恢复表单默认值
    input	button	普通按钮，默认无功能，之后配合js添加功能

    button标签是双标签，更便于包裹其他内容：文字，图片等

• select：下拉菜单的整体

  option：下拉菜单的每一项

  常见属性 selected：下拉菜单的默认选中

• textarea文本域标签（右下角可以拖拽改变大小）

  cols：规定了文本域内可见宽度

  rows：规定了文本域内可见行数

• label标签

  在label标签把内容包裹起来，在表单标签上添加id属性。

  在label标签的for属性中设置对应的id属性值。

  男

15.语义化标签

1.没有语义的布局标签-div和span

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

2.有语义的布局标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

16.字符实体

网页只认识一个空格

显示结果	描述	实体名称
	空格
<	小于	<
>	大于号	>
&	和号	&
"	引号	"

二、兼容

&l