当前位置:首页 > 佳人才 > 网事随风 >

 

HTML CSS标签属性大全

2020-04-02 19:11发布到网事随风 浏览

简介HTML CSS 标签属性大全 a卷标 , 属性名称 , 简介 ! - - - - 批注 1、 跑马灯 marquee/marquee普通卷动 marquee behavior=slide/marquee滑动 marquee behavior=scroll/marquee预设卷动 marquee behavior=alternate/marquee来回卷动 ma...

HTML  CSS标签属性大全
 
a卷标 , 属性名称 , 简介
<! - - … - -> 批注
 
1、 跑马灯
<marquee>…</marquee>普通卷动
<marquee behavior=slide>…</marquee>滑动
<marquee behavior=scroll>…</marquee>预设卷动
<marquee behavior=alternate>…</marquee>来回卷动
<marquee direction=down>…</marquee>向下卷动
<marquee direction=up>…</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction=left></marquee>向左卷动
<marquee loop=2>…</marquee>卷动次数
<marquee width=180>…</marquee>设定宽度
<marquee height=30>…</marquee>设定高度
<marquee bgcolor=FF0000>…</marquee>设定背景颜色
<marquee scrollamount=30>…</marquee>设定卷动距离
<marquee scrolldelay=300>…</marquee>设定卷动时间
2、字体效果
<h1>…</h1>标题字(最大)
<h6>…</h6>标题字(最小)
<b>…</b>粗体字
<strong>…</strong>粗体字(强调)
<i>…</i>斜体字
<em>…</em>斜体字(强调)
<dfn>…</dfn>斜体字(表示定义)
<u>…</u>底线
<ins>…</ins>底线(表示插入文字)
<strike>…</strike>横线
<s>…</s>删除线
<del>…</del>删除线(表示删除)
<kbd>…</kbd>键盘文字
<tt>…</tt> 打字体
<xmp>…</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>…</plaintext>固定宽度字体(不执行标记符号)
<listing>…</listing> 固定宽度小字体
<font color=00ff00>…</font>字体颜色
<font size=1>…</font>最小字体
<font style =font-size:100 px>…</font>无限增大
3、区断标记
<hr>水平线
<hr size=9>水平线(设定大小)
<hr width=80%>水平线(设定宽度)
<hr color=ff0000>水平线(设定颜色)
<br>(换行)
<nobr>…</nobr>水域(不换行)
<p>…</p>水域(段落)
<center>…</center>置中
4、连结格式
<base href=地址>(预设好连结路径)
<a href=地址></a>外部连结
<a href=地址 target=_blank></a>外部连结(另开新窗口)
<a href=地址 target=_top></a>外部连结(全窗口连结)
<a href=地址 target=页框名></a>外部连结(在指定页框连结)
5、贴图/音乐
<img src=图片地址>贴图
<img src=图片地址 width=180>设定图片宽度
<img src=图片地址 height=30>设定图片高度
<img src=图片地址 alt=提示文字>设定图片提示文字
<img src=图片地址 border=1>设定图片边框
<bgsound src=MID音乐文件地址>背景音乐设定
7、表格语法
<table aling=left>…</table>表格位置,置左
<table aling=center>…</table>表格位置,置中
<table background=图片路径>…</table>背景图片的URL=就是路径网址
<table border=边框大小>…</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>…</table>设定表格的背景颜色
<table borderclor=颜色码>…</table>设定表格边框的颜色
<table borderclordark=颜色码>…</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>…</table>设定表格亮边框的颜色
<table cellpadding=参数>…</table>指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>…</table>指定网格线与网格线之间的距离(使用数字)
<table cols=参数>…</table>指定表格的栏数
<table =参数>…</table>设定表格外框线的显示方式
<table width=宽度>…</table>指定表格的宽度大小(使用数字)
<table height=高度>…</table>指定表格的高度大小(使用数字)
<td colspan=参数>…</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>…</td>指定储存格合并列的列数(使用数字)
<table border=n> 调整表格的宽线高度 
<table cellpadding> 调整数据域位之边界 
<table cellspacing> 调整表格线的宽度 
<table height> 调整表格的高度 
<table width> 调整表格的宽度 
<table>…</table> 产生表格的卷标 
<td align> 调整表格字段之左右对齐 
<td bgcolor> 设定表格字段之背景颜色 
<td colspan rowspan> 表格字段的合并 
<td nowrap> 设定表格字段不换行 
<td valign> 调整表格字段之上下对齐 
<td width> 调整表格字段宽度 
<td>…</td> 定义表格的数据域位 
 
<!>分割窗口
<set cols=”20%,*”>左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<set rows=”20%,*”>上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<set cols=”20%,*”>分割左右两个框架
<set cols=”20%,*,20%”>分割左中右三个框架
<分割上下两个框架
<set rows=”20%,*,20%”>分割上中下三个框架
<! - - … - -> 批注
<a href target> 指定超级链接的分割窗口
<a href=#锚的名称> 指定锚名称的超级链接 
<a href> 指定超级链接 
<a name=锚的名称> 被连结点的名称 
<address>….</address> 用来显示电子邮箱地址 
<b> 粗体字 
<base target> 指定超级链接的分割窗口 
<basefont size> 更改预设字形大小 
<bgsound src> 加入背景音乐 
<big> 显示大字体 
<blink> 闪烁的文字 
<body text link vlink> 设定文字颜色 
<body> 显示本文 
<br> 换行 
<caption align> 设定表格标题位置 
<caption>…</caption> 为表格加上标题 
<center> 向中对齐 
<cite>…<cite> 用于引经据典的文字 
<code>…</code> 用于列出一段程序代码 
<comment>…</comment> 加上批注 
<dd> 设定定义列表的项目解说 
<dfn>…</dfn> 显示”定义”文字 
<dir>…</dir> 列表文字卷标 
<dl>…</dl> 设定定义列表的卷标 
<dt> 设定定义列表的项目 
<em> 强调之用 
<font face> 任意指定所用的字形 
<font size> 设定字体大小 
<form action> 设定户动式窗体的处理方式 
<form method> 设定户动式窗体之资料传送方式 
< marginheight> 设定窗口的上下边界 
< marginwidth> 设定窗口的左右边界 
< name> 为分割窗口命名 
< noresize> 锁住分割窗口的大小 
< scrolling> 设定分割窗口的滚动条 
< src> 将html文件加入窗口 
<set cols> 将窗口分割成左右的子窗口 
<set rows> 将窗口分割成上下的子窗口 
<set>…</set> 划分分割窗口 
<h1>~<h6> 设定文字大小 
<head> 标示文件信息 
<hr> 加上分网格线 
<html> 文件的开始与结束 
<i> 斜体字 
<img align> 调整图形影像的位置 
<img alt> 为你的图形影像加注 
<img dynsrc loop> 加入影片 
<img height width> 插入图片并预设图形大小 
<img hspace> 插入图片并预设图形的左右边界 
<img lowsrc> 预载图片功能 
<img src border> 设定图片边界 
<img src> 插入图片 
<img vspace> 插入图片并预设图形的上下边界 
<input type name > 在窗体中加入输入字段 
<isindex> 定义查询用窗体 
<kbd>…</kbd> 表示使用者输入文字 
<li type>…</li> 列表的项目 ( 可指定符号 )
<menu>…</menu> 条列文字卷标 
< name=”refresh” content url> 自动更新文件内容 
<multiple> 可同时选择多项的列表栏 
<no> 定义不出现分割窗口的文字 
<ol>…</ol> 有序号的列表 
<option> 定义窗体中列表栏的项目 
<p align> 设定对齐方向 
<p> 分段 
<person>…</person> 显示人名 
<pre> 使用原有排列 
<samp>…</samp> 用于引用字 
<select>…</select> 在窗体中定义列表栏 
<small> 显示小字体 
<strike> 文字加横线 
<strong> 用于加强语气 
<sub> 下标字 
<sup> 上标字 
<textarea name rows cols> 窗体中加入多少列的文字输入栏 
<textarea wrap> 决定文字输入栏是自动否换行 
<th>…</th> 定义表格的标头字段 
<title> 文件标题 
<tr>…</tr> 定义表格美一行 
<tt> 打字机字体 
<u> 文字加底线 
<ul type>…</ul> 无序号的列表 ( 可指定符号 )
<var>…</var> 用于显示变量
 
字体属性:(font)
 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD
 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
 行高 line-height: normal;(正常) 单位:PX、PD、EM
 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
 变体 font-variant: small-caps;(小型大写字母) normal;(正常)
 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性:(background)
 色彩background-color: #FFFFFF; 图片background-image: url();
 重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动)
 位置background-position: left(水平) top(垂直); 简写方法 background:#000 url(..) repeat fixed left top;
区块属性: (Block)
 字间距letter-spacing: normal; 数值
 对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
 缩进text-indent: 数值px;
 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
 词间距word-spacing: normal; 数值
 空格white-space: pre;(保留) nowrap;(不换行)
 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
方框属性:(Box)
 width:; height:; float:; clear:both; margin:; padding:;     顺序:上右下左
边框属性: (Border)
 border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线); ridge;(脊状) inset;(凹陷) outset;
 border-width:; 边框宽度                    border-color:#;边框颜色
 简写方法border:width style color;
列表属性: (List-style)
 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
 位置list-style-position: outside;(外) inside;        图像list-style-image: url(..);
定位属性: (Position)
 Position: absolute; relative; static;               visibility: inherit; visible; hidden;
 overflow: visible; hidden; scroll; auto;           clip: rect(12px,auto,12px,auto) (裁切) css属性代码大全
一 CSS文字属性:
color : #999999; /*文字颜色*/          font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/            font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/      letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/        font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/           vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/   text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/   text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/   text-align:right; /*文字右对齐*/  
text-align:left; /*文字左对齐*/           text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/       vertical-align属性
vertical-align:top; /*垂直向上对齐*/       vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/    vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、CSS边框空白
padding-top:10px; /*上边框留空白*/      padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/   padding-left:10px; /*左边框留空白*/
三、CSS符号属性:
list-style-type:none; /*不编号*/              list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/  list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/   list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/         list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/       list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/           list-style-position:inside; /*缩进*/
四、CSS背景样式:
background-color:#F5E2EC; /*背景颜色*/  
background:transparent; /*透视背景*/              background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/  background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/       background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/   background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/                   background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/                     background-position : center; /*居中对齐*/ 
五、CSS连接属性:
a /*所有超链接*/
a:link /*超链接文字格式*/                           a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/                          a:hover /*鼠标转到链接*/
鼠标光标样式:
链接手指 CURSOR: hand                           十字体 cursor:crosshair
箭头朝下 cursor:s-resize                            十字箭头 cursor:move
箭头朝右 cursor:move                              加一问号 cursor:help
箭头朝左 cursor:w-resize                            箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize                         箭头朝左上 cursor:nw-resize
文字I型 cursor:text                                箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize                           漏斗 cursor:wait
光标图案(IE6)   p {cursor:url("光标文件名.cur"),text;}
六、CSS框线一览表:
border-top : 1px solid #6699cc; /*上框线*/                border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/                border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/           border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/   dotted /*虚线框*/    double /*双线框*/     groove /*立体内凸框*/
ridge /*立体浮雕框*/   inset /*凹框*/    outset /*凸框*/
七、CSS表单运用:
八、CSS边界样式:
margin-top:10px; /*上边界*/      margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/ margin-left:10px; /*左边界值*/   
CSS 属性: 字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-size font-family}  
2 字体类型 {font-family:"字体1","字体2","字体3",...}  
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}  
4 字体风格 {font-style:inherit|italic|normal|oblique}  
5 字体粗细   {font-weight:100-900|bold|bolder|lighter|normal;}  
6 字体颜色   {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高   {line-height:数值|inherit|normal;}
9 字 间 距   {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }  
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}  
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}  
文本样式(Text Style)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}  
2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格   {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify}  
5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}  
6 书写方式 {writing-mode:lr-tb|tb-rl}  
背景样式
序号 中文说明 标记语法
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(URL)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style)  
序号 中文说明 标记语法
1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 补  白 {padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}  
宽度值: thin|medium|thick|数值
4 边框颜色 {border-color:数值 数值 数值 数值}  数值:分别代表top、right、bottom、left颜色值
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边  框 {border:border-width border-style color}
  上 边 框 {border-top:border-top-width border-style color}
  右 边 框 {border-right:border-right-width border-style color}
  下 边 框 {border-bottom:border-bottom-width border-style color}
  左 边 框 {border-left:border-left-width border-style color}
7 宽  度 {width:长度|百分比| auto}
8 高  度 {height:数值|auto}
9 漂  浮 {float:left|right|none}
10 清  除 {clear:none|left|right|both}
分类列表
序号 中文说明 标记语法
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
word-wrap是控制换行的。使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。break-word是控制是否断词的。normal是默认情况,英文单词不被拆开。break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)ie下:使用word-wrap:break-word;所有的都正常。ff下:如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。所以,综上,最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
 

 

 

 

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

热搜关键词 更多 >

 


2019优才成长故事
 

【视频时长:09:34】  
    广告位

本栏推荐

    广告位

站点信息