HTML 01

1.html使用标签来表达

结束标签多一个/

<strong>文字内容</strong>
<hr>

包裹内容就是双标签,换行等是单标签

浏览器中显示内容:

 2.html的骨架是网页模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title>
</head>
<body>给用户看的
</body>
</html>

html:整个网页

head:网页头部,存放给浏览器看的代码如CSS       

body:网页主体,存放给用户看的代码,如文字,图片

title:网页标题

vscode快速生成骨架:!+ tab / enter

浏览器显示:

3.标签关系

父子:父在子的缩进之上(嵌套)

兄弟:缩进一样(并列)

html是head和body的父,head和body是兄弟关系

4.注释

注释不会在浏览器中显示

vscode中,添加删除/注释的快捷键:ctrl + /

<body><!-- 这是文字,注释! --><strong>加粗显示</strong>普通文字
</body>

显示: 

5.标题标签 

标题名:h1~h6

<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标签</h5><h6>六级标题</h6>
</body>

标题独占一行 

规范:h1在一个网页只能用一次,用来放新闻标题或网页logo,其他无限制

6.段落标签

<body><p>新手晋升ES6 - 12特性,至少ES6,尝试看看八股文,理解this,作用域,深浅拷贝,原型链,能用明白一些库,框架,html语义化,less sass,能写出动态效果,基本排版能力,可以不借助框架写出漂亮的页面,配合ajax做数据交互找工作看天赋,可能根据你的理解能力录取</p><p>新手晋升ES6 - 12特性,至少ES6,尝试看看八股文,理解this,作用域,深浅拷贝,原型链,能用明白一些库,框架,html语义化,less sass,能写出动态效果,基本排版能力,可以不借助框架写出漂亮的页面,配合ajax做数据交互找工作看天赋,可能根据你的理解能力录取</p>
</body>

p来表示

7.换行,水平线 

    第一行<br>第二行<hr><br><hr>

一个br是一行,hr是水平线

8.文本格式化标签

    <strong>strong加粗</strong><b>b加粗</b><br><em>em倾斜</em><i>i倾斜</i><br><ins>ins下划线</ins><u>u下划线</u><br><del>del删除线</del><s>s删除线</s>

strong等如图都有对应的快捷方式,但是一般都用左边的写法

9.图像标签

<body><img src="./szk.jpg"><img src="./ksm.jpg">
</body>

]

打开后发现图片显示在同一行

图片标签属性:

示例:

    <!-- 图片加载不出来,提示文字 --><img src="./szk2.jpg" alt="这里是图片"><!-- 鼠标停在图片上的提示 --><img src="./szk.jpg" title="这也是图片"><!-- 浏览器缩放图片默认等比例缩放 --><img src="./ksm.jpg" width="100"><img src="./ksm.jpg" height="600">

 加载不出来的提示文字

尺寸比较

 10.路径

相对路径

从当前文件位置出发查找目标文件

注意看文件位置

绝对路径
<body><img src="E:\image\szk.jpg"><img src="E:/image/szk.jpg">
</body>

绝对路径应用场景:友情链接

11.超链接

点击后跳转到其他页面

输入a即可

<body><!-- 跳转到网上地址 --><a href="https://www.baidu.com/">跳转到百度</a><!-- 跳转到本地地址,且新加窗口跳转 --><a href="./01-标签的写法.html" target="_blank">跳转到01</a><!-- herf属性值写#,表示空链接,不会跳转 --><a href="#">空链接</a>
</body>

12.多媒体标签-音频和视频

音频标签
<!-- controls音频面板 loop循环 autoplay自动播放,浏览器默认禁用--><audio src="./music/Chris Rickwood - Banzai.mp3" controls loop autoplay></audio>

 

视频标签

<!-- controls控制面板 loop循环 muted静音 autoplay自动播放--><!-- 自动播放需要muted --><video src="./media/1.我从没觉得跳广场舞开心过 【酒醉的蝴蝶】(Av831713062,P1).mp4" controls loop muted autoplay></video>

浏览器支持在静音状态下自动播放,也就是如果要自动播放需要muted和autoplay一起加

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

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

相关文章

Full GC的认识、预防和定位

(/≧▽≦)/~┴┴ 嗨~我叫小奥 ✨✨✨ &#x1f440;&#x1f440;&#x1f440; 个人博客&#xff1a;小奥的博客 &#x1f44d;&#x1f44d;&#x1f44d;&#xff1a;个人CSDN ⭐️⭐️⭐️&#xff1a;传送门 &#x1f379; 本人24应届生一枚&#xff0c;技术和水平有限&am…

【leetcode】429. N 叉树的层序遍历

题目描述 给定一个 N 叉树&#xff0c;返回其节点值的_层序遍历_。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;。 树的序列化输入是用层序遍历&#xff0c;每组子节点都由 null 值分隔&#xff08;参见示例&#xff09;。 示例 1&#xff1a; 输入&#xff1a;…

使用Python编写简单学生管理系统

学完python基础&#xff0c;把学过的知识运用起来做一个简单的学生管理系统 1、需求分析 需求&#xff1a;进入系统显示系统功能界面&#xff0c;功能如下&#xff1a; ① 添加学员信息 ② 删除学员信息 ③ 修改学员信息 ④ 查询学员信息(只查询某个学员) ⑤ 遍历所有学…

【蓝桥杯】蓝桥杯算法复习(一)

&#x1f600;大家好&#xff0c;我是白晨&#xff0c;一个不是很能熬夜&#x1f62b;&#xff0c;但是也想日更的人✈。如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff0c;关注一下&#x1f440;白晨吧&#xff01;你的支持就是我最大的动力&#xff01;&#x1f4…

Vue源码系列讲解——过滤器篇【三】(解析过滤器)

目录 1. 前言 2. 在何处解析过滤器 3. parseFilters函数分析 4. 小结 1. 前言 在上篇文章中我们说了&#xff0c;无论用户是以什么方式使用过滤器&#xff0c;终归是将解析器写在模板中&#xff0c;既然是在模板中&#xff0c;那它肯定就会被解析编译&#xff0c;通过解析用…

【自动化】PyoutuGUI操作键鼠

自动化之PyoutuGUI操作键鼠 文章目录 自动化之PyoutuGUI操作键鼠  &#x1f449;引言&#x1f48e;一、初始化环境二、键盘鼠标事件三、消息框功能四、案例实战自动登录WPS 五、问题解决 &#x1f449;引言&#x1f48e; 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一…

EF类和E/F类功率放大器(能量转换器)的波形推导和理想仿真--基于Matlab和ADS

EF类和E/F类功率放大器&#xff08;能量转换器&#xff09;的波形推导和理想仿真–基于Matlab和ADS 参考论文&#xff1a;Modeling and Analysis of Class EF and Class E/F Inverters With Series-Tuned Resonant Networks(2016) 这篇文章的思路和MTT的文章A Generalized Hi…

存储引擎的简介

简介&#xff1a; 1.在mysql存储引擎可以说就是指表的类型&#xff0c;可以称为表处理器&#xff0c;以表的形式存储。 2.他的功能就是接收上层传下来的指令&#xff0c;然后对表中的数据进行提取写入操作。 目的&#xff1a; 为了管理方便&#xff0c;我们把连接管理&#xf…

如何在一个pycharm项目中创建jupyter notebook文件,并切换到conda环境中

1、第一步可以直接在pycharm项目中创建jupyter notebook文件 2、假若想要切换成pytorch环境做实验例子&#xff0c;会发现报这个错误 Jupyter server process exited with code 1 C:\Users\12430\.conda\envs\pytorch3.11\python.exe: No module named jupyter在这里&#xff…

Canvas笔记05:绘制文本,可视化图表中最常用

hello&#xff0c;我是贝格前端工场&#xff0c;最近在学习canvas&#xff0c;分享一些canvas的一些知识点笔记&#xff0c;本期分享canvas绘制文本的知识&#xff0c;欢迎老铁们一同学习&#xff0c;欢迎关注&#xff0c;如有前端项目可以私信贝格。 Canvas绘制文本是指使用H…

【粉丝福利第四期】:《低代码平台开发实践:基于React》(文末送书)

文章目录 前言一、React与低代码平台的结合优势二、基于React的低代码平台开发挑战三、基于React的低代码平台开发实践四、未来展望《低代码平台开发实践&#xff1a;基于React》五、粉丝福利 前言 随着数字化转型的深入&#xff0c;企业对应用开发的效率和灵活性要求越来越高…

PyTorch之完整的神经网络模型训练

简单的示例&#xff1a; 在PyTorch中&#xff0c;可以使用nn.Module类来定义神经网络模型。以下是一个示例的神经网络模型定义的代码&#xff1a; import torch import torch.nn as nnclass MyModel(nn.Module):def __init__(self):super(MyModel, self).__init__()# 定义神经…

运维打工人,兼职跑外卖的第二个周末

北京&#xff0c;晴&#xff0c;西南风1级。 前序 今天天气还行&#xff0c;赶紧起来&#xff0c;把衣服都洗洗&#xff0c;准备准备&#xff0c;去田老师吃饭早饭了。 一个甜饼、一个茶叶蛋、3元自助粥花费7.5。5个5挺吉利的。 跑外卖的意义 两个字减肥&#xff0c;记录刚入…

基于最小二乘递推算法的系统参数辨识matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于最小二乘递推算法的系统参数辨识。对系统的参数a1&#xff0c;b1&#xff0c;a2&#xff0c;b2分别进行估计&#xff0c;计算估计误差以及估计收敛曲线&#…

如何在Windows中对硬盘进行分区?这里有详细步骤

本文介绍如何在Windows11、10、8、7、Vista和XP中对硬盘进行分区 如果这个过程听起来比你想象的要复杂一点,不要担心,因为事实并非如此。在Windows中对硬盘进行分区一点也不难,通常只需要几分钟。以下是操作方法。 注意:这些说明适用于Windows 11、Windows 10、Windows 8…

腾讯云轻量应用服务器流量用完了怎么办?

腾讯云轻量服务器流量用完了怎么办&#xff1f;超额流量另外支付流量费&#xff0c;流量价格为0.8元/GB&#xff0c;会自动扣你的腾讯云余额&#xff0c;如果你的腾讯云账号余额不足&#xff0c;那么你的轻量应用服务器会面临停机&#xff0c;停机后外网无法访问&#xff0c;继…

js【详解】Promise

为什么需要使用 Promise &#xff1f; 传统回调函数的代码层层嵌套&#xff0c;形成回调地狱&#xff0c;难以阅读和维护&#xff0c;为了解决回调地狱的问题&#xff0c;诞生了 Promise 什么是 Promise &#xff1f; Promise 是一种异步编程的解决方案&#xff0c;本身是一个构…

自然语言处理之语言模型(LM)介绍

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;的一个重要分支&#xff0c;它旨在使计算机能够理解、解释和生成人类语言。在自然语言处理中&#xff0c;语言模型&…

阿珊详解Vue Router的守卫机制

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【漏洞复现】Salia PLCC cPH2 远程命令执行漏洞(CVE-2023-46359)

0x01 漏洞概述 Salia PLCC cPH2 v1.87.0 及更早版本中存在一个操作系统命令注入漏洞&#xff0c;该漏洞可能允许未经身份验证的远程攻击者通过传递给连接检查功能的特制参数在系统上执行任意命令。 0x02 测绘语句 fofa&#xff1a;"Salia PLCC" 0x03 漏洞复现 ​…