网页设计的基本概念
网页是从互联网上获取信息的途径。
网页设计的基础
HTML(超文本标记语言)
网页的分类
静态网页
动态网页
交互式网页
HTML
全 称: HyperText Mark-up Language
中文名: 超标记语言
作 用:开发网文本页内容
网页文件默认后缀.html .htm
格式:
<HTML>
<HEAD>
<TITLE> 网页的标题 </TITLE>
</HEAD>
<BODY>
网页的内容
</BODY>
</HTML>
<HTML>:说明该文件是一个HTML文件
<HEAD>:HTML文件的头部,主要进行网页配置信息的设置与加载
<TITLE>用于声明网页的显示名称
<BODY>:HTML文件的主体,用于编写网页中要显示的主体内容
HTML的头标签
头标签都放在<head></head>头部分之间。包括:title base meta link
<title>:指定浏览器的标题栏显示的内容。
<base>:为页面上的所有链接规定默认地址或默认目标。
<meta>:可提供有关页面的基本信息
<link>:定义文档与外部资源的关系。
标签定义语法规则
任何标签皆由"<"及">"所包围
标签名与小于号之间不能留有空白字符。
标签中字母不区分大小写。
某些标签要加上参数,某些则不必,参数可以使用双引号或者单引号成对包裹,也可以省略
参数只可加于起始标签中。
在起始标签的标签名前加上符号"/"便是其终结标签,如 </font>
标记按形态分为围堵标签与空标签
围堵标签以起始标签及终结标签将文字围住,令其达到预期显示效果。
空标签是指标签单独出现,只有起始标签没有终结标签。
HTML中常见的标签
注释标签:<!-- -->
标题标签: <hx>
文字粗体标签: <b>
文字斜体标签: <i>
下划线标签: <u>
换行标签: <br>
段落标签: <p>
空格标签:
字体标签
标题标签 <h1 … <h6>
字体状态标签 <b> <i> <u> <sub> <sup>
实体标记:显示效果固定(优先使用)
逻辑标记:根据浏览器不同变换显示效果
<strong> <address> 等等
字体标签 <font>
字体标签:<font>
功能:对网页中的文字进行字体设置,非主流修改方案
常用属性:
face :文字字体
size :文字大小
color:文字颜色
内建值如red,blue,green等
调色器#FF0000
转义字符/特殊字符
< < 小于号
> > 大于号
& &
" “ 引号
® 己注册
© 版权
™ 商标
  半方大的空白
  全方大的空白
不断行的空白
清单标签
清单标签分为三种
普通清单:带有层次的清单
顺序清单:清单列表具有一定的数字序列顺序
无序清单:清单列表无任何前后顺序
普通清单标签:<dl>
功能:定义清单,是容器型标签,可以省略
定义条目标签:<dt>
功能:定义条目,隶属<dl>标签
定义内容标签:<dd>
功能:定义清单内容,隶属<dl>标签
顺序清单标签:<ol>
功能:描述具有一定的数字排序顺序清单
常用属性:
type:设定顺序显示风格(1,a,A,i,I)
start:设定清单起始值,只能为数字
清单项标签:<li>
功能:为清单生成对应的清单项目
常用属性:
value(顺序清单)
type(非顺序清单)
无序清单
顺序清单标签:<ul>
功能:描述无序清单
常用属性:
type:设定清单显示风格(disc、circle、square)
图形标签:<img>
功能:用于将图片插入到网页中显示
常用属性:
src width height border alt lowsrc
其他属性:
vspace hspce border
表格标签
网页中存在有大量的同一类型的多条数据需要显示的情况,遇到大量相同数据的显示,常使用表格标签进行展示
<table>是一个容器标记,用以声明这是表格而且其他表格标记只能在它的范围内才适用,属容器型标记。
<tr>用以标示表格行,常在<table>内部使用
<td>用以标示储存格,常在<tr>内部使用
表格定义标签:<table>
功能:绘制一个表格
常用属性:
width border
表格行标签:<tr>
功能:描述表格标签内部一个独立的行
表格列标签:<td>
功能:描述表格行标签内部一个独立的单元格
常用属性:
width colspan rowspan
超链接标签
网页中充斥着大量的文字,图片信息,其中还有一类使用鼠标点击后用于跳转到某个网站或完成某个功能,此类功能即超链接。
超链接标签:<a>
功能:定向到指定的URL路径对应页面
常用属性:
href:http地址参照指向路径
http协议与本地资源区别
target :链接的显示视窗
其他属性:
name:为链接设置名称,参看外部与内部链接
外部链接和内部链接
外部链接:用于页面与页面间的跳转
内部链接:用于页面内的跳转或从一个页面跳转到另一个页面的内部指定位置
内部链接实现方式
网页中在指定位置处添加一个带有name属性的超链接标记(称之为锚地址),可以没有href属性。
设置另一个超链接的href属性为上述链接的name值,格式为href=“#name值”
如果想从外部页面跳转到带有锚地址的页面指定位置,则格式为href=“页面名#name值”
表单标签
表单是用于封装提交数据的一种模型,属于容器标签。
将要提交的数据放置于表单标签中,提交表单后,所要提交的数据将传送给表单对应的服务器。
表单标签:<form>
功能:用于封装客户端提交给服务器的数据
常用属性:
action:请求地址的URL
method:form提交方式
get
post
form表单提交时,提供的参数method具有两种可选值
get提交的数据采用明文传输,主要用于传输安全系数较低的数据,例如搜索引擎传输搜索关键字,数据量控制在1K之内,超过1K的数据将被截断,传输速度较快
post提交的数据采用非明文传输,主要用于传输安全系统较高的数据,例如注册信息中的密码、用户身份证号等信息,数据量不设限制,传输速度较慢
数据输入标签:<input>
功能:收集用户数据,并将其封装到表单中
常用属性:
type:用户区分是何种类型的数据输入标签,共9种可选值
input标签伴随着type的取值不同,所携带的属性也各不相同
type:button按钮
功能:按钮,可以与用户进行交互
常用属性:
value:按钮对外显示的名称
type:text文本框
功能:文本框,提供给用户用于输入单行文本
常用属性:
name:用于提交数据时进行数据区分,暂时无意义
value:文本框中默认显示的值
size:文本框的总宽度,即显示的字符总数(+1)
maxlength:文本框中文字的最大输入总数
type:radio单选按钮
功能:单选按钮
常用属性:
name:用于对单选按钮进行分组,并在提交数据时进行数据区分
value:选中此单选按钮后最终提交的值,暂无意义
checked:设置该按钮是否被默认选中
如果一组单选按钮多个设置有该选项,则以最后一个设置为最终显示效果
type:checkbox多选按钮
功能:多选按钮
常用属性:
name:用于提交数据时进行数据区分,并对数据进行分组,暂无意义
value:选中此多选按钮后最终被分组提交的值,暂无意义
checked:设置该按钮是否被默认选中
type:password密码输入框
功能:密码输入框,使用回文形式显示
密码框与文本框作用完全相同,设置也相同,仅仅在对外显示方面存在差异
type:submit提交按钮
功能:提交该按钮所在的form对应的action,并将form内所有具有name属性的表单表单进行提交
常用属性:
value:按钮对外显示的名称
ype:reset重置按钮
功能:重置该按钮所在的form内所有表单的值为初始化值。
重置不是清空,仅仅对表单进行初始化,即第一次加载时候的值,如果第一次加载时表单没有值,则重置后也没有值
常用属性:
value:按钮对外显示的名称
type:image图片按钮
功能:以图片的形式创建的按钮,功能同按钮完全相同
常用属性:
src:图片按钮显示的图片路径名
type:file文件选择框
功能:文件选择框,用户选择本次磁盘的某个文件,并将该文件的路径名表示形式显示出来,最终形式可以理解为一个文本框,同文本框基本相同
其他属性:
accept:所接受的文件类别,共26种选项,通常不设置该属性,采用默认值
列表标签:<select>
功能:提供一个可选的下拉列表,该标签属于容器标签,所包含的项通过<option>标签实现
常用属性:
name:设置列表名称,暂无意义
size:列表显示的项目总数
multiple:设置列表是否可以多选
列表项标签:<option>
功能:为<select>标签提供选项
常用属性:
value:设置该选项的最终值,也是所在<select>标签的最终选择值,暂无意义
selected:设置初始化时,该选项是否被选中
如果设置<select>标签为不允许多选,则selected属性只对同一个<select>标签中最后一个<option>选项生效。
文本区标签:<textarea>
功能:提供一个可以输入大量文字信息,并且文字信息可以分行显示的表单
常用属性:
name:设置文本区名称,暂无意义
cols:文本区中一行可以显示的字符数量
rows:文本区所显示的总行数
warp:设置文本区内的折行规则
可选值off, physical, virtual
XHTML与HTML5
HTML功能很单一,并且无法进行自定义标签,无法满足用户开发特殊标签的需求,此外,HTML格式并不严谨,在此基础上使用XML与HTML进行有效的融合,得到一种新的规范XHTML,对HTML进行了多方面的规则标准化
HTML5自2008年1月22日公布,历经多年的方案收集,主要致力于web applications的开发及应用。
页面设计的原则与细节
符合行业要求,色调搭配要求与行业相符。
政府机关:白深蓝、白红
邮政与铁路:白浅绿
广告与传媒:白橘、白红、白黄
医院:白天蓝
艺术行业:黑白、白黑
女性:(婚庆)白粉、白红
计算机:白深蓝
总结:
多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。