码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习

时间:2017-08-03 12:29:36      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:项目   rgb   targe   样式   作用   alt   使用   cti   net   

html
基本标签:
网址:http://www.w3cschool.cn/html/html-Label.html
<meta />设置页面信息的 <input />表单元素,type不同输入字段拥有不同形式
<link /> 链接样式表 <frame />定义frameset中的一个特定的窗口(框架)
<embed />定义嵌入的内容,比如插件
<a href=地址 target=_blank></a>指定超链接目标的 URL(另开新窗口)
<a href=地址 target=_top></a>指定超链接目标的 URL(全窗口连接)
<a href=地址 target=页框名></a>指定超链接目标的 URL(在指定页框连接)
<bgsound src=MID音乐文件地址 />
<a href="#001">跳到001</a>
…文字省略
<a name="001" id="001" > </a>(一般用name就可以了,用id是考虑兼容)
//////////////////////////////////////////////////////////////////////////////
表单边框:
<fieldset>
<legend></legend>边框线上的字
</fieldset>
单选默认:checked="checked";
下拉框默认:selected="selected" <select><option>
文本框:<textarea rows="8" cols="25">
图片加载不出来或者纯文本方式浏览能看到的值<img src="sds" alt="rikuan"/>
css选择器:
id---id="cs"---#cs{}
class---.cs{}---class="cs"
tage p{}
color: 3种设置方式,分别是内置/#ccccdd/rgb(0-255,0-255,0-255)调和颜色
font-style(normal,italic,oblique) 字体样式
font-weight(normal,bold,100~900) 字的粗细
text-align:文字对齐方式
text-decoration(underline,line-through)
background : background-color background-image background-repeat background-attachment background-position
默认值为:transparent none repeat scroll 0% 0%。
background-image:background:url() no-repeat;
repeat:背景在x和y方向都重复
no-repeat:背景不重复
repeat-x:水平方向重复
repeat-y:垂直方向重复
background-attachment属性:
设置图片的滚动属性
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
local 背景图片随滚动元素滚动
background-position属性
设置背景图像的起始位置
1、内置 center bottom 如果仅指定一个关键字,其他值将会是"center"
2、百分比
x% y% 第一个值是水平位置,第二个值是垂直。左上角是0% 0%。
右下角是100% 100%。
如果仅指定了一个值,其他值将是50%。默认值为:0%0%
3、数值
xpos ypos 第一个值是水平位置,第二个值是垂直。
左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。
如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions
inherit指定background-position属性设置应该从父元素继承

把图像设置为列表中的列表项目标记
text-indent: 20%;文本缩进 他会自动继承!
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。
元素本身不会从一段移到另一端,只是其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
text-transform 属性处理文本的大小写。这个属性有 4 个值:
none
uppercase
lowercase
capitalize
接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,
它提供了很多非常有趣的行为。
text-decoration 有 5 个值:
none
underline
overline
line-through
blink
不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。
overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through
则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,
类似于 Netscape 支持的颇招非议的 blink 标记。
倾斜显示文本
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
////////////////////////////////////////////////////////////////////////////////////////////////////
使用 font-family 属性 定义文本的字体系列。
伪样式!!
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
text-decoration 属性大多用于去掉链接中的下划线:
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
list-style : list-style-image || list-style-position || list-style-type
为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style,
就像这样:
li {list-style : url(example.gif) square inside}

text-decoration 属性大多用于去掉链接中的下划线:
table-layout:auto|fixed 表格布局
border-collapse:separate | collapse 边框合并
border-spacing:<length>{1,2} 横向和纵向间距
caption-side:top|bottom 设置表格的caption对象在头或尾
empty-cells:hide | show 空单元格是否显示
如何把当前表格水平居中
margin: 0 auto;
border-collapse 属性设置是否将表格边框折叠为单一边框:
table
{
border-collapse:collapse;
}

table,th, td
{
border: 1px solid black;
}
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:
td
{
text-align:right;
}
table-layout: automatic
table-layout: fixed 钉死 单元格宽度 内容会超出表格
//////////////////////////////////////////////////////////////////////////////
position位置
absolute;用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素
relative;即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。相对定位元素经常被用来作为绝对定位元素的容器块。
relative;
fixed;

.dd{
/*display: inline;*/
/*position: relative;*/
}
.cc{
/*position: absolute;*/
display: none;
}
.dd:hover .cc{
display: block;
}
</style>
</head>
<body>
<div class="dd">
<span>下拉</span>
<div class="cc">
<p>下拉1</p>
<p>下拉2</p></div>
</div>

 

HTML学习

标签:项目   rgb   targe   样式   作用   alt   使用   cti   net   

原文地址:http://www.cnblogs.com/lifusen/p/7278844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!