1、字体:<font>
<font size="7"color="#fff000">数据</font>
特殊部分:如果在页面显示一些特殊符号,需要进行转义
标题:<h1.....6>
----------------------
2、列表标签:<dl></dl>
上层项目:<dt>
下层项目:<dd>
项目符号标签 :
<ul> <ol>
二个标签中的列表项有<li>标签封装
3、图像标签:<img>
<img src=""alt="图像说明"/>
4、表格标签:<table>
表格由行组成,行由单元格组成。
表格中默认都有一个tbody标签
标题标签:<caption>
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
表格是最常用的标签,用于对数据进行格式化
5、超链接:<a>
<a href="http://www.sina.com.cn" target="_blank" rel="external nofollow" target="_black" title="这是提示属性">新浪</a>
当被点击后,会启动引擎所对应解析程序。
指定去查找的主机
1、先找本地主机的hosts文件。如果没有找到该主机对应的ip地址
2、去公网dns服务器找对应的ip地址
<a herf="mailto:[email protected]?subject=haha&[email protected]">联系我们</a>
当点击超链接时,就会出现邮件相关联的解析程序,本机默认的是outlook
超链接的另一个作用
定位标记
<aname="top">一个位置</a>
<ahref="#top" target="_blank" rel="external nofollow" >获取那个位置</a>
6、表单标签:
该标签是可以和服务端进行交互的
<form>
表单标签中元素:
<input>:该标签因为type属性的值的不同,所对应的组件也不一样
type属性:
1、text:文本框,输入的文本可见
2、password:密码框,输入的文本不可见。
3、radio:单选框,注意,要被选中,必须要给单选框定义一个属性name
当多个单选框时只能有一个选中,那么这些单选框的name值必须相同
4、checkbox:复选框:当队多个数据进行同时选中时
5、file:可以进行文件选择的组件。通常用于附件,或者文件上传
6、hidden:隐藏组件,该组件不会再页面上显示,但是其定义的name和
value不会显示在服务端
7、button:按钮组件,自定义一个按钮默认是没有任何效果的,可以通
过注册事件并加入自定义效果
8、reset:重置按钮,将组建中被操作的的效果还原到初始状态。
9、submit:提交按钮,将组建中添加的书籍提交到指定目的地
10、image:图像组件,为了避免提交按钮的难看,可以通过image的src属性连接一个好看的按钮图片。
11、 下拉菜单:<select>
每一个下拉菜单都有option进行封装
表单组件通常都需要定义name和value属性,因为要将数据发送到服务端
,服务端只有知道了该name的值才可以提交数据进行分别获取
7、 form标签中的常见属性:
action:指定数据提交目的地,method:提交方式。二种常用值get和post
get和post的区别
get:会将提交的数据显示在地址栏上
post:不会讲数据显示在地址栏
get:提交的数据体积受地址栏的限制
post:可以提交大体积数据
get:对敏感信息不安全
post:对敏感信息安全
get:会将提交的信息封装在请求行,也就是http消息头之前
post:会将提交信息封装在数据体中,也就是http消息头之后的空行后
对于服务端而言。
表单提交尽量用post,因为涉及到编码问题。因为tomcat默认是ISO8859-1
对于post提交的中文,在服务端可以直接使用setCharacterEncoding("gbk")就可以解决
对于get提交的中文,服务端只能通过ISO8859-1将数据编码一次,在通过指定编码解码
使用表单组件不一定要定义form标签,只需要将数据进行服务端的提交的时候才会用到form
8、部分功能及代码实现
<body>
<form>
用户名:<input type="text"/><br/> //输入用户名
上传文件:<input type="file"/><br/> //文件的上传
<input type="hidden" name="id" value="111"/> //隐藏标签
<input type="image" src="1.jpg"/><br/> //读取图片
<select name="country" multiple="multiple" size="2"> //设置下拉菜单选项
<option value="none">--选择国家--</option>
<option value="cn">中国</option>
<option value="en">英国</option>
<option value="usa">美国</option>
</select><br/>
<textarea cols="30" rows="10"> </textarea>//文本区域
<input type="submit"/> //提交按钮
<input type="reset"/> //重置按钮
</form>
</body>
9、列表标签
<dl>
<dt></dt>
<dd><dd>
</dl>
数字符号
<ol type="i" start="3">
<li></li>
<li></li>
<li></li>
<li></li>
<ol>
符号
<ul type="circle" >
<li></li>
<li></li>
<li></li>
<li></li>
<ol>
10、图像
<imgsrc="../1.jpg" alt="图片说明文字" height="400" width="400"/>
<hrcolor="red" size="5"/>
11、表格标签
<table>
<caption>表格标题</caption>
<tbody>
<tr>
<th></th>表头标签,加粗居中
<td align="center"><b></b></td> 相当于<th></th>
<td></td>
</tr>
</tbody>
<tr>
<th colspan="2"></th>
<th></th>
</tr>
<tr>
<th rowspan="2"></th>
<th></th>
</tr>
</table>
cellspacing 边框合并
cellpadding 内边距
12、超链接
<ahref="http://hao123.com" target="_blank" rel="external nofollow" target="_blank"(新打开一个窗口)>好123<a>
<a href=”mailto:[email protected]?subject=nihao”> 联系我们</a>
<ahref="thunder://dddddd" target="_blank" rel="external nofollow" >顶顶顶顶</a>
<ahref="www.xxx.com" target="_blank" rel="external nofollow" ><img src="1.jpg"/></a>
<aherf="#top">回到顶部</a>
<label>:用于给元素定义快捷键
for属性:指定快捷键作用的表单元素。必须与要作用的表单元素的id相同
accesskey属性:指定快捷键,此快捷键需要和alt键组合使用
例:<labelfor="user" accesskey="u">用户名(u)</label>
<input type="text"id="user"/>
13、html
html:超文本标记语言,
html语言中是由标签组成的
html中的数据都会封装在标签中,因为可以通过标签中的属性值的改变对封装内的数据进行操作。
确定html代码范围。<html></html>
在该范围中可以定义两部分内容,一部分是头,一部分是体
<html>
<head></head>
<body></body>
</html>
head:网页的一些属性信息。比如:标题
body:网页显示的数据
标签特点:对于数据进行封装,那么就有开始标签和结束标签
但是也有一些标签只体现单一功能,所以不需要结束标签,规范中要求标签必须要结束,所以这样的标签在内部结束。
如:<br/><hr/><img/> <input/>
标签格式:<标签名 属性名="属性值">数据</标签名>
<标签名 属性名="属性值"/>
14、css层叠样式表:
将网页中样式分离出来,完全由css来控制
增强样式的复用性以及可扩展性
格式:选择器{属性名:属性值;.....}
css和html代码想结合的四种方式:
1,每一个html标签都有一个style属性
2,当页面有多个标签有相同样式时,可以进行复用
<style> css代码</style>
3,当有多个页面中标签的样式相同时,还可以将样式单独封装成一个css文件
通过在每个页面中定义
<style>
@importurl("1.css");
</style>
4,通过html中head标签中link标签连接一个css文件
<linkrel="stylesheet" href="1.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
技巧:为了提高相同样式的复用性以及可扩展性,可以讲多个标签样式进行单独定义,并封装成css样式
p.css
在一个css文件中使用css的import将多个标签样式文件导入。
然后在html页面上,使用linl标签导入这个总的css文件即可
1.css
@import url("p.css");
@importurl("div.css");
<link rel="stylesheet"href="1.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
15、选择器:其实是样式要作用的标签容器
当样式分离后,html作用在于用标签封装数据,让后将css加载到指定标签。
选择器的基本分类:
1、标签选择器:html中的每一个标签名
2、类选择器:每一个标签中的class属性
只用来给CSs所使用,可以对不同标签进行相同样式设定
3、ID选择器:每一个标签的ID属性。但是要保证Id唯一性。用#来标识
ID不仅可以被css所使用,还可以被javascript所使用
选择器优先级:ID>class>标签
扩展选择器:
1、关联选择器:对标签中的标签进行样式定义
2、组合选择器:对多个选择器进行相同样式定义。将多个选择器通过,隔开,的形式
3,伪元素选择器:是元素的一种状态
a:link:超链接被点之前的状态
a:visited:超链接被点之后的状态
a:hover:悬停在超链接上
a:active:点击超链接时
在定义这些状态时有顺序:L V H A
超链接点之后和之前一样
a:link,a:visited{
color:
text-decoration:name;
}
CSS滤镜:其实通过一些代码完成丰富了样式
div:行级区域
span:块级区域
p:行级区域。p中不要嵌套div
16、基础知识点总结
(1)网页中换行 <br />
(2)特殊符号:
< < > > & & &guot; “
® ® © © ™ ™ 空格
(3)<img src=”../路径” alt=”图片说明文字”/>
(4)联系我们 <a href=”mailto:[email protected]?subject=nihao”> 联系我们</a>
(5)
<pre></pre> 保留数据原有格式
<p></p>段落标签
<b> </b> 加粗
<i> </i> 斜体
<u></u> 下划线
<sub></sub>下标
<sup></sup>上标
<marqueedriection="left"往左飞 behavior="alternate"反弹"scrool"滚动"slide"下滑道地></marquee> 飞
<basehref="c:\abc\/" target="_blank" rel="external nofollow" >更改目录
<metaname="keywords" content="犀利哥"/>
<metahttp-equiv="refresh"content="3";url=http://www.sina.com.cn/>
打开此页面后自动跳转到新浪
<linkrel="stylesheet" type="text/css"media="screen,print" href="a.css" target="_blank" rel="external nofollow" /> 样式作用
(6)tou 标签
base
meta
<meta http-equiv=”refresh” content=”3”/> 刷新页面
<link rel=”stylesheet” href=”1.css” media=”screen,print”/>
(7)Dhtml :是多个技术的综合体。叫做动态的html
Html:负责将数据进行标签的封装
Css:负责标签的样式
Dom:负责将标签以及标签中的数据封装成对象
Javascript:负责通过程序设计方式来操作这些对象
(8)获取事件源对象的二种方式
⑴通过event对象的srcElement属性
⑵将事件源对象通过this传入
(9)超链接点前和点后一样效果
text-decoration:none;
(10)onmouseover 鼠标指在行时变颜色
Onmouseout 鼠标离开时变回原来颜色
(11)标签之间存在空行时,会出现一个空白的文本节点,在获取节点时一定要注意
(12)节点类型
标签型节点:类型:1
属性节点:类型:2
文本型节点: 类型:3
注释型节点:类型:8
Document:类型:9
(13)
getElementById | 获取对ID 标签属性为指定值的第一个对象的引用。 |
getElementsByName | 根据NAME 标签属性的值获取对象的集合。 |
getElementsByTagName | 获取基于指定元素名称的对象集合。 |
(14)获取事件源对象的二种方式
①通过event对象的srcElement属性
②将事件源对象通过this传入