HTML基础标签

但实际上无论声明为中文还是英文都可以写,中文/英文

主要是浏览器在进行调用翻译功能的时候,会按照声明的语言来进行翻译。

标签语义:

标签的属性一般都是在第一个标签中定义该标签效果所拥有的属性。

即标签的作用是什么

<>标签功能的体现部分 <>(双标签)

< 标签功能体现的部分 />(单标签)

但也有的标签:

既在<体现功能>提示语句(一般是文字)<>(如超链接)

属性标签一般是相当于键值对的呈现方式

属性名称=" " 属性名称=" "(注意多个属性不用符号隔开)


标题标签,网页名标签:

同级标签可以重复出现。


title 用在head中的标签用来定义网页的名称。

如果标题被设置为 空字符串 或者没有设置,通常使用文件名称来作为标题

段落,换行标签:

在html文件展示出来后无论是多少个空格展示出来的都是只有一个,所以需要段落,换行标签。

只要读取时,出现<br/就会换行>


文本格式化标签:


<div>和<span>标签:

部分盒子框标签,没有语义,只有盒子功能

这两个也是有属性的即框架的大小,宽高。

div:

在实现边框后,在其紧跟的文字内容会自动输入到下一行

span:

是将每个部分独立起来,可以连续在一行排版


图像标签和路径标签:

是单标签

为了保证实现,图片(主角色)有放在最前面,属性放在后面

在使用width/height的时候一般是使用单个,另一个会按照等比例进行缩放,否则的图片的规格会出现不同程度的奇形怪状。

至此需要将图片和文本在同一级文件下

在后续学习下,可以采用调用其他包下的

边框一般不会使用HTML进行属性设置的时候调整,一般会使用cs等进行渲染

---

路径:

处于html文件上一级,相当于在和html上一级所在页面。

可以实现上多级../../ 可以多个

绝对路径\;相对路径/ ;但完整的网络的绝对路径是/实现的

只要联网就能获取网站储存的内容


超链接标签(重点):

链接的分类:

文本或者图像指的是具有超链接功能的对象(跳转时需要点击的对象)

_self/默认指的是在当前页面打开新的网址。

外部链接:

内部链接:

实质还是路径的区别

空链接:

用#代表空链接

下载链接:

当超链接链接的文件(exe结尾的/相当于程序包)/压缩包的,即可实现成为下载链接。

网页中的元素都可以添加链接:

格式为将元素的书写形式看成能跳转的对象放在超链接格式里即可

锚点链接:id是唯一性的

跳转到在当前页面下的某个内容部分的位置。(相当于定位在那个位置)

格式下#必须要有,后面的是标记。以下是由上到下:

这个是所要点击的对象。

定位的地方

下面进行由下到上(返回)

只要将上也给一个定位的地方,下面给一个点击的对象标签即可。(相当于反过来了)


注释标签,特殊字符:

注释标签:

VScode提供的快捷键是ctrk+/即可

只是底层显示,展示是并不显示

-------

特殊字符:

特殊符号是一个符号,即本身解析就对应符号。

每一个符号后需要用;进行结尾。


表格标签:

表格的主要作用使多个数据在进行展示的时候更好看,信息更清晰。

table标签是表格;tr(table row)标签是占一行(指的是table里的一行),在一行中td(table date)是一个小的单元格,里面是展示的内容

tr要在table里,td要在tr里。(他们都是双标签)

th(表头标签):

表格的属性:

但表格的属性不常用,一般会用css进行渲染。

单元格合并方式 :

  • 跨行合并 : 垂直方向上的 上下 单元格合并 是 跨行合并 , 在 <td> 单元格标签 中 使用 rowspan 属性 , 设置跨行合并单元格数 ;
  • 跨列合并 : 水平方向上的 左右 单元格合并 是 跨列合并 , 在 <td> 单元格标签 中 使用 colspan 属性 , 设置跨列合并单元格数 ;
  • 单元格 合并 是按照 从上到下 , 从左到右 的顺序进行合并 ;

目标单元格:(需要被合并的格的起始格td )

跨行。

跨列。

删除指的是,当合并时,需要占用下n个格子,相当于直接被前面的使用了。不用在写这,n个,如果在写则是开辟新的单元格。

表格结构标签(在table标签作用下):

<thead>是表头区域,th一个表头部分,旗下内容字体是加粗默认剧中显示。

<tbody>是表头的主题部分,相当于结构的划分。更清晰

列表标签(重点):

无序列表:

无序列表是并列关系

ul中只能由li标签

li里面可以放其他任何标签

有序标签:

自定义列表:

dl是父

dt和dd是并列的(都是子)

但dd和dt中可以放任何标签。


表单标签:

表单域:

form在后面进行讲解

表单控件:

input:输入表单元素

value框的默认元素(为了服务器获取对应的数据)。value是展示出来的

name将相同name值的表单元素分为一组。 name不是展示出来的

对于单选框,value和你的文本内容是相同的,那可不可以不写value呢,当服务端要读取你当前点击的单选框的时候,通过name属性获取的值其实是获取的value值,而你输入的文本内容,服务端是无法获取到的。

同时,name属性的作用是将你的单选框按钮分为一组,实现点击一个,另外的取消点击功能。如若不然,每个点击按钮可以同时点击。

即如男女框点击时,需要设置相同的name值,name的作用是将那几个表单元素作为一组

----

checked相当于默认选择的(只要加载就自动选择),单选框只能有一个是checked;但,多选框(复选框)可以有多个checked

---

正确表单。

--------

在上图中,单选框没有设置name属性导致每个框都可以被选。

这时使用name就解决了

name属性的作用是将你的单选框按钮分为一组,实现点击一个,另外的取消点击功能。如若不然,每个点击按钮可以同时点击。

-------------

type属性提交按钮:(form内的表单元素 的提交 )

reset重置按钮

普通按钮button(搭配js使用):启动背后的操作。

文件域:可以直接将文件上传

label标签:有点类似锚点,但label是直接进行定位选择

select:下拉表单元素

如果没有定义selected则默认选择第一个。

textarea:文本域元素

在中间的是默认输入的内容

但可以写多很多行,当多的时候就会自动生成拉取的滑块。定义的只是显示的,但一般不会使用,一般是使用css来改变的。


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

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

相关文章

LeetCode(61)删除链表的倒数第 N 个结点【链表】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 删除链表的倒数第 N 个结点 1.题目 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例…

关于“Python”的核心知识点整理大全22

目录 ​编辑 9.4.2 在一个模块中存储多个类 虽然同一个模块中的类之间应存在某种相关性&#xff0c;但可根据需要在一个模块中存储任意数量的 类。类Battery和ElectricCar都可帮助模拟汽车&#xff0c;因此下面将它们都加入模块car.py中&#xff1a; car.py my_electric_car…

Leetcode sql50基础题最后的4题啦

算是结束了这个阶段了&#xff0c;之后的怎么学习mysql的方向还没确定&#xff0c;但是不能断掉&#xff0c;而且路是边走边想出来的。我无语了写完了我点进去看详情都不让&#xff0c;还得重新开启计划&#xff0c;那我之前的题解不都没有了&#xff01;&#xff01; 1.第二高…

10个国内外素材网站,提供免费 Photoshop 素材下载资源

即时设计 被很多人视为免费的PS素材网站——即时设计提供了资源广场版块&#xff0c;方便用户查找材料。对于提供的PS材料&#xff0c;即时设计也做了详细的分类工作&#xff0c;用户可以根据不同的使用标签快速找到相应的PS材料。 进入资源广场&#xff0c;在搜索框中输入要…

jmeter,动态参数之随机数、随机日期

通过函数助手&#xff0c;执行以下配置&#xff1a; 执行后的结果树&#xff1a; 数据库中也成功添加了数据&#xff0c;对应字段是随机值&#xff1a;

C#Winform菜鸟驿站管理系统-快递信息管理界面多条件查询实现方法

1&#xff0c;具体的页面设计如下&#xff0c; 2&#xff0c; 关于下拉框数据填充实现&#xff0c;站点选择代码实现如下&#xff0c;因为站点加载在很多界面需要用到&#xff0c;所以把加载站点的方法独立出来如下&#xff1b; /// <summary>/// 加载站点下拉框/// <…

案例064:基于微信小程序的考研论坛设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

cat EOF快速创建一个文件,并写入内容

在linux系统中&#xff0c;如果你有这个需求 vi一个文件 /etc/docker/daemon.json 在这个文件中写入内容 { "registry-mirrors": ["https://iw3lcsa3.mirror.aliyuncs.com","http://10.1.8.151:8082"],"insecure-registries":[&quo…

本地项目添加到gitlab命令操作

gitlab上面创建一个跟项目名同名的文件夹 创建文件夹&#xff0c;填写信息 添加readme文档&#xff0c;先保存下创建的文件夹 回到项目&#xff0c;复制项目的git 地址 然后进入到本地项目的文件夹&#xff0c;如d:/workspace/spring-demo&#xff0c;右键打开git bash弹框 命令…

【深度学习】机器学习概述(二)优化算法之梯度下降法(批量BGD、随机SGD、小批量)

​ 文章目录 一、基本概念二、机器学习的三要素1. 模型a. 线性模型b. 非线性模型 2. 学习准则a. 损失函数b. 风险最小化准则 3. 优化机器学习问题转化成为一个最优化问题a. 参数与超参数b. 梯度下降法梯度下降法的迭代公式具体的参数更新公式学习率的选择 c. 随机梯度下降批量…

提升英语学习效率,尽在Eudic欧路词典 for Mac

Eudic欧路词典 for Mac是一款专为英语学习者打造的强大工具。无论您是初学者还是高级学习者&#xff0c;这款词典都能满足您的需求。 首先&#xff0c;Eudic欧路词典 for Mac具备丰富的词库&#xff0c;涵盖了各个领域的单词和释义。您可以轻松查询并学习单词的意思、用法和例…

金蝶云星空协同开发环境应用内执行单据类型脚本

文章目录 金蝶云星空协同开发环境应用内执行单据类型脚本业务界面查询单据类型表数据导出数据执行数据库脚本单据类型xml检验是否执行成功检查数据库检查业务数据 金蝶云星空协同开发环境应用内执行单据类型脚本 业务界面 查询单据类型表数据 先使用类型中文在单据类型多语言…

扫地机器人测试点

简介&#xff1a;在科技发展的浪潮下&#xff0c;扫地机器人已经成为越来越多家庭的“贴心管家”&#xff0c;助力我们迎战尘埃和杂物。但是&#xff0c;面对市面上五花八门的扫地机器人&#xff0c;以下为一般情况下扫地机器人的功能测试要点。 历史攻略&#xff1a; AI语音…

VSCode如何编辑Markdown文件

VSCode如何编辑Markdown文件 一、安装插件二、常用命令 一、安装插件 需要在VSCode安装一个插件Markdown Theme Kit 二、常用命令 1、CtrlShiftV 预览模式

104基于matlab的人工蜂群数据聚类算法ABCO-K-均值

基于matlab的人工蜂群数据聚类算法ABCO-K-均值。该代码提供了比K-均值算法更准确的结果。关键技术人工蜂群优化&#xff08;ABCO&#xff09;是自然发式优化方法&#xff0c;这是类似于在自然界寻找食物的方式的蜜蜂&#xff0c;以及优化算法搜索最佳的组合优化问题&#xff0c…

HTTP 414错误:请求URI过长,如何避免

在Web开发中&#xff0c;HTTP状态码是用于表示Web服务器响应的各种状态。其中&#xff0c;HTTP 414错误表示请求URI过长&#xff0c;这意味着客户端发送的请求URL超过了服务器所能处理的长度限制。 当请求的URI过长时&#xff0c;服务器可能无法正确处理请求&#xff0c;从而导…

正则表达式:简化模式匹配的利器

正则表达式&#xff1a;简化模式匹配的利器 一、正则表达式简介1.1 正则表达式介绍1.2 正则表达式使用场景 二、正则表达式语法2.1 正则表达式元字符和特性2.2 正则表达式常用匹配 三、正则表达式实战3.1 常见的正则表达式用法3.2 正则表达式的过滤用法3.3 正则表达式的代码用法…

SpringBoot Starter机制(自定义Start案例,实际开发场景中的短信模拟,AOP实现日志打印)

前言&#xff1a; 在我们上一篇博客中&#xff0c;实现Freemarke的增删改查&#xff0c;今天分享的是关于SpringBoot Starter机制-- 1.SpringBoot Starter 1.1.什么是SpringBoot Starter SpringBoot中的starter是一种非常重要的机制(自动化配置)&#xff0c;能够抛弃以前繁杂…

云开发微信小程序实战

随着移动互联网的快速发展&#xff0c;微信小程序作为一种轻量级的应用程序&#xff0c;逐渐成为了企业开展业务和提升用户体验的重要工具。而云开发则为企业提供了高效、安全、可靠的后台服务&#xff0c;使得小程序的开发和维护更加便捷。本文将详细介绍如何使用微信小程序与…

web应用开发技术的一些概念

一、Servlet 1.Servlet的工作过程&#xff1a; Servelt的工作流程示意图 &#xff08;1&#xff09;客户端发起一个Http请求到服务器&#xff0c;请求特定的资源或者是要执行特定的操作 &#xff08;2&#xff09;服务器在接收到请求后&#xff0c;根据请求相应的URL将请求分发…