前端学习、HTML

html是由一些标签构成的,标签之间可以嵌套,每个标签都有开始标签和结束标签,也有部分标签只有开始标签,没有结束标签。html的标签也可以成为元素。(树形结构)

html文件的最顶层标签就是html。

head用来放属性信息,body放页面上显示的内容。

输入!tab直接生成html的初始模板。

语义化标签

语义化标签代表着一个特定的功能和用途

一、标题标签

<h> </h>

2.段落标签

<p> </p>

3.换行标签

在编辑中换行符、制表符、多个连续的空格,都是无效的,如果要换行,应该使用br标签

br标签是一个单标签,不需要结束标签

4.格式化标签

独占一行的标签,也叫做块级元素,例如标题标签。

不独占一行的标签,也叫行内元素。

块级和行内其实可以转换。

5.图片标签

img,单标签

img必须带有一个src属性,通过这个属性来指定要显示的图片的路径。

alt是 如果图片挂了,就会显示alt的文字。

绝对路径和相对路径都可以,也可以是网络路径。其中,相对路径的基准目录就是当前html所在的目录。

6.a标签,超链接

二、表格标签

border是表格标签

三、列表标签

列表标签包括有序列表(ol)、无序列表(ul)、列表项(li)

四、表单标签

表单标签是与用户交互的重要途径。

form标签:进行前后端交互,功能是构造一个HTTP请求。

input标签:有很多形态,这些形态表示不同的元素效果。

使用单选框时,需要设置相同的name属性,此时才会有互斥效果。默认情况下,点到圆点才会选择到,我们对其进行label标签处理。label标签的for里对应着元素的id。

id是一个特殊的属性,是每个元素的身份标识,每个html元素都有id,要求一个页面上的id必须唯一

加check会默认选中

 

file类型可以用在上传头像、上传图片等

下拉菜单

select

里面的每个选项,是一个option标签,加selected来默认选中选项

cols表示一行能写多少字符,rows是多少列。内容会自动添加滑动条。

无语义化标签

还有两个特殊的标签,无语义标签。div和span。也就是这两个没有什么特殊的用途,如果我们不知道某个东西使用什么标签,就可以用它两。

div默认是独占一行的块级元素。

span默认是不独占一行的行内元素。

这两个标签,搭配css和js,就可以实现语义化标签的大部分功能,也就是一个页面基本光使用div,就能实现类似的效果。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

**蓝桥OJ 178全球变暖 DFS

蓝桥OJ 178全球变暖 思路: 将每一座岛屿用一个颜色scc代替, 用dx[]和dy[]判断他的上下左右是否需要标记颜色,如果已经标记过颜色或者是海洋就跳过.后面的淹没,实际上就是哪个块上下左右有陆地,那么就不会被淹没,我用一个tag标记,如果上下左右一旦有海洋,tag就变为false.如果tag…

用冒泡排序模拟C语言中的内置快排函数qsort!

目录 ​编辑 1.回调函数的介绍 2. 回调函数实现转移表 3. 冒泡排序的实现 4. qsort的介绍和使用 5. qsort的模拟实现 6. 完结散花 悟已往之不谏&#xff0c;知来者犹可追 创作不易&#xff0c;宝子们&#xff01;如果这篇文章对你们有帮助的话&#xff0c;别忘了给个免…

机器学习:模型评估和模型保存

一、模型评估 from sklearn.metrics import accuracy_score, confusion_matrix, classification_report# 使用测试集进行预测 y_pred model.predict(X_test)# 计算准确率 accuracy accuracy_score(y_test, y_pred) print(f"Accuracy: {accuracy*100:.2f}%")# 打印…

整数和浮点数在内存中的存储(大小端字节序,浮点数的存取)

目录 1.整数在内存中的存储 2.大小端字节序和字节序判断 2.1什么是大小端&#xff1f; 2.2为什么会有大小端 3.浮点数在内存中的存储 3.1浮点数的存储 3.1.1 浮点数存的过程 3.1.2 浮点数取的过程 3.2 解析 3.3 验证浮点数的存储方式 1.整数在内存中的存储 整数的二进…

亿道信息轻工业三防EM-T195,零售、制造、仓储一网打尽

厚度仅10.5mm&#xff0c;重量仅0.65千克的EM-T195&#xff0c;其紧凑而纤薄的设计为以往加固型平板带来了全新的轻薄概念。尽管设计时尚、轻薄&#xff0c;但经过军用认证的强固性仍然能够承受所有具有挑战性的环境条件。随身携带无负担的轻便性加上抗震功能使其成为餐厅、酒店…

数独游戏(dfs)

代码注释如下 #include <iostream> using namespace std; const int N 10; bool col[N][N], rol[N][N], cell[3][3][N]; char g[N][N]; bool dfs(int x, int y) { //用bool这样在找到一个方案就可以迅速退出if(y 9) x, y 0; //若y超出边界&#xff0c;则第二…

S1---FPGA硬件板级原理图实战导学

视频链接 FPGA板级实战导学01_哔哩哔哩_bilibili FPGA硬件板级原理图实战导学 【硬件电路设计的方法和技巧-哔哩哔哩】硬件电路设计的方法和技巧01_哔哩哔哩_bilibili&#xff08;40min&#xff09; 【高速板级硬件电路设计-哔哩哔哩】 高速板级硬件电路设计1_哔哩哔哩_bil…

【RT-Thread基础教程】邮箱的使用

文章目录 前言一、邮箱的特性二、邮箱操作函数2.1 创建邮箱创建动态邮箱创建静态邮箱 2.2 删除邮箱2.3 发邮件2.4 取邮件 三、示例代码总结 前言 RT-Thread是一个开源的实时嵌入式操作系统&#xff0c;广泛应用于各种嵌入式系统和物联网设备。在RT-Thread中&#xff0c;邮箱是…

输入一个整数,输出其最长连续因子。

输入一个整数&#xff0c;输出其最长连续因子。 例如 输入&#xff1a;60 输出&#xff1a;2 3 4 5 6 注意&#xff1a;1不算因子 输入输出格式 输入描述: 输入一个整数N&#xff0c;N<10000。 输出描述: 输出其最长连续因子&#xff0c;如果有多个最长&#xff0c;输出…

Linux UnixODBC安装配置

配置 UnixODBC 梦之上关注IP属地: 香港 0.2322020.12.09 13:23:10字数 1,202阅读 5,447 麒麟&达梦适配系列: 1.麒麟服务器上安装 DM8 2.配置 UnixODBC 3.beego-ORM 适配达梦 资源紧张的时候&#xff0c;服务器是大家共用的&#xff0c;上面部署了一堆服务。所以选用doc…

ShardingJdbc实战-分库分表

文章目录 基本配置分库分表的分片策略一、inline 行表达时分片策略algorithm-expression行表达式完整案例和配置如下 二、根据实时间日期 - 按照标准规则分库分表标准分片 - Standard完整案例和配置如下 基本配置 逻辑表 逻辑表是指&#xff1a;水平拆分的数据库或者数据表的相…

大小端问题

0. 介绍 大小端计算机存储数据而安排字节的两种顺序。 针对的是字节。 大端与我们平时书写的顺序一致。 1. 大小端的判定 不需要手动判断。 有一个头文件endian.h; 可能会有宏 __BYTE_ORDER __BIG_ENDIAN __LITTLE_ENDIAN通过库来进行判断。 手动判断 根据字节存取的顺序…

【JSON2WEB】07 Amis可视化设计器CRUD增删改查

总算到重点中的核心内容&#xff0c;CRUD也就是增删改查&#xff0c;一个设计科学合理的管理信息系统&#xff0c;95%的就是CRUD&#xff0c;达不到这个比例要重新考虑一下你的数据库设计了。 1 新增页面 Step 1 启动amis-editor Setp 2 新增页面 名称和路径随便命名&#xf…

Dynamo幕墙探究系列(一)

一直想写个系列教程&#xff0c;但是没有那么多时间整理资料&#xff0c;这次呢&#xff0c;先弄个小系列吧&#xff0c;还是和之前差不多的幕墙测试&#xff0c;我们分几节课&#xff0c;一步一步深入研究。 今天先开个小头儿&#xff0c;要弄的&#xff0c;就是下面这么个模型…

对象锁与类锁

不同锁互不影响&#xff0c;共用一个锁&#xff0c;可能会发生阻塞。 1.在修饰静态方法时&#xff0c;锁定的是当前类的 Class 对象&#xff0c;在下面的例子中就是SycTest1.class 2.当修饰非静态方法时&#xff0c;锁定的就是 this 对象&#xff0c;即当前的实例化对象 public…

【Git教程】(四)版本库 —— 存储系统,存储目录,提交对象及其命名、移动与复制~

Git教程 版本库 1️⃣ 一种简单而高效的存储系统2️⃣ 存储目录&#xff1a;Blob 与 Tree3️⃣ 相同数据只存储一次4️⃣ 压缩相似内容5️⃣ 不同文件的散列值相同6️⃣ 提交对象7️⃣ 提交历史中的对象重用8️⃣ 重命名、移动与复制&#x1f33e; 总结 事实上&#xff0c;我们…

keil MDK安装armcc V5编译器

不知道从什么时候开始&#xff0c;Keil MDK默认不支持V5的编译器了&#xff0c;里面默认只有V6的编译器&#xff0c;设置界面跟V5有很大的差异不太熟悉。最可怕的是&#xff0c;之前使用V5编译的工程&#xff0c;换成V6编译器后居然报错...虽然修改一下应该也可以正常编译&…

SQL面试题(2)

第一题 创建trade_orders表: create table `trade_orders`( `trade_id` varchar(255) NULL DEFAULT NULL, `uers_id` varchar(255), `trade_fee` int(20), `product_id` varchar(255), `time` varchar(255) )ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_…

web自动化笔记九:验证码的处理方式

一、验证码常用的处理方式 ①、说明&#xff1a;Selenium中并没有对验证码处理的方法&#xff0c;在这里我们介绍一下针对验证码的几种常用处理方式 ②、方式&#xff1a; 1&#xff09;、去掉验证码&#xff08;测试环境下采用&#xff09; …

RDD算子介绍

1. RDD算子 RDD算子也叫RDD方法&#xff0c;主要分为两大类&#xff1a;转换和行动。转换&#xff0c;即一个RDD转换为另一个RDD&#xff0c;是功能的转换与补充&#xff0c;比如map&#xff0c;flatMap。行动&#xff0c;则是触发任务的执行&#xff0c;比如collect。所谓算子…