首页 > 博客列表 > 关于链接，列表，表格，表单的入门见解

博主信息

博文 62

粉丝 7

访问量 74159

专题推荐

更多>

关于链接，列表，表格，表单的入门见解

1.我提交作业的网站https://php520.vip/index.html

2.链接元素

链接元素使用的是<a>

代码演示链接元素的具体用法

  <!-- 链接跳转 -->
  <a href="https://www.php.cn/">php中文网</a>
  <!-- 浏览器不能解析的文件会自动下载 -->
  <!-- download=""指定下载的文件名称 -->
  <a href="0403.zip" download="这是0403上课的教案">教案</a>
  <!-- 拨打电话，手机端使用，H5端 -->
  <a href="tel:110">咨询110</a>
  <!-- 发送邮箱 -->
  <a href="mailto:88@qq.com">联系我们</a>
  <!-- 设置锚点 -->
  <a href="#anchor">跳转到当前页的锚点</a>
  <a href="/4.3/4.3.html">返回4.3作业列表</a>
  <h1 id="anchor" style="margin-top: 1000px;">我是锚点</h1>

具体划分为链接跳转，下载文件，拨打电话，发送邮箱，设置锚点等
3.列表元素
列表元素分为
<ul><li></li></ul>:无序列表
<ol><li></li></ol>:有序列表
<dl><dt><dd></dd></dt></dl>:自定义列表

代码演示

<body>
  <!-- 无序列表演示 -->
  <h3>我的学习计划</h3>
  <ul>
    <li>课前准备</li>
    <li>课后复习</li>
    <li>作业提交</li>
  </ul>
  <hr />
  <!-- 有序列表演示 -->
  <h3>我的学习计划</h3>
  <ol start="5">
    <li>课前准备</li>
    <li>课后复习</li>
    <li>作业提交</li>
  </ol>
  <hr />
  <!-- 自定义列表 -->
  <dl>
    <dt>html</dt>
    <dd>超文本标记语言</dd>
    <dd>页面是由多个元素组成</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>js</dt>
    <dd>脚本</dd>
  </dl>
</body>

4.表格元素

表格是最重要的数据格式化展示重要工具, 使用频率非常高
表格的数据,存储在由行与列组成的一系列单元格
数据必须存储在单元格元素中
与列表类似, 表格也是由一系列标签来描述
4.1 元素

序号	标签	描述	备注
1	`<table>`	定义表格,	必选
2	`<tbody>`	定义表格主体, 允许定义多次	必选
3	`<tr>`	定义表格中的行,	必选
4	`<th>`	定义表格头部中的单元格,默认加粗居中	必选
5	`<td>`	定义 g 表格 e 主体与底部的的单元格	必选
6	`<caption>`	定义表格标题,	可选
7	`<thead>`	定义表格头格, 只需定义一次	可选
8	`<tfooter>`	定义表格底, 只需定义一次	可选
9	`<col>`	为一个/多个列设置属性,仅限	可选
10	`<colgroup>`	将多个`<col>`元素分组管理	可选

4.2 属性

序号	属性	适用元素	描述
1	`border`	`<table>`	添加表格框
2	`cellpadding`	`<table>`	设置单元格内边距
3	`cellspacing`	`<table>`	设置单元格边框间隙
4	`align`	不限	设置单元格内容水平居中
5	`bgcolor`	不限	设置背景色
6	`width`	不限	设置宽度
7	`height`	不限	设置高度

4.3 代码演示

<body>
    <table
      border="1"
      cellpadding="10"
      cellspacing="0"
      width="500"
      align="center"
    >
      <!-- 第一,第五列没有颜色，继承父级 -->
      <!-- <colgroup bgcolor="lightpink">
        <col />
        <col bgcolor="lightgreen" />
        <col bgcolor="yellow" span="2" />
        <col />
      </colgroup> -->
      <caption style="font-size: 1.5rem;margin-top: 10px;">
        员工信息表
      </caption>
      <thead bgcolor="lightblue">
        <tr>
          <th>部门</th>
          <th>id</th>
          <th>姓名</th>
          <th>职务</th>
          <th>手机</th>
        </tr>
      </thead>
      <!-- 表格1 -->
      <tbody>
        <tr>
          <td rowspan="4" align="center">开发部</td>
          <td>101</td>
          <td>小郭</td>
          <td>霸道总裁</td>
          <td>888</td>
        </tr>
        <tr>
          <!-- <td>开发部</td> -->
          <td>110</td>
          <td>小马哥</td>
          <td>部长</td>
          <td>666</td>
        </tr>
        <tr>
          <!-- <td>开发部</td> -->
          <td>555</td>
          <td>小美</td>
          <td>部长</td>
          <td>222</td>
        </tr>
        <tr>
          <!-- <td>开发部</td> -->
          <td>444</td>
          <td>小刘</td>
          <td>部长</td>
          <td>111</td>
        </tr>
      </tbody>
      <!-- 表格2 -->
      <tbody>
        <tr>
          <td rowspan="4" align="center">销售部</td>
          <td>101</td>
          <td>小郭</td>
          <td>霸道总裁</td>
          <td>888</td>
        </tr>
        <tr>
          <!-- <td>销售部</td> -->
          <td>110</td>
          <td>小马哥</td>
          <td>部长</td>
          <td>666</td>
        </tr>
        <tr>
          <!-- <td>销售部</td> -->
          <td>555</td>
          <td>小美</td>
          <td>部长</td>
          <td>222</td>
        </tr>
        <tr>
          <!-- <td>销售部</td> -->
          <td>444</td>
          <td>小刘</td>
          <td>部长</td>
          <td>111</td>
        </tr>
      </tbody>
      <tfoot>
        <tr bgcolor="wheat">
          <td>备注</td>
          <td colspan="4">所有员工离职必须提前30天提交书面申请</td>
          <!-- <td></td>
          <td></td>
          <td></td> -->
        </tr>
      </tfoot>
    </table>
  </body>

5.表单元素

5.1 初学表单的demo

<body>
    <h3>用户注册</h3>
    <form action="">
      <section>
        <label for="username">用户名：</label>
        <input
          type="text"
          id="username"
          name="username"
          maxlength="20"
          placeholder="不少于6位"
          required
          autofocus
        />
      </section>
      <section>
        <label for="password">密码：</label>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="不少于8位"
          required
          size="10"
        />
      </section>
      <!-- 单选框 -->
      <section>
        <label for="secret">性别：</label>
        <div class="box">
          <input type="radio" name="gender" id="male" value="male" />
          <label for="male">男</label>
          <input type="radio" name="gender" id="female" value="female" />
          <label for="female">女</label>
          <input
            type="radio"
            name="gender"
            id="secret"
            value="secret"
            checked
          />
          <label for="secret">保密</label>
        </div>
      </section>
      <!-- 复选框 -->
      <section>
        <label for="program">兴趣</label>
        <div class="box">
          <input
            type="checkbox"
            name="hobby[]"
            id="game"
            value="game"
            checked
          /><label for="">游戏</label>
          <input
            type="checkbox"
            name="hobby[]"
            id="travel"
            value="travel"
          /><label for="">旅游</label>
          <input
            type="checkbox"
            name="hobby[]"
            id="shoot"
            value="shoot"
          /><label for="">摄影</label>
          <input
            type="checkbox"
            name="hobby[]"
            id="program"
            value="program"
            checked
          /><label for="">编程</label>
        </div>
      </section>
    </form>
  </body>

5.2 具体内容

上文5.1是课堂上老师现场演示的注册表单，包括简单的用户名，密码，性别，和兴趣复选框的功能，下节课将会重点讲解这方面的只是。

6.学习总结

本节课让我熟悉了元素（标签）语义化的优势和作用，加深了对语义化文本元素的使用了解，并且深入了解了链接元素，列表元素，表格的功能和使用，初步了解了表单的作用，熟悉和魔头表单的结构和使用将会对后期的学习带来很大的帮助。

批改老师：

天蓬老师

批改状态：合格

老师批语：域名不错, 演示效果也好

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

字体属性学习总结

2020-04-08 19:31:23

关于链接，列表，表格，表单的入门见解

1.我提交作业的网站https://php520.vip/index.html

2.链接元素

3.列表元素

4.表格元素

4.1 元素

4.2 属性

4.3 代码演示

5.表单元素

5.1 初学表单的demo

5.2 具体内容

6.学习总结