HTML元素属性/应用场景

元素属性有四种分别是通用属性、预置属性、事件属性、自定义属性

1.通用属性

  • 通用属性有三个分别是id、class、style 通用属性是基本所有元素都可以使用的
    • id：通常为元素的唯一属性 注意：此“唯一”是用户自己判定的唯一
    • class：用的比较多，它满足了样式复用的基本
    • style：行内样式属性通过它可以改变某个元素的自定义样式

      2.预置属性

  • 预置属性是指某些元素/标签内独有的属性相当于通用属性的子集
    • 例如：a标签中的href属性<a hred="url地址"></a>
    • 例如：img标签中的src属性 alt属性 <img src="" alt=""/>
    • 当然通用属性也是内置属性只不过基本绝大多数元素都可以用

      3.事件属性

  • 事件属性是只一个可以产生一些交互事件的属性 有一个共同前缀on + 事件名称 组成的事件方法
    • 例如点击事件:onclick <button onclick="alert(1)"></button>

      4.自定义属性

  • 自定义属性是用户自定义的一个属性 有一个共同前缀 data-自定义属性名
    • 例如<div data-username="张三"></div> 自定义属性需要通过js代码来获取

常用布局标签

  • 布局标签：语义化的标签 用的更多的还是div+class
    • 布局标签有常用的有<header></header>、<main></main>、<footer></footer>、<nav></nav>
    • 布局标签通常用在简单一点的布局上面

常用标签介绍

常用的三种标签图片、链接、列表标签

1.图片标签

  • 图片标签是引入外部图片例如<img src="图片地址" alt=""/> 注意：通常引用的外部资源多半都是使用单标签l56ugbgo.png

2.链接标签

  • 链接标签的应用场景居多：<a href="https://www.hui-xiang.cn">跳转网页</a>比如这段代码在浏览器如下图 点击后将会跳转到新界面
  • a标签内有一个属性target通常使用它的两个属性_blank:在新页面打开网页 _self:覆盖当前页面打开l56uk5lv.png

3.列表标签

有序列表ol、无序列表ul、自定义列表dl（注意里面是成对出现的）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>Document</title>
  8.     </head>
  9.     <body>
  10.         <ul>
  11.             <li>无序列表</li>
  12.         </ul>
  13.         <ol>
  14.             <li>有序列表</li>
  15.         </ol>
  16.         <dl>
  17.             <dt>标题：</dt>
  18.             <dd>自定义列表</dd>
  19.         </dl>
  20.     </body>
  21. </html>

l56umu7u.png

通常图片元素和链接元素会搭配着列表元素使用

表格元素

表格在很久以前会用来布局 再后来被div+css替代 现在被flex和grid替代表格目前通常使用格式化数据输出

  • 表格通常由<table>+<tbody>+<tr>+<td>组成
  • thead和tfoot是可选元素可以写可以不写

合并单元格

  • 合并单元格使用两个属性rowspan：合并水平单元格 colspan：合并垂直单元格
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.       <meta charset="UTF-8" />
    5.       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.       <title>Document</title>
    8.   </head>
    9.   <body>
    10.       <table border="1px">
    11.           <caption>
    12.               xxx
    13.           </caption>
    14.           <thead>
    15.               <tr>
    16.                   <th>xxx</th>
    17.                   <th>xxx</th>
    18.                   <th>xxx</th>
    19.                   <th>xxx</th>
    20.                   <th>xxx</th>
    21.               </tr>
    22.           </thead>
    23.           <tbody>
    24.               <tr>
    25.                   <td rowspan="4">item1</td>
    26.                   <td>item2</td>
    27.                   <td>item3</td>
    28.                   <td>item4</td>
    29.                   <td>item5</td>
    30.               </tr>
    31.               <tr>
    32.                   <!-- <td>item1</td> -->
    33.                   <td>item2</td>
    34.                   <td colspan="3">item3</td>
    35.                   <!-- <td>item4</td> -->
    36.                   <!-- <td>item5</td> -->
    37.               </tr>
    38.               <tr>
    39.                   <!-- <td>item1</td> -->
    40.                   <td>item2</td>
    41.                   <td>item3</td>
    42.                   <td>item4</td>
    43.                   <td>item5</td>
    44.               </tr>
    45.               <tr>
    46.                   <!-- <td>item1</td> -->
    47.                   <td>item2</td>
    48.                   <td>item3</td>
    49.                   <td>item4</td>
    50.                   <td>item5</td>
    51.               </tr>
    52.           </tbody>
    53.       </table>
    54.   </body>
    55. </html>
    l56v0j27.png

用图片、链接和列表做个图片导航和用表格做一个课程表

l56v6eh0.png

  1. <!-- 在vscode当中输入html:5或者一个英文状态下的感叹号!按下TAB键即可自动生成如下代码 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.         <title>课程表</title>
  9.         <style>
  10.             table {
  11.                 border-collapse: collapse;
  12.                 border: 1px solid red;
  13.                 font-size: 16px;
  14.                 font-weight: bold;
  15.                 margin: auto;
  16.             }
  17.             table th,
  18.             table td {
  19.                 border: 1px solid blue;
  20.                 padding: 3px;
  21.             }
  22.             table th {
  23.                 background-color: lightgreen;
  24.             }
  25.             ul {
  26.                 list-style: none;
  27.                 display: flex;
  28.             }
  29.             ul li img {
  30.                 width: 100px;
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <p>图片导航：</p>
  36.         <ul>
  37.             <li>
  38.                 <a href="">
  39.                     <img
  40.                         src="https://www.php.cn/static/images/PHPlogo.png"
  41.                         alt="php中文网"
  42.                     />
  43.                 </a>
  44.             </li>
  45.             <li>
  46.                 <a href="" target="_self"
  47.                     ><img
  48.                         src="https://www.php.cn/static/images/PHPlogo.png"
  49.                         alt="php中文网"
  50.                 /></a>
  51.             </li>
  52.             <li>
  53.                 <a href=""
  54.                     ><img
  55.                         src="https://www.php.cn/static/images/PHPlogo.png"
  56.                         alt="php中文网"
  57.                 /></a>
  58.             </li>
  59.         </ul>
  60.         <hr />
  61.         <p>课程表作业：</p>
  62.         <table>
  63.             <caption>
  64.                 课程表
  65.             </caption>
  66.             <thead>
  67.                 <tr>
  68.                     <th>时间</th>
  69.                     <th>节次</th>
  70.                     <th>星期一</th>
  71.                     <th>星期二</th>
  72.                     <th>星期三</th>
  73.                     <th>星期四</th>
  74.                     <th>星期五</th>
  75.                 </tr>
  76.             </thead>
  77.             <tbody>
  78.                 <tr>
  79.                     <td rowspan="4">上午</td>
  80.                     <td>1</td>
  81.                     <td>科学</td>
  82.                     <td>语文</td>
  83.                     <td>语文</td>
  84.                     <td>校本</td>
  85.                     <td>语文</td>
  86.                 </tr>
  87.                 <tr>
  88.                     <!-- <td>xxx</td> -->
  89.                     <td>2</td>
  90.                     <td>语文</td>
  91.                     <td>数学</td>
  92.                     <td>数学</td>
  93.                     <td>语文</td>
  94.                     <td>校本</td>
  95.                 </tr>
  96.                 <tr>
  97.                     <!-- <td>xxx</td> -->
  98.                     <td>3</td>
  99.                     <td>数学</td>
  100.                     <td>美术</td>
  101.                     <td>体育</td>
  102.                     <td>数学</td>
  103.                     <td>足球</td>
  104.                 </tr>
  105.                 <tr>
  106.                     <!-- <td>xxx</td> -->
  107.                     <td>4</td>
  108.                     <td>体育</td>
  109.                     <td>环安</td>
  110.                     <td>道法</td>
  111.                     <td>美术</td>
  112.                     <td>综合</td>
  113.                 </tr>
  114.                 <tr>
  115.                     <td colspan="7" align="center">午休（12:00-13:30）</td>
  116.                     <!-- <td>xxx</td>
  117.                     <td>xxx</td>
  118.                     <td>xxx</td>
  119.                     <td>xxx</td>
  120.                     <td>xxx</td>
  121.                     <td>xxx</td> -->
  122.                 </tr>
  123.                 <tr>
  124.                     <td rowspan="3">下午</td>
  125.                     <td>5</td>
  126.                     <td>数学</td>
  127.                     <td>语文</td>
  128.                     <td>道法</td>
  129.                     <td>语文</td>
  130.                     <td>语文</td>
  131.                 </tr>
  132.                 <tr>
  133.                     <!-- <td>xxx</td> -->
  134.                     <td>6</td>
  135.                     <td>音乐</td>
  136.                     <td>体育</td>
  137.                     <td>传文</td>
  138.                     <td>道法</td>
  139.                     <td>音乐</td>
  140.                 </tr>
  141.                 <tr>
  142.                     <!-- <td>xxx</td> -->
  143.                     <td>7</td>
  144.                     <td>活动</td>
  145.                     <td>活动</td>
  146.                     <td>活动</td>
  147.                     <td>活动</td>
  148.                     <td>班会</td>
  149.                 </tr>
  150.             </tbody>
  151.             <tfoot>
  152.                 <tr>
  153.                     <td colspan="7" align="center">作业（22:00-23:00）不写完不放学</td>
  154.                     <!-- <td>7</td>
  155.                     <td>活动</td>
  156.                     <td>活动</td>
  157.                     <td>活动</td>
  158.                     <td>活动</td>
  159.                     <td>班会</td> -->
  160.                 </tr>
  161.             </tfoot>
  162.         </table>
  163.         <footer></footer>
  164.         <main></main>
  165.     </body>
  166. </html>