01 HTML基础

浏览数：22 / 时间：2015年06月09日

HTML就是超文本标记语言的简写,是最基础的网页语言.

通过标签定义的语言,代码都是由标签所组成的.(最重要的标签是定义标题、段落和换行的标签)
不区分大小写
head部分是给html页面增加一些辅助或属性信息,它里面的内容会最先加载.
body部分是存放页面数据的地方.

HTML的注意事项

多数标签都是有开始和结束标签,其中有个别标签功能单一,或者没有要修饰的内容可以在标签内结束.
想要对被标签修饰的内容进行更丰富的操作,就用到了标签的属性,通过属性值的改变增加了更多的效果选择.
属性和属性值用等号连接,属性值可用双引或单引或不用引号,一般都会使用双引号,或公司规定书写规范.

MyEclipse简单设置

安装完MyEclipse后，先设置工作空间的编码。Window—preferences—General--workspace—选择UTF-8编码
创建HTML的文件后，如果不是UTF-8的编码，可以进行设置。Window—preferences—MyEclipse—Files and Editors—HTML—修改成UTF-8的编码
创建HTML的文件后，可以选择打开方式，设置默认的打开方式。Window—preferences—General—Editors—File Associations—选择*.html—选择MyEclipse HTML Editor—选择default—选择ok

排版标签

<br />换行标签（用的比较少）

<hr />水平线

* 属性：color：颜色

值的两种写法：1）颜色的英文单词 2）RGB三原色(red green blue) #ffffff

* 属性：width：宽度

值有两种写法：1）像素值（300px,其中px可以省略）2）百分比(30%)

区别：百分比会随着浏览器大小而改变，像素不会。

<p></p>段落标签（用的相对较多）

* 特点：在开始和结束的位置上，各产生一行空行。

* 属性：align：left|center|right 对齐方式

#发现换行对p里面的描述没用,只有一个以及以上的空格代表一个空格.

* 标签非常的简单，就是在浏览器上声明一块区域。

* 区别：div后面有换行，span没有。

* 块级元素和行内元素（了解）

font字体标签

* color：颜色(两种写法)

* size：字体的大小(1~7, 默认值是3，size的写法又提供了一种（-2~+4）
* face：字体类型

<body>定义HTML 文档的主体

*bgcolor也是两种背景颜色表示

<pre>这是

预格式文本。

它保留了空格

和换行。

</pre>

HTML的特殊字符:在网页显示一些特殊符号,因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊方式来表示.

空格: 

< : <
> : >
& : &

" : "

h标题标签:h1一直到h6从大到小.

*align排列方式

粗体和斜体的标签
<b></b>
<i></i>

注: 标签是可以嵌套的,例 <b><i></i></b>

滚动字幕marquee

定义列表(dl标签)

特点：默认缩进和自动对齐的。

<dl>（用的较少）

</dl>

列表标签

有序列表(ol标签)

* 属性：type 类型;

start 从哪开始

无序列表(ul标签),和ol极其类似.

* 属性：type 类型

img图片标签

* src="图片的地址"

* width 图片的显示宽度,也是有两种显示:一种是"某某px"(px可以省略), 另一种是百分比

* height 图片显示的高度,也有两种显示

* alt 图片的说明文字

a超链接标签

* 链接资源

* 属性：href="指定链接的资源的地址"

注意：如果链接网络资源，需要协议写上。如果没有协议，默认file文件协议。

注意：如果浏览器可以解析的文件，直接就打开了。

* 如果浏览器不可以解析的文件，弹出下载窗口。

* 自定义的协议: 如果浏览器解析不了的协议，会找操作系统上的应用程序。如迅雷的thunder协议.

* target：打开的位置。

* 定位资源

* 专业的术语:锚点(例如在某段文字上加上<a name="xx">hehe</a>,最后写一个超链接链接到href="#xx" 定位到页面的某位置)

* 属性：name

table表格标签

<table>：声明表格的范围
属性： border="1" 边框的厚度
width：表格的宽度
height:高度
bgcolor：背景的颜色
cellpadding：内边距
<caption>表的标题</caption>
<tr>：代表表格的行
* 属性：align：文字的对齐方式
<td>：单元格
属性：width:宽度
height：高度

.......................................

注：td与th的区别：th默认居中并加粗

td中的重要属性:合并单元格
行合并：rowspan="2"
列合并：colspan="2"

form表单标签

<form>：封装表单的范围。

action="请求提交的路径"
method="表单的提交方式"
* 面试题：表单的提交方式有哪些？
答：表单的提交方式有很多，常用的有两种，get和post。
* get和post提交方式的区别：
* get方式提交时，会把数据显示在地址栏上。
* post方式不会。

* get方式提交时，安全级别较低。

* post方式安全级别较高。

* get方式提交时，数据大小有限制。
* post方式不会。

* 输入项的表单组件
<input />
* 非常重要的属性：type，根据type值的不同，提供了不同的输入项的组件。

文本输入框

姓名<input type="text" name="username" /><br/>

密码输入框

密码<input type="password" name="pwd" /><br/>

单选按钮
* 提供了属性name（name的值要确保一样)
* 默认被选中的：checked=checked或者true

性别:<input type="radio" name="sex" value="man" checked="checked"/>男

type=checkbox 多选按钮
* 默认被选中的：checked=checked或者true

* 其他的与radio一致
type=file 文件的选择框

<input type="file" name="fileName" />
type=hidden 隐藏组件
type=button 按钮（史上最难看的）

<input type="button" value="我是按钮" />
type=image 和提交按钮是相同的作用。

<input type="image" src="图片的地址"/>也是提交的功能,只是和按钮相比用的不多
type=reset 重置按钮

<input type="reset" value="重置"/>
type=submit 提交按钮

* 选择框
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>

* 文本域

               * 注意：点击了提交按钮后，地址栏发送了变化（?sex=on）* ?username=haha&sex=on
               * ?username=zhangsan&pwd=123&sex=nan&love=lq

               * input标签需要提供两个属性，一个属性name，一个是value
                    (*****)name属性必须要指定，value看情况指定。

<frameset>* 框架标签（用的比较少）
注意：不能在body标签的内部和下面来使用该标签。

</frameset>

多媒体标签

在网页中加入背景音乐

HTML的头标签

头标签都放在<head></head>头部分之间。
<title>：指定浏览器的。
<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
<meta>：可提供有关页面的基本信息
<link>：定义文档与外部资源的关系。

页面设计的原则与细节

符合行业要求，色调搭配要求与行业相符。

政府机关：白深蓝、白红

邮政与铁路：白浅绿

广告与传媒：白橘、白红、白黄

医院：白天蓝

艺术行业：黑白、白黑