HTML基础知识(二)--列表,表格及表单

1. 列表标签 展示数据

1.1.1 列表应用场景

问题1:列表的应用场景?

答:在网页中展示关联性的内容, 例如:新闻列表. 排行榜 网站首页底部导航.

问题2:列表的特点是什么?学习几种列表?

答:

• 整齐 有序的展示数据.

• 三种,无序列表,有序列表,自定义列表.1.1.2. 小结

1.1.2 无序列表

应用场景:在网页中展示一组无顺序之分的列表,如:新闻列表

问题1:无序列表由几个标签组成？分别表示什么？

答:

• 2个标签

• ul标签:表示无序列表

• li标签:表示列表的每一项

问题2:无序列表标签的嵌套规范是什么？

 答:

• ul标签中只允许嵌套li标签

• li标签中可以嵌套任意元素及内容

示例: 

<ul></ul>	ul表示无序列表 用于包含li标签
<li></li>	li表示列表的每一项
<ul>
         <li>列表项</li>
         <li>列表项</li>
         <li>列表项</li>
</ul>
<!-- 注意事项 -->
ul标签中只允许包含li标签  
li标签可以包含任意内容

1.1.3 有序列表

应用场景:在网页中表示一组有顺序之分的列表，如：排行榜。

问题1:有序列表由几个标签组成？分别表示什么？

答:

• 2个标签

• ol标签:表示无序列表

• li标签:表示列表的每一项

问题2:有序列表标签的嵌套规范是什么？

答:

• ol标签中只允许嵌套li标签

• li标签中可以嵌套任意元素及内容

示例:

<ol></ol>	表示无序列表 用于包含li标签
<li></li>	表示列表的每一项
<ol>
         <li>列表项1</li>
         <li>列表项2</li>
         <li>列表项3</li>
 </ol>
<!-- 注意事项 -->
ol标签中只允许包含li标签
li标签可以包含任意内容

 

1.1.4 自定义列表

应用场景:在网页的底部导航中通常会使用自定义列表实现

问题1:自定义列表由几个标签组成？分别表示什么？

答:

• 3个标签组成

• dl标签:表示自定义列表

• dt标签:表示列表主题

• dd标签:表示列表的每一项内容

问题2：自定义列表标签的嵌套规范是什么？

答:

• dl标签中只允许包含dt/dd标签

• dt/dd标签可以包含任意内容

 示例:

自定义列表有三组标签: 
<dl></dl>     dl表示自定义列表 用于包含dt/dd标签
<dt></dt>     dt表示列表主题
<dd></dd>     dd表示列表的每一项内容
语法：
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
</dl>

2. 表格标签 展示数据

2.1.1 表格的基本标签

应用场景:以行+列的方式整齐的展示数据, 例如:股票价格 学生成绩表

问题1:简单表格由几个标签组成?分别表示什么?

答:

• 3个标签组成

• table标签:表示表格整体

• tr标签:表示每行

• td标签:表示每列(单元格)

问题2:表格标签的嵌套规范是什么?

答:

• table标签包含tr,tr标签包含td;

• etabl >tr> td``etabl >tr> td

示例:

表格标签：<table></table>  	定义表格标签 用于包裹多个tr
表格一行：<tr></tr> 			用于定义表格中的行，用于包裹td,必须嵌套在 <table> </table>标签中。
表格一列：<td></td> 			用于定义表格中的列（单元格），必须嵌套在<tr></tr>标签中。
<table>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
        ...
    </tr>
    ...
</table>

 

2.1.2 表格相关属性

应用场景:设置表格基本展示效果

问题1:表格设置边框用什么属性?

问题2:表格设置宽高用什么属性?

属性名	属性值	描述
border	数值	设置表格边框
align	left , center, right	设置对齐方式
width	数值	设置宽度
height	数值	设置高度
cellspacing	数值	单元格与单元格的距离,默认2像素
cellpadding	数值	单元格内容到单元格边框的距离,默认1像素

以上标签的属性值了解即可,实际开发时针对样式效果推荐使用css设置

2.1.3表格标题和表头单元格标签

应用场景:在表格中表示整体大标题和一列小标题

问题1:表格的标题使用什么标签？书写在什么位置？

答:

• caption标签

• 书写在table标签内部

问题2:表头单元格使用什么标签? 书写在什么位置?

答:

• th标签,位于表格的第一行第一列小标题,默认居中加粗效果.

• 书写在tr标签内部（用于替换td标签).

示例: 

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="0">
     <caption><h3>学生信息表</h3></caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>女</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>17</td>
            <td>男</td>
        </tr>
        <tr>
            <td>吴签</td>
            <td>18</td>
            <td>男</td>
        </tr>
    	 <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

 

2.1.4 表格的结构标签

应用场景:让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

 

 

问题1:表格的结构标签分别有哪些？表示什么含义？

答:

• thead：表格头部

• tbody：表格主体

• tfoot：表格底部

问题2:表格结构标签书写在什么位置？

答:

• 表格结构标签写在table标签内部

• 表格结构标签内部用于包裹tr标签

• 表格的结构标签可以省略

2.1.5 合并单元格

应用场景:将水平或垂直多个单元格合并成一个单元格

问题1:合并单元格有那两种方式?

答:

• rowspan：跨行合并→垂直方向合并

• colspan：跨列合并→水平方向合并

问题2:合并单元格的步骤是什么？

答:

1. 明确合并方式(跨行/跨列)

2. 通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他单元格 • 左右合并→只保留最左的，删除其他单元格

3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan） • rowspan：跨行合并→垂直方向合并 • colspan：跨列合并→水平方向合并

问题3:可以跨结构标签合并单元格吗?

答:不能跨结构合并

 

3. 表单标签form 搜集数据

3.1.1 input系列标签

应用场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

问题1：input 标签是单标签还是双标签？

答:单边标签

问题2：input标签的type属性的取值有几个？具体有哪些？

答:8个 input标签可以通过type属性值的不同，展示不同效果

 

input 标签的基本语法：

<input type="属性值" />

 

问题1：提示用户输入内容的文本用哪个属性？

答:placeholder属性

问题2：哪一个属性可以控制当前表单控件的含义？

答:name属性

问题3：单选框如何实现单选一的效果？

答:设置相同的name属性值

问题4：设置默认选中某个单选或复选框，如何实现？

答:checked=checked或者checked

问题5：文件上传用哪个属性,多文件选择用哪个属性？

答:file属性 multiple属性

3.1.1.2 input标签的其它属性介绍

属性	说明
placeholder	占位符，提示用户输入内容的文本
name	名称，当前input控件的含义
value	用户输入的内容，提交之后会发送给后端服务器
checked	默认选中某个单选或复选框
multiple	多文件上传

注意事项：同一组单选框或复选框，name 属性的值保持一致。

案例:

 <form action="">
        <!-- 1、文本框：text（type属性的默认值） -->
        昵称：<input type="text" placeholder="请输入您的昵称"><br>
        <!-- 2、密码框：password -->
        密码：<input type="password" placeholder="请输入您的密码"><br>
        <!-- 3、单选框：radio  必须设置相同的name属性才可以实现单选效果-->
        性别：<input type="radio" name="sex" checked>男
        <input type="radio" name="sex">女<br><br>
        <!-- 4、多选框：checkbox -->
        爱好：<input type="checkbox" checked>敲代码
        <input type="checkbox" checked>熬夜
        <input type="checkbox">掉头发<br><br>
        <!-- 5、文件选择：file -->
        <input type="file" multiple><br><br>
        <!-- 按钮 -->
        <!-- 1、submit：提交按钮 -->
        <input type="submit">
        <!-- 2、reset：重置按钮 -->
        <input type="reset">
        <!-- 3、button：普通按钮 -->
        <input type="button" value="普通按钮">
    </form>

 

3.1.2 button按钮标签

应用场景：在网页中显示用户点击的按钮

问题1：button按钮是单边标签还是双边标签?

答:双边标签

问题2：button按钮的type属性有几个？分别是什么？

答:

• 3个

• submit:提交按钮

• reset：重置按

• button：普通按钮，后期搭配JavaScript进行使用。

问题3：谷歌浏览器中button默认是哪个按钮？

答:提交按钮

 昵称：<input type="text" placeholder="请输入您的昵称"><br><br>
    <!-- 提交按钮 -->
    <button type="submit">button提交按钮</button>
    <!-- 重置按钮 -->
    <button type="reset">button重置按钮</button>
    <!-- 普通按钮 -->
    <button type="button">button普通按钮</button>

---

 

3.1.3 select下拉菜单标签

应用场景：在网页中提供多个选择项的下拉菜单表单控件

问题1：下拉菜单的标签有几个？分别代表什么含义？

答:

• 2个

• select标签

• option标签

问题2：默认选中某一个选项，使用哪一个属性?

答:selected=selected 或 selected

示例:

籍&nbsp;贯：<select name="home">
  <option>武汉</option>
  <option>上海</option>
   <option>深圳</option>
  <option selected>火星</option>
</select>

 

3.1.4 textarea文本域标签

应用场景：在网页中可以输入多行文本的表单控件 例如：留言板 评论。

问题1：哪个标签设置文本域?单边标签还是双边标签？

答:textarea;双边标签

问题2：实际开发文本域样式推荐使用谁进行设置？

答:推荐使用CSS进行设置

示例:

<textarea cols="60" rows="6">我是帅哥</textarea>

3.1.5 label标签

应用场景：常用于绑定内容与表单标签的关系，增加点击范围。

问题1：label标签有什么作用？单边标签还是双边标签？

答:增加点击范围，提高用户体验。双边标签

问题2：label标签使用方法有几种？，使用步骤分别是什么？

答:

2种

• 方式一：

  1. 使用label标签把内容（如：文本）包裹起来

  2. 在表单控件标签上添加id属性

  3. 在label标签的for属性中设置对应的id属性值，for属性和id属性保持一致。

• 方式二：

  1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来

  2. 需要把label标签的for属性删除即可

示例:

 <!-- 第一种 -->
爱好:
  <input type="checkbox" id="one"><label for="one">敲代码</label>
  <!-- 第二种 -->
  <label>
    <input type="checkbox">泡妞
  </label>

4. 语义化标签

4.1.1 无语义化标签

应用场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签。

问题1：常用于布局无语义化标签有哪两个？各自的特点有哪些？

答:

• 2个

• div标签：一行只显示一个（独占一行）

• span标签：一行可以显示多个

 

4.1.1 有语义化标签

应用场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用.移动端使用较多。

HTML5 的新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持

问题1：常见有语义的布局标签有哪些？

 示例:

  <header>网页的头部</header>
  <nav>网页的导航</nav>
  <footer>网页的底部</footer>
  <aside>网页的侧边栏</aside>
  <section>网页的区块</section>
  <article>网页的文章</article>

 

5. 字符实体

应用场景：在网页中展示特殊符号效果时，需要使用字符实体替代.

 

 问题1：前端工程师一般记住几个特殊符号？分别是什么？

 答:

• 3个

1. 空格的字符实体是： 

2. 大于号的字符实体是:>

3. 小于号的字符实体是:<