（1）列表标签、图片标签、表格标签

来源：互联网发布：在线视频gif制作软件编辑：程序博客网时间：2024/06/05 19:00

一、HTML概述
Html就是超文本标记语言的简写，是最基础的网页语言
Html是通过标签来定义的语言，代码都是由标签所组成
Html代码不用区分大小写
Html代码是由开头结束，里面由头部分
和体两个部分组成
头部分是给Html网页增加一些辅助或者属性，它里面的内容会最先加载。体部分是真正的存放页面数据的地方.
二、操作思想
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作，标签相当于一个容器，对容器中的数据进行操作，就是在不断的改变容器中属性值
格式：

<标签 属性名="属性值">数据内容</标签名><标签 属性名="属性值"/>

三、
①特殊的字符：&就能自动选择
②有些数据不希望浏览器解析：类似于注释

四、列表标签

 <!--演示列表标签--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>new web project</title></head><body>         <!--演示列表标签         列表标签：dl         上层项目：dt         下层项目：dd:封装的内容会被缩进，有自动缩进的效果         -->         <d1>              <dt>春晓</dt>              <dd>春眠不觉晓，处处闻啼鸟。</dd>              <dd>夜来风雨声，花落知多少。</dd>          </dl>          <hr/>          <!--有序和无序的项目列表          有序：ol          无序：ul          无论有序无序，条目的封装都是<li>          而且他们都具有缩进效果          -->          <ul  type="square">             <li>无序列表</li>             <li>无序列表</li>             <li>无序列表</li>          </ul>          <ol  type="A">              <li>有序列表</li>              <li>有序列表</li>              <li>有序列表</li>           </ol>    </body></html>

这里写图片描述
五、图片标签

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><!--演示图片标签     <img />     alt属性是对图片的说明-->    <img   src="E:\HTML程序\1.jpg"  height="350"  width="500" border=10 alt="ASCII    码"  /><body></body></html>

六、表格标签
①
姓名：张三
年龄：18

<body>       <!--表格标签       tr:表格行       td:表格数据，单元格数据       table-->       <table>            <tr>                <td>姓名：张三</td>             </tr>             <tr>                 <td>年龄：18</td>              </tr>         </table>        </body>

②
这里写图片描述

<body>       <!--表格标签       th:表格数据居中       td:表格数据，单元格数据       cellpadding:单元格边框与内容上下左右距离       cellspacing：单元格之间的空白       若设置cellspacing=0，则合并两个单元格格式       table-->       <table border="1" bordercolor="#FF0000" cellpadding="10" cellspacing="0"       >       <caption >个人信息</caption>            <tr>                <th>姓名</th>                <th>年龄</th>             </tr>             <tr>                 <td>张三</td>                 <td>18</td>              </tr>              <tr>                   <td>李四</td>                   <td>19</td>              </tr>         </table>     </body>

③
这里写图片描述

可以这样想：第一行有一列，第二行有两列，显示结果就是↑↑显示格式，这时应该将个人信息单元格加属性colspan=2，合并两列，就能如↓↓显示了
这里写图片描述

<table border="1" bordercolor="#FF0000" cellpadding="10" cellspacing="0">    <!--colspan=2使此单元格占两列（合并单元格）-->      <tr>     <th colspan="2">个人信息</th>     </tr>     <tr>       <td>姓名</td>       <td>年龄</td>       </tr></table>

④要求显示格式：
这里写图片描述
可以先这样想：可以先认为第一行有两列：分别为个人信息，张三
第二行只有一列：18，显示的结果为：↓↓

然后在个人信息单元格处合并两行，18仍然是第二行的，因单元格合并，所以18就在张三这列了。

<table border="1" bordercolor="#FF3366" cellpadding="10" cellspacing="0">     <!--rowspan:行合并-->     <tr>         <th >个人信息</th>         <td>张三</td>     </tr>     <tr>        <td>18</td>     </tr></table>

在网页制作时，一般用表格制作各个单元格应该显示哪些内容，在数据传输的过程中，可以将每个单元格（指网页大单元格）写在中，这样就可以网页没加载完，但是有些单元格的数据已经可以供用户浏览。表格有个默认标签就是tbody,网页解析时必须得有，否则无法解析

阅读全文

0 0