HTML:HyperText Markup Language 即超文本标记语言,不同于程序设计语言,它只能建议浏览器以什么方式或结构显示网页内容,是网页的基础架构。
CSS: Cascading Style Sheets 即层叠样式表,简称样式表,是网页页面排版样式标准,它弥补了HTML对网页格式化的不足,起到排版定位的作用。
顺便说一下JavaScript。HTML和CSS配合使用,提供给用户的只是一种静态信息,缺少交互性,出于这样一种需求,JavaS应运而生,实现了实时动态交互的页面功能。
HTML
html文件是以标签对或标签来标记网页结构和显示网页内容的。大部分标签都以标签对显示存在,即以“<标签名>”开始,以“</标签名>”结束。
一个最简单的html如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
</html>
第一行为文档类型申明
HTML文档以<html>标签开始</html>结束 主要包含两个部分:文档头(以<head>标签开始</head>结束)和文档体(以<body>标签开始</body>结束)
文档头中常包含标题(<title>) 文件信息(<meta>)如文件关键字 类型格式 网页过期时间 样式表等
html文档编写时不区别大小写,但是标记中不要有空格,标记中的属性可以用双引号括起来,也可以不用。
常见body属性
bgcolor | 设置背景颜色 |
topmargin leftmargin rightmargin bottommargin | 设置页面边距 |
text | 设置正文颜色 |
文字与段落效果
编辑网页文字样式<font face=" " size=" " color=" "></font> 主要设置文字的字体字号和颜色等
<b>加粗的文字</b>
<i>斜体的文字</i>
<u>添加下划线的文字</u>
文字上下标 <sup></sup> <sub></sub>
段落标记<p></p>
回车<br>
预格式化<pre></pre>对网页中文字段落进行预格式化,在输入过程中,按键盘上的回车键,就可以生成一个段落
文字居中显示<center></center>
<blockquote>段落缩进
插入并设置水平线<hr>其属性有
属性 | 说明 |
width | 设置水平线宽度,可以是像素或百分比 |
size | 设置水平线高度 |
noshade | 设置水平线无阴影 |
color | 设置水平线颜色 |
align | 设置水平线居中对齐 |
建立和使用列表
列表类型 | 标记符号 |
定义列表 | dl |
无序列表 | ul |
目录列表 | dir |
菜单列表 | menu |
有序列表 | ol |
1.插入定义列表<dl>
<dl>
<dt>名称<dd>说明
<dt>名称<dd>说明
<dt>名称<dd>说明
</dl>
注:dt标记定义了列表项的名称部分,同时此标记只在dl标记中使用
2插入无序列表<ul>
<ul>
<li>名称</li>内容
<li>名称</li>内容
<li>名称</li>内容
</ul>
3插入目录列表<dir>
<dir>
<li>名称</li>内容
<li>名称</li>内容
<li>名称</li>内容
</dir>
4菜单列表<menu> 只需要单个li标记显示菜单列表项目值
<menu>
<li>名称
<li>名称
<li>名称
<menu>
5 插入有序列表
<ol Type=" ">
<li>名称</li>内容
<li>名称</li>内容
<li>名称</li>内容
</ol>
2-4的列表符号都是一行的前面显示小圆点,有序列表可以自定义列表符号 ,默认为 1,2,3.....
其他取值有a,A ,i等,对于列表符号分别为 a,b,c,...;A,B,C,.... 罗马数字i等
超链接<a href="URL">链接内容</a>
图像映射:单击网页中的某个图片可以跳转到相应的网页页面
利用<img>标记插入图像文件 src文件路径
<map>标记表示插入图像映射 rshape表示映射区域形状有 rect 矩形 cicle椭圆形poly多边形等 coords表示感应区域坐标
<img src="URL" usemap=" "></img>
<map name=" ">
<area shape=" " coords=" , , ," href="URL">
</map>
制作
表格
插入表格
基本结构
<pre name="code" class="html"><table>
<caption>插入表格标题</caption>
<tr>
<td><td>
</tr>
</table>
<tr>表示插入一行<td>表示插入一列
设置表格表头<th>,要将某一行作为表格文件的表头,只要将该行包含的列标记<td>改为<th>即可,表头默认粗体显示居中对齐
设置划分结构表格<thead><tbody><tfoot>
所谓划分结构表格,是指将一个表格划分为三个部分在网页上显示。分别使用<thead></thead><tbody></tbody><tfoot></tfoot>标记
<thead></thead>表示定义一组表头行
<tbody></tbody>表示定义表格主体部分
<tfoot></tfoot>表示为表格添加一个标注
设置表格标记属性
<table>属性
设置表格的宽度和高度width 和height
设置表格的边框属性 border边框粗细 bordercolor边框颜色
设置边框样式frame和rules 可以设置边框部分显示
设置表格背景bgcolor
<tr><td>属性
调整行内容水平对齐<tr align="left|center|right">
调整行内容锤子对齐<tr align="top|middle|bottom|baseline"> 分别表示内容顶端对齐 居中对齐 低端对齐 基线对齐
设置跨行 单元格纵向合并 <td rowspan="2"> 单元格跨2行
设置跨列 单元格横向合并<td colspan="2"> 单元格跨2列
设置单元格间距cellspacing和单元格边距cellpadding
表单
是网页中提供的一种交互式操作手段
表单标记<form></form> 部分属性如下
属性 | 说明 |
name | 设置表单名称 |
method | 设置表单发送方法post或get |
action | 设置表单处理程序 |
enctype | 设置表单编码方式 |
target | 设置表单显示目标 |
信息输入标记<input name=" " type=" ">
常用控件
类型 | 说明 |
文本框 text | type=“ text” |
密码框 | type="password" |
文件域 | type="file" |
复选框 | type="checkbox" |
单选框 | type="radio" |
普通按钮 | type="button" |
提交按钮 | type="submit" |
重置按钮 | type="reset " |
图像域(图像按钮) | type="image" |
插入文字域 <textarea name="text" rows=" " cols=" " id=" ">
插入隐藏域<input name=" " type="hidden" value=" "> 对用户不可见,但是随表单将数据发送给服务器
插入下拉菜单和列表项
<form ><select name=”爱好” size=4 >
<option value="1">音乐
<option value="2">美术
<option value="3">体育
</select>
<select name="特长" >
<option value="1">唱歌
<option value="2">画画
<option value="3">长跑
</select>
</form>
指定size值为列表项 不知道值为下拉菜单
如图所示
表单实际应用
<html>
<head>
<title>表单应用</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="408" border="1" align="center">
<tr>
<td width="34" height="32"> </td>
<td colspan="2">会员注册</td>
</tr>
<tr>
<td> </td>
<td width="83"><div align="right">用户名:</div></td>
<td width="269"><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">密码:</div></td>
<td><input type="password" name="textfield2"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">确认密码:</div></td>
<td><input type="text" name="textfield3"></td>
</tr>
<tr>
<td> </td>
<td><div align="right">性别:</div></td>
<td><input type="radio" name="radiobutton" value="radiobutton">
男
<input type="radio" name="radiobutton" value="radiobutton">
女</td>
</tr>
<tr>
<td> </td>
<td><div align="right">爱好:</div></td>
<td><input type="checkbox" name="checkbox" value="checkbox">
体育
<input type="checkbox" name="checkbox2" value="checkbox">
音乐
<input type="checkbox" name="checkbox3" value="checkbox">
文学
<input type="checkbox" name="checkbox4" value="checkbox">
其它</td>
</tr>
<tr>
<td> </td>
<td><div align="right">特长:</div></td>
<td><select name="select">
</select></td>
</tr>
<tr>
<td> </td>
<td><div align="right">联系电话:</div></td>
<td><input type="text" name="textfield4"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交"></td>
<td><input type="reset" name="Submit2" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
实际效果图如下:
下次再写css吧