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页



 
posted on 2017-08-16 23:43  剑与心声  阅读(144)  评论(0编辑  收藏  举报