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
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"/>