Top

NSD Devweb DAY01

  1. 案例1:HTML 文档片段
  2. 案例2:为HTML页面添加图像和链接
  3. 案例3:为 HTML文档添加表格
  4. 案例4:为 HTML 页面添加导航目录
  5. 案例5:创建表单
  6. 案例6:使用 CSS 样式

1 案例1:HTML 文档片段

1.1 问题

  1. 【参见COOKBOOK】

1.2 步骤

实现此案例需要按照如下步骤进行。

步骤一:HTML标题

HTML 标题是通过<h1> - <h6> 标签来定义的

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

实例演示如图-1所示:

图-1

步骤二:HTML段落

HTML 段落是通过标签 <p> 来定义的

<p>这是一个段落。</p>

实例演示如图-2所示:

图-2

步骤三:HTML链接

HTML 链接是通过标签 <a> 来定义的.

<a href="http://www.baidu.com">这是一个链接使用了 href 属性</a>

实例演示如图-3所示:

图-3

2 案例2:为HTML页面添加图像和链接

2.1 问题

  1. 创建 html 文档
  2. 使用图像和链接元素为页面添加内容

2.2 步骤

实现此案例需要按照如下步骤进行。

步骤一:HTML实例

1)图像链接实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>hello world</title> 
</head>
<body>

<p>创建图片链接:
<a href="http://www.baidu.com">
<img  border="10" src="smiley.gif" alt="HTML 百度" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.baidu.com">
<img border="0" src="smiley.gif" alt="HTML 百度" width="32" height="32"></a></p>

</body>
</html>

2)锚点实例:

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a name="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

步骤二:实例演示

1)图像链接如图-6所示:

图-4

此时,点击图片超链接会把用户带到百度的首页。

2)锚点实例如图-7所示:

题-5

此时点击查看章节4,会把用户带到章节4位置

步骤三:HTML实例解析

1)HTML链接语法:

<a href="url">链接文本</a,target="_blank">

使用<a>元素创建超级链接

href 属性描述了链接的目标。

使用 target 属性,可以定义被链接的文档在何处显示。

2)HTML链接锚点使用方式:

定义锚点:
<a name=" anchorname1">锚点一</a>
链接到锚点,在锚点名前加上#:
<a href="# anchorname1">...</a>

锚点是文档中某行的一个记号,用于链接到文档中的某个位置

3)HTML图像语法:

<img src="url" alt="some_text">

使用<img>元素创建图像

在页面上显示图像,需要使用源属性(src)。源属性的值是图像的 URL 地址,即存储图像的位置。

alt 属性用来为图像定义一串预备的可替换的文本

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

3 案例3:为 HTML文档添加表格

3.1 问题

  1. 【参见COOKBOOK】

3.2 步骤

实现此案例需要按照如下步骤进行。

步骤一:HTML实例

<table border="1">
    <tr>
        <td>第一行,第一列</td>
        <td>第一行,第二列</td>
    </tr>
    <tr>
        <td>第二行,第一列</td>
        <td>第二行,第二列</td>
    </tr>
</table>

步骤二:实例演示如图-8所示:

图-6

步骤三:HTML实例解析

1)创建表格:

表格由 <table> 标签来定义。

每个表格均有若干行(由 <tr> 标签定义),

每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

2)<table>元素常用属性

width,设置表格宽度

height,设置表格高度

align,设置表格对齐方式(left|center|right)

border,设置表格边框宽度

cellpadding,设置内边距(单元格边框与内容之间的距离)

cellspacing,设置外边距(单元格之间的距离)

bgcolor,设置表格背景颜色

3)<tr>元素常用属性

align,设置水平对齐方式(left|center|right)

valign,设置垂直对齐方式(top|middle|bottom)

4)<td>元素常用属性

align,设置水平对齐方式(left|center|right)

valign,设置垂直对齐方式(top|middle|bottom)

width,设置宽度

height,设置高度

colspan,设置单元格跨列

rowspan,设置单元格跨行

步骤四:不规则表格HTML实例

<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <td>Name</td>
  <td colspan="2">Telephone</td>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <td>First Name:</td>
  <td>Bill Gates</td>
</tr>
<tr>
  <td rowspan="2">Telephone:</td>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>

步骤五:实例演示如图-9所示:

图-7

步骤六:HTML实例解析

设置单元格 <td> 的跨行或者跨列属性

1)跨列:colspan,水平方向延伸单元格,值为一正整数,代表此单元格水平延伸的单元格数

2)跨行:rowspan,垂直方向延伸单元格,值为一正整数,代表此单元格垂直延伸的单元格数。

4 案例4:为 HTML 页面添加导航目录

4.1 问题

  1. 使用列表元素为 html 文档添加导航目录

4.2 步骤

实现此案例需要按照如下步骤进行。

步骤一:HTML实例

1)有序列表

<h4>编号列表:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

2)无序列表

<h4>圆圈列表:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

3)嵌套列表

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

步骤二:实例演示:

1)有序列表如图-7所示:

图-7

2)无序列表如图-8所示:

图-8

3)嵌套列表如图-9所示:

图-9

步骤三:HTML实例解析

1)有序列表:

<ol>元素编写有序列表,<ol> 元素中只能包含具体的列表项元素 <li>

有序列表常用属性type:

作用:指定列表项前面标识的类型

取值:

1:按数字方式排列,默认值

A:按照大写英文字母方式排列

a:按照小写英文字母排列

I :按大写罗马字符方式排列

i:按小写的罗马字符排列

2)无序列表:

<ul>元素表示无序列表,<ul> 元素中只能包含具体的列表项元素 <li>

无序列表常用属性type:

作用:指定列表项前面标识的类型

取值:

disc 默认值,实心原点

circle :空心原点

square:实心方块

none:不显示任何标识

3)嵌套列表:

列表中允许再出现列表

被嵌套的列表只能出现在<li></li>中

无序列表中可以嵌套有序列表,有序列表中也可以嵌套无序列表

5 案例5:创建表单

5.1 问题

  1. 【参见COOKBOOK】

5.2 步骤

实现此案例需要按照如下步骤进行。

步骤一:form元素解析

1)表单作用:用于接收用户的数据并提交给服务器

2)表单中的两个要素:form 元素、表单控件(用于与用户进行交互的元素)

3)表单元素标记:使用<form></form>元素创建表单

4)表单常用属性:

action:指定提交给服务器的处理程序的地址

method:指出表单数据提交的方式,取值为get或post

enctype:指定表单数据进行编码的方式,即允许将什么样的数据提交给服务器

name:表单名称

表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>

步骤二:HTML表单控件-文本域

1)文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

2)浏览器显示如图-10所示:

图-10

3)常用属性如下:

border-collap

name:定义控件名称

value:值

maxlength 最大输入字符

readonly 只读

placeholder 提示占位符

2)密码字段

步骤三:HTML表单控件-密码字段

1)密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

2)浏览器显示如图-11所示:

图-11

3)常用属性如下:

border-collap

name:定义控件名称

value:值

maxlength 最大输入字符

readonly 只读

placeholder 提示占位符

步骤四:HTML表单控件-单选框、复选框

1)<input type=" radio "> 定义了单选框. 用户需要从若干给定的选择中选取一个选项。

<form>
<input type="radio" name="vehicle" value="Bike">I have a bike<br>
<input type="radio" name="vehicle" value="Car">I have a car
</form>

2)浏览器显示如图-12所示:

图-12

3)<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

4)浏览器显示如图-13所示:

图-13

5)常用属性如下:

name:除定义名称之外,还有分组作用,一组的单元按钮和复选框,name属性必须一致,提交时会把复选框中的内容按照数组进行提交

value值,提交前定义,当前用户选择的时候,会将该控件value值提交给服务器

checked设置预选中,该属性无值

步骤五:HTML表单控件-按钮

1)<input type="submit"> 定义了提交按钮

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

2)浏览器显示如图-14所示:

图-14

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

3)<input type="reset">定义了重置按钮

当用户单击reset重置按钮时,表单的内容会被清空

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
<input type="reset" value="reset">
</form>

4)浏览器显示如图-15所示:

图-15

5)<input type="button">定义了普通按钮:

<form action="">
<input type="button" value="Hello world!">
</form>

6)浏览器显示如图-16所示:

图-16

属性:value :按钮上的文本

步骤六:HTML表单控件-隐藏域和文件选择框

1)隐藏域

作用:想提交给服务器但不想给用户看的数据要放在隐藏域中

语法:<input type=”hidden”>

属性:

name:控件名称

value:控件的值

6)文件选择框:

作用:提交文件

语法:<input type=”file”>

属性:

name:控件名称

6 案例6:使用 CSS 样式

6.1 问题

【参见COOKBOOK】

  1. 使用内联样式为<p>元素设置样式
  2. 使用内部样式表为<h1>元素设置样式
  3. 使用外部样式表为<h2>元素设置样式

6.2 步骤

实现此案例需要按照如下步骤进行。

步骤一:使用内联样式为<p>元素设置样式

1)样式定义在 HTML 元素的标准属性 style 里

2)CSS语法:

只需要将分号隔开的一个或者多个属性/值对作为元素的style 属性的值

属性和属性值之间用:连接

多对属性之间用;隔开

3)要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。下例展示如何改变段落的颜色和左外边距

<body>
<p style="color:red;margin-left:20px">段落文本(p):使用内联样式</p> 
</body>

4)实例演示如图-17所示:

图-17

步骤二:使用内部样式表为<h1>元素设置样式

1)样式表规则位于文档头元素中的 <style> 元素内

文档的 <head> 元素内添加 <style> 元素

2)在 <style> 元素中添加样式规则

可以定义多个样式规则

每个样式规则有两个部分:选择器和样式声明

3)选择器:决定哪些元素使用这些规则

4)样式声明:一对大括号,包含一个或者多个属性/值对

5)当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表,实例如下所示:

<html>
<head>
<style>	
		h1 {color:blue;}
</style>		
</head>
<body>
<h1>一级标题(h1):使用内部样式表</h1>
</body>
</html>

实例演示如图-18所示:

图-18

步骤三:使用外部样式表为<h2>元素设置样式

1)创建一个单独的样式表文件用来保存样式规则

一个纯文本文件,文件后缀为 .css

该文件中只能包含样式规则

样式规则由选择器和样式声明组成

h2 {
color:green;
background-color:silver;
}

2) 在需要使用该样式表文件的页面上,使用<link> 元素链接需要的外部样式表文件,

在文档的 <head> 元素内添加 <link> 元素:

<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<h2>二级标题(h2):使用外部样式表</h2>
</body>
</html>

实例演示如图-19所示:

图-19