Web程序设计学习笔记＜二＞

阅读：评论：0

Web程序设计学习笔记＜二＞

第二章 HTML

2.1 使用HTML组织页面内容

HTML(HyperText Marked Language,超文本标记语言)是Web页的标记语言，通过一定的格式标记文本及图像等元素，使之在浏览器中显示出不同内容和风格的网页。
HTML文档通过浏览器在WWW上发布，并独立于各种操作系统平台。一个Web页面就是一个HTML文档。HTML文件本身就是一种文本文件，通过在文件中添加各种标记告诉浏览器如何显示网页内容、浏览器按顺序解释执行HTML文件，但不同的浏览器对于同一标记可能有不同的显示效果。

2.1.1 HTML文档的基本结构

HTML文档分为文档头和文档体两部分，文档头对当前文档进行了一些必要的定义，文档体才是要显示的各种信息。
下面是一个最基本的HTML文档结构：

<!DOCTYPE html>         //文档类型
<html>                 //文档开始
<head>                 //文档头开始<meta charset="utf-8" />     //属性标记<title></title>        //文档标题
</head>          //文档头结束
<body>     //文档体开始</body>    //文档体结束
</html>    //文档结束

1.文档类型标记

DOCTYPE声明：< !DOCTYPE >声明位于HTML文档中的第一行，也就是在< html >标签之前。它告知浏览器当前文档所使用的HTML规范。

<!DOCTYPE html>

2.文档开始和结束标记

HTML文档的开始标记是< html >、结束标记是< /html >。所有其他标记都必须置于< html >和< /html >标记之间，否则浏览器将忽略不在其间的标记。

3.文档头标记

HTML文档的头标记是< head >和< /head >，用于初始化文档信息。
在头标记< head >中包括了标题标记< title >和属性标记< meta >。
< title >和< /title >之间的内容是当前网页的标题，该标题显示在浏览器的标题栏中。< meta >标记用于指定HTML文档的特殊属性，包括页面的编码、显示设备等。

<head><title>我的第一个网页</title><meta charset="utf-8">
</head>

4.文档主体标记
< body >是HTML文档的正文部分，它包含所有显示在浏览器窗口中的内容。它的语法格式如下：

<body[background=#| bgcolor=#| text=#| link=#| alink=#| vlink=#| leftmargin=#| topmargin=# ]>
·
·
·
</body>

2.1.2 HTML文档的主要标记

1. 文字和段落标记

1）标题字体标记< hn >

这里的标题是指HTML页面中文本的标题，而不是指网页标题。
标题元素有6种，分别为h1、h2、h3、h4、h5、h6，用于表示文章中的各种题目。标题字号越小，字体越大，即h1是特大字体。

例如：

<h1>标题文字</h1>

2)文字布局标记

将文档划分为段落可以通过分段标记、换行标记、标题标记或插入水平线来实现。
（1）分段标记< p>：分段标记< p >和< /p >定义了一个段落，并在段与段之间加一个空行，后续行隔行显示。它的常用属性是align，表示对齐方式，其取值有right(右对齐)、left（左对齐）、justify（两端对齐）、center（居中对齐）。

（2）换行标记< br >：换行标记< br >强行规定了当前行的中断，使后续内容在下一行显示，两行间不隔行。
例如：下面的代码，前者隔行显示，后者不隔行显示。

你好吗？<p>很好。
你好吗？<br>很好。

（3）DIV标记：DIV标记用于为文档分节，以便在文档的不同部分应用不同的段落格式。单独的DIV标记不能完成任何工作，必须与align属性联合使用。位于DIV标记符中的多段文本将被认为是一个节，可以为它们设置一致的对齐方式。
DIV标记的格式如下：

<div align=left|center|right>文本或图像</div>

(4)水平线标记< hr >：水平线标记< hr >用于在网页中添加一条水平线，将不同的信息内容分开。其格式如下：

<hr align=对齐方式 color=颜色 size=粗细 width=长度 noshade>

其中，属性align指定对齐方式，color指定水平线的颜色，size指定粗细，width指定线的长度，noshade表示一条无阴影的实线，若省略noshade，则显示带阴影的三维实线。

示例：(运行看看)

    <p>This is a paragraph.</p><p>This is a <span style="color:mediumvioletred;font-style:Italic">some thing</span> paragraph.</p><p>This is a <i>Italic</i> <b>Bold</b> <u>Underline</u> <s>Slah</s>paragraph.</p><p><i><b>Italic</b></i></p><p style="font-family :'Times New Roman' ;font-size :36pt;">x2+y2=z2<br /><i>x</i><sup>2</sup>+ <i>y</i><sup>2</sup>= <i>z</i><sup>2</sup></p>

2. 超链接

超链接（Hyperlink），就是当点击网页上的某些内容时可以打开另一个网页内容。超链接的组织体现了Web站点内部或不同站点之间的页面存储的逻辑关系。
超链接的语法格式如下：

<a href=URL地址 title=标题 target=窗口名称>链接文本</a>

说明： href属性表示链接所指向的URL地址；title属性表示指向链接时所显示的标题文字；target属性指定链接对象的显示位置，即打开链接的目标窗口，默认是原窗口。

针对链接对象的地址不同，超链接可以分为内部链接、外部链接和书签链接。

1）内部链接

内部链接是指连接到本地计算机上的文件。例如：

<a href="1.htm">请单击查看1.htm中的内容</a>

2）外部链接

外部链接是指链接到非本地计算机上的文件，可以是其他计算机或任意站点上的某个文件。例如：

<a href="/">链接到主页</a>
<a href="telnet://bbs.xatu.edu/">远程登陆</a>

3）书签链接

书签链接是指链接到同一页面中某个特定位置。它相当于在页面的某个地方做上书签，需要时通过书签链接可以快速地找到该部分。例如：

· 在某个页面中使用name属性定义一个名为first的书签。

<a name="first">第一章</a>

· 在同一个页面的另外一个位置使用href属性指向它。

<a href="#first">指向第一章</a>

当用户单击超链接“指向第一章”时页面就会跳转到first书签所在的位置。（在引用书签时要加上“#”号）
书签链接的基本格式如下：
（1）在同一页面中要使用书签名：

<a href="#书签名">超链接标题名称</a>

（2）在不同链接之间要使用链接的UPL地址：

<a href="URL地址 #书签名">超链接标题名称</a>

3. 列表

列表（List）通常用于列举相关的信息条目，提供一种有组织的、易于浏览的阅览格式，使文本的条理更清晰。常见的列表有3种，即无序列表、有序列表和定义列表。
1）无序列表< ul >(Unordered List)

无序列表中每一个表项的前面是项目符号，使用< ul >和< li >表项标记。其格式如下：

<ul type=符号类型><li>列表项1</li><li>列表项2</li>···
</ul>

< ul >标记有个type属性，用于指定列表项前面的项目符号，且必须小写。其取值如下：
· disc表示实心圆“●”(默认值)
· circle表示空心圆“○”
· square表示小方块“■”
在同一个列表中< /li >也可以省略，下一个< li >的出现表明上一个列表项的结束。
2）有序列表< ol >(Ordered List)
有序列表使用标签< ol >和< /ol >表示，它使内容按顺序编号。每插入或删除一个列表项，编号都会自动调整。其格式如下：

<ol type=符号类型 start=起始编号><li>列表项1</li><li>列表项2</li>···</ol>

< ol >标记有两个属性，即start属性和type属性。start表示起始编号，默认为1。type属性设置列表项前面的数字序列样式，其取值如下表：

3)定义列表(Defination List)

定义列表用于给每一个列表项加上一段说明性文字，说明性文字独立于列表项，另起一行显示。
定义列表以< dl >和< /dl >作为起止标记，列表项用< dt >引导，说明性文字用< dd >引导。< dt >与< dd >不需要结尾标记。其格式如下：

    <dl><dt>第一项<dd>叙述第一项的定义<dt>第二项<dd>叙述第二项的定义</dl>

示例：（运行试试看）

    <p>Order List</p><ol type="i"><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li><li>List Item 4</li></ol><p>Unordered List</p><ul type="square"><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li><li>List Item 4</li></ul><p>Defination List</p><dl><dt>Defination Term(定义术语)</dt><dd>Defination Details(定义详情)</dd><dt>HTML</dt><dd>Hyper Text Markup Languge</dd><dt>CSS</dt><dd>Cascading Style Sheet</dd><dt>JS</dt><dd>JavaScript</dd></dl>

4.图像

图片的文件格式有很多，但适合于Web环境的压缩格式只有GIF、JPG和PNG。
插入图像的HTML标签格式如下：

<img src="图像文件的URL"/>

< img >标签是一个空元素，它不需要< /img >结束标签，是自关闭的。img元素的src属性指定了需要显示的图像文件的URL。

<URL，是指“Uniform/Universal Resource Locator”的缩写，英文翻译为：统一资源定位符（也就是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址；互联网上的网页都会有一个url与之对应，这样才能正常访问得到该网页。>

示例：

<img src=".png" alt="上海师范大学校标" width="200"/>

5.表单

表单是实现服务器与用户之间交互信息的主要方式，主要用于接收和提交用户输入的信息。

1）表单标记

表单是用户和Web程序进行交互的界面。用户填写完表单信息后做提交表单的操作，表单内容就从客户端传送给服务器端，服务器上的应用程序处理后将结果传送回客户端。
表单用< form >和< /form >标记来创建。其语法格式如下：

 <form id="form" action="处理程序名"method="方式"target="目标窗口"><input type=# name=## value=.../></form>

说明：
（1）action属性：指定服务器端处理程序的URL地址。
（2）method属性：定义客户端提交数据的方式，取值有GET和POST。

GET方式是将表单数据附加在action指定的URL地址之后，并在URL与数据之间加上一个分隔符“ ？”，各数据项之间用“ & ”进行分隔。例如：

.aspx?txtID=007&txtName=James

由于浏览器地址栏长度限制，GET方法一次最多只能提交256个字符的数据。

POST方法与GET方法不同，它把表单数据作为一个独立的数据块直接传递给服务器，传送的数据量要比GET方式大得多，且不受长度限制。

(总的来说，就是get简单，不常用，会将表单控件输入值经过编码后通过URL发送，不保密，但是post规避了这个缺点，保密性强)

（3）target属性：用来指定目标窗口。其值有4个，即_blank（空白窗口）、_parent（父级窗口）、_self（当前窗口）、_top（顶级窗口）。默认为当前窗口。

2)表单域标记

常见的表单域有以下几种：

（1）文本域：文本域根据输入方式的不同可分为单行文本域、密码文本域和多行文本域。

· 单行文本域：输入文本以单行显示，其类型为type=TEXT。

<input type=TEXT name=名称 value=内容 maxlength=最大字符数 size=宽度>

· 密码文本域：输入到文本域中的文字均以圆点的形式显示。

<input type=PASSWORD name=名称 maxlength=最大字符数 size=宽度>

· 多行文本域：如果输入的文本较多，可使用< textarea >和< /textarea>标记来创建一个能够输入多行的文本框。在输入时，如果一行的内容过多或行数过多，则会自动加上水平和垂直滚动条。

<textarea name=名称 value=初始值 rows=行数 cols=列数></textarea>

(2) 按钮域：使用按钮可以提交表单或重置表单，按钮可以分为以下3种：

· 提交按钮（type=submit):单击提交按钮可以实现表单内容的提交。

<input type=submit name=名称 value="提交">

· 重置按钮(type=reset):单击重置按钮可以清除表单中已经输入的内容

<input type=reset name=名称 value="重置">

**·**普通按钮（type=button):使用普通按钮可以通过调用函数完成其他操作。

<input type=button name=名称 value="文本">

（3）选择域：根据输入方式不同分为两类，即单选域和复选域。

· 单选域（type=radio）用来在多个选项中选取其中一项。

<input type=radio name=名称 value=单选域的取值 checked>

其中，checked表示默认选中的项，value表示选中项传送到服务器的值。

· 复选域（type=checkbox）用于进行多项选择。

<input type=checkbox name=名称 value=取值 checked>

（4）菜单和列表域假如在表单中需要添加很多内容，可以使用菜单或者列表域来实现。

<select name=菜单名称 size=选项个数 mutiple><option value=选项值1 selected>显示内容1</option><option value=选项值2 selected>显示内容2</option>
</select>

说明：
· size表示选项个数，如果大于1，则为选择列表；如果等于1，则表示下拉菜单。
· multiple表示可以复选，即选择多个选项。（按ctrl键多选）
· selected表示当前选项在初始状态被选中

本文发布于:2024-02-04 10:08:08，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170704748854625.html

上一篇：课堂笔记

下一篇：第一天：Web基础

标签：程序设计学习笔记 Web

留言与评论（共有 0 条评论）