HTML使用

文章目录

  • 一、简介
  • 二、HTML快速入门
  • 三、基础标签
  • 四、图片、音频、视频标签
  • 五、超链接标签
  • 六、列表标签
  • 七、表格标签
  • 八、布局标签
  • 九、表单标签
  • 十、表单向标签

一、简介

在这里插入图片描述

二、HTML快速入门

在这里插入图片描述
在这里插入图片描述

<html>
    <head>
        <title>你好</title>
    </head>
    <body>
    再见
    </body>

</html>

在这里插入图片描述

三、基础标签

在这里插入图片描述

<!--html5 标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--页面字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>

<hr>

<!--
    html 表示颜色:
        1、英文单词:red,pink,bule......
        2、rgb(值1,值2,值3):值的取值范围:0~255
        3、#值1值2值3:值的范围: 00~FF
-->
<font face="楷体" size="5" color="#7fffd4">你好</font>

<hr>

为了帮助你在激烈的抢票竞争中获得更大的成功机会,本文将介绍抢票软件的实现原理以及我所了解的一些抢票方式。但是,请不要过度将希望寄托于抢票软件,它有时也不灵,经过我的验证,即使你用到了抢票软件,也不一定能抢到票。票务平台会经常调整反爬策略打击爬虫行为,如果希望抢票软件保持较高的成功率,是需要开发者针对票务平台的打击策略作出逻辑调整,这个成本是很高的,所以你能随手获得的抢票软件很大概率是抢不到票的或者说是不安全的。<br>
在调研过程发现一个有意思的点 “黄牛的票从来不是抢来的”。相关规定,面向市场公开销售的营业性演出门票数量,不得低于核准观众数量的70%。 而剩下的那 30%,即非公开销售的票,则是黄牛票的主要来源,也叫渠道票。这里面涉及主办方对热门票和冷门票的售票策略,黄牛在这链条中扮演着重要的角色,只要演唱会门票的二级市场不会消失,黄牛就永远不会消失,对于市场本身来说,愿意花更多钱买黄牛票的人,一定是更有需求的人,黄牛不过是市场调节的人格化。

<hr>
<p>
为了帮助你在激烈的抢票竞争中获得更大的成功机会,本文将介绍抢票软件的实现原理以及我所了解的一些抢票方式。但是,请不要过度将希望寄托于抢票软件,它有时也不灵,经过我的验证,即使你用到了抢票软件,也不一定能抢到票。票务平台会经常调整反爬策略打击爬虫行为,如果希望抢票软件保持较高的成功率,是需要开发者针对票务平台的打击策略作出逻辑调整,这个成本是很高的,所以你能随手获得的抢票软件很大概率是抢不到票的或者说是不安全的。<br>
<p>
在调研过程发现一个有意思的点 “黄牛的票从来不是抢来的”。相关规定,面向市场公开销售的营业性演出门票数量,不得低于核准观众数量的70%。 而剩下的那 30%,即非公开销售的票,则是黄牛票的主要来源,也叫渠道票。这里面涉及主办方对热门票和冷门票的售票策略,黄牛在这链条中扮演着重要的角色,只要演唱会门票的二级市场不会消失,黄牛就永远不会消失,对于市场本身来说,愿意花更多钱买黄牛票的人,一定是更有需求的人,黄牛不过是市场调节的人格化。

<hr>
<b>在调研过程发现一个有</b><br>
<i>在调研过程发现一个有</i><br>
<u>在调研过程发现一个有</u><br>

<hr>
<center>
    <b>在调研过程发现一个有</b>
</center>

</body>
</html>

在这里插入图片描述

四、图片、音频、视频标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
    资源路径:
        1、绝对路径:完整路径
        2、相对路径:相对位置关系
            xxx/html/02-图片音频视频.html
            xxx/html/a.jpg

            当前目录下访问方式: ./a.jpg & a.jpg

            xxx/html/02-图片音频视频.html
            xxx/html/img/a.jpg

            ./img/a.jpg
            ../img/a.jpg
            
    尺寸单位:
        1、px:像素
        2、百分比:
-->

<!--图片-->
<img src="a.jpg" width="200" height="400">

<audio src="b.mp3" controls="controls"></audio>

<video src="c.mp4" controls="controls" width="200" height="300"></video>

</body>
</html>

五、超链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="https://www.baidu.com/" target="_blank">百度</a>

</body>
</html>

六、列表标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ol type="A">
  <li>可口可乐</li>
  <li>百事可乐</li>
  <li>七喜</li>
</ol>

<ul type="circle">
  <li>可口可乐</li>
  <li>百事可乐</li>
  <li>七喜</li>
</ul>


</body>
</html>

七、表格标签

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1"cellspacing="0" width="500">

  <tr>
    <th>序号</th>
    <th>品牌log</th>
    <th>品牌名称</th>
    <th>企业名称</th>
  </tr>

  <tr align="center">
    <td>010</td>
    <td><img src="a.jpg" width="60" height="50"></td>
    <td>三只松鼠</td>
    <td>三只松鼠</td>
  </tr>

  <tr align="center">
    <td>020</td>
    <td><img src="a.jpg" width="60" height="50"></td>
    <td>优衣库</td>
    <td>优衣库</td>
  </tr>

  <tr align="center">
    <td>030</td>
    <td><img src="a.jpg" width="60" height="50"></td>
    <td>小米</td>
    <td>小米</td>
  </tr>

</table>

<br>
<hr>
<br>

<table border="1"cellspacing="0" width="500">

  <tr>

    <th colspan="2">品牌log</th>
    <th>品牌名称</th>
    <th>企业名称</th>
  </tr>

  <tr align="center">
    <td>010</td>
    <td><img src="a.jpg" width="60" height="50"></td>
    <td>三只松鼠</td>
    <td>三只松鼠</td>
  </tr>

  <tr align="center">
    <td rowspan="2">020</td>
    <td><img src="a.jpg" width="60" height="50"></td>
    <td>优衣库</td>
    <td>优衣库</td>
  </tr>

  <tr align="center">
    <td>030</td>
    <td><img src="a.jpg" width="60" height="50"></td>
    <td>小米</td>

  </tr>

</table>

</body>
</html>

八、布局标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>我是div</div>
<div>我是div</div>

<span>我是span</span>
<span>我是span</span>

</body>
</html>

九、表单标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
form:
  action:指定表单数据提交的url
    * 表单项数据要想被提交,则必须指定其name属性
  method:指定表单提交方式
    1、get:默认值
      *请求参数会拼接在URL后面
      *url的长度有限制 4KB
    2、post:
      * 请求参数会在http请求协议的请求体中
      *请求参数无限制的
-->
<form action="#" method="post">
  <input type="test" name="username">
  <input type="submit">
</form>

</body>
</html>

十、表单向标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">

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

  <label for="username">用户名:</label>
  <input type="text" name="username" id="username"><br>

  <label for="password"> 密码:</label>
  <input type="password" name="password" id="password"><br>

  性别:
  <input type="radio" name="gender" value="1" id="male"><label for="male"></label>
  <input type="radio" name="gender" value="2" id="rmale"><label for="rmale"></label>
  <br>

  爱好:
  <input type="checkbox" name="hobby" value="1"> 吃饭
  <input type="checkbox" name="hobby" value="2"> 睡觉
  <input type="checkbox" name="hobby" value="3"> 打豆豆
  <br>

  头像:
  <input type="file">
  <br>

  城市:
  <select>
    <option>北京</option>
    <option value="shanghai">上海</option>
    <option>广州</option>
  </select>
  <br>

  个人描述:
  <testarea cols="20" rows="5"></testarea>
  <br>

  <br>
  <input type="submit" value="免费注册">
  <input type="reset" value="重置">
  <input type="button" value="一个按钮">

</form>

</body>
</html>

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

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

相关文章

Springboot整合Mybaits启动过程

Springboot整合Mybaits启动过程 1.前言2.MybatisAutoConfiguration3.SqlSessionFactoryBean3.1 XMLConfigBuilder.parse()3.1.1 XMLMapperBuilder.parse()3.1.1.1 XMLStatementBuilder.parse() 4.SqlSession4.1 Executor 1.前言 直接加载mybatis配置文件&#xff0c;然后创建S…

代码训练LeetCode(7)删除有序数组中的重复项

代码训练(7)LeetCode之删除有序数组中的重复项 Author: Once Day Date: 2024年3月10日 漫漫长路&#xff0c;才刚刚开始… 全系列文章可参考专栏: 十年代码训练_Once-Day的博客-CSDN博客 参考文章: 26. 删除有序数组中的重复项 - 力扣&#xff08;LeetCode&#xff09;力扣…

利用websocket +定时器简易的实现一个网络聊天室

其实原理非常简单,就是客户端用户通过websoket来连接websocket服务端。然后服务端,收集每个用户发出的消息, 进而将每条用户的消息通过广播的形式推送到每个连接到服务端的客户端。从而实现用户的实时聊天。 // TODO : 我主要是讲一下实现思路。并未完善其功能。 1.后端 依赖 …

2024年【电工(初级)】考试内容及电工(初级)考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 电工&#xff08;初级&#xff09;考试内容根据新电工&#xff08;初级&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将电工&#xff08;初级&#xff09;模拟考试试题进行汇编&#xff0c;组成一套电…

线程的魔法:揭开现代操作系统并发执行的面纱

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

elasticsearch篇:RestClient操作

1. RestClient ES官方提供了各种不同语言的客户端&#xff0c;用来操作ES。这些客户端的本质就是组装DSL语句&#xff0c;通过http请求发送给ES。官方文档地址&#xff1a;Elasticsearch Clients | Elastic 其中的Java Rest Client又包括两种&#xff1a; Java Low Level Res…

解读BOT攻击,探索灵活高效的防护之道

回顾早期的互联网应用&#xff0c;由于业务流量比较小&#xff0c;往往单台服务器就能满足负载需求。随着互联网的流量越来越大&#xff0c;单服务器已经不能满足业务需求&#xff0c;无论它优化得再好&#xff0c;都较难承受大量的访问压力。支持负载均衡的技术很多&#xff0…

openssl3.2 - exp - 选择最好的内建椭圆曲线

文章目录 openssl3.2 - exp - 选择最好的内建椭圆曲线概述笔记将 openssl ecparam -list_curves 实现迁移到自己的demo工程备注END openssl3.2 - exp - 选择最好的内建椭圆曲线 概述 在openssl中使用椭圆曲线, 只允许选择椭圆曲线的名字, 无法给定椭圆曲线的位数. 估计每种椭…

扩展学习|系统理解数字经济

文献来源&#xff1a;[1]肖静华,胡杨颂,吴瑶.成长品&#xff1a;数据驱动的企业与用户互动创新案例研究[J].管理世界,2020,36(03):183-205.DOI:10.19744/j.cnki.11-1235/f.2020.0041. [2]陈晓红,李杨扬,宋丽洁等.数字经济理论体系与研究展望[J].管理世界,2022,38(02):208-22413…

浅谈JUC的理解(含JUC知识体系图)

浅谈JUC的理解 一、前言感悟二、并发知识三、一年前回答四、补充体系回答五、补充层次回答六、碎碎念 本文除了说技术&#xff0c;更多的是在一个两年多开发经验的程序员视角下&#xff0c;记录下自己探索到的世界。 如有不妥之处&#xff0c;还请指正。共勉。 一、前言感悟 当…

力扣hot100:239.滑动窗口最大值(优先队列/单调队列)

本题是一个经典的单调队列题。不过用优先队列也能解决。 一、优先队列 在使用优先队列时&#xff0c;我们会遇到这样的问题&#xff1a;如何将一个目标数从优先队列中弹出&#xff1f;如果使用stl这是办不到的&#xff0c;虽然可以自行实现这样的功能。但是我们可以这样思考&am…

什么是GoogLeNet,亮点是什么,为什么是这个结构?

GooLeNet 亮点 最明显的亮点就是引入了Inception&#xff0c;初衷是多卷积核增加特征的多样性&#xff0c;提高泛化能力 &#xff0c;比如&#xff0c;最下边是一个输入层&#xff0c;然后这个输入分别传递给1*1&#xff0c;3 * 3 &#xff0c;5 * 5和一个最大池化层&#xff…

IP数据报格式

每一行都由32位比特&#xff0c;即4个字节组成&#xff0c;每个格子称为字段或者域。IP数据报由20字节的固定部分和最大40字节的可变部分组成。 总长度 总长度为16个比特&#xff0c;该字段的取值以字节为单位&#xff0c;用来表示IPv4数据报的长度(首部长度数据载荷长度)最大…

Long-term Correlation Tracking LCT 目标跟踪算法源码运行

资源 LCT-tracker项目地址VLFeat官网OpenCV下载地址OTB50数据集百度网盘资源 参考博客 一步一步教你跑lct-tracker&#xff08;Win10Matlab 2016bVisual Studio 2015&#xff09;LCT代码跑起来先文章思路总结 正文 1. 环境配置 我的环境&#xff1a;Win11、Visual Studio…

python+realsense

单目相机(RGB影像):分辨率&#xff1a;320180,320240,424240,640360,640480,848480,960540,1280720,19201080&#xff1b;帧率&#xff1a;6,15,30,60 按照博文Python实战之Realsense_realsense python-CSDN博客的代码显示如下&#xff08;我更改了分辨率和帧率&#xff0c;大…

设计模式:观察者模式 ⑧

一、思想 观察者模式是一种常见的设计模式&#xff0c;也称作发布-订阅模式。它主要解决了对象之间的通知依赖关系问题。在这种模式中&#xff0c;一个对象&#xff08;称作Subject&#xff09;维护着一个对象列表&#xff0c;这些对象&#xff08;称作Observers&#xff09;都…

css3中nth-child属性作用及用法剖析

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 标题&#xff1a;CSS3中nth-child属性作用及用法剖析 摘要&#xff1a;CSS3中的nth-child选择器允许我们根据元素位置来定位特定的元素…

Vue3中Vue Router的使用区别

在 Vue 3 中&#xff0c;useRouter 和 useRoute 是两个用于 Vue Router 的 Composition API 函数&#xff0c;它们的用途和返回的对象不同&#xff0c;接下来详细了解一下它们的区别以及如何正确使用它们。 useRouter useRouter 用于获取 router 实例&#xff0c;这个实例提供…

python(5)之处理数组

上次代码结果如下&#xff1a; 1、处理数组的缺失值 1、isnan&#xff08;&#xff09;函数 isnan&#xff08;&#xff09;函数是Numpy模块里的一个可以标记数组中缺失值的位置 代码示例如下&#xff1a; import numpy as np ac np.array([1,2,3,2,3,4,5,9,np.nan,1]) p…

OSPF收发报文实验简述

1、OSPF采用组播形式收发报文&#xff0c;这样可以减少对其它不运行OSPF路由器的影响。 通过wireshark软件对r2 e0/0/0 端口进行数据抓包&#xff0c;发现224.0.0.5为组播地址&#xff0c;如下图