复习html+Css

自我回顾重点知识

定位
1. 绝对定位
```
postion:absolute;
```
  相对定位
```
position: relative;
```
  固定定位
```
position:fixed
固定定位与绝对定位类似，但是固定定位是相对于浏览器窗口定位，并且不会随着滚动条进行滚动
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。
```
  静态定位
```
position:static;
静态定位： 一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流
```
  ***子绝父相
```
position:absolute;
position:relative;
```
  、绝对定位vs相对定位
  
  、绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层，文本流放在首层)，它们之间互不影响；相对定位元素在首层，与文本流一起存放，它们之间互相影响。
  
  被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间，可以通过z-index来设置它们的堆叠顺序。

浮动

左浮动：

float:left

右浮动：

float:right

块级元素+行内元素+行内块元素

块级元素：默认独占一行，可以设置宽高

行内元素：一行可以多个，不可以设宽高

行内块元素：一行可以多个，也可以设宽高

常见的块级元素标签有：*div， p， h， ul， li ， dl ，dt ，dd ，form ，header ，nav ，footer…
常见的行内元素标签有：span a b u i s ints em strong del…
常见的行内块元素标签有：input textarea butto select …
特殊情况：img元素有行内块元素的特点

类型转换

目的：改变元素的默认显示特点，让元素符合布局要求

属性效果使用频率
display:block 转换成块级元素较多
dispaly:inline-block 转换成行内块元素较多
display:inline 转换成行内元素极少

属性	效果	使用频率
display:block	转换成块级元素	较多
dispaly:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	极少

文本格式化标签

需要让文字加粗，下划线，倾斜，~~删除线~~ 等效果

标签	效果
b	加粗
u	下划线
i	倾斜
s	删除线

常用文本格式化标签

标签	效果
strong	加粗
ins	下划线
em	倾斜
del	删除线

在网页中展示一张图片，需要使用什么标签

img标签

常见属性

属性	说明
src	指定需要展示图片的路径
alt	替换文本，当图片加载失败的时候，才显示文字
title	提示文字，当鼠标悬停时，才才显示文字
width	图片的宽度
height	图片的高度

<img src="./" alt="当图片加载失败的时候，提示文字" title="当鼠标悬停时，才显示文字">

路径

页面加载图片的时候，需要找到相对应的图片

绝对路径：绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

相对路径：直接写路径名 ./ …/

音频标签的介绍

在页面插入音频

属性名	功能
src	音频l路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

视频标签的介绍

在页面插入视频

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

链接标签的target属性

属性名：target

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

input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

Ø 标签名：input

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

Ø type属性值：

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

常用属性：

属性名	说明
placeholder	占位符。提示用户输入内容文本
value	用户输入的内容，提交后会发送给后端服务器
name	提交后告诉后端发送过来的数据是什么含义，在单选框中相同name属性值相同为一组，一组中只能选中一个
checked	默认选中。作用于单选框和多选框
multiple	选中多个文件

代码如下：

<form action="">
        用户名：<input type="text" placeholder="输入用户名"> <br><br>
        密码：<input type="password" placeholder="密码"><br><br>
        性别: <input type="radio" name="sex" checked>男 
        	  <input type="radio" name="sex">女 <br><br>
        多选框: <input type="checkbox" checked>唱
        		<input type="checkbox" checked>跳
        		<input type="checkbox" checked>rap 
        		<input type="checkbox" checked>篮球<br><br>
        选择文件： <input type="file" multiple><br><br>
        提交框： <input type="submit" value="提交"><br><br>
        重置框： <input type="reset">
    </form>

如要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可

button按钮标签

场景： 在网页中显示用户点击按钮

type属性值:

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

<form action="">
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button>普通按钮</button>
</form>

注意点：

在谷歌浏览器中默认是提交按钮
button标签是双标签，便于包裹其他内容：文字，图片等

select下拉菜单标签

场景： 在网页中提供多个选项的下拉菜单表单控件

标签组成：

select标签：下拉菜单整体
option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中

<select>
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="" >广州</option>
        <option value="" selected>安庆</option>
       
</select>

textarea文本域标签

场景： 在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

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

注意点：

右下角可以拖动改变大小
实际开发是针对样式效果推荐使用css设置

代码如下：

<textarea cols="30" rows="10"></textarea>

效果如下：

列表标签

场景： 在网页中按照一行一行的展示出关联的内容，如新闻列表，排行榜等

特点： 按照行的方式，整齐显示内容

种类： 无序列表，有序列表，自定义列表

无序列表

场景：在网页中表示一组无顺序之分的列表，如新闻列表

标签组成：

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

代码如下：

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    ...
</ul>

显示特点：列表的每一项前默认显示圆点标识

可使用list-style: none; 去除小圆点

ul标签中只允许包含li标签
li标签可以包含任意标签

有序列表

场景： 在网页中表示一组有顺序之分的列表，如排行版等

标签组成：

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

代码如下：

<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第三</li>
    ...
</ol>

显示特点：列表的每一项默认显示序号标识

ol标签中只能包含li标签
li标签可以包含任意标签

自定义列表

场景： 在网页的底部导航通常会使用自定义列表实现

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

代码如下：

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

显示特点：dd标签会默认显示缩进效果

dl标签中只能包含dt/dd标签
dt/dd标签可以包含任意内容

表格标签

场景： 在网页中可以以行+列的单元格方式展示数据，如学生成绩表

基本标签：

标签名	说明
table	表格整体，用于包含多个tr
tr	表格的每一行，用于包裹td ，th
td	表格的单元格，用于包裹内容
caption	表示表格整体大标题，默认在表格整体的顶部居中位置显示
th	表示一列小标题，通常用于表格第一行，默认内部文字加粗且居中显示

注意点：

标签的嵌套关系：table>caption&tr>td&th
caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)

<table>
    <caption>学生成绩单</caption>
    <tr>
    	<th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
    </tr>
    <tr>
    	<td>小哥哥</td>
        <td>100</td>
        <td>小哥哥真帅气</td>
    </tr>
    <tr>
    	<td>小姐姐</td>
        <td>100</td>
        <td>小姐姐也很棒</td>
    </tr>
    <tr>
    	<td>总结</td>
        <td>郎才女貌</td>
        <td>郎才女貌</td>
    </tr>
</table>

表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：