Html补充

来源：互联网发布：国家广电网络组织架构编辑：程序博客网时间：2024/05/20 06:56

Html补充

background-image：url(abc.gif) 背景图片

background-size：cover 等比例缩放

background-repeat：repeat-x水平重复

repeat-y垂直重复

no-repeat 不重复

background-attachment：固定活滚动背景属性设置

-attachment：fixed，scroll跟随也固定滚动条

font-size：字体大小

font-family：字体

font-weight：bolder 字体加粗

lighter 字体变细

text-align：文本对齐

-align：right；右对齐

-align：center；居中

-align：justify；文本对齐

text-indent：文本前有多少像素空位

text-justify：distribute-all-lines; 中文文本对齐

text-decoration：none 去下画线

text-decoration：underline 下划线

overline 上划线

line-through 中划线

blink 定义闪烁的文本

inherit 继承上一级

text-transform:capitalize 每个单词的首字母大写

uppercase 转换成大写

lowercase 转换成小写

text-stlye:normal默认标准字体

italic斜体(字样) 书写不同

oblique倾斜(斜着摆放) 显示不同

text-shadow：0px 0px 0px 颜色；阴影的右下移动模糊

border-width：边框宽度

border-color：边框颜色

border-style：solid：实线

dotted：点线（边框样式）

double：双线

groove： 3D凹边框

ridge：3D凸边框

radius：圆角(数值)

inset，outset内嵌，外嵌

border-image：边框图片

border-image-source：边框无图片

border-image-width：边框图片宽度

border-image-slice：fill，边框图片切割（fill 设定边框图片填充部分数字不能加px）

border-image-outset：边框图片扩展(默认扩展为0)

border-image-repeat：边框图片重复(默认为stretch 拉伸。repeat/round:重复/对图片进行图片缩放)

top，left：上，左边距

letter-spacing：字母的间距

line-height：上下对齐

word-spacing：单词的间距

white-space:nowrep 禁止换行定位：(通过：left right top bottom 设置)

position：relative 相对定位

position：absolute 绝对定位

position：fixed固定定位

z-index： z轴索引号，用于层

外连接css <link href=" .css " rel="stylesheet" type="text/css" / >

表格

table-layout：fixed 表格锁定

caption-side：bottom 标题在表格下

border-collapse：collapse 合并边框

border-spacing：表格内间距（与合并表格样式合用冲突）

empty-cells：hide 隐藏空单元格（与合并表格样式合用冲突）

hover{backgroun-color：red}鼠标放于表格改变底色（IE5,6不支持）

</select> 下拉列表

a:link 默认颜色（IE可以，但猎豹不行）

a:visited 鼠标点击后颜色

a:hover 鼠标点上去颜色

a:active 点击后颜色

frist-child 第一个子元素

frist-letter 首字符

frist-line 首行

cursor：pointer 鼠标为手型

overflow：hidden 隐藏滚动条

list-style-position列表（设置值）inside内部 outside外部

list-style-image列表图片符号

list-style-type：square方块

decimal 阿拉伯数字

upper-roman 罗马数字

height：auto；overflow：hidden；高度自适应，随内容增大而增高

display：block/inline/inline-block 块行级互换及共存

display：none 隐藏元素

float：left 浮动

clear：left/both 清除左侧/两侧悬浮元素

visibility：visible/hidden 控制显示英语隐藏（保留位置）而display：none 隐藏不保留位置

clip：rect（top、right、bottom、left）剪切

overflow：visible、hidder、scroll auto 溢出显示、隐藏、出现纵横滚动条、纵向滚动条

布局

<!doctype html>： html5 协议

<header> 头标签

<nav> 导航栏标签

<aside> 侧栏标签

<sidebar> 内容标签

<footer> 尾标签

<small> 小字体标签

<ruby> 注释标签

input

<input type="email"> email 格式验证

<input type="url"> url 网址验证

<input type="number"> number 数字增值器

<input type="range"> range 条形增值器(value="1" max="100" min="1" step="2")

<input type="date"> date 时间选择器

<input type="month"> month 年月选择器

<input type="week"> week 年月选择器

<input type="time"> time 小时分钟秒

<input type="datetime-local"> datetime-local 本地时间

<input type="color"> color 颜色选择器

<input type="text"autocomplete="on/off"> autocomplete 文本框保留项选项

<label for="id"> label for 光标跳转到...对应的ID

<input type="submit" autofocus="on"> autofocus 光标初始在相应的input上

formnovalidate 表格跳过验证

video

<video src="" controls="controls"> 视频播放多格式视频播放

autoplay 视频自动播放

loop 视频循环播放

poster 视频封面

audio

<audio src="刘忻 - 一个人.MP3" controls autoplay></audio>音频播放

画布

canvas 画布

beginPath() 开始路径

moveTo() 起始点

lineTo() 结束点

stroke() 为路径上色

lineWidth() 设置直线宽度

strokeStvle() 直线颜色

HTML5 canvas支持3种直线的端点样式，

  包括：butt,round,square 设定端点样式用lineCap属性设定，

缺省情况下，将使用butt样式 --直线端点样式

arcTo() 弧线、曲线

quadraticCurveTo() 绘制二次曲线

bezierCurveTo() 贝塞尔曲线

Map标签（area图形后可加HTML路径）

<img="" width,height,border,usemap="#Map" />

<area shape="circle" coords="X,Y,R" />圆：X与Y为圆心位置，R为半径

<area shape="rect" coords="X1,Y1,X2,Y2" />矩形：X1Y1为定点，X2Y2为对角定点

<area shape="rect" coords="X1,Y1,X2,Y2,..." />不规则图形：XY为各个顶点，自动封闭

</map>

阅读全文

0 0