排版标签
br: 换行
hr: 水平线
文本格式标签
b : 文本加粗
i: 文本倾斜
s: 文本加删除线
u:文本加下划线
img标签
img是为图片占位的
img的属性
- src: 图片路径地址
scr和href的区别:src会替换当前的元素,当中执行到src的元素时,浏览器会停止渲染,把src路径的文件下载到当前文档并替换,而href是建立当前元素和其他文档的关系
-
alt: 当图片加载不出来时展示的文本
-
title:当鼠标悬浮到图片时显示的文本
-
name:给图像一个名字
img是行内块元素,可以设置宽高和边框
a标签
a标签是行内元素不能设置宽高
属性
-
href:连接要跳转的地址
-
target: self | _blank 跳转的方式
跳转方式
- self 默认
- _blank 点击连接打开一个新的页面
a标签也可以在页面内设置锚点进行页面内的快速移动
table表格
属性
- callspation : 单元格内容到表格的距离
- callpadding : 单元格之间和到表格的距离
table是块级元素,table里面可以放置一些标签
caption:这个表格的标题,直接放到<table>后面
tr:定义行
th:定义表头单元格
td:定义单元格
thead和tbody
合并单元格: 在th或td里面 rowspan:合并行 colspan:合并列
方向是从到上下从左右
列表
ul 列表
ul是无序列表,ul里面只能够放li, li也是块元素,里面可以其他元素。
li会带有自己的样式,清除li默认样式:list-style:none
ol 有序列表
ol 里面也是放li
dl 自定义列表
dl里面可以放dt和dd
表单
form
- action:提交的地址
- method:表单提交的方式
- name: 表单的名字
在form里面可以放表单控件
input控件
- type : 规定的这个控件的类型
| 值 | 类型 |
|---|---|
| possword | 密码类型 |
| text | 文本类型 |
| radio | 单选 |
| checkbox | 多选 |
| button | 普通按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| file | 文本域 |
| image | 图像形式的提交按钮 |
- name 控件的名字
- value 控件的值
- checked 值是checked 定义控件默认被选中
label
为input 标注,提高用户体验
1.使用<label></label>将input 包裹,这样点击label时,input就会获得焦点 2.使用for和input绑定<label for"控件名字"></label>
textarea 文本域
双标签,内容在标签之间写,可以显示多行
select 下拉列表
select 里面包含option,默认选中的option 有 selected="selected"属性的option为选中项
css知识
BFC
浮动和绝对定位元素,非块级盒子的块级容器会创建BFC区域
块级格式化上下文,生成块级渲染局域,可以不受外界影响。
应用:解决外边距塌陷的问题,解决浮动元素被覆盖的问题 父元素
- 添加overfloat:hidden
- 添加浮动
- 添加absoult
- 父元素变成行内块
flex布局
是什么 flex是一种响应式布局方式,添加了displat:flex 属性的盒子会自动成为flex容器,容器的子元素成为项目
容器的属性
flex-direction
flex-warp
flex-flow
justify-content
algin-items
algin-content
项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
algin-self