HTML常用标签,合并单元格方式

  • 标题标签

   < h1></h1>

     <h2></h2>

       <h3></h3>

          <h4></h4>

          <h5></h5>

           <h6></h6>

       为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,即<h1> - <h6>”。

       标签语义:作为标题使用,并组依据重要性递减。

  • 段落和换行标签

        在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中, <p>标签用于定义段落,它可以将整个网页分为若千个段落。

       <p></p>

        换行标签,在网页上并不像在Word上一样按个回车键就会换行,而是由一个单标签</br>进行换行。

  • 图像标签和路径

      图像标签

图像标签属性

         设置图片的宽度和高度,一般情况下设置一个,让图片等比例缩放,这样图片不会有太大的缩放问题,就不会有失真了。

         border一般情况下不会用属性来设置,会在学习css中设定。

         图像标签属性注意点:

         ①图像标签可以拥有多个属性,必须写在标签名的后面。

         ②属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

         ③属性采取键值对的格式,即key= "value" 的格式,属性=“属性值”

      路径

         (1)目录文件夹和根目录:

         实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。

         目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。

         根目录:打开目录文件夹的第一-层就是根目录。

       相对路径:相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于

HTML页面的位置。

相对路径分类

         相对路径是从代码所在的这个文件出发,得找目标文件的,而我们这里所说的上- -级、下一 级和同- 级就是图片相对于HTML页面

的位置。

      绝对路径:

         绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

      超链接标签:

         在HTML标签中, <a>标签用于定义超链接,作用是从一个页面链接到另一个页面。

       链接的语法格式

链接的语法格式

         两个属性的作用如下:

链接两个属性作用

         链接分类:

          1.外部链接:例如< a href="http:// www.baidu.com">百度</a>。

          2.内部链接:网站内部页面之间的相互链接 直接链接内部页面名称即可,例如< a href= "index.html">首页</a>。

          3.空链接:如果当时没有确定链接目标时,<a href="#">首页</a>。

          4.下载链接:地址链接的是文件.exe或者是zip等压缩包形式。

          5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

          6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置。

               ●在链接文本的href属性中,设置属性值为#名字的形式,如<a href=”#magnum opus">代表作</a>

               ●找到目标位置标签,面添加一个id 属性=刚才的名字,如: <h3 id="magnum opus" >代表作介绍</h3>

  •  HTML中的注释和特殊字符

         注释:如果需要在HTML文档中添加一-些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

          HTML中的注释以“<!--" 开头,以“-->”结束。快捷键  Ctrl+  /

          特殊字符:在HTML页面中,一些特殊的符号很难或者不方便直接使用 ,此时我们就可以使用下面的字符来替代。

特殊字符

  •  表格标签

     表格的主要作用 :表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格

      1、<table></table>是用于定义表格的标签。

      2、<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中。    

      3、<td> </td>用于定义表格中的单元格,必须嵌套在<tr> </tr>标签中。

      4、字母td指表格数据( tabledata ) , 即数据单元格的内容。

表格代码表格表现1

        一般表头单元格位于表格的第一行或第一-列, 表头单元格里面的文本内容加粗居中显示。

        <th>标签表示HTML表格的表头部分(table head的缩写)。

表格标签

  

表现

      表格属性:

表格属性

      表格标签这部分属性我们实际开发我们不常用,后面通过CSS来设置。

      表格结构标签:使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。在表格标签中,分别用:<thead> 标签表格的头部区域、<tbody> 标签表格的主体区域这样可以更好的分清表

格结构。

    1. <thead> </thead> :用于定义表格的头部。<thead> 内部必须拥有<tr>标签。一般是位于第一 -行。

    2. <tbody> </tbody> : 用于定义表格的主体,主要用于放数据本体。

    3.以上标签都是放在<table> </table>标签中。

    合并单元格

     特殊情况下,可以把多个单元格合并为一个单元格,这里同学们会最简单的合并单元格即可.

合并单元恶搞

     合并单元格方式:

      ●跨行合并: rowspan=”合并单元格的个数”

      ●跨列合并: colspan=”并单格的个数”

合并单元格表现

       目标单元格: (写合并代码)

       ●跨行:最上侧单元格为目标单元格,写合并代码。

       ●跨行:最上侧单元格为目标单元格,写合并代码。

       ●删除多余的单元格。

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读