html的学习笔记

开发工具:vscode

文字标签

h1:一级标题,h2:二级标题·····h6
p:段落标签
hr:分隔线
br:换行
strong/b:文字加粗
ins/u:下划线
em/i:倾斜
del/s:删除线

媒体标签

图片标签

img:图片标签
<img src="" alt="" title="">

src(属性名)="属性值"

属性注意点:

alt的属性值:替换文本(当图片加载不出来的时候,就会显示alt的文本,成功则不会显示
title:鼠标悬停的时候显示文本
width和height:宽度和高度(数字) 注意:如果只设置了一方,另一方会等比例变化

路径

相对路径

在当前文件像下面去找你要的文件

同级(俩种都行):
<img str="图片.jpg">
<img str="./图片.jpg">
下级:
<img str="和文件的同级文件夹并包含你所需的图片/图片.jpg">
上级(这是上一级,如果要上更多级的话就用相应数量的  ../  )
<img str="../图片.gif">
绝对路径

从盘开始去找

音频标签

<audio src=""></audio>

视频标签

<video src="./SNH48袁一琦-风向 (Wind Direction)(标清).mp4" controls></video>

视频标签目前支持三种模式:MP4,WebM,Ogg

链接标签

<a href="超链接" target="">文本</a>
//超链接里面写网址或者自己的相对路径或者#

补充:#为空链接,相当于一个占位符

属性名:target

属性值:目标网页的打开形式

取值:

_self:默认值,在当前窗口跳转(覆盖原有网页)

_blank:在新窗口中跳转(保留原网页)

列表标签

无序列表,自定义列表,有序列表

无序列表

注意:ul里面只能放li标签,li标签可以包含任何标签

有序列表

注意:ol里面只能放li标签,li标签可以包含任何标签

自定义列表

注意:dl里面只能放dt/dd标签,dt/dd标签可以包含任何标签

表格

    <table><tr><td>name</td><td>class</td><td>sex</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>

注意:table>tr>td

表格标题和表头单元格标签

    <table border="1"><caption>学生成绩单</caption><tr><th>name</th><th>class</th><th>sex</th></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>

运行结果

表格的结构标签

  <table border="1"><caption>学生成绩单</caption><thead><tr><th>name</th><th>class</th><th>sex</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr></tbody><tfoot><tr><td>总结</td><td>shuai</td><td>帅</td></tr></tfoot></table>

合并单元格(跨行合并,跨列合并)

注意:只有同一个标签结构标签中的单元格才能合并,不能跨结构标签合并

    <table border="1"><caption>学生成绩单</caption><thead><tr><th>name</th><th>class</th><th>sex</th></tr></thead><tbody><tr><td>1</td><td rowspan="2">2</td><td>3</td></tr><tr><td>2</td>     <td>5</td></tr></tbody><tfoot><tr><td>总结</td><td>shuai</td><td>帅</td></tr></tfoot></table>

表单(手机用户信息的表单效果)

一般用途:登陆注册搜索

标签名:input

通过不同的type属性值展示不同的效果

    文本框:<input type="text"><br><br>密码框:<input type="password"><br><br>性别:<input type="radio"><br><br>多选框:<input type="checkbox"><br><br>文件选择:<input type="file"><br><br>提交按钮:<input type="submit">

在网页中输入单行文本的表单控件

属性名说明
placeholder占位符,提示用户输入内容的文本
文本框:<input type="text" placeholder="请输入账号">

单选功能中的多个选项设置

性别:<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女<br><br>多选框:<input type="checkbox" name="like">熬夜 <input type="checkbox" name="like">吃饭 <input type="checkbox" name="like">打豆豆<br><br>

文件选择中上传多个

    文件选择:<input type="file" multiple>

按钮

    <form action="">文本框:<input type="text" placeholder="请输入账号"><br><br>密码框:<input type="password" placeholder="密码"><br><br>性别:<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女<br><br>多选框:<input type="checkbox" name="like">熬夜 <input type="checkbox" name="like">吃饭 <input type="checkbox" name="like">打豆豆<br><br>文件选择:<input type="file" multiple><br><br><input type="submit"><input type="reset"><input type="button" value="普通按钮">
//想要按钮显示文字就在后面加上value=“文本”</form>

<button type="button">按钮</button>
<button type="submit">提交按钮</button>//提交

上面这个代码实现的功能和上面是一样的

select下拉菜单标签

    <select name="" id=""><option value="">beijing</option><option value="">shanghai</option><option value="" selected>shenzhen</option></select>

文本域标签

label标签

功能:点击文字也可选中

        性别:<input type="radio" name="sex" id="nan"><label for="nan">男</label><label><input type="radio" name="sex" checked>女</label>

上面代码中男女用的是不同方法,第一个是把label加在input的后面,第二个方法是用label将input包裹

语义化标签

div标签一行只显示一个
span标签一行可以显示多个

有语义的标签

用途:做手机端网页

具体位置

字符实体

注意:网页不认识多个空格,只认识一个

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

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

相关文章

vue中使用ailwind css

官网地址&#xff1a; 安装 - Tailwind CSS 中文网 推荐一个网站&#xff0c;里面可以查询所有的TailWindCSS的class样式&#xff1a; Tailwind CSS Cheat Sheet npm安装&#xff1a; 注意&#xff1a;1、这里要用npm&#xff0c;不要用cnpm。2、最好用install&#xff0c;不要…

泛型的相关内容

首先我们来了解一下什么是泛型&#xff0c;泛型的作用又是什么。 泛型的形式是 ArrayList<Object> objects new ArrayList<>(); 这里的<Object>这个就是泛型&#xff0c;添加泛型的作用又是什么呢&#xff0c;它可以限制添加对象的类型&#xff0c;比如A…

黑马点评05分布式锁 1互斥锁和过期时间

实战篇-09.分布式锁-基本原理和不同实现方式对比_哔哩哔哩_bilibili 1.分布式锁 因为jvm内部的sychonized锁无法在不同jvm之间共享锁监视器&#xff0c;所以需要一个jvm外部的锁来共享。 2.redis setnx互斥锁 加锁解锁即可 2.1不释放锁可能死锁 redis 的setnx不会自动释放锁…

用CC三维建模建出的OSGB格式,用模方打不开,显示该路径包含OSGB瓦块数量0,是什么原因?

答&#xff1a;模方只识别tile命名的模型文件&#xff0c;此模型是不分块输出&#xff0c;要平面切块重新跑。 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.1新增自动单体化建模功能&…

巴贝拉葡萄酒是单一品种还是混合品种制成的?

大多数巴贝拉葡萄酒都是由单一的巴贝拉葡萄品种制成的&#xff0c;许多意大利葡萄酒商开始尝试在巴贝拉葡萄酒中加入其它葡萄品种&#xff0c;其中两个最受欢迎的意大利品种是皮埃蒙特的巴贝拉德阿尔巴和达斯蒂。和朋友在一家意大利餐厅吃饭&#xff0c;被酒单吓到了&#xff1…

10.1Linux输入子系统介绍

输入设备介绍 鼠标、键盘、按键、触摸屏等提供输入支持的设备都属于输入设备&#xff0c;在Linux也提供了一套驱动框架“input 子系统”与之对应&#xff0c;用于抽象输入设备&#xff0c;并提供管理输入设备驱动和输入事件处理程序的功能 input 子系统 input 子系统用于管理…

GPT 魔力涌现

GPT 二、Prompt 的典型构成 角色&#xff1a;给 AI 定义一个最匹配任务的角色&#xff0c;比如&#xff1a;「你是一位软件工程师」「你是一位小学老师」指示&#xff1a;对任务进行描述上下文&#xff1a;给出与任务相关的其它背景信息&#xff08;尤其在多轮交互中&#xff…

Java: Random

/*** encoding: utf-8* 版权所有 2023 涂聚文有限公司* 许可信息查看&#xff1a;* 描述&#xff1a; //https://commons.apache.org/proper/commons-lang/javadocs/api-2.6/org/apache/commons/lang/RandomStringUtils.html* //https://commons.apache.org/pro…

详解RTC:以华人文化打造链上生态

文化是人类在发展的历史长河中淘洗出来的智慧结晶&#xff0c;随着人类社会的进步和变迁&#xff0c;经历了从口口相传到互联网等不同历史时代的传承和创新。在数字技术飞速发展的当今&#xff0c;区块链技术为文化的创新与传承提供了全新的空间和方式&#xff0c;使其得以在新…

ACL与NAT

目录 一、ACL &#xff08;一&#xff09;ACL基本理论 &#xff08;二&#xff09;ACL的类型 1.基本ACL 2.高级ACL 3.二层ACL &#xff08;三&#xff09;基本原理 &#xff08;四&#xff09;项目实验 通配符掩码 二、NAT &#xff08;一&#xff09;基本理论 &am…

ansible的基本使用

本章主要介绍在RHEL8中如何安装ansible 及 ansible 的基本使用。 ansible是如何工作的在 RHEL8中安装ansible编写ansible.cfg和清单文件ansible 的基本用法 如果管理的服务器很多&#xff0c;如几十台甚至几百台&#xff0c;那么就需要一个自动化管理工具了&#xff0c; ansi…

跟随鼠标动态显示线上点的值(基于Qt的开源绘图控件QCustomPlot进行二次开发)

本文为转载 原文链接&#xff1a; 采用Qt快速绘制多条曲线&#xff08;折线&#xff09;&#xff0c;跟随鼠标动态显示线上点的值&#xff08;基于Qt的开源绘图控件QCustomPlot进行二次开发&#xff09; 内容如下 QCustomPlot是一个开源的基于Qt的第三方绘图库&#xff0c;能…

打工人副业变现秘籍,某多/某手变现底层引擎-Stable Diffusion 黑白老照片上色修复

在这个时代,我们习惯于拥有高清、色彩丰富的照片,然而,那些古老的黑白色老照片由于年代的久远,往往会出现模糊、破损等现象。 那么今天要给大家介绍的是,用 Stable Diffusion 来修复老照片。 前段时间 ControlNet 的除了上线了“IP-Adapter”模型以外还增加另一个…

【深度学习】TensorFlow深度模型构建:训练一元线性回归模型

文章目录 1. 生成拟合数据集2. 构建线性回归模型数据流图3. 在Session中运行已构建的数据流图4. 输出拟合的线性回归模型5. TensorBoard神经网络数据流图可视化6. 完整代码 本文讲解&#xff1a; 以一元线性回归模型为例&#xff0c; 介绍如何使用TensorFlow 搭建模型 并通过会…

【Android12】Android Framework系列--AMS启动Activity分析

AMS启动Activity分析 通过ActivityManagerService(AMS)提供的方法&#xff0c;可以启动指定的Activity。比如Launcher中点击应用图标后&#xff0c;调用AMS的startActivity函数启动应用。 AMS提供的服务通过IActivityManager.aidl文件定义。 // frameworks/base/core/java/an…

Python将已标注的两张图片进行上下拼接并修改、合并其对应的Labelme标注文件(v2.0)

Python将已标注的两张图片进行上下拼接并修改、合并其对应的Labelme标注文件&#xff08;v2.0&#xff09; 前言前提条件相关介绍实验环境上下拼接图片并修改、合并其对应的Labelme标注文件代码实现输出结果 前言 此版代码&#xff0c;相较于Python将已标注的两张图片进行上下拼…

区块链的可扩展性研究【06】Plasma

1.Plasma&#xff1a;Plasma 是一种基于以太坊区块链的 Layer2 扩容方案&#xff0c;它通过建立一个分层结构的区块链网络&#xff0c;将大量的交易放到子链上进行处理&#xff0c;从而提高了以太坊的吞吐量。Plasma 还可以通过智能合约实现跨链交易&#xff0c;使得不同的区块…

【️Zookeeper是CP还是AP的?】

&#x1f60a;引言 &#x1f396;️本篇博文约3000字&#xff0c;阅读大约10分钟&#xff0c;亲爱的读者&#xff0c;如果本博文对您有帮助&#xff0c;欢迎点赞关注&#xff01;&#x1f60a;&#x1f60a;&#x1f60a; &#x1f5a5;️Zookeeper是CP还是AP的&#xff1f; ✅…