前端学习之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>
    lalalala
    alasdfl
    asdfasdfa
</p>
<pre>
			lalalala
			alasdfl
			asdfasdfa
		</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>

结果


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

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

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

相关文章

【微服务-Nacos】一篇文章教你搞定Nacos部署

前面我们提到过&#xff0c;在微服务架构中&#xff0c;Nacos注册中心属于核心组件&#xff0c;通常我们会采用高性能独立服务器进行部署&#xff0c;下面我们一起来看看Nacos部署过程&#xff1a; 1、环境准备 因为Nacos是支持windows和Linux系统的&#xff0c;且服务器操作…

订单超时取消如何实现

方法1&#xff1a; DelayQueue&#xff1a;超时作为排序条件&#xff0c;轮询订单头部&#xff0c;若超市&#xff0c;出队进行超时处理 优点&#xff1a;简单 缺点&#xff1a;不能持久化&#xff0c;并发量低 方法2&#xff1a; 方法四&#xff1a;定时调度&#xff08;什…

基于Springboot的无人智慧超市管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的无人智慧超市管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

【项目实践】如何解决并发场景下数据一致性问题

1.背景 并发写场景下&#xff0c;由于微服务的系统环境复杂&#xff0c;不可避免的会出现 【机器、缓存、数据库、依赖服务】等出现问题&#xff0c;导致数据不一致的情况产生。 影响大且广&#xff1a; 1、数据不一致问题在线上可能会产生故障 2、数据不一致会导致长尾错误…

group by报错

# 报错&#xff1a;[42000][1055] Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column base.biz_org_rep.ID which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_modeonly_full_grou…

xss.haozi.me:0x08

</style ><script> alert(1)</script>

命名空间(namespace)

定义 在C中&#xff0c;命名空间&#xff08;Namespace&#xff09;是一个特性&#xff0c;用于封装代码并避免名称冲突。命名空间可以看作是一个容器&#xff0c;其中可以包含类、函数、变量、常量、其他命名空间等。通过使用命名空间&#xff0c;我们可以更好地组织代码&…

什么是Docker容器?

Docker是一种轻量级的虚拟化技术&#xff0c;同时是一个开源的应用容器运行环境搭建平台&#xff0c;可以让开发者以便捷方式打包应用到一个可移植的容器中&#xff0c;然后安装至任何运行Linux或Windows等系统的服务器上。相较于传统虚拟机&#xff0c;Docker容器提供轻量化的…

Linux设备模型(十) - bus/device/device_driver/class

四&#xff0c;驱动的注册 1&#xff0c;struct device_driver结构体 /** * struct device_driver - The basic device driver structure * name: Name of the device driver. * bus: The bus which the device of this driver belongs to. * owner: The module own…

selenuim【1】$x(‘xpath’)、WebDriverWait()、try/assert

文章目录 1、执行driver webdriver.Chrome()后很久才打开浏览器2、浏览器多元素定位 $x(‘xpath语法’)3、打开浏览器driver.get("网址")执行了很久才开始定位元素&#xff1a;等待&#xff08;1&#xff09;driver.set_page_load_timeout(t)&#xff08;2&#xff…

VMwareWorkstation17.0虚拟机搭建WindowsXP虚拟机(完整安装步骤详细图文教程)

VMwareWorkstation17.0虚拟机搭建WindowsXP虚拟机&#xff08;完整安装步骤详细图文教程&#xff09; 一、Windows XP1.Windows XP简介2.Windows XP 的下载地址 二、配置 Windows XP 虚拟机运行环境1.新建虚拟机2.选择类型配置3.插入WinXP光盘映像文件(ISO)4.选择操作系统5.命名…

阿里工作10年,失业4个月,每天都在崩溃边缘,有些事现在才明白

在近年的互联网行业风波中&#xff0c;不少大型企业开始缩减人员&#xff0c;而众多小企业则面对生死的考验。在这股裁员潮中&#xff0c;许多人失去了工作&#xff0c;长时间找不到新的就业机会&#xff0c;心中满是失望和绝望。 一位拥有十年工作经验的前阿里巴巴员工在网络上…

浅谈WPF之Binding数据校验和类型转换

在WPF开发中&#xff0c;Binding实现了数据在Source和Target之间的传递和流通&#xff0c;就像现实生活中的一条条道路&#xff0c;建立起了城镇与城镇之间的衔接&#xff0c;而数据校验和类型转换&#xff0c;就像高速公路之间的收费站和安检站。那在WPF开发中&#xff0c;如何…

【一起学习Arcade】(6):属性规则实例_约束规则和验证规则

一、约束规则 约束规则用于指定要素上允许的属性配置和一般关系。 与计算规则不同&#xff0c;约束规则不用于填充属性&#xff0c;而是用于确保要素满足特定条件。 简单理解&#xff0c;约束规则就是约束你的编辑操作在什么情况下可执行。 如果出现不符合规则的操作&#…

MySQL表分区技术介绍

目录 1. 分区概述 1.1 表分区 1.2 表分区与分表的区别 1.3 表分区的好处 1.4 分区表的限制因素 2. 如何判断当前MySQL是否支持分区&#xff1f; 3. 分区类型详解 3.1 MySQL支持分区类型 3.2 RANGE分区 3.2.1 根据数值范围分区 3.2.2 根据TIMESTAMP范围分区 3.2.3 根…

Vue - 调用接口获取文件数据流并根据类型预览

Vue - 调用接口获取文件数据流并根据类型预览 一、接口返回的数据流格式二. 方法实现1. image 图片类型2. txt 文件类型3. pdf 文件类型 一、接口返回的数据流格式 二. 方法实现 1. image 图片类型 <img :src"imageUrl" alt"" srcset"" /&g…

LeetCode每日一题【c++版】

20240227-困难2867-统计树中的合法路径数目 一、概述 由于比较难打&#xff0c;直接截图贴过来了&#xff01; 二、思路 预处理得到 [1,n]中的所有质数&#xff0c;其中 prime[i]是否为质数。根据二维整数整数构建图 g&#xff0c;其中 g[i]表示节点i的所有邻居节点。如果一条…

【二叉树的最近公共祖先】【后序遍历】Leetcode 236. 二叉树的最近公共祖先

【二叉树的最近公共祖先】【后序遍历】Leetcode 236. 二叉树的最近公共祖先 解法1 涉及到结果向上返回就要用后序遍历解法2 自己写的方法 后序遍历 ---------------&#x1f388;&#x1f388;236. 二叉树的最近公共祖先 题目链接&#x1f388;&#x1f388;-----------------…

外包干了6个月,技术退步明显

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

群晖Synology Drive服务搭建结合内网穿透实现云同步Obsidian笔记文件夹

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-ebec69DBjtGk7apF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…