HTML常用基本标签


标签分大致可分为为:

  • 块级标签((block) ---独占一行
  • 内联标签(inline)  ---按照文本内容占位,在同一行显示

一、标题标签(块级标签)

<h1>欢迎光临</h1>	
<h2>欢迎光临</h2>
<h3>欢迎光临</h3>
<h4>欢迎光临</h4>
<h5>欢迎光临</h5>
<h6>欢迎光临</h6>

显示效果:

二、段落标签(块级标签)

  • p 标签:有间距
    <p>大家好,我是段落1。</p>
    <p>大家好,我是段落2。</p>
    <p>大家好,我是段落3。</p>
    显示效果:

       

  • br 标签:没有间距
    我是段落1<br>
    我是段落2<br>
    我是段落3<br>
    显示效果:

       

三、文本格式化标签

  • <b>定义粗体文字标签1</b>
  • <strong>定义粗体文字标签2</strong>
  • <em>定义斜体字1</em>
  • <i>定义斜体字2</i>
  • <del>定义删除文字</del>

     显示效果:

   

四、div和span标签

  • <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
  • <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现

        块级元素与行内元素的区别所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

五、超链接标签

       超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等

属性 描述
href 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如:F:\html\index.html ] 规定链接的跳转目标
title 百度 链接的提示信息
target _blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] 与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过

1、href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是 网络连接,也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址,一般在地址前面是以 http://或者https://这样开头的,如果没有网络,则用户点击了超链接也无法访问对应的目标。

3、本地链接指的是本地计算机的地址,一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的,不需要经过网络。

4、如果href的值留空,则默认是跳转到当前页面,也就是刷新当前页面。

六、锚点标签

       锚点( anchor )是超链接的一种应用,也叫命名锚记,锚点可以像一个定位器一样,可以实现页面内的链接跳转,运用相当普遍。例如,我们有一个网页,由于内容太多,导致页面很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。又例如,我们页面中,有个链接需要跳转到另一个页面的中间或者脚部去,这时候也可以运用上锚点技术来解决这个问题。

示例:

<a href="#id1">第一章</a>
<a href="#id2">第二章</a>
<a href="#id3">第三章</a>
<span id="id4"></span>
<div id="id1">第一章节内容<a href="#id4">返回顶部</a></div>
<div id="id2">第二章节内容<a href="#id4">返回顶部</a></div>
<div id="id3">第三章节内容<a href="#id4">返回顶部</a></div>

注:href中添加“#”并填写div或span标签中的id值,则可以定位到地方

七、img标签

      在HTML中,图像由标签定义的,它可以用来加载图片到html网页中显示。网页开发过程中,有三种图片格式被广泛应用到web里,分别是 jpg、png、gif。

img标签的属性:

/*
src属性:
    指定图像的URL地址,是英文source的简写,表示引入资源。
    src的值可以是本地计算机存储的图片的地址,也可以是网络上外部网站的图片的地址。
    如果src的值不正确,那么浏览器就无法正确的图片,而是显示一张裂图。
alt属性:指定图像无法显示时的替换文本。
width属性: 指定引入图片的显示宽度。
height属性:指定引入图片的显示高度。
border属性:指定引入图片的边框宽度,默认为0。
title属性:悬浮图片上的提示文字
*/

点击图片跳转可以配合a标签使用

<a><img src="" alt=""></a>

八、列表标签

<ul type="square">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ul>

  <ol start="100">  <!--start="100"表示从100开始,不定义表示从1开始-->
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ol>

九、表格标签

  • table结构

         在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样,都是有行有列的。HTML使用tr标签定义行,使用td标签定义列。

  • 语法
      <tr>
        <td>单元格的内容</td>
        ……
      </tr>
      ……
    </table>
    1、<table>和</table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。
    
    2、border用于设置整个表格的边框宽度,默认为0,表示不显示边框。
    
    3、<tr>和</tr>表示表格中的一行的开始和结束。一组<tr>...</tr>,一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。
    
    4、<td>和</td>表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列,多少的单元格了。
  • table属性
属性 描述
width px、% 规定表格的宽度。
height px、% 规定表格的高度。
align left、center、right 规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定表格的背景颜色。
background url 规定表格的背景图片。
border px 规定表格边框的宽度。
cellpadding px、% 规定单元格边框与其内容之间的空白。
cellspacing px、% 规定单元格之间的空隙。
  • td属性

表格中除了行元素以外,还有单元格,单元格的属性和行的属性类似。td和th都是单元格。

属性 描述
height px、% 规定单元格的高度。
width px、% 规定单元格的宽度。
align left、center、right 规定单元格内容的对齐方式。
valign top、middle、bottom 规定单元格内容的垂直对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定单元格的背景颜色。
background url 规定单元格的背景图片。
rowspan number 规定单元格合并的行数
colspan number 规定单元格合并的列数


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM