前端学习之HTML(第一天)

什么是HTML

HTML是一种用来描述网页的一种语言,HTML不是一种编程语言,而是一种标记语言。

HTML标签

HTML 标签是由尖括号包围的关键词,比如 <html>

HTML 标签通常是成对出现的,比如 <b> 和 </b>

标签对中的第一个标签是开始标签,第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

浏览器

浏览器用于读取HTML文件,并将器作为网页显示。

<!DOCTYPE>声明

作用是用来告诉浏览器,我这是什么文档,该如何解析。

(注:<!DOCTYPE>不区分大小写)

HTML标签

语法结构<标签 属性=“值”>内容</标签>

标签不区分大小写

例子

里面的注释是各个标签的用法

<!DOCTYPE html>
<!-- html是每个html文件都会有的一个标签,文件所有内容都写在html中间 -->
<html>
<!-- head是头部,这个里面都写的是藐视当前网页属性的一些东西,并不显示在页面上 -->
<head><meta charset="utf-8"><!-- title显示当前页面标题 --><title>这是第一个网页</title><!-- style写css代买在这写 --><style>body{/* 背景颜色变为黑色 */background-color: wheat;}</style><!-- 写js的在这里写 --><script type="text/javascript"></script>
</head>
<!-- body是身体,这里是用来描述网页的代码 -->
<body>
<!-- p标签用来分段 -->
<!-- aligen将内容调位置 -->
<!-- strong和b都是加粗,一个是语义化标签,可以区分一些标签搜索的时候更方便,实际两者无区别 -->
<!-- i/em可以让字体变斜 -->
<!-- u可以加粗 -->
<!-- del删除线 -->
<!-- 段落内br换行,会继承原有段落的性 -->
<!-- hr分割线 -->
<!-- span和div是用来区分块的,用来布局页面。span是行内标签内容在一行,div块标签要换行, -->
<!-- sub下标,sup上标 -->
<!-- h1、h2、h3、h4不同级别标题 -->
<!--pre里面咋写内容咋显示-->
<p align="center">这是第一个<b>网页内容</b></p>
<p align="left">这是第一个<strong>网页内容</strong></p>
<p align="right">这是<i>第一个</i>网页内容</p>
<p align="right">这是<em>第一个</em>网页内容</p>
<p align="right">这是第一个<u>网页</u>内容</p>
<p>这是第<del>一个</del>网页内容</p>
<hr />
<p>这是第一个网页这是第一个网页这是第一个网页这是第一个网页
</p>
<p>这是第一个网页<br />这是第一个网页<br />这是第一个网页<br />这是第一个网页<br />
</p>
<hr />
<p>lalalalaalasdflasdfasdfa
</p>
<pre>lalalalaalasdflasdfasdfa</pre>
<hr />
<!-- 加一个边框 -->
<span style="border: 1px solid red;">111111</span>
<span style="border: 1px solid green;">111111</span>
<div style="border: 1px solid red;">22222</div>
<div style="border: 1px solid red;">22222</div>
a<sub>2</sub>
<h1>第一</h1>
<h2>第一</h2>
<h3>第一</h3>
<h4>第一</h4>
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚  

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

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

相关文章

ROS 2基础概念#3:主题(Topic)| ROS 2学习笔记

在ROS&#xff08;Robot Operating System&#xff09;中&#xff0c;主题&#xff08;Topics&#xff09;是实现节点之间通信的主要机制之一。节点&#xff08;Node&#xff09;可以发布&#xff08;publish&#xff09;消息到话题&#xff0c;或者订阅&#xff08;subscribe&…

市场复盘总结 20240304

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 二进三&#xff1a; 进级率中 20% 最常用的…

格两例12345

osu/Lucky Roll gaming 周末osu有道题&#xff1a;lcg已知低位 def lcg(s, a, b, p):return (a * s b) % pp getPrime(floor(72.7)) a randrange(0, p) b randrange(0, p) seed randrange(0, p) print(f"{p }") print(f"{a }") print(f"{b …

幂等性设计

目录 前言 幂等性设计 幂等性设计处理流程 HTTP 幂等性 消息队列幂等性 基于kafka 前言 幂等性设计&#xff0c;就是说&#xff0c;一次和多次请求某一个资源应该具有同样的副作用。为什么我们要有幂等性操作&#xff1f;说白了&#xff0c;就两点&#xff1a;1、网络的…

LeetCode第125场双周赛个人题解

目录 100231. 超过阈值的最少操作数 I 原题链接 思路分析 AC代码 100232. 超过阈值的最少操作数 II 原题链接 思路分析 AC代码 100226. 在带权树网络中统计可连接服务器对数目 原题链接 思路分析 AC代码 100210. 最大节点价值之和 原题链接 思路分析 AC代码 10023…

大话C++之:对象内存模型

一般继承(无虚函数覆盖) 只有一个虚指针&#xff0c;指向一个虚表&#xff0c;虚函数按顺序从祖先节点开始插入到虚表上。字段按顺序从祖先节点开始插入到对象内存上 一般继承(有虚函数覆盖) 只有一个虚指针&#xff0c;指向一个虚表&#xff0c;虚函数按顺序从祖先节点开始&a…

桂院校园导航 静态项目 二次开发教程 2.0

Gitee代码仓库&#xff1a;桂院校园导航小程序 GitHub代码仓库&#xff1a;GLU-Campus-Guide 静态项目 2.0版本 升级日志 序号 板块 详情 1 首页 重做了首页&#xff0c;界面更加高效和美观 2 校园页 新增了 “校园指南” 功能&#xff0c;可以搜索和浏览校园生活指南…

【金三银四】每日一点面试题(Java--JVM篇)

1、说一下 JVM 的主要组成部分及其作用&#xff1f; JVM&#xff08;Java虚拟机&#xff09;是Java程序运行的核心组件&#xff0c;它负责将Java字节码翻译成底层操作系统能够执行的指令。JVM由以下几个主要组成部分构成&#xff1a; 类加载器&#xff08;Class Loader&#…

spring boot概述

SpringBoot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。 该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 通过这种方式&#xff0c;SpringBoot致力于在蓬勃发展的快速应用开发…

实时抓取SKU商品属性详细信息API数据接口(淘宝,某音)

item_sku-获取sku详细信息 taobao.item_sku详细信息 API公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_sku 名称类型必须描述keyString是调用key&#xff08;演示示例&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地…

python-分享篇-生成仿微信公众号推广的个性二维码(支持动态)

代码 生成仿微信公众号推广的个性二维码&#xff08;支持动态&#xff09;from MyQR import myqr # 要生成动态二维码&#xff0c;只需要将piture参数和save_name参数设置gif动图即可 myqr.run(wordshttps://blog.csdn.net/stqer/article/details/135553200, # 指定二维码包含…

JVM(内存区域划分)

JVM JVM - Java虚拟机 我们编写的 Java 程序, 是不能够被 OS 直接识别的 JVM 充当翻译官的角色, 负责把我们写的的 Java 程序 ,翻译给 OS “听”, 让 OS 能够识别我们所写的 Java 代码 JVM 内存区域划分 JVM 是一个应用程序, 在启动的时候, 会从 操作系统 申请到一整块很大的内…

AI-RAN联盟在MWC24上正式启动

AI-RAN联盟在MWC24上正式启动。它的logo是这个样的&#xff1a; 2月26日&#xff0c;AI-RAN联盟&#xff08;AI-RAN Alliance&#xff09;在2024年世界移动通信大会&#xff08;MWC 2024&#xff09;上成立。创始成员包括亚马逊云科技、Arm、DeepSig、爱立信、微软、诺基亚、美…

【LeetCode】升级打怪之路 Day 11:栈的应用、单调栈

今日题目&#xff1a; Problem 1: 栈的应用 155. 最小栈 | LeetCode20. 有效的括号 | LeetCode150. 逆波兰表达式求值 | LeetCode Problem 2: 单调栈 496. 下一个更大元素 I739. 每日温度503. 下一个更大元素 II 目录 Problem 1&#xff1a;栈 - “先进后出”的应用LC 155. 最…

【Java设计模式】五、建造者模式

文章目录 1、建造者模式2、案例&#xff1a;共享单车的创建3、其他用途 1、建造者模式 某个对象的构建复杂将复杂的对象的创建 和 属性赋值所分离&#xff0c;使得同样的构建过程可以创建不同的表示建造的过程和细节调用者不需要知道&#xff0c;只需要通过构建者去进行操作 …

力扣刷题记录--463. 岛屿的周长

题目链接&#xff1a;463. 岛屿的周长 - 力扣&#xff08;LeetCode&#xff09; 题目描述 我的代码实现 class Solution {public int islandPerimeter(int[][] grid) { int result0; int rowgrid.length; int colgrid[0].length; for(int i0;i<row;i){for(int j0;j<col…

【EI会议征稿通知】2024年图像处理与人工智能国际学术会议(ICIPAI2024)

2024年图像处理与人工智能国际学术会议&#xff08;ICIPAI2024&#xff09; 2024 International Conference on Image Processing and Artificial Intelligence&#xff08;ICIPAI2024&#xff09; 2024年图像处理与人工智能国际学术会议&#xff08;ICIPAI2024&#xff09;将…

返回静态数据

在Java项目中&#xff0c;往往不会一直返回某某数据&#xff0c;而是会返回一个静态页面&#xff0c;那么&#xff0c;如何正确返回一个静态页面呢&#xff1f;&#xff1f; 要想成功的返回一个静态页面前提是必须要有一个静态页面&#xff1a; <!DOCTYPE html> <ht…

如何让 JOIN 跑得更快?

JOIN 一直是数据库性能优化的老大难问题&#xff0c;本来挺快的查询&#xff0c;一旦涉及了几个 JOIN&#xff0c;性能就会陡降。而且&#xff0c;参与 JOIN 的表越大越多&#xff0c;性能就越难提上来。 其实&#xff0c;让 JOIN 跑得快的关键是要对 JOIN 分类&#xff0c;分…

第三百八十一回

文章目录 1. 概念介绍2. 修改方法 015buttonStyle.png2.1 修改形状2.2 修改颜色2.3 修改位置 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何创建以图片为背景的页面"相关的内容&#xff0c;本章回中将介绍如何修改按钮的形状.闲话休提&#xff0c;让我们一起T…