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范围

用于收集数值，可以通过min和max属性限制范围。

<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>

结语

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/788846.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

实践致知第12享：如何新建一个Word并设置格式

实践致知第12享：如何新建一个Word并设置格式

一、背景需求 小姑电话说&#xff1a;要新建一个Word文档&#xff0c;并将每段的首行设置空2格。 二、解决方案 1、在电脑桌面上空白地方&#xff0c;点击鼠标右键&#xff0c;在下拉的功能框中选择“DOC文档”或“DOCX文档”都可以&#xff0c;如下图所示。 之后&#xff0…
阅读更多...
npm install失败，数据源过期

npm install失败，数据源过期

npm install时报错&#xff1a;“Unexpected token &#xff1c; in JSON at position 0 while parsing near ‘&#xff1c;!DOCTYPE html&#xff1e;” 执行Vue2项目安装时&#xff0c;出现报错了&#xff0c;显示ERROr: **npm ERR! Unexpected token < in JSON at posi…
阅读更多...
58、基于径向基神经网络的曲线拟合(matlab)

58、基于径向基神经网络的曲线拟合(matlab)

1、基于径向基神经网络的曲线拟合简介及原理 1&#xff09;原理简介 基于径向基神经网络&#xff08;Radial Basis Function Neural Network, RBFNN&#xff09;的曲线拟合是一种常用的非线性拟合方法&#xff0c;通过在输入空间中使用径向基函数对数据进行处理&#xff0c;实…
阅读更多...
cesium 雷达扫描

cesium 雷达扫描

cesium 雷达扫描 （下面附有源码） 实现思路 1、通过改变圆型材质来实现效果， 2、用了模运算和步进函数（step）来创建一个重复的圆形图案 3、当纹理坐标st落在垂直或水平的中心线上时，该代码将改变透明度和颜色，以突出显示这些线 示例代码 <!DOCTYPE html> <ht…
阅读更多...
完美解决windows开机时，系统提示此windows副本不是正版的正确解决方法，亲测有效！！！

完美解决windows开机时，系统提示此windows副本不是正版的正确解决方法，亲测有效！！！

完美解决windows开机时&#xff0c;系统提示此windows副本不是正版的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 完美解决windows开机时&#xff0c;系统提示此windows副本不是正版的正确解决方法&#xff0c;亲测有效&#xff01;&#…
阅读更多...
二分查找3

二分查找3

1. 有序数组中的单一元素&#xff08;540&#xff09; 题目描述&#xff1a; 算法原理&#xff1a; 二分查找解题关键就在于去找到数组的二段性&#xff0c;这里数组的二段性是从单个数字a开始出现然后分隔出来的&#xff0c;如果mid落入左半部分那么当mid为偶数时nums[mid1]…
阅读更多...
来聊聊Redis持久化AOF管道通信的设计

来聊聊Redis持久化AOF管道通信的设计

写在文章开头 最近遇到很多烦心事&#xff0c;希望通过技术来得以放松&#xff0c;今天这篇文章笔者希望会通过源码的方式分析一下AOF如何通过Linux父子进程管道通信的方式保证进行AOF异步重写时还能实时接收用户处理的指令生成的AOF字符串&#xff0c;从而保证尽可能的可靠性…
阅读更多...
contentwindow、contentDocument、Js操纵iframe

contentwindow、contentDocument、Js操纵iframe

阅读更多...
window 安装 openssl

window 安装 openssl

文章目录 前言window 安装 openssl1. 下载2. 安装3. 配置环境变量4. 测试 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话…
阅读更多...
LVS集群及其它的NAT模式

LVS集群及其它的NAT模式

1.lvs集群作用&#xff1a;是linux的内核层面实现负载均衡的软件&#xff1b;将多个后端服务器组成一个高可用、高性能的服务器的集群&#xff0c;通过负载均衡的算法将客户端的请求分发到后端的服务器上&#xff0c;通过这种方式实现高可用和负载均衡。 2.集群和分布式&#…
阅读更多...
Mattermost：一个强大的开源协作平台

Mattermost：一个强大的开源协作平台

Mattermost是一个强大的开源协作平台&#xff0c;基于云原生架构&#xff0c;为企业级用户提供安全、可扩展且自托管的消息传递解决方案。 一、平台特点 开源与定制性&#xff1a;Mattermost是一个开源项目&#xff0c;用户可以根据自身需求定制界面、添加功能或扩展其功能&am…
阅读更多...
百川工作手机实现销售管理微信监控系统

百川工作手机实现销售管理微信监控系统

在瞬息万变的商业战场中&#xff0c;每一分效率的提升都是企业制胜的关键。传统销售管理模式已难以满足现代企业对精准、高效、合规的迫切需求。今天&#xff0c;让我们一同探索如何利用工作手机这一创新工具&#xff0c;为您的销售团队装上智能翅膀&#xff0c;开启销售管理的…
阅读更多...
计算云服务3

计算云服务3

第三章 镜像服务 什么是镜像服务(IMS) 镜像服务(lmage ManagementService&#xff0c;IMS)提供镜像的生命周期管理能力。用户可以灵活地使用公共镜像、私有镜像或共享镜像申请弹性云服务器和裸金属服务器。同时&#xff0c;用户还能通过已有的云服务器或使用外部镜像文件创建…
阅读更多...
【C++报错已解决】Invalid Use of ‘void’ Expression

【C++报错已解决】Invalid Use of ‘void’ Expression

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法2.1 方法一&#xff1a;调整函数返回类型方法二…
阅读更多...
ArcGIS的智慧与情怀

ArcGIS的智慧与情怀

初识ArcGIS 在这个信息化的时代&#xff0c;ArcGIS如同一位智者&#xff0c;静静地伫立在地理信息系统的巅峰。初识它时&#xff0c;我仿佛走进了一片未知的领域&#xff0c;心中充满了好奇与期待。ArcGIS&#xff0c;这款专业的地理信息系统软件&#xff0c;凭借其强大的功能…
阅读更多...
【Mutilism NPN三极管驱动P-MOS】2022-4-2

【Mutilism NPN三极管驱动P-MOS】2022-4-2

缘由NPN三极管驱动P-MOS异常导通-硬件开发-CSDN问答 有电感性负载应该接反向吸收泻放二极管才能保证安全&#xff1b; 同时建议修改电路使得工作更安全可靠&#xff0c;取消下拉电阻R2&#xff0c;R3用小于100欧姆左右串联一个发光管&#xff0c;这样既可可靠工作也能观察IO输出…
阅读更多...
Labview_Workers5.0 学习笔记

Labview_Workers5.0 学习笔记

1.Local Request 个人理解该类型的请求针对自身的&#xff0c;由EHL或者MHL到该vi的MHL中。 使用快速放置快捷键"Ctrl9"创建方法如下&#xff1a; 创建后的API接口命名均为rql开头&#xff0c;并且在所选main.vi中的MHL创建对应的条件分支。 此时使用该API函数就…
阅读更多...
activemq-CVE-2022-41678

activemq-CVE-2022-41678

Apache ActiveMQ Jolokia 后台远程代码执行漏洞 Apache ActiveMQ在5.16.5&#xff0c;5.17.3版本及以前&#xff0c;后台Jolokia存在一处任意文件写入导致的远程代码执行漏洞。 启动环境 admin/admin 方法一&#xff1a;利用poc 这个方法受到ActiveMQ版本的限制&#xff0c;因…
阅读更多...
XTuner 微调 LLM：1.8B， 部署

XTuner 微调 LLM：1.8B， 部署

扫码立刻参与白嫖A100&#xff0c;书生大模型微调部署学习活动。亲测有效 内容来源&#xff1a;Tutorial/xtuner/personal_assistant_document.md at camp2 InternLM/Tutorial GitHubLLM Tutorial. Contribute to InternLM/Tutorial development by creating an account on G…
阅读更多...
【Unity 实用技巧】为游戏截图添加自定义水印LOGO

【Unity 实用技巧】为游戏截图添加自定义水印LOGO

1. 前言 大家好&#xff0c;我是Mark。在Unity开发中&#xff0c;屏幕截图功能是一项常用的功能&#xff0c;它常用于游戏分享而默认的截图往往缺乏辨识度。本文将介绍如何在Unity中实现带有自定义LOGO的屏幕截图&#xff0c;话不多说开搞~ 2. 最终效果 3. 示例代码 代码比较…
阅读更多...
最新文章

Copyright @ 2022~2023