html的学习(一)
1.基本标签:
标题:<h1>-<h6>:段落的倍数越来越小;可见:http://www.w3school.com.cn/tiy/t.asp?f=html_headers
段落:<p>:
链接:<a>:
图像:<img>,可通过width,height,指定图像的大小;
换行:<br/>(其推荐的写法)
水平线:<hr>
*注意:align、bgcolor、color、在属性表中将被丢弃,勿使用过多,可见:http://www.w3school.com.cn/html/html_styles.asp
2.css样式:
css的优先级:内部样式>内联样式>外联样式
style>id>class>元素选择
字体:font-family
颜色:color
字体大小:font-size
文本居中:text-align:center
3.文本格式化:
文本加粗:<b>
文本斜体:<i>
文本插入线:<ins>
文本删除线:<del>
4.超链接:
(1) <a href = "..." >文本内容</a> 属性:target:_blank(默认在本页打开,在新窗口打开)
(2)书签的用法:
创建书签:<a name="tips"></a>或<a id="tips"></a>
跳转到书签:在本面<a href="#tips"></a>或在其他面<a href="www.baidu.com#tips"></a>
(5)表格:
<table> 属性:frame:控制围绕表格的边框。参见:http://www.w3school.com.cn/tiy/t.asp?f=html_table_frame
(6)列表:
无序列表<ul><li></li></ul>,属性:type:定义列表类型。
有序列表:<ol><li></li></ol>:
列表之内可以包含段落,换行符、图片、链接,以及其他列表等。
(7)块:
内联元素(inline element):内联元素在显示时通常不会以新行开始。如:<h1>, <p>, <ul>, <table>
块级元素(block level element)块级元素在浏览器显示时,通常会以新行来开始(和结束)。<b>, <td>, <a>, <img>
(8)html脚本:
如何应付老式的浏览器(摘自w3school)
如果浏览器压根没法识别 <script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,
你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。
而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。
如:javaScript
<script type="text/javascript"><!--
document.write("Hello World!")//-->
</script>
(9)html头部:
<base>:指定所有标签打开的方式
<link>:指定文档与外部资源的关系,如样式表:<link res="stylesheet" type="text/css" href="a.css">
<meta>:提供html文档的元数据:一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
(10)html的文档类型:
html5:<!DOCTYPE>
html1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
具体可参考:http://www.w3school.com.cn/tags/tag_doctype.asp
(10)html的文档类型:
#000000 rgb(0,0,0) 黑色的
#FF0000 rgb(255,0,0) 红色的
#00FF00 rgb(0,255,0) 绿色的
#0000FF rgb(0,0,255) 蓝色的
#FFFFFF rgb(255,255,255) 黑色的
(11)css简写:
1.边框: border:width style color;
width
left right top bottem ---
style
left right top bottem ---
style
left right top bottem ---
2.内边距:padding
top right bottom left
3.外边距:margin (div居中,可以使用margin:auto,由浏览器自动计算外边距的距离)
top right bottom left
(11)控制字体:
1.指定字体:font-family:value1,value2;
2.字体在小:font-size:value;
3.字体加粗:font-weight:nomal/bold;
---文本格式
1.文体颜色:color:value;
2.文本排列:text-align:left/right/center;
3.文本修饰:text-decoration:none/underline;
4.行高:line-height:value;
5.首行文本缩进:text-indent:value;
(12)控制表格:
1.垂直方向对齐:vertival-align:在表单元格中,设置单元格框中的单元格内容的对齐方式, top/middle/bottom;
如:
2.边框合并 :border-collapse:separate/collapse:(合并或分离相邻的边框)
3.边框边距:border-spacing(border-collapse:separate,时,才能用)
(13)定位:133页