7.HTML的常用标签使用(一)

学习了那么多知识,下面让我们实操起来!

目录

a链接

img标签

块级元素和行内元素

列表

表格


a链接

  • 链接:在web项目中网页是相互连接的。像这种可以点击跳转的东西叫链接。

  • <a>标签:链接到指定的文档

    href属性:要跳转的页面,值为一个URL地址,可以是绝对路径也可以是相对路径。

    • 目录大小写问题:在windows系统下不区分目录大小写的,但是在Linux下是严格区分大小写的。

    • href的值不要写为本地的绝对路径(FIle protocol,文件协议,file协议主要用于访问本地计算机中的文件)

      file:///C:/xampp/htdocs/0422/02/abc.html

    • 如果href的值为网站的绝对路径这个时候要加上协议名,否则找到是当前文件所在目录下的值为url的这个文件。

    • href的值不单单可以是html文件也可以是其他的文件类型。

    target属性:用来确定点击链接之后在哪里打开链接。

    • _self,在本窗口打开。(默认值)

    • _blank,在新窗口打开。

    • 自定义的名字,其实还有其他的值。

  • 锚点:URL中的片段标识符, 请求指定资源的子资源,点击指定的链接之后跳转到指定的位置。

    步骤:

    1. 分块

      <a name="标记名">
          要进行分块的内容
      </a>
    2. 标记链接

      <a href="#标记名">标记链接</a>

img标签

<img />图像标签

  • src属性:必须的告诉图片在哪里。值也是绝对路径或相对路径。

  • alt属性:图片不能正确显示时告诉搜索引擎和看网页的人这张图片表示的是什么内容。

  • width属性:图像的宽度

  • height属性:图像的高度

注意:

  1. 只是单独设定了宽度和高度的时候,将会进行等比例缩放、放大。

  2. 如果同时设定了宽度和高度,图像有可能会失真。

  3. px,pixel,它不是自然界中的长度单位,px是一种图像中的最小的点。一张图片是由这种点组成的。

块级元素和行内元素

  • 行内元素与块级元素直观上的区别:行内元素会在一行上排列,在同一行。

  • 块级元素独占一行垂直方向排列。

块级元素里通常包含行内元素和块级元素,但是行内元素里面不能包含块级元素。

列表

ul无序列表

  • <ul>标签中包含列表的内容。

  • <ul>的子元素必须是<li>,它表示的是列表中的每一项。

  • li中可以包含其他的标签。

ol有序列表

  • <ol>标签中包含列表的内容。

  • <ol>的子元素必须是<li>,也表示列表中的每一项。

  • 在li中也可以包含其他的标签。

不要只看列表的样式,要注意其语义。样式我们可以使用CSS来进行修改。

自定义列表

  • 由项目和项目的描述组成

    <dl>
        <dt>列表标题<dt/>
        <dd>解释内容<dd/>
    </dl>

    通常用在页面底部。

    • <dl>,定义定义列表。

    • <dt>,定义列表中的项目(主题)

    • <dd>,这个列表的主题内容是什么。

    • dl中只能包含dtdd,dt和dd可以包含其他标签。

表格

  • 表格实际就是展示数据用的。字不如表,表不如图。

    整个的表格分为:

  • <table>标签:告诉浏览器在<table>中包含的内容都属于表格。

  • 标题<caption>表格的标题。

  • 表头<thead>表示表头。

  • 表格主体数据<tbody>

  • 表格脚注部分<tfoot>

  • 如果省略thead、tbody、tfoot是可以的。但是一定要注意thead、tfoot是可选的,但是tbody是必选的,如果你不写tbody浏览器也会自动加上tbody,因为一个表格就是用来展示数据的,数据是主体。所以tbody既然表示数据主体,那么会自动加上tbody。

  • 表格,能不用就不用,因为如果表格中有大量数据的时候相对来说会比较慢。

表格属性

  • border属性:边框

  • height,设置tr的高度

  • align,设置本行的水平对齐方式。

    • left,左边

    • right,右边

    • center,中间

  • valign,设置本行的垂直对齐方式。

    • top,上对齐

    • middle,垂直居中

    • bottom,底部对齐

  • <td>中的属性:

    • colspan属性:规定单元格可以横跨的列数。

    • rowspan属性:规定单元格可以竖跨的行数。

  • width属性:规定表格的宽度

  • cellspacing属性:单元格与单元格之间的间距。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值