HTML
网页设计的基本概念
网页是从互联网上获取信息的途径。
网页设计的基础
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的开发及应用。
页面设计的原则与细节
符合行业要求，色调搭配要求与行业相符。
政府机关：白深蓝、白红
邮政与铁路：白浅绿
广告与传媒：白橘、白红、白黄
医院：白天蓝
艺术行业：黑白、白黑
女性：（婚庆）白粉、白红
计算机：白深蓝
总结：
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
