天天看点

javascript中的常见标签

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)特殊符号:

   &lt; <         &gt;  >           &amp;  &               &guot;  “

   &reg;  ®          &copy;  ©      &trade;  ™              &nbsp;  空格

(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传入

继续阅读