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

html进阶语法

html进阶

列表、表格、表单

目标:掌握嵌套关系标签的写法,使用列表标签布局网页

01-列表

作用:布局内容排列整齐的区域。

列表分类:无序列表、有序列表、定义列表。

无序列表

作用:布局排列整齐的不需要规定顺序的区域。

标签:ul 嵌套 li,ul 是无序列表,li 是列表条目。

<ul><li>第一项</li><li>第二项</li><li>第三项</li>……
</ul>

注意事项:

  • ul 标签里面只能包裹 li 标签

  • li 标签里面可以包裹任何内容

有序列表

作用:布局排列整齐的需要规定顺序的区域。

标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。

<ol><li>第一项</li><li>第二项</li><li>第三项</li>……
</ol>

注意事项:

  • ol 标签里面只能包裹 li 标签

  • li 标签里面可以包裹任何内容

定义列表

标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情。

<dl><dt>列表标题</dt><dd>列表描述 / 详情</dd>……
</dl>

注意事项:

  • dl 里面只能包含dt 和 dd

  • dt 和 dd 里面可以包含任何内容

02-表格

网页中的表格与 Excel 表格类似,用来展示数据。

基本使用

标签:table 嵌套 tr,tr 嵌套 td / th。

提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。

<table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>199</td></tr><tr>/td>    <td>100<<td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr>
</table>

表格结构标签-了解

作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。

caption是表格的标题,双标签.使用表格时注意加上.

提示:表格结构标签可以省略。

合并单元格

作用:将多个单元格合并成一个单元格,以合并同类信息。

合并单元格的步骤:

  1. 明确合并的目标

  2. 保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量

    • 跨行合并,保留最上单元格,添加属性 rowspan

    • 跨列合并,保留最左单元格,添加属性 colspan

  3. 删除其他单元格

<table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="3">全市第一</td><!-- <td>全市第一</td><td>全市第一</td> --></tr></tfoot>
</table>

注意:不能跨表格结构标签合并单元格(thead、tbody、tfoot)。

03-表单

作用:收集用户信息。

使用场景:

  • 登录页面

  • 注册页面

  • 搜索区域

input 标签

input 标签 type 属性值不同,则功能不同。

<input type="..." >

input 标签占位文本

占位文本:提示信息,文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

单选框

常用属性

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

提示:name 属性值自定义。

上传文件

默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。

<input type="file" multiple>

多选框

多选框也叫复选框,默认选中:checked。

<input type="checkbox" checked> 敲前端代码

下拉菜单

标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。

<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option>
</select>

默认显示第一项,selected 属性实现默认选中功能。

文本域

作用:多行输入文本的表单控件。

<textarea>默认提示文字</textarea>

注意点:

  • 实际开发中,使用 CSS 设置 文本域的尺寸

  • 实际开发中,一般禁用右下角的拖拽功能

label 标签

作用:网页中,某个标签的说明文本。

经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。

  • 写法一

    • label 标签只包裹内容,不包裹表单控件

    • 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>
  • 写法二:使用 label 标签包裹文字和表单控件,不需要属性

<label><input type="radio"> 女</label>

提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮

<button type="">按钮</button>

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">用户名:<input type="text"><br><br>密码:<input type="password"><br><br>
​<!-- 如果省略 type 属性,功能是 提交 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按钮</button>
</form>

提示:按钮需配合 form 标签(表单区域)才能实现对应的功能。

04-语义化

无语义的布局标签

作用:布局网页(划分网页区域,摆放内容)

  • div:独占一行

  • span:不换行

<div>div 标签,独占一行</div>
<span>span 标签,不换行</span>

有语义的布局标签

05-字符实体

06-综合案例一-体育新闻列表

<ul><li><img src="./images/1.jpg" alt=""><h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3></li><li><img src="./images/2.jpg" alt=""><h3>梅州主帅:申花有强有力的教练组 球员体能水平高</h3></li><li><img src="./images/3.jpg" alt=""><h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3></li>
</ul>

07-综合案例二-注册信息

<h1>注册信息</h1>
<form action=""><!-- 表单控件 --><!-- 个人信息 --><h2>个人信息</h2><label>姓名:</label><input type="text" placeholder="请输入真实姓名"><br><br><label>密码:</label><input type="password" placeholder="请输入密码"><br><br><label>确认密码:</label><input type="password" placeholder="请输入确认密码"><br><br><label>性别:</label><label><input type="radio" name="gender"> 男</label><label><input type="radio" name="gender" checked> 女</label><br><br><label>居住城市:</label><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option>武汉</option></select><!-- 教育经历 --><h2>教育经历</h2><label>最高学历:</label><select><option>博士</option><option>硕士</option><option>本科</option><option>大专</option></select><br><br><label>学校名称:</label><input type="text"><br><br><label>所学专业:</label><input type="text"><br><br><label>在校时间:</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option></select><!-- 工作经历 --><h2>工作经历</h2><label>公司名称:</label><input type="text"><br><br><label>工作描述:</label><br><textarea></textarea><br><br><!-- 协议 和 按钮 --><input type="checkbox"><label>已阅读并同意以下协议:</label><ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul><br><br><button>免费注册</button><button type="reset">重新填写</button>
</form>

相关文章:

html进阶语法

html进阶 列表、表格、表单 目标&#xff1a;掌握嵌套关系标签的写法&#xff0c;使用列表标签布局网页 01-列表 作用&#xff1a;布局内容排列整齐的区域。 列表分类&#xff1a;无序列表、有序列表、定义列表。 无序列表 作用&#xff1a;布局排列整齐的不需要规定顺序的…...

博客系统(java,MySQL,HTML)

项目展示&#xff1a; 1.输入 http://127.0.0.1:8080/blog_system/login.html 即可进入登录页面 2.输入正确的用户名和密码后进入博客列表页 要是用户名或密码输入错误&#xff0c;会弹出错误提示框 3.点击查看全文&#xff0c;可以进入博客详情页查看详细信息 4.点击写博客&a…...

Android Studio SDKGradleJDK等工具的正确使用

AS在安装使用过程中可能会占用C盘大量空间&#xff0c;对于C盘容量本来就小的人来说非常不友好&#xff0c;其实我们可以自定义安装路径 SDK默认安装位置 各种版本和NDK也会安装到这个路径 SDK版本选择性安装 通过选择图示的按钮&#xff0c;可以显示SDK的版本详情&#xff0…...

利用Python提取将Excel/PDF文件数据

使用Python来创建一个接口&#xff0c;用于接收Excel文件资源链接&#xff0c;下载文件并执行指定的操作&#xff0c;然后返回处理后的数据。以下是一个基本的示例&#xff0c;展示如何使用Flask来创建这样的接口。请注意&#xff0c;这是一个简化的示例&#xff0c;您可能需要…...

纯 CSS 实现瀑布流布局的方法

纯 CSS 实现瀑布流布局的方法 这种方式兼容性不是很好&#xff0c;全部支持需要些时间&#xff0c;但是目前是可以使用 css 写出来的 display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-template-rows: masonry;全部的 css .container {display:…...

输入法显示到语言栏_状态栏

设置–时间和语言–语言–最右侧"相关设置"中的"拼写、键入和键盘设置" 最下方的"高级键盘设置"–“使用桌面语言栏(如果可用)” 点击"语言栏选项" 接下来就是不同输入法的设置了 搜狗输入法:右键输入法选择"隐藏状态栏"–…...

[samba]同一个文件夹,分不同权限管理

#问题 有一个文件夹A能让用户1拥有写权限&#xff0c;而让用户2拥有只读权限&#xff0c;而用户3啥权限都没有&#xff0c;该如何设置samba呢&#xff1f; #解决办法 1.首先创建一个linux分组&#xff08;group)&#xff0c;命名为samba groupadd samba 2.创建一个samba默认…...

项目整合管理

项目整合管理概述 概述 项目的复杂性来源于组织的系统行为、人类行为以及组织或环境中的不确定性。在项目整合之前&#xff0c;项目经理需要考虑项目面临的内外部环境因素&#xff0c;检查项目的特征或属性。 作为项目的一种特征或属性&#xff0c;复杂性的含义&#xff1a; …...

基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(一)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 原先这个基于RuoYi-Flowable-Plus的这个不支持本地图片上传&#xff0c;只支持oss图片上传&#xff0c;所以…...

2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人…...

Puppeteer实现上下滚动、打开新Tab、用户数据保存(三)

Puppeteer实现上下滚动、打开新Tab、用户数据保存&#xff08;三&#xff09; Puppeteer实现上下滚动、打开新Tab、用户数据保存&#xff08;三&#xff09;一、实现上下滚动二、打开新Tab三、用户数据保存四、效果演示 一、实现上下滚动 在自动化测试中&#xff0c;我们需要能…...

ArduPilot开源飞控之AP_InertialNav

ArduPilot开源飞控之AP_InertialNav 1. 源由2. 调用关系3. 重要例程3.1 read_inertia3.2 update 4. 封装接口4.1 get_filter_status4.2 get_position_neu_cm4.3 get_position_xy_cm4.4 get_position_z_up_cm4.5 get_velocity_neu_cms4.6 get_velocity_xy_cms4.7 get_speed_xy_c…...

DataX工具部署与使用(PostgreSQL to Oracle)

目录&#xff1a; 一、准备环境&#xff08;1&#xff09;安装JDK&#xff08;2&#xff09;检查Python版本&#xff08;3&#xff09;DataX 解压及测试 二、同步测试1、配置清单2、操作示例&#xff08;1&#xff09;同步测试环境&#xff08;2&#xff09;准备测试表&#xf…...

【PyTorch2 之027】在 PyTorch 中的R-CNN、Fast R-CNN和 Faster R-CNN

一、说明 亮点&#xff1a;对象检测是计算机视觉中最重要的任务之一。在这篇文章中&#xff0c;我们将概述最有影响力的对象检测算法家族之一&#xff1a;R-CNN、Fast R-CNN 和 Faster R-CNN。我们将重点介绍它们中的每一个的主要新颖性和改进。 最后&#xff0c;我们将专注于 …...

C++学习——C++函数的编译、成员函数的调用、this指针详解

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 从博文的分析中可以看出&#xff0c;对象的内存中只保留了成员变量&#xff0c;除此之外没有任何其他信息&#xff0c;程序运行时不知道 stu 的类型为 Student&#xff0c;也不知道它…...

Pulsar Manager和dashboard部署和启用认证

Pulsar Manager部署和启用认证 官方地址: https://pulsar.apache.org/docs/zh-CN/next/administration-pulsar-manager/ Pulsar Manager 是一个网页式可视化管理与监测工具&#xff0c;支持多环境下的动态配置。可用于管理和监测租户、命名空间、topic、订阅、broker、集群等…...

K8S环境搭建

K8S环境搭建 前置条件 部署3台VM&#xff0c;一台作为master,两台作为slave需要保障vm之间网络是互通的 为vm安装docker # 安装/更新 yum-utils yum install -y yum-utils#添加阿里镜像稳定版仓库 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce…...

常用的软件项目管理工具一览

软件项目管理工具是帮助团队成功管理和完成软件开发项目的软件程序和应用程序。根据项目及其规模和复杂性&#xff0c;可以使用各种各样的这些工具来协助完成任务&#xff0c;从任务跟踪和调度&#xff0c;到项目报告&#xff0c;到版本控制和协作。 项目经理对软件项目的整体成…...

关于网络协议的若干问题(五)

1、DH 算法会因为传输随机数被破解吗&#xff1f; 答&#xff1a;DH 算法的交换材料要分公钥部分和私钥部分&#xff0c;公钥部分和其他非对称加密一样&#xff0c;都是可以传输的&#xff0c;所以对于安全性是没有影响的&#xff0c;而且传输材料远比传输原始的公钥更加安全。…...

TensorFlow入门(十七、神经元的拟合原理)

深度学习的概念源于人工神经网络的研究,神经网络是由多个神经元组成,。一个神经元由以下几个关键知识点组成: ①激活函数 ②损失函数 ③梯度下降 单个神经元的网络模型如图所示 用计算公式表达如下: z为输出的结果,x为输入,w为权重,b为偏置值。z…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...