|
网页设计基础知识，对HTML有个初步了解，是 数据可视化 等学科的前备知识
1.概述
-
WWW（World Wide Web）是一个基于超文本（Hypertext）方式的信息检索服务工具。WWW制定了一套标准的、 易于人们掌握的超文本开发语言HTML、信息资源的统一定位格式URL 和超文本传送通信协议HTTP，用户掌握后可以很容易地建立自己的网站。 -
HTML（Hypertext Markup Language）即超文本标记语言，它是构成Web页面（Page）的主要工具。 -
超链接（Hyper Link）是特殊的文字标识，它指向了WWW中的资源，例如一个网页、声音、文件、网页的一个段落或者WWW中的其他资源等，这些资源均可放在任何一个服务器上。在网页中，一个超链接可以是一些文字也可以是一张图片。 -
统一资源定位器（Uniform Resource Locator，URL）可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。 -
CSS（Style Sheet，样式表）的技术，也称为层叠样式表（Cascading Style Sheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 -
JavaScript是一种脚本语言（scripting language），在HTML基础上，使用JavaScript可以开发交互式Web网页，例如可以在线填写各类表格、联机编写文档并发布等。
制作网页主要就是靠这三个，Html是基础架构，CSS用来美化页面，而JavaScript用来实现网页的动态性、交互性
2.HTML基础
一个HTML文件包含**头部（head）和主体（body）**两个部分，头部（head）中可定义标题、样式等信息，主体（body）显示主要内容
<html>
<head>
<meta charset="UTF-8">
<head>
<title>我们的班级主页</title>
</head>
<body>
<h2 align=“center”>欢迎来到我们的班级网站</h2>
<hr>
<p>这是我们开发的第一个网页</p>
</body>
</html>
2.1头部（head）
-
<head> ... </head>
HTML的头部标记，在浏览器中不会显示，在其中插入其他用于说明文件的标题和公共属性的标记 head部分仅有<base>、<link>、<meta>、<title>、<style>、<script>等几个标签是合法的 -
<title> ... </title>
HTML文档的标题 -
<meta>
提供有关页面的元信息（meta-information），META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)
-
meta属性：
- content：定义与 http-equiv 或 name 属性相关的元信息
- http-equiv：把 content 属性关联到 HTTP 头部，取值范围包括： content-type，expires，refresh，set-cookie
- name：把 content 属性关联到一个名称。取值范围：author、description、keywords、generator、 Robots等
-
http-equiv属性：
使用带有 http-equiv 属性的 meta标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如： ＜head＞
<meta http-equiv="charset" content=“text/html; charset=gb2312 ">
<meta http-equiv="expires" content="31 Dec 2011">
＜/head＞
2.2主体（body）
在标记<body>和</body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等元素
2.3基本语法
HTML用于描述功能的符号称为“标记”。<html>、<head>、<body>等都是标记。标记通常分为单标记和双标记两种类型
- 单标记：仅单独使用即可起到相应作用，比如
<br>，表示换行 - 双标记：由首标记和尾标记成对使用，分别起到标记的开始和结束作用，比如
<b>...</b>能够对中间的内容粗体显示
注意：
2.4属性
HTML还可以为一些元素附加一些信息，这些附加信息被称为属性
格式为 <标记名称 属性名1="属性值" 属性名2="属性值" ...>
间隔使用空格即可，属性值可以直接书写，也可以用引号""括起来
例如：<hr size=5px align=center>
hr为文档添加一条水平线，粗5个像素，对齐方式是居中
2.5注释
注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略，可以使用注释对程序代码进行解释
格式为<!--注释内容-->或者 <comment>...</comment>
前一种左边需要加一个！，右边就不用了
3.文字和段落
3.1标题
HTML中有六级标题，级数越大，字体大小越小
格式为：<h# align="left|center|right">标题文字</h#>
用几级标题，#就用对应数字代替；属性非必须
<html>
<head>
<title>在网页中添加标题字</title>
</head>
<body>
<h1 align="center">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4 align=left >四级标题</h4>
<h5 align=center>五级标题</h5>
<h6 align=right>六级标题</h6>
</body>
</html>
3.2特殊字符
使用特殊符号可以将键盘上没有的字符输出出来。
通过在HTML文件中输入符号代码来添加。
格式为：&符号代码;
注意：以&开头，以;结尾
比如：HTML会自动删除文字内容中的多余空格，不管文字中有多少空格，都被视做一个空格
所以为了在网页中增加空格，可以明确使用 表示空格
还有&显示&、©显示?、<显示<、>显示> 等等
3.3文字修饰
利用可以对网页文字的字体、字号、颜色进行定义
格式为：<font face=" " size=" " color=" " >...</font>
粗体<b>...</b>
斜体<i>...</i>
下划线<u>...</u>
删除线<del>...</del>
3.4段落换行
在文本编辑器中输入的回车和额外空格将被HTML忽略，所以要在网页中开始一个段落需要通过使用标记
来实现。由
标记所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，用以区别文字的不同段落。
格式为：<p>...</p>
可以使用<br>来控制段落中文字的换行显示。一般，浏览器会根据窗口的宽度自动将文本进行换行显示，如果想强制浏览器不换行显示，可以使用<nobr>标记。若希望在<nobr>标记中的文字强制换行，则可以使用<wbr>。
格式为：<br>
<nobr>...</nobr>
<wbr>...</wbr>
4.列表
HTML中有多种列表类型，如下：
| 列表类型 | 标记符号 |
|---|
| 无序列表 | ul | | 有序列表 | ol | | 定义列表 | dl | | 目录列表 | dir | | 菜单列表 | menu |
4.1无序列表（Unordered List）标记符号ul
无序列表中，各个列表项之间属并列关系， 没有先后顺序之分，它们之间以一个项目符号来标记
利用成对的<ul>...</ul>标记来插 入无序列表，其中间的列表项标签<li>...</li>（list-items）用来定义列表项序列。
使用无序列表标签的TYPE属性，用户通过填入对应TYPE样式指定出现在列表项前的项目符号的样式，其取值以及相对应的符号样式如下：
disc：指定项目符号为一个实心圆点（IE浏览器的默认值是disc）
circle：指定项目符号为一个空心圆点
square：指定项目符号为一个实心方块
<li>...</li>也可以加type
<ul type=" disc | circle | square ">
<li>项目名称</li>
<li>项目名称</li>
<li type=" ">项目名称</li>
……
</ul>
4.2有序列表（Ordered List）标记符号ol
有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记
在HTML文件中，可以利用成对的<ol>...</ol>标记来插入有序列表，其中间的列表项标记<li>...</li>用来定义列表项顺序。
同上，用户通过填入对应TYPE样式指定出现在列表项前的项目编号的样式，如下：
“1”：指定项目编号为阿拉伯数字（IE浏览器的默认值是disc）；
“a”：指定项目编号为小写英文字母；
“A”：指定项目编号为大写英文字母；
“i”：指定项目编号为小写罗马数字；
“I”：指定项目编号为大写罗马数字。
<li>...</li>也可以加type
<ol type=" 1 | a | A | i | I ">
<li>项目名称</li>
<li>项目名称</li>
<li type=" ">项目名称</li>
……
</ol>
4.3定义列表（Definition List）标记符号dl
每一项前既没有项目符号，也没有编号，是通过缩进的形式使内容层次清晰
<dl>...</dl>标记用来创建定义列表；
<dt>...</dt>：dt标记（definition term）是用来创建列表中的每个元素标题，此标记只能在<dl>...</dl>标记中使用。显示时<dt>...</dt>标记定义的内容将左对齐；
<dd>...</dd>：dd标记（definition description）用来创建列表元素的内容描述，此标记也只能在<dl>...</dl>标记中使用。显示时<dd>...</dd>标记定义的内容将相对于<dt>...</dt>标记定义的内容向右缩进
<dl>
<dt> …</dt>
<dd> …</dd>
<dd>… </dd>
……
<dt> …</dt>
<dd> …</dd>
<dd>… </dd>
……
……
</dl>
5.超链接
建立超链接的标记是a(anchor，锚)，以<a>开始，以</a>结束，锚可以指向网络上的任何资源：一张HTML页面，一幅图像，一个声音或视频文件等
一般格式为：
<a href="url" title="指向链接显示的文字" target="窗口名称">超链接名称</a>
href：建立链接时，属性“href”定义了这个链接所指的目标地址，也就是路径。理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。
target：有 4 个保留的目标名称用作特殊的文档重定向操作。
-
图片超链接 <a href="url" target="目标窗口的打开方式"><img src="图片地址"></a>
<html>
<head>
<title>建立图片链接</title>
</head>
<body>
<center>
<h2>图片链接</h2>
<hr>
<a href="www.baidu.com" target="_blank">
<img src="images/baidu_logo.gif" />
</a>
</center>
</body>
</html>
-
书签超链接 当浏览的页面篇幅很长时，浏览者使用书签链接可以很寻找到目标内容。浏览者单击页面上的某一“标签”，就能自动跳到网页相应的位置进行阅读。
-
在同一页面内要使用书签链接的格式： <a href="#书签名称" target="窗口名称">链接标题</a>
-
在不同页面之间要使用书签链接的格式（在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签名称）： <a href="URL地址#书签名称" target="窗口名称">链接标题</a>
-
以上两种书签链接形式，链接到的目标为： <a name="书签名称">链接内容</a>
6.表格
6.1表格基本语法
在HTML语法中，表格主要通过3个标签来构成：<table>、<tr>、<td>
<table> 标记代表表格的开始
<tr> 行的开始
<td>…</td> 之间是单元格内容，可以是文字，也可以是其它标记
…
</tr>
<tr>
<td>…</td>
…
</tr> 行的结束
…
</table>标记代表表格的结束
表格标题，用<caption>标签实现
<caption>…</caption>
表格表头，即表格的第一行，文字样式为居中、加粗显示，通过<th>标签实现
<table>
<tr>
<th>…</th>
…
</tr>
<tr>
<td>…</td>
…
</tr>
…
</table>
实例：
<html>
<head>
<title>定义表格</title>
</head>
<body>
<table width="600" border="1">
<tr>
<td>节次</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>第12节</td>
<td>体育</td>
<td>大学英语</td>
<td>高等数学</td>
<td>数据结构实验</td>
<td>Web开发</td>
</tr>
<tr>
<td>第34节</td>
<td>大学英语</td>
<td>高等数学</td>
<td>数据结构</td>
<td>数据结构</td>
<td>Web开发实验</td>
</tr>
</table>
</body>
</html>
6.2 表格修饰
表格边框，可以添加属性，默认值都为0，语法如下：（下面后三个都用RGB色码值来表示，如#00FF00）
<table border="边框厚度" bordercolor="边框颜色" bordercolorlight="边框颜色亮度" bordercolordark="边框颜色暗度">
表格宽度和高度，同上调整，可以与上写在一起，默认根据内容自动调整，语法如下：
<table width="宽度" height="高度">
表格背景，同上，语法如下：（背景文件支持GIF、JPEG、PNG三种图像格式）
<table bgcolor="背景颜色" background="背景文件名称">
实例：
…
<table width="600" height="200" border="1"
bordercolor ="#00FF00"
bordercolorlight＝"#FF0000"
bordercolordark="#0000FF"
bgcolor="#f5f5dc"
background="kechengbiao.gif">
…
</table>
|