HTML标签/CSS样式属性快速复习

标签

文本控制标签

标题标签

h1–h6

属性

alian：

• left
• center
• right

文本标签

p
水平线

• <hr/>

属性

• alian

• size：粗细，像素为单位

• color：颜色

• width：长度

• strong：加粗

• em：斜体

• del：删除线

• ins：下划线

图片/超连接

图片

支持的图片格式:
GIF、PNG、JPG
格式：<img src = “url”/>
属性

• alt：当图像无法显示时，将该属性设置的文本显示

• width/height：宽高

• border：添加边框，设置宽度

• vspace：调整图片的垂直边距

• hspace：平行边距

• align：对齐

• title：设置鼠标悬停在图片上显示的文本

  超链接

  a标签
  格式：<a href ="">
  属性

• href：路径，用于设链接的路径，表示跳转到某地方

• target：设置目标端口弹出是方式
  _self：默认值，在源窗口中打开
  _blank：在新端口中打开

• text-decoration：设置下划线

列表

定义表格

定义
<table></table>
属性

• border：设置边框

• cellspacing：设置两单元格边框之间的距离

• cellspadding：设置内容与边框之间的距离

• width：设置单元格的宽度

• height：高度

• align：表格在容器中的对齐方式

• bgcolor：设置表格的背景颜色

• background：为表格设置背景图片

行

tr标签
属性

• height：高

• align：这一行内容的水平对齐方式

• valign：这一行的垂直对齐

• bgcolor：行背景

• background：行背景图片

列

td标签
属性

• width：单元格宽度

• height：高度

• align：单元格内容水平对齐

• valign：单元格内容垂直对齐

• bgcolor：单元格背景

• background：单元格背景图片

• colspan：设置单元格跨越的列

• rowspan：设置单元格跨越的行

表头

th

表单

form
格式：
<form action = “#” mothed = “get/post”>
属性

• action：设置提交到何处

• method：设置提交方式
  默认get方式
  post提交方式，在提交数据时看不到数据

表单控件

input

type类型

• text：文本

• password：密码框

• radio：单选按钮

• checkbox：复选框

• button：单击按钮

• submit：提交按钮

• reset：重置按钮，单击该按钮清空所有表单信息

• image：和提交按钮的作用一样，不过这个使用一张图片作为按钮

• hidden：隐藏域

• file：文件域，用于上传文件附件使用

• 属性

• value：设置框中默认值

• size：设置输入框的宽度

• readonly：设置输入框中的数据为只读

• disabled：第一次加载input框时禁用

• maxlength：设置输入框中最大可以输入的字符数

• autofocus：将该属性设置为true后表示该页面加载完成后input框架自动获得焦点

• from：用于将form表单外的input框归到form中
  from = 表单from的id值

• max/min：设置输入框允许输入的最大和最小字符数

• pattern：用于判断input框中输入的数据是否符合设置的正则规则
  格式：
  pattern= 正则规则

• placeholder：用于在输入框中设置提示信息

• required：用于规定输入框不允许为空

textarea

多行文本输入框
属性

• cols：用于定义每行可显示的字符数

• rows：用于设置一次可显示的行数

• readonly：设置为只读的

• disable：第一次加载时不可用

• maxlength:定义允许输入的最大字数

select

下拉列表框
<option></option>
用于定义下拉选项
属性

• size：用于定义一次显示的下拉列表数

• multiple：设置multiple = "multiple"后，下拉列表具有多项选择功能，可用ctrl+鼠标选中多项

• selected：option的属性，将该属性设置为“selected”表示设置该选项为默认选项

CSS

选择器

标签选择器

类选择器

.类名

id选择器

#id名

通配选择器

*:星号

属性选择器

• E[att^=value]：表示E标签的att属性值是以value开头的

• E[att$=value]：表示E标签的att属性值是以value结尾的

• E[att*=value]：表示E标签的att属性值中包含value的

伪类选择器

• :root：对所有的元素都生效

• 元素:not(标签)：表示除该元素外设置

• 元素:only-child：只有某一个父元素仅有一个子元素，才匹配

• 元素:first-child/元素:last-child：匹配父元素的第一个子元素和最后一个子元素

• 元素:nth-child(n)/元素:nth-last-child(n):用于匹配父元素的第n个和倒数第n个元素

• 元素:nth-of-type()：用于匹配特定的类型的
  type(odd)：匹配元素计数出现的位置
  type(even)：匹配元素偶数出现

• :empty：用于匹配没有子元素和文本为空的所有元素

• :target：用于设置超链接的属性
  只有当超链接被单击时调用设置的样式

文字样式属性

• font-size：字号

• font-family：字体

• letter-spacing：设置行间距

• vertical-align：垂直对齐

• line-height：设置行高

• text-indent：设置字符缩进

• font-weight：设置字体格式
  bold 粗体
  bolder 更粗
  lighter 更细的

• font-style：字体风格
  italic 斜体
  oblique 倾斜
  定义字体
  @font-face{
  font-familt:新字体名;
  src:url(地址)；
  }

背景样式

• background-color：背景图片

• background-image:背景图片

• rgba(r,g,b,alpan:设置背景的透明度
  rgba(255,255,255,0.5)
  设置透明度为0.5

• opacity：设置不透明度

• background-repeat：设置背景图片是否平铺
  repeeat 向平行垂直平铺
  no-repeat 不平铺
  repeat-x 平行
  repeat-y 垂直

• background-attachment：设置图片是否跟随页面滚动
  scroll 滚动，默认值
  fixed 不滚动

• background-size：设置图片的大小
  通过像素值
  通过百分比
  cover：将图片扩大到背景容器大小
  contain：将图片扩大到最大尺寸

• background-position：设置图片位置
  通过设置x,y坐标
  通过关键字设置
  水平
  left
  center
  right
  垂直
  top
  center
  botton
  百分比
  通过设置百分比
  为图片的百分比和容器的百分比对齐

• background-origin：设置图片的相对定位
  padding-box：设置图片相对于内边框来定位
  border-box：设置图片相对于边框来定位
  content-box:相对于内容框来定位

• background-clip:设置图片的剪切范围
  padding-box:设置图片相对于内边框
  border-box:设置图片相对于边框
  content-box:相对于内容框

渐变样式

• background-image:通过设置该
  linear-gradient(角度，颜色值1，2)
  线性渐变
  角度：向那个角度开始渐变
  radial-gradient(形状,圆心位置,颜色1,2)
  径向渐变
  repeating-
  重复线性或径向

盒子模型

	**属性**

• height：高

• width：宽

• padding：内边框

• margin：外边框

• Border-radius：设置圆角

• box-shadow：设置阴影

• display：设置快元素和行元素转换
  block
  line
  inline-block

• opacity
  设置透明都

浮动

• float属性：

  left
  向左浮动
  right
  向右浮动
  none
  不浮动

• clear

  清除浮动
  left
  right
  both

• overflow：设置溢出处理
  visible：元素不会被修剪，会显示在元素框外边
  hidden：溢出内容会被修剪，但修剪的内容是不可见的
  auto：在需要的时候会产生滚动条，
  scroll：溢出的内容会被修改，但会显示滚动条

定位

通过设置position属性进行定位
属性值

• static：默认值，自动定位

• relative：相对定位,相对于该元素的原位置进行定位，

• absolute：绝对定位，相对于上移父元素进行定位

• fixed：相对于body进行定位

偏移属性

• top：设置距离父元素的上部距离

• left：左边距离

• right：右边距离

• bottom：下部距离

多媒体

视频

格式：

支持的视频类型

• ogg

• mpeg

• webm

属性

• autoplay：页面加载完自动播放

• loop：播放完重新播放

• poster：当视频加载不出来时，出现一张图片

  音频

  audio
  支持的音频类型

• vorbis

• wav

• mp3

变形

通过transform属性进行变形
方法

• matrix(x,y)：基于当前位置重新定义位置，通过设置x,y值
  t

• ranslate(x,y)：移动元素

• scale(x，y)：设置缩放比例

• rotate(deg)：设置元素的旋转，顺时针旋转

• skew(x,y)：设置倾斜，根据设置的x，y，然后根据坐标轴进行倾斜