Day4前端之HTML后篇

最新推荐文章于 2024-07-20 22:13:44 发布

Mr. Lei 　

最新推荐文章于 2024-07-20 22:13:44 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/yl244030424/article/details/120132608

版权

前端全栈专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Day4前端之HTML后篇

一、学习目标
二、表格标签
三、列表标签
四、表单标签
- 4.1为什么要表单
- 4.2表单的组成
五、查阅资料
总结

一、学习目标

1、能够书写表格
2、能够写出无序列表
3、能够写出3~4个常用input表单类型
4、能够写出下拉列表表单
5、能够使用表单元素实现注册页面
6、能够独立查阅W3C文档

二、表格标签

2.1表格的作用

简单来说它不是用来布局页面，而是展示数据，让数据看起来美观整洁。

2.2表格的基本语法

<table>
	<tr>
		<td>文字</td>
	</tr>
</table>

<table> </table>是用于定义表格的标签。
<tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。
<td> </td>用于定义表格中的单元格,必须嵌套在<tr> </tr>标签中。
字母td指表格数据( tabledata ) ,即数据单元格的内容。
注意没有列的概念，取而代之的是td

2.3表头单元格标签

一般位于第一行或第一列，里面文本内容居中加粗显示，用<th>表示，是table head的缩写。突出了重要性！

2.4表格属性

实际开发并不常用，后面会用css设置。也可以先记住。

属性名	属性值	描述
align	left. center. right	规定表格相对周围元素的对齐方式。
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

2.5表格结构标签

为了更好表示表格语义，将表格分割为表格头部区域<head>和表格主体区域<tbody>两大部分,其中tbody存放数据本体
注意两点：这两标签必须在<table>里。<head>里必须有<tr>

2.6合并单元格

1、合并单元格的方式

跨行合并: rowspan= "合并单元格的个数”
跨列合并: colspan=”合并单元格的个数"
2、目标单元格
跨行：最上侧为目标单元格
跨列：最左侧为目标单元格
可理解为以最初始的那个单元格为目标靠拢合并
3、合并单元格的步骤
确定是跨行还是跨列合并
找到目标单元格写上合并方式=合并的单元格数量 <td colspan= "2” > </td>
最后删除多余单元格

 <table align="center" border= "1" cellpadding="10" cellspacing="50" width="500" height=" 249">
 <thead>
        <tr> <th>名字</th> <th>性别</th><th>年龄</th> </tr> 
 </thead>
 <tbody>
        <tr> <td>小红</td><td>女</td><td>16</td> </tr>
 </tbody>
        <tr> <td>小明</td><td>男</td><td>18</td> </tr>
        <tr> <td></td><td colspan="2"></td> </tr>
        <tr> <td rowspan="2"></td><td></td><td></td> </tr>
        <tr> <td></td><td></td> </tr>
 </table>

在这里插入图片描述

三、列表标签

表格用来展示数据，列表用来布局，使整洁、有序

3.1无序列表【较多使用】

<ul>
	<li></li>
	<li> <p></p> </li>
</ul>

特点：各项之间没有顺序级别，并列的。ul中只能嵌套li，不允许在ul中输入其他标签或者文字。li类似一个容器能容纳所有的元素。在实际开发中，会用css重新修饰每个无序选项前的小黑点。

3.2有序列表【较少使用】

<ol>
	<li></li>
	<li> <p></p> </li>
</ol>

特点：ol中只能嵌套li，li里能容纳所有元素。实际开发会修饰序号。

3.3自定义列表

和前面的列表不同，自定义列表使用场景是对术语或者名词进行解释描述。列表项没有符号。比如首页底部的帮助中心、联系我们等，就像一个大哥领着小弟们的感觉。

<dl>
   <dt> 前端 </dt>
   <dd> 解释1 </dd>
   <dd> 解释2 </dd>
</dl>

特点：dl里面只能包含dt或者dd, 这两个数没限制，一般是一个dt有多个dd。dd是并列关系。

四、表单标签

4.1为什么要表单

就是收集用户信息~

4.2表单的组成

表单域：就是这一整块填写数据的区域, <form>用于定义表单域，把域内的元素信息提交给服务器。
```
<form action="url地址" method="提交方式" name="表单域名称"> 表单域 </form>
```
- action="url地址”：用于指定接收并处理表单数据的服务器程序的url地址。
- method=“get/post”：用于设置表单数据的提交方式，取值为get或post
- name=“名称”：命名区分表单域
表单控件（表单元素)：每一项包括下拉、单选多选框、文本框
- input输入表单元素：【<input type=" ">】
  1、type属性是表示这个input的类型是什么，而type类型有：button、file、hidden、image、text、submit、password、reset、radio、checkbox，重点的已标红。其中submit是把元素数据提交到后台，reset则是重置，所以这两常见在一起出现即注册和重置。
  2、name属性用来给表单元素起名，而且要求单选按钮和复选框要有相同的name值，这样才能起到单选效果
  3、value属性和name搭配主要是给后台人员使用也就是key-value。和name一样每个元素都有。而且在type等于文本属性下才能显示出来。
  4、checked属性是规定此input元素首次加载页面时默认被选中，针对单选和复选按钮。
  5、maxlength属性是表示规定输入字段中的字符的最大长度，值是正整数，较少使用。
  6、<label>标签用来提高用户体验，点击整块文字范围就能触发，不用精确点击, for元素与相关元素的id属性相同。
```
性别：
男 <input type="radio"  name=”sex” value="男"  checked=“checked” maxlength=“6”> 
女 <input type="radio"  name=”sex” value="女">
<input type="submit" value="提交">
<label for="xue">B型</ label>
<input type="radio" name="xuexing" id="xue" />
```
- select下拉表单元素：
  - 什么时候用到下拉，就是为了节省页面空间
  - 特点：select中至少包含一对option, 定义selected="selected"就是默认选中
```
<select>
		<option selected="selected">1</option>
 		<option>2</option>
</select>
```
- textarea文本域元素：用在多行输入的评论、留言、反馈模块, cols表示每行字符数，rows表示显示的行数，开发中用不到，有css.
```
		<textarea  rows="3"  cols="20">
				文本内容
		</textarea >
```
- 提示信息：就是灰色的提示文字

五、查阅资料

1、百度
2、W3C
3、runoob

总结

多查多背多敲！

Mr. Lei 　

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day4前端之HTML后篇

Day4前端之HTML后篇一、学习目标二、表格标签2.1表格的作用2.2表格的基本语法2.3表头单元格标签2.4表格属性2.5表格结构标签2.6合并单元格三、列表标签3.1无序列表3.2有序列表3.3自定义列表总结一、学习目标1、能够书写表格2、能够写出无序列表3、能够写出3~4个常用input表单类型4、能够写出下拉列表表单5、能够使用表单元素实现注册页面6、能够独立查阅W3C文档二、表格标签2.1表格的作用简单来说它不是用来布局页面，而是展示数据，让数据看起来美观整洁。2.2表
复制链接

扫一扫