整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

编辑HTML常用标签

式标签

格式标签用于定义网页中文本的布局、缩进、位置、换行、列表等

  • <br> 换行
  • <p> 段落
  • <center> 居中
  • <pre> 保留文字在源代码中的格式
  • <ul><li> 无序列表
  • <ol><li> 有序的列表
  • <hr> 水平分隔线

文本标签

在网页中,为了着意强调某一部分文字,或者为了让文字有所变化

  • <hn>
  • <b>
  • <i>
  • <u>
  • <sub>
  • <sup>
  • <font>
  • <tt>
  • <cite>
  • <em>
  • <strong>
  • <small>
  • <big>

超链接标签

  • 协议:主机:文件:附加资源

http://www.lamp.com/web/index.php?uname=zhangsan&age=10&sex=nan

  • 相对URL:

Images/logo.gif

../css/demo.css

../../js/demo.js

./admin/index.php

  • 绝对URL:

C:/appserv/www/image/logo.gif

/usr/local/apache/htdocs/www/index.php

http://www.lamp.com/web/index.php

  • <a href=“URL”>某某页面</a>

Target: _self _blank _parent _top name

锚点的应用

  • <a href=“URL”>某某页面</a> : 超连接
  • <a name=“name”>内容</a> :锚点
  • 使用时<a href=“#name”>定位位置</a>

图像标签

<img>

  • Src: 指定图片所在的URL
  • Border=边框的宽度
  • Alt:

鼠标放上有黄色小图标

如图像不存在,则出现它指定的文字

搜索引擎可以通过它指定的文字搜索该图片

  • Width
  • height

图像地图

  • 一个图像只能加一个a标签,做一个链接
  • 如果把一幅图像分成多个区域,每个区域指向不同的URL地址(为一个图片加多个链接)
  • 在图像<img>中使用usemap属性去使用地图
  • <map>定义热点区域
  • <area>指定每个热点区域
  • Shape指定形状 rect, poly, circle
  • Coords确定形状
  • href指定链接的位置

指引

网页中的信息主要是以文本为主的,可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记中编写。文字是网页设计最基础的部分,一个标准的文字页面可以起到传达信息的作用。对文字的格式化,通常可以使用两种方式:一种方式是直接使用HTML标记,另一种方式是使用CSS。利用CSS可以对文本的格式进行精确控制,使用HTML标记则更有利于搜索引擎抓取。本章主要介绍一些和页面排版相关的标记。

1 HTML基础标签

HTML标签有很多,为了方便学习和使用,我们可以将这些标签按类别细分一下。基础标签则是页面制作最常使用的一些标签,包括上一章介绍过的结构标签,都属于基础标签。本节介绍的基础标签如表1所示:

表1 HTML基础标签

果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

一、文档类型声明。

html5文档类型声明:<!doctype html>

html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签:

meta:主要提供有关页面的元信息。

link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

title:页面标题的标签。

script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>


前端页面显示的效果如下图:

常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>


CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

常用的内联标签有:span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<img src="w5.jpg" alt="">

<img src="w5.jpg" alt="">


CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

常用的内联块级标签有:img、input、textarea。

4、区域标签。

所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

5、表单标签。

这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

​表单常用的标签有:form、input、select、option、textarea 。

以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。