【前端入门】HTML5学习入门笔记_02
程序员文章站
2022-05-10 22:50:49
...
文章目录
一、表格标签
表格标签十分常用
1.1 主要作用
主要用于展示、显示数据,可以使数据显示规整、可读性好。
1.2 表格基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<!--例如:-->
<table>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>李四</td><td>男</td><td>40</td></tr>
<tr><td>张三</td><td>女</td><td>18</td></tr>
</table>
- table标签:声明一个表格
- tr标签:声明一行
- td标签:单元格标签,基本单位
表格标签没有列的概念,而是单元格
1.3 表头单元格标签
table head 表头单元格th标签的文字会居中加粗显示,常用于第一行突出重要性
<table>
<tr><th>表头</th></tr>
</table>
<!--例如-->
<table>
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>李四</td><td>男</td><td>40</td></tr>
<tr><td>张三</td><td>女</td><td>18</td></tr>
</table>
1.4 表格属性
实际开发不常用,以后通过CSS来设置
学习目的:
- 记住英语单词,方便CSS使用
- 直观感受表格形态
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示无边框 |
cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白默认2 像素 |
width | 像素值或百分比 | 规定表格的宽度 |
<!--例如-->
<table align="center" border="1" cellpadding = "20" cellspacing = "0" width = "500">
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>李四</td><td>男</td><td>40</td></tr>
<tr><td>张三</td><td>女</td><td>18</td></tr>
</table>
1.5 表格结构标签
场景:表格非常长
表格结构标签:可将表格分割成头部区域和主体区域
<thead>
...头部<!--必须包含<tr></tr>标签-->
</thead>
<tbody>
...
</tbody>
1.6 合并单元格
把多个单元格合并,只会最简单的就行
1.合并单元格的方式
跨行合并(上下合并):rowspan=“合并单元格的个数”
跨列合并(左右合并):colspan=“合并单元格个数”
2.目标单元格
- 跨行:最上侧单元格为目标单元格,写合并代码
- 跨列:最左侧单元格为目标单元格,写合并代码
3.合并单元格的步骤
-
先确定跨行还是跨列
-
找到目标单元格,写上合并方式=合并单元格的数量 例如:
<td colspan = "2"> </td>
-
删除多余单元格
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!--合并后-->
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
二、列表标签
列表用于布局页面,分为无序列表、有序列表和自定义列表,可以整齐有序的布局页面
2.1 无序列表(重点)
<h4>您最喜欢的食物?</h4>
<ul>
<li>香蕉牛奶</li>
<li>红烧肉</li>
<li>
<p>鲱鱼罐头</p>
<p>榴莲</p>
</li>
</ul>
- ul标签为无序列表里面只能放li标签,li标签为无序列表每一项的容器,li里面可以放任何元素和标签
- 无序列表自带样式属性,实际使用时会用CSS来设置
2.2 有序列表(了解)
<h4>粉丝排行榜</h4>
<ol>
<li>本尊</li>
<li>猪猪侠</li>
</ol>
- 类似于无序列表,但会为每一项添加序号,实际开发中也用CSS来设置其样式属性
2.3 自定义列表(重点)
场景:对属性或名词进行解释和描述,定义列表的列表项前无任何项目符号
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
- dl里只能出现dt或dd
- dl里可以出现一组或多组dt和dd
- dt和dd里可以放任何标签
三、表单标签
表单:顾名思义,收集用户信息,需要用户填写一些内容的东西,例如注册qq号码等表单
3.1 表单的组成
由表单域、表单控件(也称为表单元素)和提示信息三大部分组成
3.2 表单域
- 一个包含表单元素的区域,使用form标签定义
- 作用:把标签范围内的表单元素信息提交给服务器
<form action = "url地址" method="提交方式" name = "表单域名称">
各种表单元素控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get和post |
name | 名称 | 用于指定 表单名称,以区分同一页面中的多个表单域 |
例如:
<form action="demo.php" method="POST" name="name1">
</form>
3.3 表单元素(表单控件)
1.input输入表单元素
用于输入信息、单标签
<input type="属性值" >
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以输入任何文字 value为默认值 -->
<!-- maxlength为限制最大长度 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"><br>
<!-- password 密码 -->
密码:<input type="password" name="pwd"><br/>
<!-- ratio 单选按钮 多个按钮起同一个名字可以实现多选一 value为选该选项传递到后台的值-->
<!-- 单选按钮和复选框可以设置checked属性,当页面打开时默认勾选 -->
性别:男<input type="radio" name="gender" value="man" checked = "checked"> 女 <input type="radio"name="gender" value="woman"><br>
<!-- checkbox 复选框 可以实现多选 -->
爱好:吃饭<input type="checkbox" name="hobby" value="eat"> 睡觉<input type="checkbox" name="hobby" value="sleep"> 打豆豆<input type="checkbox"name="hobby" value="hitdou"><br>
<!-- submit 提交按钮 把表单元素的值发送给后台 -->
<input type="submit" value = "免费注册 ">
<!-- reset 重置按钮,还原表单元素初始默认状态 -->
<input type="reset" value="重置信息"><br>
<!-- button 设置一个普通按钮 后期搭配js使用,启动脚本等功能 -->
<input type="button" value="获取短信验证码"><br>
<!-- file 文件域 用于上传文件 -->
上传头像:<input type="file">
</form>
- name和value是每个表单元素都有的属性值,主要给后台人员使用
- name表单元素的名字,要求单选按钮和复选框要有相同的name值
- checked属性主要针对于单选按钮和复选框,主要作用为打开页面默认选中某个表单元素
- maxlength是限制表单元素最大输入字符数一般较少使用
2.lable标签
lable标签为input元素定义标注(标签)
lable标签用于绑定一个表单元素,当点击lable标签内的文本时,浏览器就会自动将光标转到或者选择对应的表单元素上,增加用户体验
<lable for="sex">男</lable>
<input type="radio" name = "sex" id="sex">
核心:lable标签的for属性要和相关元素的id属性相同
3.select下拉表单元素
同一选项中包含多个选项,可使用select标签控件定义下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
...
</select>
- select里至少包含一个option
- 在option中定义 selected = "selected"时,当前项即为默认选中项
3.textarea文本域元素
当用户输入内容较多的时候,可以使用textarea标签,例如留言板之类的功能
<textarea rows="3" cols="20">
文本内容
</textarea>
- rows设置行 cols设置宽
下一篇: 我还没妹纸高