- 多数标签都是有开始和结束标签,其中有个别标签功能单一,或者没有要修饰的内容可以在标签内结束.
- 想要对被标签修饰的内容进行更丰富的操作,就用到了标签的属性,通过属性值的改变增加了更多的效果选择.
- 属性和属性值用等号连接,属性值可用双引或单引或不用引号,一般都会使用双引号,或公司规定书写规范.
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中的重要属性:合并单元格
行合并:rowspan="2"
列合并:colspan="2"
form表单标签
<form>:封装表单的范围。
action="请求提交的路径"
method="表单的提交方式"
* 面试题:表单的提交方式有哪些?
答:表单的提交方式有很多,常用的有两种,get和post。
* get和post提交方式的区别:
* get方式提交时,会把数据显示在地址栏上。
* post方式不会。
* get方式提交时,安全级别较低。
* 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>:定义文档与外部资源的关系。
页面设计的原则与细节