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来改变的。


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

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

相关文章

CSS——标准流、浮动、Flex布局

1、标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的排布规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 2、浮动 作用&#xff1a;让块元素水平排列 属性名&#xff1a;float 属性值&#xff1a; left&#xff1a;…

做为一个产品经理带你详细了解--动态面板的使用

&#x1f4da;&#x1f4da; &#x1f3c5;我是bing人&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Axure》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一…

卫星影像5天一更新的地图网站

如果全球影像每5天一更新&#xff0c;并集多种地图数据源于一体的PB级海量地图数据该怎样去管理呢&#xff1f; 这是当我了解到SOAR网站之后&#xff0c;思考过的一个问题。 全球最大的在线地图网站 在SOAR的官方网站&#xff0c;据称它是世界上最大的在线地图网站。 它是集…

如何远程访问Axure RP制作的本地web站点实现协同办公

文章目录 前言1.在AxureRP中生成HTML文件2.配置IIS服务3.添加防火墙安全策略4.使用cpolar内网穿透实现公网访问4.1 登录cpolar web ui管理界面4.2 启动website隧道4.3 获取公网URL地址4.4. 公网远程访问内网web站点4.5 配置固定二级子域名公网访问内网web站点4.5.1创建一条固定…

深入理解Java关键字volatile

前置知识-了解以下CPU结构 如下图所示&#xff0c;每个CPU都会有自己的一二级缓存&#xff0c;其中一级缓存分为数据缓存和指令缓存&#xff0c;这些缓存的数据都是从内存中读取的&#xff0c;而且每次都会加载一个cache line&#xff0c;关于cache line的大小可以使用命令cat…

stm32与Freertos入门(二)移植FreeRTOS到STM32中

简介 注意&#xff1a;FreeRTOS并不是实时操作系统&#xff0c;而是分时复用的&#xff0c;只不过切换频率很快&#xff0c;感觉上是同时在工作。本次使用的单片机型号为STM32F103C8T6,通过CubeMX快速移植。 一、CubeMX快速移植 1、选择芯片 打开CubeMX软件&#xff0c;进行…

(独白)我为什么选择了计算机行业?

为什么可能很简单&#xff0c;但为什么的为什么就有点长了。就当作讲故事吧 在高中毕业后选择专业时&#xff0c;和大多数人一样&#xff0c;我根本不知道要选择什么专业&#xff0c;更不知道哪个专业发展前景好&#xff0c;哪个专业好就业。在当时比较火的专业我记得应该是土…

使用广播星历进行 GPS 卫星位置的计算

目录 1.计算卫星运动的平均角速度 n 2.计算观测瞬间卫星的近地点角 3.计算偏近点角 4.计算真近点角 f 5.计算升交角距 6.计算摄动改正项 7.进行摄动改正 8.计算卫星在轨道面坐标系中的位置 9.计算观测瞬间升交点的经度 L 10.计算卫星在瞬时地球坐标系中的位置 11.…

JDK21+HADOOP3.2.2+Windows安装步骤

哈哈哈 最近转战大数据这块了&#xff0c;分享一下hadoop3.2.2的安装步骤 借鉴了不少大佬的文章&#xff0c;如有雷同&#xff0c;都是大佬们的 1.JDK安装 我选择的是JDK21 以下是下载网址和截图&#xff0c;这个没有太多的&#xff0c;一般下载最新的就可以 JDK: Java Down…

SQL数列

SQL数列 1、数列概述2、SQL数列2.1、简单递增序列2.2、等差数列2.3、等比数列3、SQL数列的应用3.1、连续问题3.2、多维分析1、数列概述 数列是最常见的数据形式之一,实际数据开发场景中遇到的基本都是有限数列。常见的数列例如:简单递增序列、等差数列、等比数列等 SQL如何实…

Helplook VS Salesforce:哪个知识库更好?

对于组织来说&#xff0c;选择一个合适的平台来管理在线知识库可能是一个具有挑战性的任务。而Salesforce的知识管理功能可以帮助组织更好地管理和分享他们的知识&#xff0c;从而更好地为客户提供服务。这是一种将知识管理集成到CRM平台中的方法&#xff0c;可以简化知识共享和…

vue el-cascader组件change失效以及下拉框不消失的问题

文章目录 1.前言2. 碰到的问题3. 如何解决这两个问题 1.前言 最近项目上用到el-cascader这个组件,需要可以选第一级菜单&#xff0c;也需要可以选第二级菜单&#xff0c;点击完成之后需要关闭下拉框。其实功能比较简单&#xff0c;找了很多资料&#xff0c;没有找到合适的方案…

分类预测 | GASF-CNN格拉姆角场-卷积神经网络的数据分类预测

分类预测 | GASF-CNN格拉姆角场-卷积神经网络的数据分类预测 目录 分类预测 | GASF-CNN格拉姆角场-卷积神经网络的数据分类预测分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.GASF-CNN格拉姆角场-卷积神经网络的数据分类预测&#xff08;完整源码和数据) 2.自…

音乐制作软件Ableton Live 11 mac功能特点

Ableton Live 11 mac是一款数字音频工作站软件&#xff0c;用于音乐制作、录音、混音和现场演出是一款流行的音乐制作软件。 Ableton Live 11 mac特点和功能 Comping功能&#xff1a;Live 11增加了Comping功能&#xff0c;允许用户在不同的录音轨道上进行多次录音&#xff0c;…

springboot自定义starter步骤

引入相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional> </dependency><dependency><groupId>org.pro…

《Java已死、前端已凉》:真相与焦虑的辩证

文章目录 Java 企业级支柱Java 在企业级应用中的地位后端开发的支柱Java生态系统的强大 前端&#xff1a;蓬勃发展的创新引擎新技术的涌现用户体验的重要性 Java的演进与创新云原生时代的 Java开发效率和生态系统 前端技术的未来走向WebAssembly 的崛起可访问性和国际化的重要性…

中海达亮相能源北斗与时空智能创新技术应用大会

12月7日-8日&#xff0c;2023年能源北斗与时空智能创新技术应用大会暨鹭岛论坛在厦门举办。本次活动以“能源北斗时空智能”为主题&#xff0c;由中关村智能电力产业技术联盟、中国能源研究会、中国卫星导航定位协会、中国电力科学研究院有限公司、国网信息通信产业集团有限公司…

Java学习之面向对象

一、面向对象 1、引入面向对象 方法中封装的是具体实现某一功能的代码&#xff0c;而通过书写一个拥有多个特定方法的类&#xff0c;来存放的就是一个又一个的方法。 方法都存放在类里面&#xff0c;当需要使用的时候&#xff0c;不用去找具体的方法&#xff0c;而是先找这个…

什么是前端响应式设计(responsive design)?如何实现响应式布局?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

2、快速搞定Kafka术语

快速搞定Kafka术语 Kafka 服务端3层消息架构 Kafka 客户端Broker 如何持久化数据小结 Kafka 服务端 3层消息架构 第 1 层是主题层&#xff0c;每个主题可以配置 M 个分区&#xff0c;而每个分区又可以配置 N 个副本。第 2 层是分区层&#xff0c;每个分区的 N 个副本中只能有…