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></div>
<span></span>
* 标签非常的简单，就是在浏览器上声明一块区域。
* 区别：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>（用的较少）
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
列表标签
有序列表(ol标签)
* 属性：type 类型;
start 从哪开始
<ol>
<li></li>
</ol>
无序列表(ul标签),和ol极其类似.
* 属性：type 类型
<ul>
<li></li>
</ul>
img图片标签
* src="图片的地址"
* width 图片的显示宽度,也是有两种显示:一种是"某某px"(px可以省略), 另一种是百分比
* height 图片显示的高度,也有两种显示
* alt 图片的说明文字
a超链接标签
<a>文本内容</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"/>男
<input type="radio" name="sex" value="woman"/>女<br/>
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 提交按钮
<input type="submit" value="提交"/>
* 选择框
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
* 文本域
<textarea name="desc" rows="10" cols="10"></textarea>
* 注意：点击了提交按钮后，地址栏发送了变化（?sex=on）* ?username=haha&sex=on
* ?username=zhangsan&pwd=123&sex=nan&love=lq
* input标签需要提供两个属性，一个属性name，一个是value
(*****)name属性必须要指定，value看情况指定。
<frameset>* 框架标签（用的比较少）
注意：不能在body标签的内部和下面来使用该标签。
<frameset rows="180,*">
<frame />
<frame />
</frameset>
多媒体标签
在网页中加入背景音乐
HTML的头标签
头标签都放在<head></head>头部分之间。
<title>：指定浏览器的。
<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
<meta>：可提供有关页面的基本信息
<link>：定义文档与外部资源的关系。
页面设计的原则与细节
符合行业要求，色调搭配要求与行业相符。
政府机关：白深蓝、白红
邮政与铁路：白浅绿
广告与传媒：白橘、白红、白黄
医院：白天蓝
艺术行业：黑白、白黑
女性：婚庆、白粉、白红
计算机:白深蓝