HTML常用标签&属性与属性值

h1-h6                                  标题标签
p                                         段落标签
b、strong                           加粗标签
i、em                                  倾斜标签
br                                        换行标签
"hr"                                      水平线
ul(unordered list)            无序列表
ol(ordered list)                有序列表
li(list item)                        列表项
dl(definition list)                自定义列表
dt(definition term)          自定义列表项
dd                                         自定义列表描述

img标签                        图片标签

img的属性值:
src                        路径
alt                         图片未加载出来时,显示的文字
title                       鼠标悬停时,显示的文字

a标签                               锚链接

a的属性值:
href                            跳转的路径
target                         页面打开方式

target的属性值:
_blank                    新窗口打开链接
_self                       当前窗口打开链接

table    表格
tr    表格的行
td    单元格
width    表格宽度
height    表格高度
border    表格边框
cellspacing    单元格与单元格之间的间距
cellpadding    单元格内容与边框之间的间距
rowspan    合并行
colspan    合并列
form    表单框
name    表单名字
method    表单提交的方式
input    输入框
type    输入框类型
<input type="text" value="">    文本框,value是默认值
<input type="password">    密码框
<input type="submit">    提交按钮
<input type="button">    普通按钮
<input type="reset">    重置按钮
<input type="radio" name="" checked>    单选框,同一组单选框起的名字要一致
<input type="checkbox" name="" checked>    多选框,同一组多选框起的名字要一致,checked属性代表默认选中
select    下拉列表
option    下拉列表的选项
selected    代表某个选项默认被选中
textarea    文本域
cols    列数
rows    行数
div    块级元素的代表
span    行内元素的代表
&nbsp;    空格标识符 

 css    层叠样式表
<style type="text/css"></style>    内部样式表
<link rel="stylesheet" type="text/css" href="">    外部样式表
<标签 style="css声明"></标签>    内联样式表
*    通配符选择器
    
    
font-size    文本大小 9pt=12px;1em默认16px
font-family    字体类型
font-style    字体风格,normal 正常的 /italic 倾斜的
font-weight    字体加粗 normal 100-500正常 / bold 600-900 加粗
color    字体颜色
text-transform    检索设置文本大小写, capitalize首字母大写,uppercase大写,lowercase小写。
text-align    文本水平对齐方式,left,right,center
vertical-align    文本垂直对齐方式,top,middle,bottom
line-height    行高
text-decoration    文本修饰 underline、overline、line-thought、none
text-indent    首行缩进
letter-spacing    字间距
word-spacing    词间距
list-style    列表项样式
list-style-type    列表项样式类型
list-style-image    列表项样式图片
list-style-position    列表项样式位置
border:border-width border-style border-color    边框属性
background    背景
background-color    背景颜色
background-image    背景图片
background-repeat    背景平铺 repeat、no-repeat、repeat-x、repeat-y
background-position    背景图片的位置
background-attachment    背景图的固定

float    浮动
margin    外边距
padding    内填充
position    定位
static    静态定位
relative    相对定位
absolute    绝对定位
fixed    固定定位
z-index    检索或设置对象的层叠顺序
overflow    内容溢出时的设置 
hidden    隐藏
visible    可见
scroll    显示滚动条
auto    当内容超出范围时,显示滚动条,否则不显示
overflow-x     水平方向内容溢出时的设置
overflow-y    垂直方向内容溢出时的设置
cursor:pointer    统一某元素鼠标指针形状为手型
opacity:value        透明度[value 0-1]
filter:alpha(opacity=value)    透明度(ie写法)[value 0-100]
    
fieldset    表单字段集,相当于一个方框
legend    字段集标题
<label for="绑定控件id名"></label>    提示信息标签
<input type="file" multiple="multiple" />    上传文件框
<input type="image" src="" width="" height=""  alt="图片" />    图片按钮
caption    定义表格标题 
th    定义表格列标题 
thead    定义表格的页眉 
tbody    定义表格的主体
tfoot    定义表格的页脚
col、colgroup    定义列分组
border-spacing    单元格边框之间的距离
border-collapse    "合并相邻单元格边框 separate(边框分开)collapse(边框合并)"
empty-cells    无内容时单元格的设置  show:显示 ;hide:隐藏;
caption-side    设置表格标题的位置 

<header>    头部
<nav>     导航
<main>    主体
<article>    内容块
<section>    区块,节
<aside>    侧边栏
<footer>    尾部
<hgroup>    对标题进行组合
<figure>    用于对元素进行组合
<figcaption>    用于对figure的内容进行说明
<time>    日期、时间
<datalist>    与<input>配合,拥有输入功能的下拉列表
<details>    定义细节
<summary>    为<details>定义标题
<mark>    定义带有记号的文本
<progress>    进度条
<meter>    度量尺
<ruby>    定义注释或音标
<rt>    定义对ruby的注释
<output>    输出标签
color    颜色选择器
email    邮箱
number    数字输入框
tel    电话号码
url    网页的URL
search    搜索框
range    特定范围内的数值选择器
date、month、week    显示日期
time    显示时间
placeholder    占位符
autofocus    获取焦点
multiple    文件上传多选
required    必选项
pattern    验证正则
    
text-shadow    文本阴影(X坐标 Y坐标 阴影模糊度 颜色)
text-overflow    文本溢出 clip无省略号   ellipsis省略号 
word-wrap    长单词或URL地址内部进行换行
@font-face    设置字体
background-clip    指定背景的显示区域
background-origin    指定绘制背景图像时的起点
border-radius    边框圆角
border-image    边框图片 

transition    过渡
transform    2D转换
translate()    移动
rotate()    旋转
scale()    缩放
skew()    扭曲
transform-origin    改变变换的中心点
translate3d()    3D移动
scale3d()    3D缩放
rotate3d()    3D旋转
perspective    景深,观察的距离
perspective-origin3D     观察元素的基点位置
transform-style    保持3d变换
column-width     栏目宽度
column-count     栏目列数
column-gap       栏目间距
column-rule      栏目间隔线样式(宽度、颜色)
column-span    规定元素应横跨多少列(1:指定跨1列  all:跨所有列)
    
display:flex    声明伸缩容器(父元素)
flex-direction     定义伸缩流方向,主轴方向
flex-wrap    伸缩换行
flex-flow     伸缩流方向与换行
justify-content    定义伸缩项目沿主轴线的对齐方式
align-items    伸缩项目行在侧轴上的对齐方式(单行)
align-content    定义多个伸缩行在侧轴方向上的对齐方式;
    
order     标准流的顺序排列
flex    伸缩性
align-self    设置单独伸缩项目在侧轴的对齐方式 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值