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.rhkb.cn/news/218299.html

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

相关文章

美食大赛的题解

目录 原题描述&#xff1a; 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 样例输入&#xff1a; 样例输出&#xff1a; 数据规模&#xff1a; 题目大意&#xff1a; 主要思路&#xff1a; 注&#xff1a; 代码&#xff1a; 原题描述&#xff1a…

C# WPF上位机开发(crc校验)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 为了验证数据传输的过程中有没有发生翻转&#xff0c;我们在传输报文的同时一般还会添加一个crc校验。对于modbus协议也是一样&#xff0c;它在数据…

Unity中Shader URP最简Shader框架(整理总结篇)

文章目录 前言一、精简 ShaderGraph 所有冗余代码后的最简 URP Shader二、我们来对比一下 URP Shader 与 BuildInRP Shader 的对应关系 与 区别1、"RenderPipeline""UniversalPipeline"2、面片剔除、深度测试、深度写入、颜色混合 和 BRP 下一致3、必须引入…

maven工程中读取resources中的资源文件

maven工程的代码布局如下&#xff1a;在resources下面有一个资源文件test.properties&#xff0c;现在的目标要在Java代码中读取该资源文件中的内容。 test.properties资源文件的内容如下&#xff1a; Java代码如下&#xff1a; package com.thb;import java.io.BufferedR…

github 学习番外篇

我们可以按照仓库开始的提示提交仓库 不知道为什么 出现了 我用 git branch 查看了一下&#xff0c;竟然没发现分支 后来发现是只有commit以后才会显示这个分支 后来显示 这是因为本地和远程仓库不同步的原因 这时候我们就需要git pull 一下 发现两个仓库由于不关联不能git…

【算法】【动规】乘积为正数的最长子数组长度

跳转汇总链接 &#x1f449;&#x1f517;算法题汇总链接 1.1 乘积为正数的最长子数组长度 &#x1f517;题目链接 给你一个整数数组 nums &#xff0c;请你求出乘积为正数的最长子数组的长度。 一个数组的子数组是由原数组中零个或者更多个连续数字组成的数组。 请你返回乘积…

生产派工自动化:MES系统的关键作用

随着制造业的数字化转型和智能化发展&#xff0c;生产派工自动化成为了提高生产效率、降低成本&#xff0c;并实现优质产品生产的关键要素之一。制造执行系统&#xff08;MES&#xff09;在派工自动化中发挥着重要作用&#xff0c;通过实时数据采集和智能调度&#xff0c;优化生…

人工智能联盟的首件神兵利器——“Purple Llama” 项目,旨为保护工智能模型安全性

Meta公司&#xff08;Meta Platform Inc&#xff09;&#xff0c;原名Facebook&#xff0c;创立于2004年2月4日&#xff0c;市值5321.71亿美元。总部位于美国加利福尼亚州门洛帕克。 Meta 公司推出了名为“Purple Llama”的项目&#xff0c;旨在保护和加固其开源人工智能模型。…

详细了解stm32---按键

提示&#xff1a;永远支持知识文档免费开源&#xff0c;喜欢的朋友们&#xff0c;点个关注吧&#xff01;蟹蟹&#xff01; 目录 一、了解按键 二、stm32f103按键分析 三、按键应用 一、了解按键 同学们&#xff0c;又见面了o(*&#xffe3;▽&#xffe3;*)ブ&#xff0c;最…

高级前端开发工程师

岗位需求 熟练掌握前端主流框架Vue、React、Angular,至少熟练掌控Vue全家桶 文章目录 岗位需求前言一、Vue框架二、React框架三、Angular框架四、什么是Vue全家桶前言 -那就看你表哥的电脑里有没有硬盘 -我不敲键盘 一、Vue框架 Vue(读音为/vjuː/,类似于"view"…

Jenkins离线安装部署教程简记

前言 在上一篇文章基于Gitee实现Jenkins自动化部署SpringBoot项目中&#xff0c;我们了解了如何完成基于Jenkins实现自动化部署。 对于某些公司服务器来说&#xff0c;是不可以连接外网的&#xff0c;所以笔者专门整理了一篇文章总结一下&#xff0c;如何基于内网直接部署Jen…

gitlab下载,离线安装

目录 1.下载 2.安装 3.配置 4.启动 5.登录 参考&#xff1a; 1.下载 根据服务器操作系统版本&#xff0c;下载对应的RPM包。 gitlab官网&#xff1a; The DevSecOps Platform | GitLab rpm包官网下载地址: gitlab/gitlab-ce - Results in gitlab/gitlab-ce 国内镜像地…

Redis第1讲——入门简介

Java并发编程的总结和学习算是告一段落了&#xff0c;这段时间思来想去&#xff0c;还是决定把Redis再巩固和学习一下。毕竟Redis不论是在面试还是实际应用中都是极其重要的&#xff0c;在面试中诸如Redis的缓存问题、热key、大key、过期策略、持久化机制等&#xff1b;还有在实…

武林风云之linux组软raid0

小y可喜欢玩文明系列的游戏了&#xff0c;因为小y也一直喜欢造轮子&#xff0c;属于自己的轮子。 每次小y听到”要向雄鹰一样&#xff0c;定要遨游于天际。”感觉自己给自己打了一针强心剂&#xff0c;要求自己拼搏进取。 众所周知&#xff0c;文明是个原生的linux游戏&#xf…

助力工业产品质检,基于yolov5l集成CBAM注意力机制开发构建智能PCB电路板质检分析系统

AI助力工业质检智能生产制造已经有很多成功的实践应用了&#xff0c;在我们前面的系列博文中也有很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读前面的博文即可&#xff0c;这里本文的核心目的就是想要基于改进的yolov5l来开发构建用于PCB电路板智能检测分析的模型&…

ssm+vue的高校智能培训管理系统分析与设计(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的高校智能培训管理系统分析与设计&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09…

OkHttp: 拦截器和事件监听器

文章目录 1. 拦截器1. 拦截器链2. 实际案例1. 注册为应用拦截器2. 注册为网络拦截器 3. 如何选择用哪种拦截器1. 应用拦截器2. 网络层拦截器3. 重写请求4. 重写响应 4. 可用性 2. 事件监听器1. 请求的生命周期2. EventListener使用案例3. EventListener.Factory4. 调用失败的请…

办公技巧:分享五个在线画图工具,值得收藏

目录 1. processon ​编辑 2. visual paradigm online 3. zen flowchart 4. draw io 5. Excalidraw 今天小编给大家分享五个在线画图工具&#xff0c;感兴趣的可以下载试一试&#xff01; 1. processon 说流程图除了必提http://draw.io&#xff0c;processon也必须要有…

大语言模型:开启自然语言处理新纪元

导言 大语言模型&#xff0c;如GPT-3&#xff08;Generative Pre-trained Transformer 3&#xff09;&#xff0c;标志着自然语言处理领域取得的一项重大突破。本文将深入研究大语言模型的基本原理、应用领域以及对未来的影响。 1. 简介 大语言模型是基于深度学习和变压器&…

【后端学前端】第二天 css动画 动感菜单(css变量、过渡动画、过渡延迟、js动态切换菜单)

目录 1、学习信息 2、源码 3、变量 1.1 定义变量 1.2 使用变量 1.3 calc() 函数 4、定位absolute和fixed 5、transform 和 transition&#xff0c;动画 5.1 变形transform 5.2 transition 5.3 动画animation 6、todo 1、学习信息 视频地址&#xff1a;css动画 动感菜…