html+css知识点总结回顾（一）

一、html+css总结笔记：

第一天

1.五大浏览器（了解）

IE浏览器 火狐浏览器 谷歌浏览器 Safari浏览器 欧朋(Opera)

2.浏览器渲染引擎（浏览器内核）：

浏览器	内核
IE	Trident
火狐	gecko
Safari	webkit
Chrome/Oprea	Blink(webkit的分支)

3.web标准

为了解决相同代码，不同浏览器渲染效果不一致的问题。

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式
行为	JavaScript	负责页面交互的动态效果

Web标准要求页面实现：结构、表现、行为三层分离

4.HTML标签的结构

<标签名>

<开始标签><结束标签/>

单标签

5.h1-h6标签独占一行，p标签独占一行，两段之间有间隔

6.文本格式化标签

​ strong b：加粗

​ em i ：倾斜

​ ins u ：下划线

​ del s ：删除线

7.图片

img属性介绍：必须的属性是src

alt:图片加载失败时显示文字

title：鼠标悬停时显示文字

width和height一般只设置一个。设置一个时图片会按照原比例放大或缩小。同时设置两个可能破坏原比例。

图片引用路径

（1）绝对路径（了解）

	+ 文件地址栏的路径，从系统盘出发寻找目标的一整条路径
	+ 网络绝对路径，一整条网络地址。

（2）相对路径

特点：从当前文件出发，寻找目标代码的文件

场景：

• 同一级:直接写上文件名称或者./开头+文件名称
• 下一级：先访问同一级的文件夹，然后通过/访问文件夹中的内容
• 上一级：通过…/访问上一级

8.超链接 a标签

当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空链接）【 href 还未完成的页面用”#“占位】

<a href="#">未完成页面</a>

超链接标签a的属性：

• href：指定跳转的地址（必有属性）
• target：表示设置a标签跳转的方式
  • _self：在当前页面中跳转，会覆盖原来的界面
  • _blank:重新打开一个标签页进行跳转，不会覆盖原来的页面

第二天

1.音频或视频标签

音频标签audio 视频标签video（了解）：用于在页面中插入音频/视频

属性：

• src：用于指定当前播放的媒体路径

• controls：显示播放的控件

• autoplay：自动播放 谷歌不自动播放 静音状态可自动播放

• loop：循环播放

• muted：静音

  <audio src="images/music.mp3" controls autoplay loop></audio>
  

2.有序/无序列表

有序：you ol

无序：wu ul

自定义列表组成

​ - dl：自定义列表容器标签

​ - dt：自定义列表标题

​ - dd：自定义列表的每一项

​ 显示特点：dd前面默认有缩进效果

​ 注意点：

​ - dl标签只能包含dt和dd标签

​ - dt/dd标签可以包含任意标签

​ 应用场景：网站底部导航区域

`

​

选购指南

​

手机

​

手机

​

手机

​

手机

​

手机

​

手机

​

手机

`

3.表格

表格标签的组成：

​ - table：表格的容器标签

​ - tr：表格的行

​ - td：表格的单元格

表格的嵌套关系：table>tr>td

绘制表格的思路：先确定行，再确定列

其他单元格：

​ - th：表头单元格，具有加粗和居中的效果

​ - caption：表格标题标签，在表格上方居中显示

表格的结构标签（用于包裹tr标签，可省略不写）

​ - thead：表格的头部

​ - tbody：表格的主题部分

​ - tfoot：表格的底部

合并单元格步骤：

1.确定需要合并的单元格有哪些

2.确定要保留和删除的单元格（左上法则）

• 上下结构：保留最上面，删除其他的
• 左右结构：保留最左边，删除其他的

3.给保留的单元格添加合并属性

• rowspan:跨行合并的个数

• colspan：跨列合并的个数

  注意点：不能跨结构合并（thead的和tbody的不能合并）

4.表单

input标签：比较特殊，可以根据type的属性的不同来显示对应的输入效果

type属性值：

• text：普通文本输入

• password：密码框，输入内容是密文

• radio：单选按钮

• checkbox：复选框

• file：文件选择

• submit：提交按钮

• reset：重置按钮

• button：普通按钮，配合js使用

  （button按钮要有个value值 作为按钮的名称显示出来）

其他属性：

• placeholder:输入框中的提示文字
• checked：默认被选中
• name：给标签的数据命名，如果当前是单选按钮的话，可以实现单选效果
• multiple：文件实现多选
• value： 表单标签的值，按钮的值会作为按钮名称

注意点：

​ - submit和reset如果想要生效，需要使用form表单将表单标签包裹起来

button标签：默认为普通按钮

​ 属性type：

• button：普通按钮（默认值 谷歌有提交效果）
• submit：变为提交按钮
• reset：变为重置按钮

​ 注意：submit和reset需要借助form表单包裹内容才能实现

select标签

下拉菜单的组成:

• select标签：下拉菜单的容器
• option标签：下拉菜单的每一项

​ 标签属性：

• selected：默认被选中属性

label标签

label标签：将表单元素与提示文字关联起来

​ 用法：

​ 1.用label包裹提示文字，通过for属性指定目标表单元素的id

​ 2.直接用label标签包裹表单元素和提示文字

男
女

5.没有语义的标签

• div:
  • 独占一行
  • 自上而下将页面划分为若干行
• span：
  • 一行可以显示多个
  • 用于截取段落中部分文字用来单独添加样式

6.字符实体

字符实体记住三个

​ 1、空格是" "

​ 2、大于号是"&gt;"

​ 2、小于号是"<"