初识HTML及常用的标签（2）

最新推荐文章于 2022-01-20 08:38:29 发布

lht_liuhaitao

最新推荐文章于 2022-01-20 08:38:29 发布

阅读量1.6k

点赞数

分类专栏： HTML 文章标签： table ul和ol img标签 a标签

本文链接：https://blog.csdn.net/lht_liuhaitao/article/details/101677882

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML的常用标签

在前面一篇也提到了一些标签，接着记录一些常用的HTML标签：

图像标签

HTML中的图像是通过<img>标签定义的。

img标签其基本语法如下：

标签中的src属性是用于指定图片的名字和图片文件的路径。它是img标签的必须属性。

<img src="图像URL" />

img标签其中还有一些属性如下表格：

属性	属性值	属性描述
src	URL（Uniform Resource Locator,统一资源定位符）是地址的别名	图像文件的地址
title	文本	鼠标在图片上悬停时，显示的文本内容
alt	文本	图片加载失败时显示的文本内容
width	数字	设置图像的宽度
height	数字	设置图像的高度
border	数字	设置图像边框的宽度

链接标签

HTML中的超链接标签是由<a>标签来定义的，用a标签环绕需要被链接的对象即可创建一个超链接。如下：

<a href="跳转的目标路径" target="目标窗口弹出的方式">文本或图片</a>

其中的href属性：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用。

target属性：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加模式、主机名和路径 如：http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位

通常，激活一个链接会将用户带到对应的网页顶端。如果要想用户跳至网页的特定区域，可以创建一个锚。

创建锚的步骤：

1、将光标放在希望用户跳转至的元素的开始标签中，输入一个id属性及属性值。

例如：<h2 id="features">希望用户跳转到此处</h2>

2、创建链接到特定锚的链接

<a href="#features">定位到id为features的区域</a>

其中的features为目标的id属性值。当点击链接时，将用户直接带到步骤1中的文字区域。

注意：
    提到链接，还需要注意一个标签（base标签）
    base标签 可以设置整体链接的打开状态   
    base标签 书写到<head></head>之间
    例如：
        <head>
            <base target="_blank"/>
        </head>
    将所有链接默认添加属性target="_blank"（默认在新窗口打开）

其中网易就是使用的base标签：

列表标签

HTML包含了专门用于创建项目列表的元素，其中有有序列表、无序列表、描述列表，下面分别详细介绍其语义和用法。

1、有序列表：

适用于提供完成某一任务的分步说明，或者用于创建大型文档的大纲等。总之呢，它适用于任何强调顺序的项目列表。

例如：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

代码运行：

其中有序列表都是默认使用阿拉伯数字创建带编号的有序列表，这个可以通过CSS对此进行修改。有序列表和无序列表在显示时默认都会进行缩进。

如何选择列表的起始编号呢？

选择列表的起始编号
    <ol start="2">
        <li>第一个li</li>
        <li value="6">第二个li</li>
        <li>第三个li</li>
    </ol>

在ol开始标签中添加start属性，可以表示列表的初始值。在li标签的开始标签中添加value属性和值，可以表示当前的li标签从value值开始。

代码运行：

2、无序列表：

适用于列表项的顺序不太重要的。

例如：

  <ul>
    <li>衣服</li>
    <li>帽子</li>
    <li>鞋子</li>
  </ul>

代码运行：

在默认情况下，无序列表前面显示实心圆点。可以通过CSS对此进行修改。

注意：
 1. <ul></ul>和<ol></ol>中只能嵌套<li></li>，直接在<ul></ul>和<ol></ol>标签中输入其他标签或者                                            
    文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表和有序列表会带有自己样式属性，放下那个样式，一会让CSS来！

3、描述列表（又称自定义列表）

描述列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

每个描述列表，都是由每个名-值组组成，一般一个名-值组都是由一个dt和一个或多个dd组成。

表格table

结构化表格：放在电子表格中的信息通常很适合用HTML表格呈现。

从基本层面看，table元素是由行（tr）组成的，行又是由单元格组成的。每一行（tr）都包含标题单元格（th）或数据单元格（td）或者同时包含这两种单元格。

以下三种标签不可或缺：

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

直接上例子来看：

<table>
    <caption>表格标题</caption>
    <tr>
        <th>标题单元格一</th>
        <th>标题单元格二</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
</table>

代码运行：

上述例子中，caption标签是可选的（可以包含p标签和其他的文本标签），如果有caption标签，则必须是table中的第一个元素（标签），可以为表格添加标题，并且文本是居中对齐的。th标签包裹的是标题单元格（可以是第一行作为标题单元格，也可以是第一列作为标题单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像一个容器，可以容纳所有的元素

表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。


<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表格属性

属性名	含义	常用属性值
border	设置表格边框（默认border="0"）	像素值
cellspacing	设置单元格与单元格边框之间的空隙（空白间距）	像素值（默认为2像素）
cellpadding	设置单元格中的内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

让单元格跨越多列或多行

可以通过colspan和rowspan属性让th或td跨越一个以上的列或行。对该属性指定的数值表示的是跨越的单元格的数量。

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。

例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

公式：删除的个数 = 合并的个数 - 1

合并的顺序先上先左

例如：

 <table border="1">
    <caption>同学册</caption>
    <tr>
      <th scope="rowgroup">姓名</th>
      <th scope="col" colspan="2">联系方式</th>
      <th scope="col">家庭住址</th>
    </tr>
    <tr>
      <th scope="row">小李同学</th>
      <td>QQ：741852369</td>
      <td>tel：15985239632</td>
      <td rowspan="3">刘家村</td>
    </tr>
    <tr>
      <th scope="row">小王同学</th>
      <td>QQ：175456258</td>
      <td>tel:1554547878</td>

    </tr>
    <tr>
      <th scope="row">小花同学</th>
      <td>QQ：123456789</td>
      <td>tel:15454878663</td>
  
    </tr>
  </table>

代码运行：

其中的scope属性是可选的，可以告诉屏幕阅读器和其他辅组设备当前的th是列的标题单元格（使用scope="col"），还是行的标题单元格（使用scope="row"），亦或者是其他目的的单元格（使用scope="colgroup"，是指定th为一组列的标题。使用scope="rowgroup"，是值为一组行的标题）。

lht_liuhaitao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML及常用的标签（2）

HTML的常用标签在前面一篇也提到了一些标签，接着记录一些常用的HTML标签：图像标签 HTML中的图像是通过<img>标签定义的。 img标签其基本语法如下：标签中的src属性是用于指定图片的名字和图片文件的路径。它是img标签的必须属性。<img src="图像URL" /> img标签其中还有一些属性...
复制链接

扫一扫