html各个标签的使用

一、标签的分类

        1、单标签和双标签

        1. 单标签:<img> 

                img  br   hr

 

        2. 双标签:<div></div>

                div span <a></a>   h   p   a

        2、按照标签属性分类

        1. 块标签:自己独占一行

                h1~h6    p    div

        2. 行内(内联)标签

                a   span  b  i  u   s

二、标签的嵌套

        标签之间可以相互嵌套

        块儿级标签可以嵌套所有的标签,但是p标签除外,p标签不能嵌套块儿级标签,和p标签 

         行内元素只能嵌套行内元素,不能嵌套块儿级元素

三、标签自带的两个重要属性

id值:相当于人的身份证,一个文档中,id值不能重复,必须唯一

 

class值:是可以有多个的,一个标签可以有多个class值,一个class值也可以被多个标签拥有

 

要想使用id值,必须使用#开头

 

要想使用class值,必须使用.开头

四、标签的使用

        1、div标签和span标签

        div 标签和span标签没有任何意义,主要是用来布局页面

 

div标签一般用在占位置布局

span标签一般用在占文本布局

        2、 img标签

        作用:展示图片

 

<img src='' title='' width='' alt=''>

 

src:

        1. 内部的图片地址

        2. 写外链的地址

 title:鼠标悬浮在图片上时显示的内容

 height:图片的高度

width:图片的宽度

注意: 高度和宽度一般情况下只写一个,写一个系统会自动等比例缩放

 alt:当图片地址找不到时,显示的内容,类似于报错提醒

        3、a标签

        超链接标签

 

<a href="URL"  target="_blank">文本(随便写)</a>

 

href属性指定目标的网页地址。该地址可以有3中类型:

                1、绝对的URL - 指向另一个站点(比如:href="http://www.jd.com")

                2、 相对URL - 指当前站点中确切的路径(href="index.html")

                3、 锚URL - 指向页面中的锚(href="#top")

 

target:

        1、_blank:表示在新标签页中打开目标网页

        2、_self:表示在当前标签页中打开目标网页

        4、列表标签

1、无序列表

        <ul type="disc">

                <li>第一项</li>        

        </ul>

 

type属性:

        disc:实心圆

        square:实心方块

        cricle:空心圆

        none:无样式

2、有序列表

        <ol type="1" start="2">

                <li>第一项</li>

        </ol>

 

type属性:

        1:数字列表,默认

        A:大写字母

        a:小写字母

        I:大写罗马

        i:小写罗马

 

3、标题列表

        <dl>

                <dt>标题</dt>

                <dd>内容</dd> 

        </dl>

        5、表格标签

<table>

<thead>(表头)

<tr>(行)

        <td>id</td>(列)

        <td>name</td>

        <td>age</td>

</tr>

</thead>

<tbody>(表身体)

<tr>

        <td>1</td>

        <td>jack</td>

        <td>18</td>

</tr>

</tbody>

</table> 

 

属性:

        border:表格边框

        cellpadding:内边框

        cellspacing:外边框

        width:像素,百分比(最好通过css来设置长宽)

        rowspan:单元格竖跨多少行

        colspan:单元格横跨多少行(就是合并单元格)

        6、form表单标签

功能:表单用于向服务器传输数据,实现用户和web服务器的交互。表单标签包含文本字段,密码字段,日期,复选框,单选框,提交按钮,重置按钮等。包含textarea,select,label,标签等 

 

<form action="">

        用户名:<input type="text">

        密码:<input type="password">

        日期:<input type="date">

               <input type="checkbox" >read

                <input type="checkbox">run

                <input type="checkbox">  game

               <input type="radio">男

                <input type="radio"> 女

                <input type="submit" value="提交按钮">

                <input type="reset" value="重置按钮">

                <button>普通按钮</button>  

                <input type="hidden" value="123">

                <input type="file">

</form>

 

type属性:

        text:普通文本(明文)

        password:密文显示

        date:日期

        checkbox:复选框

        radio:单选框

        submit:提交按钮

        reset:重置按钮

        hidden:隐藏输入框

        file:文件选择框

 

属性:

        checked:radio和checkbox默认被选中的项

        readonly:text和password设置只读

        disable:所有input均适用(禁用)

        7、select标签

<form action="">

<select name="" id="">

        <option value="">上海</option>

        <option value="">北京</option>

        <option value="">深圳</option>

</select>

</form>

 

属性:

        multiple:设置为多选,多选时需要按住ctrl键

        selected:设置为默认

        disabled:禁用选中该项

        value:定义提取时的选项值

        8、textarea多行文本标签

<form>

<textarea name="" id="" cols="" rows=""></textarea>

</form>

 

属性:

        name:名称

        rows:行数

        cols:列数

        disabled:禁用

        9、label标签

说明:

        1、label元素不会向用户呈现任何特殊效果

        2、<label>标签的for属性应当与相关元素的id属性相同

 

<form>

        <label for="id1"></label>

        <input type="text" id="id1">

</form>

五、验证form表单朝后端提交数据

<from action="">

action:里面写朝后端提交的地址,向什么地址就朝哪个地址提交数据

 

填写地址3种方式:

        1、action中什么也不填,默认朝当前地址提交

        2、action中填写完整地址:

        3、只写后缀:他会自动帮你补全ip地址和端口port

 注意:目前只能使用第二种,填写完整地址

 


重要:form表单要想把数据提交到后端,,每个标签必须有要有name属性。name属性值就是提交到后端的key中,用户输入的内容就是value值

 

针对复选框和单选框都应该有一个value值,以便前端区别用户选择哪个选项

对于文件数据的提交需要满足的两个条件

1、请求方式必须是post

2、数据编码方式:

        1. application/x-www-form-urlencoded

        2. multipart/form-data

        3. json

3、编码方式必须是multipart/for-data

4、urlencoded只能够提交不是文件的数据,form-data可以提交普通数据和文件数据

5、urlencoded形式的数据:

                username=&password=&date=&hidden=123&myfile=&city=

6、multipart/form-data形式的数据:

                username=&password=&date=&hidden=123&myfile=&city=
                    boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy

                文件数据

                对于form-data提交的数据,后端还是在form里面取普通数据,而在files里面取取文件数据

 7、form表单不能够提交json数据

8、如果想提交json格式的数据:Ajax技术,第三方的api工具postman

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

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

相关文章

uniapp原生插件之安卓获取设备唯一标识

插件介绍 安卓获取设备唯一标识&#xff0c;集成了获取imei&#xff0c;获取安卓ID&#xff0c;获取GUID&#xff0c;获取获取OAID/AAID等 插件地址 安卓获取设备唯一标识 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 uniapp 安卓获取设备唯一标…

安防视频监控平台EasyCVR服务器需要开启firewalld防火墙,该如何开放端口?

智能视频监控/视频云存储/集中存储/视频汇聚平台EasyCVR具备视频融合汇聚能力&#xff0c;作为安防视频监控综合管理平台&#xff0c;它支持多协议接入、多格式视频流分发&#xff0c;视频监控综合管理平台EasyCVR支持海量视频汇聚管理&#xff0c;可应用在多样化的场景上&…

MacOS安装git

文章目录 通过Xcode Command Lines Tool安装(推荐)终端直接运行git命令根据流程安装先安装Command Lines Tool后再安装git 官网下载二进制文件进行安装官方国外源下载二进制文件(不推荐)国内镜像下载二进制文件(推荐)安装git 通过Xcode Command Lines Tool安装(推荐) 简单来讲C…

Ubuntu 20.04设置虚拟内存 (交换内存swap)解决内存不足

数据库服务器程序在运行起来之后&#xff0c;系统内存不足。 在系统监控中发现&#xff0c;当数据库服务程序启动后&#xff0c;占用了大量内存空间&#xff0c;导致系统的剩余的内存往往只有几十MB。 在ubuntu系统中&#xff0c;swap空间就是虚拟内存&#xff0c;所以考虑在磁…

图数据库Neo4j——Neo4j简介、数据结构 Docker版本的部署安装 Cypher语句的入门

前言 MySQL是一种开源的关系型数据库管理系统&#xff0c;使用SQL作为其查询语言&#xff0c;常见的关系型数据库有MySQL、Oracle、SQL Server、PostgreSQL等。相关博客文章如下&#xff1a; 【合集】MySQL的入门进阶强化——从 普通人 到 超级赛亚人 的 华丽转身PostgreSQL数…

hustoj在线判题平台详细搭建二开及美化过程(ubuntu20.04 / centos7.9)常见问题解决

服务器配置需求 阿里云 腾讯云 华为云均可&#xff0c;腾讯云目前是最合适的。 腾讯云 2H4G 5M 60GB 轻量应用服务器 承载大约 200~400人使用&#xff0c;经过压力测试&#xff0c;评测并发速度可满足130人左右的在线比赛。 镜像选Ubuntu22.04LTS&#xff0c;物理机安装Ubun…

Windows下多Chrome谷歌浏览器版本共存

场景 某些年代久远的 WEB 应用&#xff0c;必须在指定的浏览器或版本才能正常运行&#x1f602;&#xff0c;此时就需要多个版本 chrome 浏览器共存。 解决方案 下载指定版本 可以从 https://www.chromedownloads.net/ 下载需要的版本&#xff0c;此处下载的是87.0.4280.14…

分布式锁-Redis红锁解决方案

一 分布式锁的概念 1&#xff1a;概念 分布式锁&#xff08;多服务共享锁&#xff09; 在分布式的部署环境下&#xff0c;通过锁机制来让多客户端互斥的对共享资源进行访问控制分布式系统不同进程共同访问共享资源的一种锁的实现。如果不同的系统或同一个系统的不同主机之间共…

虹科资讯 | 10月智能制造行业动态回顾

文章来源&#xff1a;虹科工业控制 阅读原文&#xff1a;https://mp.weixin.qq.com/s/0jR_QgmR6tmrRoTFAo8mFw 10月&#xff0c;虹科与PLCopen合作开展IEC 61131-3培训&#xff0c;目前正在火热报名中&#xff1b;人工智能领域的迅猛发展引起了智能制造业的广泛关注&#xff…

都2023年了,不会还有人不会设计软件测试用例叭?不会吧不会吧

一、概念 测试用例的基本概念&#xff1a; 测试用例&#xff08;Test Case&#xff09;是为了实施测试而向被测试的系统提供的一组集合&#xff0c;这组集合包含&#xff1a;测试环境、操作步骤、测试数据、预期结果等要素 。 主要步骤&#xff1a; 测试环境——测试步骤—…

逻辑(css3)_强制不换行

需求 如上图做一个跑马灯数据&#xff0c;时间、地点、姓名、提示文本字数都不是固定的。 逻辑思想 个人想法是给四个文本均设置宽度&#xff0c;不然会出现不能左对齐的现象。 此时四个文本均左对齐&#xff0c; 垂直排列样式也比较好看&#xff0c;但是出现一个缺点&#…

激光雷达标定板提高自主驾驶功能的感知精度

激光雷达&#xff08;LiDAR&#xff09;是一种通过发射激光束并测量反射回来的时间来测量目标距离和形状的传感器。为了提高激光雷达的感知精度和稳定性&#xff0c;需要进行激光雷达标定&#xff0c;以确定其激光束的准确性和稳定性。 如果没有激光雷达&#xff0c;自动驾驶的…

【Git】Git暂存使用

当我们正常使用Git切换分支时&#xff0c;会出现以下提示&#xff08;请在切换分支之前提交您的更改或隐藏它们&#xff09;&#xff1a; Please commit your changes or stash them before you switch branches. 这是由于你现有分支上有修改还没有commit&#xff0c;而你又选择…

GPT与人类共生:解析AI助手的兴起

随着GPT模型的崭新应用&#xff0c;如百度的​1​和CSDN的​2​&#xff0c;以及AI助手的普及&#xff0c;人们开始讨论AI对就业市场和互联网公司的潜在影响。本文将探讨GPT和AI助手的共生关系&#xff0c;以及我们如何使用它们&#xff0c;以及使用的平台和动机。 GPT和AI助手…

2127. 参加会议的最多员工数 (困难,基环内向树,拓扑排序)

思路&#xff1a; 将每个员工作为节点&#xff0c;喜欢的关系作为边&#xff0c;显然是能够组成若干张连通图的&#xff0c;关键就在于如何理解一张图首先要证明&#xff1a;任何一个第一步构成的图必是一个有且仅有一个环的连通图&#xff08;如下面图片所示&#xff0c;也称…

【uniapp】JavaScript基础学习-20231027

今天有找到一个比较好的网站 https://www.w3school.com.cn/js/index.asp 介绍也全面&#xff0c;内容也比较多。我觉得把最基本的语法看看&#xff0c;然后可以上手写代码了。其他的就是需要靠长期的学习和积累了。 基础语法的使用&#xff1a; 1、定义一个变量 2、对变量赋值 …

《TCP/IP详解 卷一:协议》第5章的IPv4数据报的总长度字段出现“不需要大于576字节的IPv4数据报“相关内容的解释

《TCP/IP详解 卷一&#xff1a;协议》第5章的IPv4数据报的总长度字段的一些解释&#xff0c;出现以下内容&#xff08;有省略&#xff09;&#xff1a; ....另外&#xff0c;主机不需要接收大于576字节的IPv4数据报.....以避免576字节的IPv4限制。 英文原文的内容&#xff08;有…

电子沙盘数字沙盘地理信息开发教程第17课

M3DGIS电子沙盘数字沙盘地理信息开发教程第17课新增加属性在MTGIS3d控件 public bool ShowFLGrid;//是否显 示方里网格。 public bool Atmosphere;//是否显示大气圈。&#xff08;因为WPF不支持shader功能&#xff0c;所以效果嘛。。。&#xff09; 在SDK中提供底层的模型访问接…

如何选择合适的进口跨境商城源码?揭秘电商平台的成功之道

了解进口跨境电商平台源码的重要性 在进口跨境电商行业的兴起中&#xff0c;选择合适的商城源码是创业者成功的关键之一。进口跨境商城源码可提供网站架构、功能模块、支付系统、物流管理等基础构建&#xff0c;帮助企业快速搭建属于自己的商城平台。然而&#xff0c;在众多商城…

区块链-蚂蚁链(阿里系产品),至信链(腾讯系),长安链(国家队)

目录 区块链-蚂蚁链&#xff08;阿里系产品&#xff09;,至信链&#xff08;腾讯系&#xff09;,长安链&#xff08;国家队&#xff09; ①蚂蚁链&#xff08;阿里系产品&#xff09; ②至信链&#xff08;腾讯系&#xff09; ③长安链&#xff08;国家队&#xff09; Hyp…