网页制作HTML基础知识

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

left（默认值）
6
文字标记
<font> </font> 有三个属性值
face：字体（默认是“宋体”） size：字号（默认是3） color：颜色（默认是黑色）
<font face="宋体" size="2" color="#FF0000">红色二号宋体</font> <font face="楷体" size="4" color="#00FF00">绿色四号楷体</font> <font face="仿宋" size="5" color="#0000FF">蓝色五号仿宋</font>
表单标记--form
表单一般包括说明性文字、填写的表格、提交按钮、重填按钮等内容
表单都是以<form>开始，以</form>结束
21
表单标记—form（续）
<form>有以下属性：
action：处理该表单的程序文件 method：该表单的传送方式，有post（将所
有信息当做一个表单传递给服务器）和get （将表单信息附在URL地址后面传送） name：表单的名称
最近的标记起作用
9
超链接标记
<a> </a> 属性值如下：
href：超链接地址、文件路径、邮件地址、# target：打开超链接的窗口，有如下参数
_blank：在新窗口打开链接 _parent：在当前窗口的上一级窗口打开链接 _self：在当前窗口中打开 _top：在整个浏览器窗口中打开
15
表格标记（续二）
<tr>有如下主要属性：
align：水平对齐方式 valign：垂直对齐方式 height：行高 bgcolor：表格背景色 bordercolor：边框颜色 bordercolorlight：边框明亮部分的颜色 bordercolordark：边框昏暗部分的颜色
</td>
</tr>
</table>
</body>
</html>
4
Leabharlann Baidu
在浏览器中的效果
5
段落标记
段落的开始用<p>标记
段落的结束用</p>标记，可以省略
<p>有一个属性align，表示对齐方式，有以下可选值：
center right
<p align="center">这是居中的文字</p> <p align="right">这是居右的文字</p> <p>这是居左的文字</p>
大小，指定一个值则另一个按比例变化 alt：鼠标移动到图像上时显示的文本
12
图像标记（续）
<img src=“images/shishang1.jpg” alt=“时尚" border="2" align="right"> <br><br><br><br><br><br> <img src="paipaiLogo.jpg" alt="拍拍网Logo" width="200" height="100" border="0" align="center"> <br><br><br><br><br><br> <img src="paipaiLogo.jpg" alt="拍拍网Logo" border="0" align="right"> <br><br><br><br><br><br> <img src="paipaiLogo.jpg" alt="拍拍网Logo" width="200" border="1" align="left">
16
表格标记（续三）
<td>有如下主要属性：
align、valign：水平、垂直对齐方式 background：背景图片 width、height：列宽 bgcolor：表格背景色 bordercolor：边框颜色 bordercolorlight：边框明亮部分的颜色 bordercolordark：边框昏暗部分的颜色
注意：后三个参数在设置得时候要整体考虑
19
框架标记（续二）
<frame>有如下属性值：
src：默认在框架中显示的页面 name：框架名称 scrolling：是否添加滚动条 noresize：是否允许改变大小 bordercolor：框架边框颜色，要与框架边框、
间距等属性配合使用
20
title：当鼠标移到链接上显示的说明文字
10
链接的例子
<a href="font.htm" target="_blank">在新窗口打开字体页面</a>
<a href="mailto:irazheng@163.com"> 点击给我发邮件</a>
11
图像标记
<img>，有如下属性值：
src：图像文件的路径 align：对齐方式 border：边框 width、height：图像的宽和高，不指定则显示默认
13
表格标记
<table> <tr> <td> <td> </tr>
</table>
</td> </td>
14
表格标记（续一）
<table>有如下属性：
align：对齐方式 bgcolor：表格背景色 background：表格背景图片 border：边框宽度，默认为0 bordercolor：边框颜色 bordercolorlight：边框明亮部分的颜色 bordercolordark：边框昏暗部分的颜色 cellspacing：表格格子之间空间的大小 cellpadding：表格格子边框与中间内容的距离 width、height：表格的宽度、高度
24
表单标记--select
<select>与<option>合用，用来定义一个列表、菜单
<select>有以下属性值：
name：表单元素名称 size：显示的条数 multiple：若加入该属性，可以按住ctrl多选
<option>有以下属性值：
value：传送到服务器的实际值 selected：若加入该属性，表示默认选中
7
文字标记（续）
<b>加粗字体</b> <i>倾斜字体</i> <u>加上下划线的字体</u> <sup>上标字体</sup> <sub>下标字体</sub> <s>加上删除线的字体</s>
8
文字标记的组合使用
<font color="#FF0000" size="4" face=" 仿宋">红色四号仿宋<b>加粗字体 </b><i>倾斜字体</i></font>
25
表单标记--textarea
<textarea>用于定义一个多行文本域有以下属性值：
name：表单元素名称 rows：多行文本域的行数 cols：多行文本域的列数
26
17
框架标记
<frameset> <frame /> <frame /> </frameset>
18
框架标记（续一）
<frameset>有如下属性值：
rows、cols：宽度、高度 framespacing：框架间的距离 frameborder：框架间的边框 bordercolor：边框颜色
22
表单标记--input
<input>用来表示：单行输入文本域、单选按钮、复选框、按钮等表单元素
有以下属性值：
name：表单元素名称 type：表单元素类型 size：单行文本与的长度 maxlength：单行文本可输入的最大字符数 value：默认值 checked：默认选中
23
表单标记—input（续）
type元素类型有以下值：
text：单行文本域 password：密码域，以*显示 radio：单选按钮 checkbox：复选框 submit：提交按钮 reset：重置按钮 image：图像域，用src指定图像域的来源 hidden：隐藏文本域，用来传递消息
标记和终止标记中间的内容受标记控制
2
一个简单的HTML文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>这里是标题</title>
<style type="text/css">
网页制作
信息技术学院郑义
HTML概述
HTML( Hyper Text Markup Language，超文本标记语言 )
HTML标记都是由“<”和“>”围起来的，比如：<html>、<table>、<form>
在标记前添加“/”表示终止标记，比如： </html>、</table>、</form>

</style>
</head>
3
一个简单的HTML文件(续)
<body>
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="200" align="center" valign="middle"
bgcolor="#00CCFF">
<span class="style1"><span class="style2">欢迎
</span><span class="style3">光临</span></span>