HTML就是超文本标记语言的简写,是最基础的网页语言.
标准规范:
HTML的注意事项
MyEclipse简单设置
排版标签
font字体标签
* get方式提交时，数据大小有限制。
* post方式不会。
* 输入项的表单组件
<input />
文本输入框 <input type="text" name="username" />
页面设计的原则与细节
- 通过标签定义的语言,代码都是由标签所组成的.(最重要的标签是定义标题、段落和换行的标签)
- 不区分大小写
- head部分是给html页面增加一些辅助或属性信息,它里面的内容会最先加载.
body部分是存放页面数据的地方.
标准规范:
使用小写标签。万维网联盟 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。
如果您使用新近的软件，我们认为使用 .html 是相当安全的做法。
HTML的注意事项
- 多数标签都是有开始和结束标签,其中有个别标签功能单一,或者没有要修饰的内容可以在标签内结束.
- 想要对被标签修饰的内容进行更丰富的操作,就用到了标签的属性,通过属性值的改变增加了更多的效果选择.
- 属性和属性值用等号连接,属性值可用双引或单引或不用引号, 但记住始终为属性值加引号属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号.符合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 />换行标签（用的比较少）
注意:通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解.
<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：颜色(参考hr颜色属性的两种写法)
* size：字体的大小(1~7, 默认值是3，size的写法又提供了一种（-2~+4）
* face：字体类型
* face：字体类型
<body>定义HTML 文档的主体
*bgcolor也是两种背景颜色表示
<pre>这是
预格式文本。
它保留了 空格
和换行。
</pre>
HTML的特殊字符:在网页显示一些特殊符号,因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊方式来表示.
空格:
< : <
> : >
& : &
> : >
& : &
" : "
<h1> to <h6> 字体从大到小.(HTML 会自动在标题前后添加一个额外的折行)
*align排列方式,其中center还是用的比较多的吧.
粗体和斜体的标签
<b></b>
<i></i>
<b></b>
<i></i>
注: 标签是可以嵌套的,例 <b><i></i></b>
滚动字幕marquee
定义列表(dl标签)
特点：默认缩进和自动对齐的。
<dl>（用的较少）
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
列表标签
有序列表(ol标签)
* 属性：type 类型=A|a|I|i
start 从哪开始
<ol>
<li></li>
</ol>
<li></li>
</ol>
无序列表(ul标签),和ol极其类似.
* 属性：type 类型= "disc"实心圆点 ", "circle"空心圆点,"square"小方块
<ul>
<li></li>
</ul>
<li></li>
</ul>
img图片标签
* src="图片的地址"
* width 图片的显示宽度,也是有两种显示:一种是"某某px"(px可以省略), 另一种是百分比
* height 图片显示的高度,同样两种显示
* alt 图片的说明文字
align="bottom"这是默认,也就是底部对齐 |middle|top|left图像将浮动到文本的左侧| right浮动到右侧
a超链接标签: 用于链接资源
<a>文本内容</a>
* href="指定链接的资源的地址"
注意：如果链接网络资源，需要协议写上。如果没有协议，默认file文件协议。
注意：如果浏览器可以解析的文件，直接就打开了。
* 如果浏览器不可以解析的文件，弹出下载窗口。
* 自定义的协议: 如果浏览器解析不了的协议，会找操作系统上的应用程序。如迅雷的thunder协议.
* target：打开的位置。如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。
* name: 定位资源 : 锚点(例如在某段文字上加上<a name="xx">hehe</a>,最后写一个超链接链接到href="#xx" 定位到页面的某位置)
table表格标签(★★★★★)
<table>：声明表格的范围
属性： border="1" 边框的厚度, 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
width：表格的宽度
height:高度
bgcolor：背景的颜色
cellpadding：内边距
<caption>表的标题</caption>
<tr>：代表表格的行
* 属性：align：文字的对齐方式
<td>：单元格
属性：width:宽度
height：高度
属性： border="1" 边框的厚度, 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
width：表格的宽度
height:高度
bgcolor：背景的颜色
cellpadding：内边距
<caption>表的标题</caption>
<tr>：代表表格的行
* 属性：align：文字的对齐方式
<td>：单元格
属性：width:宽度
height：高度
</td>
</table>
.......................................
注：td与th的区别：th作为表头元素, 是默认居中并加粗的. td作为表格元素可以使用align="center"居中.
td中的重要属性:合并单元格,类似于挤开了其他单元格.
行合并：rowspan="2"
列合并：colspan="2"
form表单标签(★★★★★)
行合并：rowspan="2"
列合并：colspan="2"
form表单标签(★★★★★)
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
<form>：封装表单的范围。
action="请求提交的路径"
method="表单的提交方式", 默认为get方式提交, method=""也默认为get方式提交.
* 面试题：表单的提交方式有哪些？
答：表单的提交方式有很多，常用的有两种，get和post。
* get和post提交方式的区别：
* get方式提交时，会把数据显示在地址栏上。
* post方式不会。
* get方式提交时，安全级别较低。
method="表单的提交方式", 默认为get方式提交, method=""也默认为get方式提交.
* 面试题：表单的提交方式有哪些？
答：表单的提交方式有很多，常用的有两种，get和post。
* get和post提交方式的区别：
* get方式提交时，会把数据显示在地址栏上。
* post方式不会。
* get方式提交时，安全级别较低。
* post方式安全级别较高。
* get方式提交时，数据大小有限制。
* post方式不会。
* 输入项的表单组件
<input />
文本输入框 <input type="text" name="username" />
密码输入框 <input type="password" name="pwd" />
radio单选按钮
* 提供了属性name（name的值要确保一样)
* 默认被选中的：checked=checked或者true
* 提供了属性name（name的值要确保一样)
* 默认被选中的：checked=checked或者true
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女<br/>
checkbox 多选按钮(与单选的书写方式几乎一样)
* 默认被选中的：checked=checked或者true
* 其他的与radio一致
file 文件的选择框
<input type="file" name="fileName" />
hidden 隐藏组件
button
hidden 隐藏组件
button
<input type="button" value="我是按钮" />
//<button name="mybutton">我也是一个按钮</button>也可表示
image 和提交按钮是相同的作用。
<input type="image" src="图片的地址"/>
//也是提交的功能,只是和按钮相比用的不多
reset 重置按钮
reset 重置按钮
<input type="reset" value="重置"/>
submit 提交按钮
submit 提交按钮
<input type="submit" value="提交"/>
* 选择框: 在书写中name和value是分开的,值得注意
属性: selected="selected" 和单选多选的checked属性类似.表示默认为选中状态.
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
* 文本域
<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
<frameset>框架标签（用的比较少）可以在同一个浏览器窗口中显示不止一个页面。
注意：不能在body标签的内部和下面来使用该标签。
<frameset rows="180,*">
<frame src="" />
<frame src="" />
</frameset>
Input元素总结: 几乎所有的Input元素都包含name和value,但是按钮我是难得写name的
多媒体标签
在网页中加入背景音乐
HTML的头标签
头标签都放在<head></head>头部分之间。
<title>：指定浏览器的。
<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
<meta>：可提供有关页面的基本信息
<link>：定义文档与外部资源的关系。
<title>：指定浏览器的。
<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
<meta>：可提供有关页面的基本信息
<link>：定义文档与外部资源的关系。
页面设计的原则与细节
符合行业要求，色调搭配要求与行业相符。
*机关：白深蓝、白红
邮政与铁路：白浅绿
广告与传媒：白橘、白红、白黄
医院：白天蓝
艺术行业：黑白、白黑
女性：婚庆、白粉、白红
计算机:白深蓝