Web开发基础-HTML进阶标签

最新推荐文章于 2024-06-28 09:35:02 发布

7.KM

最新推荐文章于 2024-06-28 09:35:02 发布

阅读量60

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_65773135/article/details/125453789

版权

学习目标：

    •           了解标签手册的使用
   •           熟悉复合标签
   •           熟悉布局标签

学习内容：

任务 1：查询官方手册

可以网页在线查询，也可以下载离线官方手册。将来做自动化测试，如果遇到不认识的标签，查询手册即可。目前使用比较多的是W3Schoolhttps://www.w3school.com.cn/html/html_attributes.asp离线手册。

任务 2：复合标签

复合标签最常见的是表格标签，表格中有行和列，表格可以有标题和表头，表格还可以有边框等属性。

    •           表格 table
   •           行 tr
   •           列 td
   •           表头 th
   •           表格标题 caption
   •           表格属性1：border边框属性、width宽度、align表格对齐方式
   •           表格属性2：colspan跨列合并、rowspan跨行合并

例子1：画一个4行3列的表格

<body>
<!-- 108好汉表格001 tr行  td列-->
<table border="1" width="40%"  align="center" bgcolor="blue">
    <caption> 好汉表1</caption>

<tr>
        <th>芳名</th>
        <th>芳龄</th>
        <th>武力值</th>
    </tr>
    <tr bgcolor="red">
        <td>21</td>
        <td bgcolor="yellow" align="center">22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
    <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
    </tr>
</table>

例子2：表格的行列合并

             表格中的行或列可以通过表格属性来进行合并。
•           表格第二行第二列和第二行第三列合并，colspan跨列合并
      •           表格第三行第一列和第四行第一列合并，rowspan跨行合并
        注意：使用跨列合并和跨行合并会去除掉多余的行或者列

<!-- 108好汉表格002 tr行  td列-->
<table border="1" width="40%"  align="center" bgcolor="blue">
    <caption> 好汉表2</caption>
    <tr>
        <th>芳名</th>
        <th>芳龄</th>
        <th>武力值</th>
    </tr>
    <tr bgcolor="red">
        <td>21</td>
        <!-- colspan="2" 占用两列-->
        <td bgcolor="yellow" align="center" colspan="2">22&23</td>
    </tr>
    <tr>
        <td rowspan="2">31&41</td>
        <td>32</td>
        <td>33</td>
    </tr>
    <tr>
        <td>42</td>
        <td>43</td>
    </tr>
</table>

以上案例中有对颜色进行设置，html中颜色可以用英语单词表示，也可以用十六进制数来表示，比如#000000，一共6位数字，每两位表示一种颜色，分别对应红绿蓝。

任务 3：列表标签+下拉框标签

除了表格标签，复合标签还包含列表标签和下拉框标签等。列表分为无序列表和有序列表，无序列表对应的标签为ul和li，有序列表对应的标签为ol和li。下拉框对应的标签为select 和option。
例子1：两种列表的使用


<ul type="square">
      <li>武松 </li>
      <li>林冲</li>
      <li>李逵</li>
</ul>

<ol type="i">
      <li>宋江 </li>
      <li>扈三娘</li>
      <li>柴进</li>
      <li>鲁智深</li>
      <li>卢俊义</li>
</ol>

例子2：下拉框的使用

<select size="2">
      <option >花容</option>
      <option >燕青</option>
      <option >公孙胜</option>
</select>

任务4：表单标签

表单标签也属于复合标签，表单用于和用户进行交互，接收用户数据，提交给服务器进行处理。表单标签包含form和input等，input对应输入框。

<!--例子：编写一个登录界面
所用标签如下。
1、input标签针对账号输入框、密码输入框和提交按钮（本质是接收用户的点击），name属性用来给服务器区分数据含义。
2、form标签中有个action，用来指定服务器的地址，method对应提交方式，如果是get，表示把提交数据放到地址栏提交，如果是post，表示把提交数据放到协议正文中。
 -->
<form action="http://www.jd.com" method="get">
    账&nbsp;&nbsp;号:<input type="text" name="username"/>
    <br/>
    密&nbsp;&nbsp;码:<input type="password" name="password"/>
    <br/>
    <input type="submit" value="点我登录"/>
</form>

任务5：网页布局标签

网页布局标签
        需求：多人编写小网页，使用布局方式组织起来，变成一张完整网页。使用布局好处是方便分工和网页维护。
常见解决方案：
   •           表格布局（已淘汰）
   •           frame布局，课程中重点学这种，形成对网页布局的宏观认识。
   •           css+div（依赖于css）
   •           vue响应式布局（依赖前端开发js）
        frame布局标签包括frameset标签（框架集合标签：注意 frameset不可以和body标签一起使用！）和frame（框架标签）。每一个frame代表一个小的网页，管理多个frame使用frameset。 frameset的属性包括cols（按列分割的属性）和rows（按行分割的属性）

例子1：列布局网页

例子1：列布局网页
<!--
   注意 frameset不能和body一起使用
   百分比表示25%,25%,25%
    系数表示 *,2*,3* 1/6 2/6 3/6
   注意多个值之间英文逗号隔开
    混合表示 2*,50%,3* 1/2 *2/5 1/2 1/2*3/5
-->
<frameset cols="*,2*,3*">
    <!-- 引用网页方式和引用图片方式路径一致的-->
    <frame src="./aaframe/a.html"/>
    <frame src="./aaframe/b.html"/>
    <frame src="./aaframe/c.html"/>
</frameset>

例子2：行布局网页

例子2：行布局网页
<frameset rows="*,2*,3*">
    <!-- 引用网页方式和引用图片方式路径一致的-->
    <frame src="./aaframe/a.html"/>
    <frame src="./aaframe/b.html"/>
    <frame src="./aaframe/c.html"/>
</frameset>

例子3：上下左中右布局网页（实际就是第二行变三列）


例子3：上下左中右布局网页（实际就是第二行变三列）
<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>我的网页布局</title>
</head>
<!--
  注意frameset不能和body一起使用
  百分比表示25%,25%,25%
   系数表示 *,2*,3* 1/6 2/6 3/6
  注意多个值之间英文逗号隔开
   混合表示 2*,50%,3* 1/2 *2/5 1/2 1/2*3/5
-->
<frameset rows="*,2*,3*">
   <!-- 引用网页方式和引用图片方式路径一致的-->
   <frame src="./aaframe/a.html"/>
   <frameset cols="25%,*,25%">
       <frame src="./aaframe/b.html"/>
       <frame src="./aaframe/d.html"/>
       <frame src="./aaframe/e.html"/>
   </frameset>
   <frame src="./aaframe/c.html"/>
</frameset>
</html>

三、课程总结
通过本课程的学习，主要熟悉复合标签和布局标签的使用，其中复合标签包含表格标签、列表标签、下拉框标签、表单标签等。