黑马程序员-----javascript中的常见标签

来源：互联网发布：做展架用什么软件编辑：程序博客网时间：2024/06/03 18:02

------Java培训、Android训、iOS培训、Net培训、期待与您交流！------

1、字体：<font>

特殊部分：如果在页面显示一些特殊符号，需要进行转义

标题：<h1.....6>

----------------------

2、列表标签：<dl></dl>

上层项目：<dt>

下层项目：<dd>

项目符号标签：

二个标签中的列表项有<li>标签封装

3、图像标签：<img>

4、表格标签：<table>

表格由行组成，行由单元格组成。

表格中默认都有一个tbody标签

标题标签：<caption>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

表格是最常用的标签，用于对数据进行格式化

5、超链接：<a>

当被点击后，会启动引擎所对应解析程序。

指定去查找的主机

1、先找本地主机的hosts文件。如果没有找到该主机对应的ip地址

2、去公网dns服务器找对应的ip地址

当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlook

超链接的另一个作用

定位标记

<aname="top">一个位置</a>

<ahref="#top">获取那个位置</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>

</dl>

数字符号

<ol>

符号

<ol>

10、图像

<imgsrc="../1.jpg" alt="图片说明文字" height="400" width="400"border="10"/>

<hrcolor="red" size="5"/>

11、表格标签

<table>

<tbody>

<tr>

<th></th>表头标签，加粗居中

</tr>

</tbody>

<tr>

</tr>

<tr>

</tr>

</table>

cellspacing 边框合并

cellpadding 内边距

12、超链接

<ahref="http://hao123.com" target="_blank"(新打开一个窗口)>好123<a>

<ahref="thunder://dddddd">顶顶顶顶</a>

<ahref="www.xxx.com"><img src="1.jpg"/></a>

<aherf="#top">回到顶部</a>

<label>:用于给元素定义快捷键

for属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id相同

accesskey属性：指定快捷键，此快捷键需要和alt键组合使用

例：<labelfor="user" accesskey="u">用户名（u）</label>

13、html

html:超文本标记语言，

html语言中是由标签组成的

html中的数据都会封装在标签中，因为可以通过标签中的属性值的改变对封装内的数据进行操作。

确定html代码范围。<html></html>

在该范围中可以定义两部分内容，一部分是头，一部分是体

<html>

</html>

head:网页的一些属性信息。比如：标题

body：网页显示的数据

标签特点：对于数据进行封装，那么就有开始标签和结束标签

但是也有一些标签只体现单一功能，所以不需要结束标签，规范中要求标签必须要结束，所以这样的标签在内部结束。

如：<br/><hr/><img/> <input/>

标签格式：<标签名属性名="属性值">数据</标签名>

<标签名属性名="属性值"/>

14、css层叠样式表：

将网页中样式分离出来，完全由css来控制

增强样式的复用性以及可扩展性

格式：选择器{属性名：属性值;.....}

css和html代码想结合的四种方式：

1，每一个html标签都有一个style属性

2，当页面有多个标签有相同样式时，可以进行复用

3,当有多个页面中标签的样式相同时，还可以将样式单独封装成一个css文件

通过在每个页面中定义

<style>

@importurl("1.css");

</style>

4,通过html中head标签中link标签连接一个css文件

<linkrel="stylesheet" href="1.css"/>

技巧：为了提高相同样式的复用性以及可扩展性，可以讲多个标签样式进行单独定义，并封装成css样式

p.css

在一个css文件中使用css的import将多个标签样式文件导入。

然后在html页面上，使用linl标签导入这个总的css文件即可

1.css

@import url("p.css");

@importurl("div.css");

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:abc@sohu.com?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\/">更改目录

<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"/> 样式作用

（6）tou 标签

base