HTML网页设计基础 优质课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第3章 HTML网页设计 基础
3.1 认识和使用HTML 3.2 HTML常用标记 3.3 HTML表单标记
3.1 认识和使用HTML
3.1.1 什么是HTML
HTML使用各种不同的标记符号来分 别标识和设定不同的网页元素。每一个网 页元素通常由开始标记（start tag）、结束 标记（end tag），以及夹在这两个标记中 的内容所组成。一个HTML元素的形式可 表示为：
<INPUT type = 表单域类型 name = 表单域名 称 value = 字符串 size = 大小>
2．<SELECT>标记 格式：
<SELECT name = 表单域名称 size = 大小> <OPTION>文字</OPTION> <OPTION>文字</OPTION> ……
<FONT size = 大小 face = 字体名称 color = 颜色>文字</FONT>
2．特殊字符标记 字符“<”用字符串“<”表示； 字符“>”用字符串“>”表示； 字符“&”用字符串“&”表示； 字符“"”用字符串“"”表示； 空格字符用字符串“ ”表示。
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
内联样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
</SELECT>
3．<TEXTAREA>标记 格式：
< TEXTAREA name = 表单域名称 rows = 行数 cols = 列数> </TEXTAREA>
3.3.3 表单制作举例
图 表单范例执行结果
3.4 HTML常用标记
3.4.1 div盒子模型 格式： <div></div> 从外到内依次包括： margin：外边距、 border：边框、 padding：内补白、 content：内容。
3.2.3 列表标记
1．无序列表标记 格式： <UL type = 项目符号类型>
<LI type = 项目符号类型>列表项1 <LI type = 项目符号类型>列表项2 …… <LI type = 项目符号类型>列表项n </UL>
2．有序列表标记
格式：
<OL type = 序号类型 start = 开始序号> <LI type = 序号类型>列表项1 <LI type = 序号类型>列表项2 …… <LI type = 序号类型>列表项n </OL>
文字 <BR> 4．横线标记 格式：
<HR size = 粗细 align = 对齐方式 width = 宽 度 color = 颜色>
5．文本块标记 格式：
<Blockquote>文字</Blockquote>
3.2.2 文字格式标记 1．字体标记 格式：
3.2.5 超链接标记 格式：
<A href = URL>用作超链接的文字或图像 </A>
3.2.7 样式标记 格式：
<STYLE> HTML标记{属性名称：属性值；属性名称：
属性值……} HTML标记{属性名称：属性值；属性名称：
属性值……} ……
< /STYLE>
3.2.8 其他标记 1．格式保留标记 格式：
பைடு நூலகம்
3.4.2 HTML网页简单实例
<html> <head> <title> 网页标题 </title> <style> *{margin:0px;padding:0px;} .content{margin:0px auto;width:80%;} .Header{width:100%;height:100px;background-color: green;text-align:center;font-
<标记名称 属性名称=值 ……> 内容 </标记名称>
3.1.2 HTML文档基本架构 <html> <head> <title> 网页标题
</title> </head> <body> <p>这是正文部分！</p> </body> </html>
3.1.3 创建一个简单的HTML文档
3.3 HTML表单标记
3.3.1 表单定义格式 格式： <FORM action = 被激活程序 method = 信息
传送方式> …… <INPUT type = 表单域类型 name = 表单
域名称 ……> ……
</FORM>
3.3.2 常用表单域标记 1．<INPUT>标记 格式：
<PRE>文本内容</PRE> 2．图像标记 格式：
<IMG scr = 图片文件的URL align = 对齐方式 alt = 说明性替代文字 height = 图像高度 width = 图像宽度 hspace = 水平空白 vspace = 垂直空白>
3．嵌入JavaScript标记 格式： <JavaScript>JavaScript脚本</JavaScript>
3.4.2 HTML样式 如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下 三种方式来插入样式表：
外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表
图 创建一个简单HTML文档
图 执行结果
3.2 HTML常用标记
3.2.1 段落类标记 1．标题标记 格式： <Hn align = 对齐方式> 标题文字 </Hn> 2．分段标记 格式： <P align = 对齐方式> 文字 </P>
3．换行标记 格式：
3.1 认识和使用HTML 3.2 HTML常用标记 3.3 HTML表单标记
3.1 认识和使用HTML
3.1.1 什么是HTML
HTML使用各种不同的标记符号来分 别标识和设定不同的网页元素。每一个网 页元素通常由开始标记（start tag）、结束 标记（end tag），以及夹在这两个标记中 的内容所组成。一个HTML元素的形式可 表示为：
<INPUT type = 表单域类型 name = 表单域名 称 value = 字符串 size = 大小>
2．<SELECT>标记 格式：
<SELECT name = 表单域名称 size = 大小> <OPTION>文字</OPTION> <OPTION>文字</OPTION> ……
<FONT size = 大小 face = 字体名称 color = 颜色>文字</FONT>
2．特殊字符标记 字符“<”用字符串“<”表示； 字符“>”用字符串“>”表示； 字符“&”用字符串“&”表示； 字符“"”用字符串“"”表示； 空格字符用字符串“ ”表示。
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
内联样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
</SELECT>
3．<TEXTAREA>标记 格式：
< TEXTAREA name = 表单域名称 rows = 行数 cols = 列数> </TEXTAREA>
3.3.3 表单制作举例
图 表单范例执行结果
3.4 HTML常用标记
3.4.1 div盒子模型 格式： <div></div> 从外到内依次包括： margin：外边距、 border：边框、 padding：内补白、 content：内容。
3.2.3 列表标记
1．无序列表标记 格式： <UL type = 项目符号类型>
<LI type = 项目符号类型>列表项1 <LI type = 项目符号类型>列表项2 …… <LI type = 项目符号类型>列表项n </UL>
2．有序列表标记
格式：
<OL type = 序号类型 start = 开始序号> <LI type = 序号类型>列表项1 <LI type = 序号类型>列表项2 …… <LI type = 序号类型>列表项n </OL>
文字 <BR> 4．横线标记 格式：
<HR size = 粗细 align = 对齐方式 width = 宽 度 color = 颜色>
5．文本块标记 格式：
<Blockquote>文字</Blockquote>
3.2.2 文字格式标记 1．字体标记 格式：
3.2.5 超链接标记 格式：
<A href = URL>用作超链接的文字或图像 </A>
3.2.7 样式标记 格式：
<STYLE> HTML标记{属性名称：属性值；属性名称：
属性值……} HTML标记{属性名称：属性值；属性名称：
属性值……} ……
< /STYLE>
3.2.8 其他标记 1．格式保留标记 格式：
பைடு நூலகம்
3.4.2 HTML网页简单实例
<html> <head> <title> 网页标题 </title> <style> *{margin:0px;padding:0px;} .content{margin:0px auto;width:80%;} .Header{width:100%;height:100px;background-color: green;text-align:center;font-
<标记名称 属性名称=值 ……> 内容 </标记名称>
3.1.2 HTML文档基本架构 <html> <head> <title> 网页标题
</title> </head> <body> <p>这是正文部分！</p> </body> </html>
3.1.3 创建一个简单的HTML文档
3.3 HTML表单标记
3.3.1 表单定义格式 格式： <FORM action = 被激活程序 method = 信息
传送方式> …… <INPUT type = 表单域类型 name = 表单
域名称 ……> ……
</FORM>
3.3.2 常用表单域标记 1．<INPUT>标记 格式：
<PRE>文本内容</PRE> 2．图像标记 格式：
<IMG scr = 图片文件的URL align = 对齐方式 alt = 说明性替代文字 height = 图像高度 width = 图像宽度 hspace = 水平空白 vspace = 垂直空白>
3．嵌入JavaScript标记 格式： <JavaScript>JavaScript脚本</JavaScript>
3.4.2 HTML样式 如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下 三种方式来插入样式表：
外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表
图 创建一个简单HTML文档
图 执行结果
3.2 HTML常用标记
3.2.1 段落类标记 1．标题标记 格式： <Hn align = 对齐方式> 标题文字 </Hn> 2．分段标记 格式： <P align = 对齐方式> 文字 </P>
3．换行标记 格式：