HTML总结

 

Hyper Text Markup Language - 超文本标记语言。

基本格式

<html>   ----开始标签

        <head>

                网页上的控制信息

         <title>页面标题</title>

        </head>

        <body>

               页面显示内容

        <body>

        </body>

</html>       ------结束标签

一般标签

格式控制标签

<font color="" size="" face=""></font>  控制字体;color控制字体颜色,face选择字体 size 字体大小
<b></b>字体加粗

<i></i>倾斜

<u></u>下划线

<strike></strike>字体加粗

<em></em>字体倾斜

<center></center>居中

<br>相当于回车

内容容器标签

<h1></h1>标题 (会自动换行)HTML标题是通过<h1>等标签进行定义的
<p></p>段落标签(段落之间空行)
<ol type='"1"></ol>有序列表 序号为1,2,3.。。。。。。引号中可以更改序号形式

<ul type=""></ul>无序列表

<li></li>
<div></div>层标签(默认占一行)

<span></span>层标签(默认用多大空间占多大空间)

练习

<title>网页标签</title>
</head>

<body>
<font color="#0066FF" face="华文新魏" size="5">字体控制</font><br />
<b>字体加粗</b><br />
<i>倾斜</i><br />
<u>下划线</u><br />
<strong>加粗</strong><br />
<em>倾斜</em><br />
<center>居中</center><br /><br /><br />
<br />
<br />
<br />
<h1>标题1</h1>
<h2>标题2</h2>



<h6>标题6</h6>
<p>段落1</p>
<p>段落<br />
2</p>
<font>第一种<div>层标签</div></font>
<font>第二种<span>层标签</span></font>
<ol type="a">有序列表
    <li>序号1</li>
    <li>序号2</li>
    <li>序号3</li>
    </ol>
    <ul type="circle">无序列表
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    </ul>

 

最常用标签

1.超链接
<a></a>
超链接:<a href="">显示内容</a>   路径:../ ./  ../../
书签:<a name="">内容</a>
2.图片
<img src="" width="" height="" alt=""/>
3.图片超链接
<a><img border="0" /></a>

表格

 

主要用来布局。 <table><tr><td></td></tr></table>

1.<table>的属性:

必须的四个属性: width,border,cellpadding,cellspacing

通用的四个属性: bgcolor,background,align,valign

width:960px 980px

 

2.<tr>的属性:

通用的四个属性: bgcolor,background,align,valign

height:

3.<td>的属性: 通用的四个属性: bgcolor,background,align,valign 布局的两个属性: width,height 合并的两个属性: colspan,rowspan

练习 单线表格

 思路:把<table>设上背景色,再把table的单元格间距拉开1个像素。为每个tr设上背景色,就会把table背景色给漏出来。
1.设置table标记的背景色。
2.把table的border=0,把cellspacing=1
3.把每个tr的背景色设置上。

例子

注意:复杂页面的布局

思路:多表格嵌套,尽量少用单元格的合并。
固定1个维度。

四、表单 <form action="" method="">上行数据 id-不能重。主要是给css,js等客户端代码调用准备的。 name-可以重。主要是给asp.net,asp,php,jsp等服务端技术调用准备的。

(一)按钮类:

input type:button,submit,reset,image

<input id="" name="" type="button" value="这是个普通按钮"/>

<input id="" name="" type="submit" value="这是个提交按钮"/>

<input id="" name="" type="reset" value="这是个重置按钮"/>

<input id="" name="" type="image

" src="图片按钮上的图片路径"/>

(二)文本类: <input id="" name="" type="text"  value=""/>

<textarea id="" name="" rows="行数" cols="列数"></textarea>

<input id="" name="" type="password"  value=""/>

<input id="" name="" type="hidden" value="">

(三)选择类:

<input id="" type="radio" name="组名"/>

<input id="" type="checkbox" name="组名">

<select size="n"> <option value="每一面对应的值">每一项显示的内容</option> </select>

<input id="" name="" type="file"/>

posted @ 2015-04-23 13:51  德云社伟大航路分社  阅读(145)  评论(0编辑  收藏  举报