首页 > 代码库 > HTML学习
HTML学习
html
基本标签:
网址:http://www.w3cschool.cn/html/html-Label.html
<meta />设置页面信息的 <input />表单元素，type不同输入字段拥有不同形式
<link /> 链接样式表 <frame />定义frameset中的一个特定的窗口（框架）
<embed />定义嵌入的内容，比如插件
<a href=http://www.mamicode.com/地址 target=_blank>指定超链接目标的 URL(另开新窗口)
<a href=http://www.mamicode.com/地址 target=_top>指定超链接目标的 URL(全窗口连接)
<a href=http://www.mamicode.com/地址 target=页框名>指定超链接目标的 URL（在指定页框连接）
<bgsound src=http://www.mamicode.com/MID音乐文件地址 />
<a href="http://www.mamicode.com/#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="http://www.mamicode.com/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学习