Top
NSD Devweb DAY01
- 案例1：HTML 文档片段
- 案例2：为HTML页面添加图像和链接
- 案例3：为 HTML文档添加表格
- 案例4：为 HTML 页面添加导航目录
- 案例5：创建表单
- 案例6：使用 CSS 样式
1 案例1：HTML 文档片段
1.1 问题
- 【参见COOKBOOK】
1.2 步骤
实现此案例需要按照如下步骤进行。
步骤一：HTML标题
HTML 标题是通过
- 标签来定义的
这是标题 1
这是标题 2
这是标题 3
这是标题 4
这是标题 5
这是标题 6
实例演示如图-1所示：
图-1
步骤二：HTML段落
HTML 段落是通过标签
来定义的
这是一个段落。
实例演示如图-2所示：
图-2
步骤三：HTML链接
HTML 链接是通过标签 来定义的.
- 这是一个链接使用了 href 属性
实例演示如图-3所示：
图-3
2 案例2：为HTML页面添加图像和链接
2.1 问题
- 创建 html 文档
- 使用图像和链接元素为页面添加内容
2.2 步骤
实现此案例需要按照如下步骤进行。
步骤一：HTML实例
1)图像链接实例
- hello world
-
创建图片链接:
-
无边框的图片链接:
-
2)锚点实例：
- 查看章节 4
-
章节 1
这边显示该章节的内容……
-
章节 2
这边显示该章节的内容……
-
章节 3
这边显示该章节的内容……
-
这边显示该章节的内容……
-
章节 5
这边显示该章节的内容……
步骤二：实例演示
1)图像链接如图-6所示：
图-4
此时，点击图片超链接会把用户带到百度的首页。
2)锚点实例如图-7所示：
题-5
此时点击查看章节4，会把用户带到章节4位置
步骤三：HTML实例解析
1)HTML链接语法：
- 链接文本
使用元素创建超级链接
href 属性描述了链接的目标。
使用 target 属性，可以定义被链接的文档在何处显示。
2)HTML链接锚点使用方式：
- 定义锚点:
- 锚点一
- 链接到锚点，在锚点名前加上#：
- ...
锚点是文档中某行的一个记号，用于链接到文档中的某个位置
3)HTML图像语法：
使用![]()
元素创建图像
在页面上显示图像，需要使用源属性（src）。源属性的值是图像的 URL 地址，即存储图像的位置。
alt 属性用来为图像定义一串预备的可替换的文本
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
3 案例3：为 HTML文档添加表格
3.1 问题
- 【参见COOKBOOK】
3.2 步骤
实现此案例需要按照如下步骤进行。
步骤一：HTML实例
| 第一行,第一列 | | 第一行,第二列 |
| 第二行,第一列 | | 第二行,第二列 |
步骤二：实例演示如图-8所示：
图-6
步骤三：HTML实例解析
1)创建表格：
表格由
标签来定义。
每个表格均有若干行（由
标签定义），
每行被分割为若干单元格（由
标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
2) 元素常用属性
width，设置表格宽度
height，设置表格高度
align，设置表格对齐方式(left|center|right)
border，设置表格边框宽度
cellpadding，设置内边距(单元格边框与内容之间的距离)
cellspacing，设置外边距(单元格之间的距离)
bgcolor，设置表格背景颜色
3) 元素常用属性
align，设置水平对齐方式(left|center|right)
valign，设置垂直对齐方式(top|middle|bottom)
4) 元素常用属性
align，设置水平对齐方式(left|center|right)
valign，设置垂直对齐方式(top|middle|bottom)
width，设置宽度
height，设置高度
colspan，设置单元格跨列
rowspan，设置单元格跨行
步骤四：不规则表格HTML实例
-
单元格跨两格:
| Name | | Telephone |
| Bill Gates | | 555 77 854 | | 555 77 855 | -
单元格跨两列:
| First Name: | | Bill Gates |
| Telephone: | | 555 77 854 |
| 555 77 855 | -
步骤五：实例演示如图-9所示：
图-7
步骤六：HTML实例解析
设置单元格 | 的跨行或者跨列属性
1)跨列：colspan，水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
2)跨行：rowspan，垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数。
4 案例4：为 HTML 页面添加导航目录
4.1 问题
- 使用列表元素为 html 文档添加导航目录
4.2 步骤
实现此案例需要按照如下步骤进行。
步骤一：HTML实例
1)有序列表
编号列表：
- Apples
- Bananas
- Lemons
- Oranges
大写字母列表：
Apples
Bananas
Lemons
Oranges
2)无序列表
圆圈列表：- Apples
- Bananas
- Lemons
- Oranges
-
正方形列表：- Apples
- Bananas
- Lemons
- Oranges
3)嵌套列表
- Coffee
- Tea
- Black tea
- Green tea
- Milk
步骤二：实例演示：
1)有序列表如图-7所示：
图-7
2)无序列表如图-8所示：
图-8
3)嵌套列表如图-9所示：
图-9
步骤三：HTML实例解析
1)有序列表：
元素编写有序列表， 元素中只能包含具体的列表项元素 -
有序列表常用属性type：
作用：指定列表项前面标识的类型
取值：
1：按数字方式排列，默认值
A：按照大写英文字母方式排列
a：按照小写英文字母排列
I ：按大写罗马字符方式排列
i：按小写的罗马字符排列
2)无序列表：
元素创建表单
4）表单常用属性：
action：指定提交给服务器的处理程序的地址
method：指出表单数据提交的方式，取值为get或post
enctype：指定表单数据进行编码的方式，即允许将什么样的数据提交给服务器
name：表单名称
- 表单使用表单标签
- .
- input 元素
- .
步骤二：HTML表单控件-文本域
1)文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
- First name:
- Last name:
2)浏览器显示如图-10所示：
图-10
3)常用属性如下：
border-collap
name：定义控件名称
value：值
maxlength 最大输入字符
readonly 只读
placeholder 提示占位符
2)密码字段
步骤三：HTML表单控件-密码字段
1)密码字段通过标签 来定义:
- Password:
2)浏览器显示如图-11所示：
图-11
3)常用属性如下：
border-collap
name：定义控件名称
value：值
maxlength 最大输入字符
readonly 只读
placeholder 提示占位符
步骤四：HTML表单控件-单选框、复选框
1) 定义了单选框. 用户需要从若干给定的选择中选取一个选项。
- I have a bike
- I have a car
2)浏览器显示如图-12所示：
图-12
3) 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
- I have a bike
- I have a car
4)浏览器显示如图-13所示：
图-13
5)常用属性如下：
name:除定义名称之外，还有分组作用，一组的单元按钮和复选框，name属性必须一致，提交时会把复选框中的内容按照数组进行提交
value值，提交前定义，当前用户选择的时候，会将该控件value值提交给服务器
checked设置预选中，该属性无值
步骤五：HTML表单控件-按钮
1) 定义了提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
- Username:
2)浏览器显示如图-14所示：
图-14
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。
3)定义了重置按钮
当用户单击reset重置按钮时，表单的内容会被清空
- Username:
4)浏览器显示如图-15所示：
图-15
5)定义了普通按钮：
6)浏览器显示如图-16所示：
图-16
属性：value ：按钮上的文本
步骤六：HTML表单控件-隐藏域和文件选择框
1)隐藏域
作用：想提交给服务器但不想给用户看的数据要放在隐藏域中
语法：
属性：
name：控件名称
value：控件的值
6)文件选择框：
作用：提交文件
语法：
属性：
name:控件名称
6 案例6：使用 CSS 样式
6.1 问题
【参见COOKBOOK】
- 使用内联样式为
元素设置样式
- 使用内部样式表为
元素设置样式
- 使用外部样式表为
元素设置样式
6.2 步骤
实现此案例需要按照如下步骤进行。
步骤一：使用内联样式为 元素设置样式
1)样式定义在 HTML 元素的标准属性 style 里
2)CSS语法:
只需要将分号隔开的一个或者多个属性/值对作为元素的style 属性的值
属性和属性值之间用：连接
多对属性之间用；隔开
3)要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。下例展示如何改变段落的颜色和左外边距
段落文本（p）：使用内联样式
4)实例演示如图-17所示：
图-17
步骤二：使用内部样式表为 元素设置样式
1)样式表规则位于文档头元素中的
一级标题（h1）：使用内部样式表 | |
