HTML基础知识——常用标签2

最新HTML基础知识介绍,对于零基础、即将要学习或是正在学习的同学非常适用哦!

1、列表标签

列表标签分为有序列表、无序列表和定义列表

HTML列表标签HTML基础知识——常用标签2_第1张图片HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用

    定义,使用
  • 标签定义列表项。

    实例:

    列表标签
    • 语文
    • 数学
    • 英语
    • 体育
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表标签title>
    head>
    <body>
        
        <ul >
            <li>语文li>
            <li>数学li>
            <li>英语li>
            <li>体育li>
        ul>
    body>
    html>
    

    HTML有序列表

    有序列表也是一列项目,列表项目使用数字进行标记。

    有序列表始于

      标签。每个列表项始于
    1. 标签。

      实例:

      列表标签
      1. 语文
      2. 数学
      3. 英语
      4. 体育
      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>列表标签title>
      head>
      <body>
          
          <ol>
              <li>语文li>
              <li>数学li>
              <li>英语li>
              <li>体育li>
          ol>
      body>
      html>
      

      HTML 自定义列表

      自定义列表不仅仅是一列项目,而是项目及其注释的组合。

      自定义列表以

      标签开始。每个自定义列表项以
      开始。每个自定义列表项的定义以
      开始。

      实例:

      列表标签
      语文
      数学
      英语
      体育
      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>列表标签title>
      head>
      <body>
          
          <dl>
              <dt>语文dt>
              <dd>数学dd>
              <dt>英语dt>
              <dd>体育dd>
          dl>
      body>
      html>
      

      2、img标签

      img标签可以在HTML页面显示图片

      实例:

      
      
      
      <html>
      <head>
          <meta charset="UTF-8">
          <title>img标签title>
      head>
      <body>
      
      <img src="1.jpg" width="200" height="260" border="1" />
      <img src="./imgs/2.jpg" width="200" height="260" />
      <img src="./imgs/3.jpg" width="200" height="260" /><br/>
      <img src="./imgs/4.jpg" width="200" height="260" />
      <img src="../imgs/5.jpg" width="200" height="260" alt="图片找不到"/>
      <img src="./imgs/6.jpg" width="200" height="260" />
      <img src="./imgs/7.jpg" width="200" height="260" />
      
      body>
      html>
      

      运行结果:HTML基础知识——常用标签2_第2张图片

      3、表格标签(重点)

      表格由

      标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
      标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

      HTML表格标签HTML基础知识——常用标签2_第3张图片

      
      
      
      <html>
      <head>
          <meta charset="UTF-8">
          <title>表格标签title>
      head>
      <body>
      <table align="center" border="1" width="300" height="300" cellspacing="0">
          <tr>
              <th>表头1th>
              <th>表头2th>
              <th>表头3th>
          tr>
          <tr align="center">
              <td>1.1td>
              <td>1.2td>
              <td>1.3td>
          tr>
          <tr align="center">
              <td>2.1td>
              <td>2.2td>
              <td>2.3td>
          tr>
          <tr align="center">
              <td>3.1td>
              <td>3.2td>
              <td>3.3td>
          tr>
      table>
      body>
      html>
      

      运行效果:

      表格标签
      表头1 表头2 表头3
      1.1 1.2 1.3
      2.1 2.2 2.3
      3.1 3.2 3.3

      4、表格跨行、跨列(次重点)

      
      
      
      <html>
      <head>
          <meta charset="UTF-8">
          <title>表格的跨行跨列title>
      head>
      <body>
      
      <table width="500" height="500" cellspacing="0" border="1">
          <tr>
              <td colspan="2">1.1td>
              <td>1.3td>
              <td>1.4td>
              <td>1.5td>
          tr>
          <tr>
              <td rowspan="2">2.1td>
              <td>2.2td>
              <td>2.3td>
              <td>2.4td>
              <td>2.5td>
          tr>
          <tr>
              <td>3.2td>
              <td>3.3td>
              <td>3.4td>
              <td>3.5td>
          tr>
          <tr>
              <td>4.1td>
              <td>4.2td>
              <td>4.3td>
              <td colspan="2" rowspan="2">4.4td>
          tr>
          <tr>
              <td>5.1td>
              <td>5.2td>
              <td>5.3td>
          tr>
      table>
      body>
      html>
      

      运行效果:

      表格的跨行跨列
      1.1 1.3 1.4 1.5
      2.1 2.2 2.3 2.4 2.5
      3.2 3.3 3.4 3.5
      4.1 4.2 4.3 4.4
      5.1 5.2 5.3

      今天就先分享到这里啦!下一篇带你了解表单标签,有介绍如何实现登录界面哦!

      您的鼓励是我前进的动力,将会分享更多知识给您

      欢迎点赞 + 收藏 + 关注!!!

      你可能感兴趣的:(学习记录,html,前端,html5,chrome)