【HTML5学习笔记2】html标签(下)

1表格标签

1.1表格作用

显示数据

1.2基本语法

复制代码
<table>
  <tr> 一行
    <td>单元格1</td>
  </tr>
</table>

1.3表头单元格标签

表头单元格会加粗并且居中

复制代码
<table>
  <tr> 一行
    <th>单元格1</th>
  </tr>
</table>

1.4表格属性

表格外观 ,但是一般都是css来实现

复制代码
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
</table>

align表格位置

border边框粗细

cellpadding 文字与表格间距

cellspacing 单元格间距

1.5表格结构标签

结构更清晰

<thead></thead>标签表格的头部区域

<tbody></tbody>标签表格的主体区域

在<table></table>之间

1.6合并单元格

合并步骤:跨行还是跨列、<td colspan="2"></td>、删除多余单元格

1)合并单元格

跨行rowspan="合并单元格个数"

跨列colspan="合并单元格个数"

2)目标单元格

跨行:写在最上侧单元格

跨列:写在最左侧单元格

2列表标签

列表用来布局,包括有序、无序、自定义

2.1无序列表(重点ul -unorderlable

复制代码
<ul>
  <li></li>
</ul>

<ul>里面只能放<li></li>,但是<li></li>里面可以放任何元素及标签

有自己的样式属性,但是我们会用css来设置

用的非常多

2.2有序列表(理解ol-orderlable

复制代码
<ol>
  <li></li>
</ol>

<ol>里面只能放<li></li>,但是<li></li>里面可以放任何元素及标签

2.3自定义列表dl-definelable

复制代码
<dl>
  <dt> 1</dt>
  <dd>0</dd>
</dl>

<dl>中只能有<dt><dd>

<dt><dd>一般没有数量限制,一般一个<dt>对应多个<dd>

3表单标签

收集用户信息

表单域包含表单空间、提示信息

3.1表单域

<form>

复制代码
<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素
</form>

3.4表单控件

(1)<input>表单元素

用于收集用户信息,type属性设置不同的属性值来指定不同的控件类型

<input type="属性值" />

其他属性

总结:

1)一打开网页就显示文字:value="请输入用户名"

2)区分不同的表单元素:name 是表单元素的名字,要求属于一组的单选按钮或复选框要有相同的name值

3)按钮默认选中:checked=checked

4)input表单元素展示不同的形态:type属性 text、radio、checkbox等等

(2)<lable>标签

不用必须点击小按钮 点击文本区域也可以选中,浏览器自动将焦点(光标)转到对应的表单元素,增加用户体验

复制代码
<label for="sex">男</label>
<input type="radio" name="sex" id ="sex">

<label>标签中的for属性要和相关元素的id属性相同

(3)<select>下拉表单元素

下拉菜单 折叠 节约空间,至少包含一对option

默认选择selected=selected

复制代码
<select>
  <option>选项1</option>
  <option>选项1</option>
  <option>选项1</option>
</select>

(4)textarea文本域

大号文本框,留言板、评论、、

复制代码
<textarea rows="3" cols="20">
  文本内容
</textarea>

rows="3" cols="20" 三行 每行20字 实际开发中不会用用css来改变大小

相关推荐
excel10 分钟前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放11 分钟前
Python基础语法练习题(73)
java·前端·python
风骏时光牛马1 小时前
面向复杂场景的大模型应用落地与能力优化实践
前端
小小善后师1 小时前
我做了个病历归档小程序,被 AI 识别的"最后一公里"狠狠上了一课
前端
H_Lisa1 小时前
我用 Express 写了个 MCP,Claude 直接调用我的 API 了
前端
白山编程大哥1 小时前
接口幂等性是什么?如何设计?
笔记
IT_陈寒1 小时前
React的useEffect依赖数组把我坑惨了
前端·人工智能·后端
ACP广源盛139246256731 小时前
6 盘位存储扩展方案选型笔记:YLB3116 @ACP评估记录
笔记·硬件架构·硬件工程·国产芯片
小李不想当小白1 小时前
SPI通信外设与W25Q64 (硬件SPI)(STM32标准库学习笔记)
笔记·stm32·单片机·嵌入式硬件·学习·嵌入式
兰亭妙微UI设计公司2 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js