html+css基础知识

96 阅读3分钟

排版标签

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 跳转的方式

跳转方式

  1. self 默认
  2. _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

flex布局的应用