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.hqwc.cn/news/279145.html

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

相关文章

Mybatis-plus介绍与入门

前言 MyBatis-Plus是在MyBatis基础上的一个增强工具库&#xff0c;旨在简化开发者的工作&#xff0c;提高开发效率&#xff0c;同时保留MyBatis的灵活性。使用 MyBatis-Plus 可以减少重复性的代码&#xff0c;简化常见的数据库操作 官方学习文档&#xff1a;MyBatis-Plus (bao…

死锁 + 条件变量 + 生产消费者模型

文章目录 死锁如何解决死锁问题呢&#xff1f;避免死锁 同步条件变量生产消费者模型 死锁 现象 &#xff1a; 代码不会继续往后推进了 问题 一把锁有没有可能产生死锁呢&#xff1f; 有可能 线程第一次申请锁成功&#xff0c;继续再次申请&#xff0c;第二次申请就失败了&am…

从纸笔到屏幕:我的CS笔记记录体验分享

前言 三年大学生活里&#xff0c;我花了很多时间在记录笔记上&#xff0c;也因为现有种类繁多的各种学习方式&#xff0c;和朋友一起走了很多弯路。纸笔&#xff0c;OneNote&#xff0c;Typora…… 想总结分享一下自己大学期间的学习笔记记录方式&#xff08;主要针对计算机学…

不同的葡萄品种的葡萄酒有什么共同特质?

在某种程度上几乎所有的葡萄酒都是混合的&#xff0c;在大多数葡萄酒产地&#xff0c;法律允许在单一品种葡萄酒中混入高达15%的另一种葡萄酒&#xff0c;且还能被称为由主要葡萄酿造的单一品种葡萄酒酒。这些单一品种葡萄酒混合了少量其他葡萄酒&#xff0c;是为了创造一个特质…

centos离线安装mosquitto

1.x86_64架构centos7操作系统mosquitto包 本次真正要安装的机器是x86_64架构的AMD Ryzen 3 &#xff0c;操作系统是centos7 先找一台能联网的centos7机器 添加 EPEL 软件库 yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm下载rpm包 …

【DataSophon】大数据管理平台DataSophon-1.2.1基本使用

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&am…

通过WinCC基本功能实现批次查询及批次报表

谈到WinCC中的批次数据处理和批次报表&#xff0c;也许有人会想到PM-Quality这款专业的批次报表软件。但如果你的银子有限&#xff0c;批次报表要求又比较简单&#xff0c;不妨看看此文。 —《通过 WinCC 基本功能实现批次数据过滤查询以及打印批次数据报表》 实现的功能描述 …

中通单号查询,中通快递物流查询,对需要的单号进行备注

批量查询中通快递单号的物流信息&#xff0c;对需要的单号进行备注。 所需工具&#xff1a; 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;并登录 步骤2&#xff1a;点击主界面左上角的“…

华为OD机试真题-查找一个有向网络的头节点和尾节点-2023年OD统一考试(C卷)

题目描述&#xff1a; 给定一个有向图&#xff0c;图中可能包含有环&#xff0c;图使用二维矩阵表示&#xff0c;每一行的第一列表示起始节点&#xff0c;第二列表示终止节点&#xff0c;如[0, 1]表示从0到1的路径。每个节点用正整数表示。求这个数据的首节点与尾节点&#xf…

linux(centos7)离线安装mysql-5.7.35-1.el7.x86_64.rpm-bundle.tar

1. 卸载mariadb相关rpm # 查找 rpm -qa|grep mariadb rpm -qa|grep mysql# 卸载 rpm -e --nodeps mariadb... rpm -e --nodeps mysql...2. 删除mysql相关文件 # 查找 find / -name mysql# 删除 rm -rf /var/lib/mysql...3. 查看是否有相关依赖&#xff0c;没有需安装 rpm -q…

RocketMQ源码 Broker-SubscriptionGroupManager 订阅组管理组件源码分析

前言 SubscriptionGroupManager 继承了ConfigManager配置管理组件&#xff0c;拥有将内存数据持久化到磁盘文件subscriptionGroup.json的能力。它主要负责维护所有消费组在内存中的订阅数据。 源码版本&#xff1a;4.9.3 源码架构图 核心数据结构 主要的数据结构比较简单&am…

微信小程序使用camera扫码获取相机权限

确保用户隐私指引已经明确使用相机功能 “mp-weixin”: "permission": {"scope.camera": {"desc": "需要使用相机功能&#xff0c;请授权"}}wx.authorize({scope: scope.camera,success(res) {console.log(res, 用户成功授权)// 用户…