当前位置: 首页 > news >正文

Html5前端基本知识整理与回顾下篇

今天我们继续结合发布的Html5基础知识点文档进行复习,希望对大家有所帮助。


目录

列表

无需列表

有序列表

自定义列表

样例

表格

基本属性

​编辑

相关属性

Border

Width

Height

​编辑

表格标题

​编辑

表格单元头

合并单元格

垂直单元格合并

水平单元格合并

一般遵守的步骤

表单标签

各类基础标签

text⽂本框

password密码框

radio单选框

checkbox多选框

file⽂件选择

hidden隐藏域

submit提交按钮

reset重置按钮

button普通按钮

placeholder提示

email类型

number范围

⽇期检查器

search类型

color类型

autocomplete类型允许输入框提供自动完成建议,这些建议来自于元素中的。

最终效果展示

其他补充标签

form标签

下拉菜单

​编辑

文本域

Label标签

使用方法

法一

法二

语义化标签

​编辑

字符实体

结语


列表

无需列表

无需列表的主要对象是ul和li标签,是一个双标签。ul嵌套li,其中ul表示列表整体,li表示其中每⼀项的内容。其中ul只能包含li,li可以包含任何标签。⽆须列表每⼀项前默认显示圆点标识,圆点表示可以⽤CSS改变。

有序列表

有序列表主要由ol和li表示,ol嵌套li,其中ol表示列表整体,li表示每⼀项的内容。有序列表每⼀项前都默认显示序号标识序号标识可以⽤CSS改变。

自定义列表

自定义列表通常在⽹⻚底部导航中使⽤,包含dl,dt,dd三种。

  1. dl表示⾃定义列表的整体,包裹dt、dd标签
  2. dt表示⾃动移列表的主题
  3. dd表示⾃定义列表主题的每⼀项内容

dd前会默认缩进,缩进可以⽤CSS消除,dl中只允许包含dt或dd标签,dt和dd当中随便放。

样例

下面是一段代码展示和具体效果:

<h1>无序列表ul</h1>
<ul><li>点赞</li><li>关注</li><li>收藏</li>
</ul>
<hr> <h1>有序列表ol</h1>
<ol><li>CSDN博主</li><li>PLEASURE</li><li>乐事</li>
</ol>
<hr> <h1>自定义列表dl</h1>
<dl><dt>HTML</dt><dd>超文本标记语言,用于创建网页结构。</dd><dt>CSS</dt><dd>层叠样式表,用于网页的表现形式。</dd><dt>JavaScript</dt><dd>一种脚本语言,用于网页的交互功能。</dd>
</dl>

PS:这些列表标签都是双标签


表格

基本属性

在表格当中,table表示表格整体,可以包裹多个tr,tr表示表格每⾏,可⽤于包裹td,td表示表格单元格,可⽤于包裹内容。

<table border="1"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>张三</td><td>30</td><td>程序员</td></tr><tr><td>李四</td><td>25</td><td>设计师</td></tr><tr><td>王五</td><td>35</td><td>产品经理</td></tr>
</table>

这里的border是我们看到的分割一个一个单元格的边框线,如果删除,那么各个单元格子间就不会有线条,效果如下:

反之,如果我们把数字变大,那么相应的边线也会变大。

相关属性

Border

border属性值为数字,效果是边框的宽度,具体效果在基本属性当中已经跟大家阐述。

Width

width属性值为数字,效果是表格宽度。

Height

height属性值为数字,效果是表格⾼度。

PS:

实际当中更推荐CSS。这三个属性的使⽤⽅法是直接跟在table后⾯,即<table border=" " width=" " height=" ">引号当中写数字即可。具体使用方法如下:

<table border="1" width="600"><tr height="50"><th width="200">姓名</th><th width="100">年龄</th><th width="300">职业</th></tr><tr height="50"><td width="200">张三</td><td width="100">30</td><td width="300">程序员</td></tr><tr height="50"><td width="200">李四</td><td width="100">25</td><td width="300">设计师</td></tr><tr height="50"><td width="200">王五</td><td width="100">35</td><td width="300">产品经理</td></tr>
</table>

表格标题

<caption>表示表格⼤标题,默认在表格顶部居中位置,是双标签。

table border="1" width="600"><caption>这是标题</caption><tr height="50"><th width="200">姓名</th><th width="100">年龄</th><th width="300">职业</th></tr><tr height="50"><td width="200">张三</td><td width="100">30</td><td width="300">程序员</td></tr><tr height="50"><td width="200">李四</td><td width="100">25</td><td width="300">设计师</td></tr><tr height="50"><td width="200">王五</td><td width="100">35</td><td width="300">产品经理</td></tr>
</table>

表格单元头

<th>表示表头单元格,表示⼀列⼩标题并通常⽤于表格最上⾯的第⼀⾏,默认内部⽂字加粗居中,是双标签。可以结合基本属性中的标签使⽤。

合并单元格

垂直单元格合并

垂直⽅向的单元格合并,跨⾏合并使用rowspan,例:<td rowspan="要合并的单元格数量">想要的内容</td>

<table border="1"><caption>跨行</caption><tr><th>姓名</th><th>部门</th><th colspan="2">联系方式</th></tr><tr><td rowspan="3">张三</td><td>技术部</td><td>电话:1234567890</td><td>邮箱:zhangsan@example.com</td></tr><tr><td>职位:高级工程师</td><td></td><td></td></tr><tr><td>入职日期:2020-01-01</td><td></td><td></td></tr>
</table>

水平单元格合并

⽔平⽅向的单元格合并,跨列合并使用colspan,例:<td colspan="要合并的单元格数量">想要的内容</td>

<table border="1"><caption>跨列</caption><tr><th colspan="3">公司年度报告</th></tr><tr><th>季度</th><th>收入</th><th>支出</th></tr><tr><td>第一季度</td><td>200</td><td>150</td></tr><tr><td>第二季度</td><td>250</td><td>180</td></tr><tr><th colspan="2">总计</th><td>880</td></tr>
</table>

一般遵守的步骤

进行合并的三个步骤:

  1. 明确要合并的单元格
  2. 从左上到右下确认需要保留哪⼀个单元格的内容
  3. 跨⾏合并rowspan、跨列合并colspan

注意:不能跨结构标签合并(如th、td、tf等)

表单标签

各类基础标签

这些标签一般都是单标签,用于收集用户输入,它有多种类型,每种类型适用于不同的输入场景。他有如下三个需要注意的事项:

  1. 根据type属性的不同展示不同效果<input type="需要的功能">
  2. ⼀般不换⾏,需要⾃⼰⽤br换⾏
  3. 可以在input标签前使⽤汉字作为提示字在前⾯,在后⾯写就是提示词在后⾯

下面是几种常用的基础标签

text⽂本框

用于接受单行的文本输入,是最基本的输入字段。

<input type="text" id="txtName" name="name" placeholder="请输入您的名字">

password密码框

类似于文本框,但输入的字符会被遮掩,用于保护用户的隐私。

<input type="password" id="pwdPassword" name="password" placeholder="请输入密码">

radio单选框

一组单选按钮中只能选中一个。同一组的单选按钮需要相同的name属性。

<input type="radio" id="optMale" name="gender" value="male">
<label for="optMale">男</label>
<input type="radio" id="optFemale" name="gender" value="female">
<label for="optFemale">女</label>

checkbox多选框

允许多个选项被选中,适合用户需要勾选多个项目的情况。

    <input type="checkbox" id="chkApple" name="fruit" value="apple"><label for="chkApple">苹果</label><input type="checkbox" id="chkBanana" name="fruit" value="banana"><label for="chkBanana">香蕉</label><input type="checkbox" id="chkWatermelon" name="fruit" value="apple"><label for="chkApple">西瓜</label><input type="checkbox" id="chkOrange" name="fruit" value="banana"><label for="chkBanana">橘子</label>

file⽂件选择

让用户从本地文件系统选择一个或多个文件。

<input type="file" id="fileUpload" name="upload" multiple>

hidden隐藏域

在表单中存储数据,但用户不可见,常用于安全令牌或会话ID。

<input type="hidden" id="hidToken" name="token" value="secret-token">

submit提交按钮

当用户点击时,会触发表单的提交事件,将表单数据发送给服务器。

<input type="submit" id="btnSubmit" value="提交">

reset重置按钮

当用户点击时,会清除表单中的所有输入,将表单恢复到初始状态。

<input type="reset" id="btnReset" value="重置">

button普通按钮

与提交按钮类似,但不会提交表单,常用于触发JavaScript函数。

<input type="button" id="btnAction" value="行动">

placeholder提示

为输入框提供一个提示性的文本,当输入框为空时显示。

<input type="text" id="txtEmail" name="email" placeholder="请输入您的电子邮箱">

email类型

专门用于收集电子邮件地址,浏览器会自动验证格式是否正确。

<input type="email" id="txtEmailValid" name="valid_email" placeholder="请输入有效的电子邮箱">

number范围

用于收集数值,可以通过minmax属性限制范围。

<input type="number" id="numAge" name="age" min="18" max="100" value="25">

⽇期检查器

提供一个日期选择器,用户可以选取日期。

<input type="date" id="dob" name="birthdate">

search类型

类似于文本输入,但浏览器可能会提供一个搜索图标和自动完成建议。

<input type="search" id="txtSearch" name="search_query" placeholder="搜索...">

color类型

提供一个颜色选择器,用户可以选取颜色。

<input type="color" id="colorPicker" name="favorite_color" value="#ff0000">

autocomplete类型
允许输入框提供自动完成建议,这些建议来自于<datalist>元素中的<option>

<input type="text" id="txtCity" name="city" list="cities">
<datalist id="cities"><option value="北京"><option value="上海"><option value="广州"><option value="深圳">
</datalist>

最终效果展示

其他补充标签

form标签

action当点击置顶的提交等按钮时把数据发送的地址。

name表单的唯⼀名称。

method制定提交表单时的类型请求:GET请求和POST请求。

datalist为输⼊框提供⼀个下拉列表以供选择,⽀持模糊搜索。

下拉菜单

标签组成:select表示菜单整体,option表示菜单的每一项,可以用selected设置默认选中 默认选中selcet一般跟在option的<>内部。

<form><label for="fruits">请选择你喜欢的水果:</label><select id="fruits" name="fruit"><option value="apple">苹果</option><option value="banana">香蕉</option><option value="cherry">樱桃</option><option value="orange">橙子</option><option value="grape">葡萄</option></select>
</form>

文本域

textarea为网页提供可输入多行文本的表单控件,是双标签。常见属性cols规定了文本域的可见宽度,rows规定了文本域的可见行数。右下角可以拖动改变大小,实际开发中推荐CSS。

Label标签

常用于绑定内容余表单标签的关系,是双标签。

使用方法

法一

把内容(如文本)包裹起来 在表单标签上天界ID属性 用label标签的for属性设置对应的ID属性 例:<input type="radio"> name="sex" id=""><label for="">内容</label>

法二

直接使用label把内容和表单标签包裹 把label标签的for属性删除 <label><input type="radio" name="sex">内容</label>

语义化标签

div标签-一行显示一个,独占一行显示,是双标签,div后面可以连接font-size、color等使用。

span标签-一行显示多个,是双标签。

其余可能会常用的标签有header网页头部、nav网页导航、footer网页底部、aside网页侧边栏、section网页区块、article网页文章。

<div class="container"><h2>产品列表</h2><div class="item"><span>产品编号: 001</span><br><span>产品名称: 高级笔记本</span><br><span>价格: $100</span></div><div class="item"><span>产品编号: 002</span><br><span>产品名称: 设计师鼠标</span><br><span>价格: $50</span></div><div class="item"><span>产品编号: 003</span><br><span>产品名称: 蓝牙耳机</span><br><span>价格: $75</span></div>
</div>

在本案例中,为了各个div和span更加明显,我添加了一些CSS来让他们的得以区分,后续博主也会补充更多CSS的知识点,博主是否能更加勤快的更新,就看大家的点赞收藏了(求求🥺)

字符实体

网页只“认识”一个空格,多个空格“不认识”,所以需要使用字符实体,格式为&对应英文;。常用的有空格&nbsp;

<p>这里没有空格</p>
<p>这里有只按下一次 空格键的空格和很多按下        空格键的空格效果</p>
<p>这里是使用了一次和多次&nbsp;字符实体&nbsp;&nbsp;&nbsp;后的空格效果</p>


结语

今天温故了一些比较常见的标签、表格和列表,希望对大家有所帮助,也希望大家喜欢的话可以留下点赞、关注和收藏,这对我真的很重要,谢谢!

相关文章:

Html5前端基本知识整理与回顾下篇

今天我们继续结合发布的Html5基础知识点文档进行复习&#xff0c;希望对大家有所帮助。 目录 列表 无需列表 有序列表 自定义列表 样例 表格 基本属性 ​编辑 相关属性 Border Width Height ​编辑 表格标题 ​编辑 表格单元头 合并单元格 垂直单元格合并 水…...

vmware 虚拟机扩容 centos 硬盘扩容 kylinos v10扩容

1. 虚拟机先扩容 1.1 关机&#xff0c;并点击系统&#xff0c;让他是点选状态&#xff0c;但是没开机 1.2 右击&#xff0c;点击最下方设置&#xff0c;点击硬盘 1.3 点击扩展磁盘 1.4 选择你需要扩容的大小&#xff0c;数字为总大小 完成提示&#xff1a; 磁盘已成功扩展。您…...

什么样的开放式耳机好用?,五大超强卷王单品推荐!

对于热衷尝试不同耳机类型的小伙伴们而言&#xff0c;经过对佩戴舒适度、音质清晰度及电池续航能力的全面考量&#xff0c;开放式蓝牙耳机因其卓越的平衡性脱颖而出&#xff0c;成为多数人的心头好。其轻巧设计不仅保证了长时间佩戴的舒适感&#xff0c;还兼顾了音质与续航的双…...

java使用poi-tl模版引擎导出word之饼状图生成及循环批量生成饼状图

文章目录 一、单个饼状图生成1.word模版制作2.编写接口完整代码3.导出结果 二、批量生成饼图1.word模版制作2.编写接口完整代码3.导出结果 一、单个饼状图生成 1.word模版制作 在word中创建一个饼状图&#xff0c;点击图表&#xff0c;点击“文本选项”&#xff0c;在可选文字…...

指定版本ceph-common安装

如&#xff0c;安装15.2.13的ceph-common PACKAGE_NAMEceph-common CEPH_VERSION15.2.13 wget -q -O- https://download.ceph.com/keys/release.asc | sudo apt-key add - echo deb http://download.ceph.com/debian-${CEPH_VERSION}/ $(lsb_release -sc) main | sudo tee …...

C++语言特性——关键字(static、volatile、extern、const、mutable、inline)

注意&#xff1a; 本内容为摘抄网上的学习资料&#xff0c;作为个人笔记使用&#xff0c;如有侵权, 立刻删除。 C语言特性 1.关键字 &#xff08;1&#xff09;static static全局变量和普通全局变量 面试高频指数&#xff1a;★★★☆☆ 相同点&#xff1a; 存储方式&…...

在Ubuntu 16.04上安装和配置VNC的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 ###介绍 VNC&#xff0c;即“Virtual Network Computing”&#xff0c;是一种连接系统&#xff0c;允许您使用键盘和鼠标与远程服务器上…...

@RequestBody注解的使用及源码解析

前言 RequestBody 注解是我们进行JavaEE开发&#xff0c;最常见的几个注解之一&#xff0c;这篇博文我们以案例和源码相结合&#xff0c;帮助大家更好的了解 RequestBody 注解 使用案例 1.自定义实体类 Data NoArgsConstructor AllArgsConstructor public class User {priv…...

linux 服务器数据备份 和 mysql 数据迁移

查看域名ip 查看程序所处文件位置 list open files 1、 lsof -i :port 查看端口获取进程 pid 2、lsof -i pid 1、scp 下载服务器文件到本地 security copy protocol 2、导出服务器 mysql 数据库&#xff08;表&#xff09;到本地 mysqldump是MySQL自带的一个实用程序&…...

安防视频监控/云存储/视频汇聚EasyCVR平台播放设备录像不稳定,是什么原因?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;EasyCVR基于云边端一体化架构&#xff0c;具有强大的数据接入、处理及分发能力&#xff0c;可提供7*24小时实时高清视频监控、云端录像、云存储、录像检索与回看、智能告警…...

S32V234平台开发(一)快速使用

快速使用 准备供电复位选择串口通信启动选择显示登陆系统 准备供电 s32v234可以使用两种电源供电 一种是左边电源端子&#xff0c;一种是右边电源适配器(12V 3A) 注意:不要同时使用两种电源同时供电 复位选择 Pressing POR RESET pulls active low EXT_POR signal on S32V2…...

C# 如何防止反编译?C#程序加密混淆保护方法大全

在C#开发中&#xff0c;由于.NET程序集&#xff08;assemblies&#xff09;是基于中间语言&#xff08;Intermediate Language, IL&#xff09;编译的&#xff0c;这些程序集可以被反编译回接近原始源代码的形式。为了保护代码不被轻易反编译&#xff0c;开发者可以采取以下几种…...

企业数字化转型中的低代码开发平台应用:释放创新潜能

随着信息技术的飞速发展&#xff0c;企业数字化转型已成为行业趋势。在这场转型浪潮中&#xff0c;低代码开发平台以其独特的优势&#xff0c;成为众多企业实现快速迭代、高效创新的得力助手。本文将深入探讨低代码开发平台在企业数字化转型中的应用&#xff0c;以及如何帮助企…...

因为目录问题开通的另外一个网站的美化过程

起 其实也不完全是目录&#xff0c;是查找问题过程中看到别人的界面好好看&#xff0c;而且确实那个目录很吸引我…… 然后我在csdn看了半天&#xff0c;看到一个有目录的我赶紧换上&#xff0c;结果并不能显示。而且把原来黑色模式的给搞没有了——它居然要vip了……所以………...

RedHat运维-Ansible自动化运维基础24-寻找问题常用模块

1. ansible.builtin.uri模块的作用是____________________________&#xff1b; 2. ansible.builtin.uri模块的作用是____________________________&#xff1b; 3. ansible.builtin.uri模块的作用是____________________________&#xff1b; 4. 试着用ansible.builtin.uri模块…...

windows USB 设备驱动开发-USB带宽

本文讨论如何仔细管理 USB 带宽的指导。 每个 USB 客户端驱动程序都有责任最大程度地减少其使用的 USB 带宽&#xff0c;并尽快将未使用的带宽返回到可用带宽池。 在这里&#xff0c;我们认为USB 2.0 的速度是480Mbps、12Mbps、1.5Mbps&#xff0c;这分别对应高速、全速、低速…...

哪有什么「历史的垃圾时间」,有的只是你对自己的不诚实

时间不会服从任何人的管理&#xff0c;它只会自顾自地流逝。— 李笑来《把时间当作朋友》 hi&#xff0c;欢迎来到我的杂货铺。 最近有个概念火了&#xff0c;叫做「历史的垃圾时间」。 看了下相关的文章&#xff0c;大概是在宣扬奥地利派经济学家米赛斯关于历史的一段论述&a…...

全志A527 T527 android13支持usb摄像头

1.前言 我们发现usb摄像头在A527 android13上面并不能正常使用,需要支持相关的摄像头。 2.系统节点查看 我们查看系统是否有相关的节点生成,发现/dev/video相关的节点已经生成了。并没有问题,拔插正常。 3.这里我们需要查看系统层是否支持相关的相机, 我们使用命令进行…...

邦芒贴士:做到这8点工作生活中才能少犯错

我们之所以需要重点关注这些问题&#xff0c;就是为了确保自身利益能够最大化。如果大家在平日活动里能避免犯下这些错误&#xff0c;就会发现自己的工作效率将会大幅提升&#xff0c;更不用提生活也会变得愉快了很多。 大家如果曾经从建立待办事项列表中获得了很多好处的话&a…...

代码随想录算法训练营第7天

454.四数相加 题目链接&#xff1a;454. 四数相加 II - 力扣&#xff08;LeetCode&#xff09; 视频/文档链接&#xff1a;代码随想录 (programmercarl.com) 第一想法 遍历数组num1,num2&#xff0c;计算其和出现的数量&#xff0c;放入map集合中&#xff0c;键为和&#xff0…...

苹果开发者取消自动续费

文档&#xff1a;https://support.apple.com/zh-cn/118428 如果没有找到订阅&#xff0c;那就是账号不对 取消订阅后&#xff0c;就不会自动续费了&#xff0c;如果不放心&#xff0c;可以把付款绑定的方式也取消...

Phospho:LLM应用的文本分析利器

今天向大家介绍phospho文本分析平台&#xff0c;专门为大型语言模型&#xff08;LLM&#xff09;应用程序设计。它可以帮助开发者从用户或应用程序的文本消息中检测问题、提取洞见、收集用户反馈&#xff0c;并衡量成功。作为一个开源项目&#xff0c;phospho允许开发者查看和修…...

微深节能 料场堆取料无人操作系统 格雷母线

随着工业自动化的快速发展&#xff0c;料场堆取料作业正逐步向无人化、智能化转型。格雷母线高精度位移检测系统在料场堆取料无人操作系统中的应用&#xff0c;成为这一转型过程中的重要技术突破。本文将详细介绍格雷母线及其在料场堆取料无人操作系统中的应用&#xff0c;并探…...

Invoice OCR

Invoice OCR 发票识别 其他类型ORC&#xff1a; DIPS_YTPC OCR-CSDN博客...

无菌隔离器内操作规范性的验证之气流流型验证-北京中邦兴业

无菌隔离器在制药行业的使用愈加广泛&#xff0c;但已有的研究更多地聚焦于设计布局、物料状态等方面&#xff0c;对人员操作因素的影响方面关注较少。以冻干制剂生产车间为例&#xff0c;设计了一系列合理的无菌隔离器内干预操作&#xff0c;并在操作人员实行干预操作的基础上…...

【YOLOv8系列】(一)YOLOv8介绍:实时目标检测的最新突破

目录 引言 背景与发展历程 YOLOv8架构设计 1. 改进的特征提取网络 2. 多尺度特征融合 3. 新的激活函数 4. Attention机制 模型训练与优化 性能评估 应用案例 目标检测 图像分割 图像分类 姿势估计 旋转框检测&#xff08;OBB&#xff09; 优势与挑战 优势&…...

如何视频提取字幕?推荐5款视频字幕提取软件

#7月份我的同事一个个消失了#&#xff0c;这不仅是一个话题标签&#xff0c;更是许多公司面临的现实写照。 在人手紧缺的夏日&#xff0c;如何提高工作效率成为当务之急。特别是对于需要处理视频内容的团队&#xff0c;一款能够快速提取字幕的软件显得尤为重要。 下面&#x…...

独孤思维:副业项目实操3天出单了

01 不要吐槽项目不行&#xff0c;带队老师不行。 有的人能从项目赚到钱&#xff0c;有的人能够跑通项目。 就意味着项目本身没错。 而推卸责任的你&#xff0c;不行。 远的不说&#xff0c;就拿图书项目为例。 为什么做得好的学员&#xff0c;三天就能出单。 有的为什么…...

包装器 std::function

使用前&#xff0c;包头文件&#xff1a;#include <functional> std::function 是 C标准库 中的一个通用函数包装器&#xff1b; 它可以储存、复制、调用任何可调用的对象&#xff0c;包括&#xff1a;函数指针、成员函数、绑定的成员函数、lambda表达式、仿函数等。 1…...

Java | Leetcode Java题解之第219题存在重复元素II

题目&#xff1a; 题解&#xff1a; class Solution {public boolean containsNearbyDuplicate(int[] nums, int k) {Set<Integer> set new HashSet<Integer>();int length nums.length;for (int i 0; i < length; i) {if (i > k) {set.remove(nums[i - …...