首页 前端知识 HTML5学习(三)

HTML5学习(三)

2024-05-26 01:05:43 前端知识 前端哥 404 166 我要收藏

w3school 在线教程

1. 表格标签

【作用】表格用来显示展示数据,可读性好。

【基本语法】

  1. <table></table>定义表格标签
  2. <tr></tr>定义表格中的行,嵌套在table标签里
  3. <td></td>定义单元格,嵌套在tr标签里

2. 表头单元格标签

文本加粗居中显示,位于表格第一行或者第一列

<th></th>标签表示表头部分 

3. 表格属性(了解)

后面会通过CSS来设置 ;属性需要写到table标签里面

 4. 表格结构标签

【作用】将表格分成头部和主体两个部分

<thead>表示头部区域,内部必须要有<tr>,<tbody>表示主体区域,放数据本体。这两个标签都放在<table>里。

5. 合并单元格

【作用】把多个单元格合并成一个

【方式】

  • 跨行合并:rowspan = "合并单元格的数量"
  • 跨列合并:colspan = "合并单元格的数量"

【目标单元格】

  • 跨行:最上侧为目标单元格,写合并的代码
  • 跨列:最左侧为目标单元格

6. 列表标签

【作用】布局,整齐、有序

【类别】无序、有序、自定义列表

7. 无序列表

<ul>表示项目中的无序列表,<li>定义列表项

【注】

  • 无序列表是没有顺序的,各项是并列的
  • ul标签里只能放li标签
  • li标签里可以放任何元素

8. 有序列表(理解)

<ol>定义有序列表,列表项还是<li>

【注】

  • ol标签里只能放li标签
  • li标签里可以放任何元素

9. 自定义列表(重点)

【场景】通常对术语或者名词进行描述,项前面没有符号

【语法】<dl>定义列表,<dt>定义项目/名字,<dd>定义每一个项目/名字。语法如下:

【注】

  • <dl>标签里只能放<dt>和<dd>标签
  • <dt>和<dd>没有数量限制,通常是一个dt对应多个dd

10. 表单标签

【作用】收集用户信息,跟用户交互

【组成】表达域,表达控件,提示信息

11. 表单域

<form>定义表单域,将信息提供给服务器,语法如下:

目前只需要写上form标签

12. 表单控件--input输入表单元素

<input>标签用于收集用户信息,包含一个type属性,不同的属性值指定不同的控件类型

<input>是单标签

【注】

  • 单选按钮/复选按钮要有相同的name属性
  • name和value属性是每个表单都有的属性,主要给后台人员看
  • checked一打开就默认选中元素,主要针对按钮

13. <label>标签

<label>用于绑定一个表单元素,当点击标签内的文本时,光标就能定位到对应的表单元素上,增加用户体验。语法如下:

【注】label的for属性要与对应元素的id属性相同

14. 表单控件--select下拉表单元素

定义下拉列表,有多个选择,也可以节省空间。语法如下:

【注】

  • select里至少要包括一个option
  • 在option里定义selected=selected,默认为选中状态

15. 表单控件--textarea文本域表单元素

当输入内容较多的时候,需要使用文本域。<textarea>定义多行输入的控件,语法如下:

cols是每行的字符数,rows是行数。开发中用CSS改变大小 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9607.html
标签
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!