HTML小白入门基础(概述,结构与基本常用标签)

目录

一、什么是HTML

二、HTML的基本结构:

三、结构与属性:

四、常见标签:


一、什么是HTML

            HTML:超文本标记语言(HyperText Markup Language)
                    超文本:指的是网页中可以显示的内容(图片,超链接,视频...)
                    标记语言:标记-->标签(标注)        买东西-->商品标签(价格,材质,型号...)
            标记语言中,就是提供了许多的标签,不同标签有不同的功能,
            最终运行时,由浏览器对标前进行解析,最终呈现出不同标签的样子

二、HTML的基本结构:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ARuiiiiiii</title></head><body></body>
</html>

        1.<!DOCTYPE html>:声明html语言的版本 html5

        2.<html>:html标签是标记语言中根标签

        3.<head>:head 为标签头 

        4.<meta charset>:是设定编码形式,UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式。

        5.<title>:title是设置标题

        6.<body>:网页身体,可以在其中编写可见所需内容

三、结构与属性:

        在讲常用标签之前,来解释一下标签相关知识点:

        标签结构:
              <开始标签>标签体</结束标签>        双标签
              <标签名/> 自闭合标签,没有修饰的内容,只是完成某个功能        单标签

        注意:双标签的"/"在结束标签之前,单标签"/"在标签名之后

        

<b>aaa</b><!-- 双标签 -->
<br/><!-- 自闭合标签(单标签) -->

        标签的属性:

                可以通过改变标签属性,设置标签显示的格式
                属性必须写在开始标签中
                属性格式  属性名="值"
                一个标签中可以写多个属性

        例如:

<font color="blue" size="4">百度</font>

        就是设定标签体(即:百度)的颜色和大小

        标签<body>也可改变属性:

<body bgcolor="blue">
</body>

        bgcolor="blue"即将整个网页背景改为蓝色

四、常见标签:

        1.标题标签:

                <h1></h1>...<h6></h6>
                每一个标题标签会独占一行
                align="" 控制标签内容在标签体中水平对齐方式(align="center"即水平居中)

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h1 align="center"><font color=blue">1级标签</font></h1>
<h2 align="right">2级标签</h2>

图示:

        2.标尺线:        换行标签         <hr />        用于换行加分割线

        3.段落标签:        <p></p>        

<hr />
<p align="left">二叉搜索树是一种数据结构,用于存储数据并支持快速的插入、删除和搜索操作。它是一种树形结构。
</p>
<p align="center">二叉搜索树的高效性与其关键字的特性密切相关。
</p>

图示:

        4.列表:

                无序列表:<ul></ul>

                即标签体呈现的内容前没有序号,自动换行

                有序列表:<ol></ol>

                即标签体呈现的内容前有序号,自动换行

<body>
列表无序列表<ul type="square"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul>有序列表<ol><li>列表5</li><li>列表6</li><li>列表7</li><li>列表8</li></ol>
</body>

图示:

        5.超链接:

                <a></a>:HTML 使用超级链接与网络上的另一个文档相连,通俗的说就是通过连接来访问其他网页资源

                href="网页的地址"
                target="_blank"在新窗口打开目标网页
                target="_self"在当前窗口打开一个新网页 (target:默认值为_self)

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="index.html" target="_self"></a>

        点击标签体“百度”后就会跳到地址对应的页面

        6.图像标签:

                <img/>获取预先保存好的图

        7.特殊符号转义:

                在HTML中预留了一些字符,这些预留字符是不能在网页中直接使用的,例如空格或一些特殊标志。

                1)&lt和&bt:分别代表符号“<”和“>”

                2)&nbsp代表一个空格

                3)&reg表示注册商标

                4)&copy表示版权

&lt;b&gt;标签的功能是加粗&nbsp;文字
<hr />
&reg;
&copy;

 图示:

 

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

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

相关文章

【Python机器学习】基于随机森林全球经济危机预测

一、引言 全球经济危机是一个复杂的问题,受到多种因素的影响,如金融市场、政策环境、地缘政治等。预测经济危机对于政策制定者、投资者和企业来说至关重要,因为它可以帮助他们提前做出应对措施,减少潜在的损失。然而,准确预测经济危机是一项具有挑战性的任务,因为涉及到…

【LeetCode739】每日温度

1、题目描述 【题目链接】 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。…

ROS+moveit+jakaminicob仿真运动

先浅浅的放一个官方的c文档&#xff1a; Motion Planning API — moveit_tutorials Melodic documentation 目录 一、实现运动到目标点的程序 二、在rviz里面新建扫描平台 一、实现运动到目标点的程序 &#xff08;等我得空了补一个c运行环境部署说明&#xff09; #inclu…

【Linux】CentOS 7重装保留数据的方法

我们需要重装CentOS 7系统&#xff0c;但是又想保留原来的数据。这篇文章将会从多个方面详细介绍如何重装CentOS 7系统&#xff0c;同时又能保留原有的数据。 一、备份重要数据 在重装CentOS 7系统之前&#xff0c;我们需要备份我们的重要数据。这可以通过多种方式实现&#…

React16源码: React中创建更新的方式及ReactDOM.render的源码实现

React当中创建更新的主要方式 ReactDOM.render || hydrate 这两个API都是我们要把整个应用第一次进行渲染到我们的页面上面能够展现出来我们整个应用的样子的一个过程这是初次渲染 setState 后续更新应用 forceUpdate 后续更新应用 replaceState 在后续被舍弃 关于 ReactDOM…

Qt undefined reference to `vtable for xxx‘

一、问题背景 在编译QT代码时&#xff0c;出现 undefined reference to xxx::entered()&#xff0c;通过鼠标双击QtCreator“问题栏”中的该行&#xff0c;则会跳转到发送信号的代码所在行。与上述代码一同出现在“问题栏”的还有 undefined reference to vtable for xxx’。 …

Git常用命令diff和mv

Git常用命令diff和mv 1、diff # 查看工作区和暂存区所有文件的对比 # 该命令可以显示尚未添加到stage的文件的变更 $ git diff# 查看工作区和暂存区单个文件的对比 $ git diff file# 显示暂存区和上一个commit的差异 # 查看暂存区与指定提交版本的不同,版本可缺省为HEAD $ gi…

力扣(leetcode)第412题Fizz Buzz(Python)

412.Fizz Buzz 题目链接&#xff1a;412.Fizz Buzz 给你一个整数 n &#xff0c;找出从 1 到 n 各个整数的 Fizz Buzz 表示&#xff0c;并用字符串数组 answer&#xff08;下标从 1 开始&#xff09;返回结果&#xff0c;其中&#xff1a; answer[i] “FizzBuzz” 如果 i 同…

Linux-文件系统管理实验2

1、将bin目录下的所有文件列表放到bin.txt文档中&#xff0c;并将一共有多少个命令的结果信息保存到该文件的最后一行。统计出文件中以b开头的所有命令有多少个&#xff0c;并将这些命令保存到b.txt文档中。将文档中以p结尾的所有命令保存到p.txt文件中&#xff0c;并统计有多少…

lv14 ioctl、printk及多个此设备支持 6

1 ioctl操作实现 对相应设备做指定的控制操作&#xff08;各种属性的设置获取等等&#xff09; long xxx_ioctl (struct file *filp, unsigned int cmd, unsigned long arg); 功能&#xff1a;对相应设备做指定的控制操作&#xff08;各种属性的设置获取等等&#xff09; 参数…

【csharp】依赖注入

依赖注入 依赖注入&#xff08;Dependency Injection&#xff0c;DI&#xff09;是一种软件设计模式&#xff0c;旨在降低组件之间的耦合度。在依赖注入中&#xff0c;一个类的依赖关系不是在类内部创建&#xff0c;而是通过外部传递进来。这通常通过构造函数、方法参数或属性…

氢燃料电池技术综述

文章目录 工作原理 系统集成 应用 特点 国家政策 行业发展 机遇和挑战 参考文献 工作原理 氢燃料电池是通过催化剂将氢气和氧气反应生成电能和水的过程&#xff0c;在这个过程中会伴随有热量产生。 系统集成 氢燃料电池需要将氢气供应系统、氧气供应系统、电堆、冷却系…

【基础篇】十二、引用计数法 可达性分析算法

文章目录 1、Garbage Collection2、方法区的回收3、堆对象回收4、引用计数法5、可达性分析算法6、查看GC Root对象 1、Garbage Collection C/C&#xff0c;无自动回收机制&#xff0c;对象不用时需要手动释放&#xff0c;否则积累导致内存泄漏&#xff1a; Java、C#、Python、…

Linux程序、进程以及计划任务(第一部分)

目录 一、程序和进程 1、什么是程序&#xff1f; 2、什么是进程&#xff1f; 3、线程是什么&#xff1f; 4、如何查看是多线程还是单线程 5、进程结束的两种情况&#xff1a; 6、进程的状态 二、查看进程信息的相关命令 1、ps&#xff1a;查看静态的进程统计信息 2、…

c++基础(对c的扩展)

文章目录 命令空间引用基本本质引用作为参数引用的使用场景 内联函数引出基本概念 函数补充默认参数函数重载c中函数重载定义条件函数重载的原理 命令空间 定义 namespace是单独的作用域 两者不会相互干涉 namespace 名字 { //变量 函数 等等 }eg namespace nameA {int num;v…

判断对象是否是垃圾的引用计数法有什么问题

给对象中添加一个引用计数器&#xff0c;每当有一个地方引用它&#xff0c;计数器就加一&#xff0c;当引用失效计数器就减一&#xff0c;任何时候引用计数器为0的对象就是不可能再被使用的&#xff08;变成垃圾&#xff09;。 这个方法实现简单、效率高&#xff0c;但是目前主…

STM32F407ZGT6-flash地址-SRAM

2、 2-STM32F407英文数据手册&#xff08;没有中文&#xff09;.pdf Memory mapping

抽丝剥茧设计模式

Singleton 单例 饿汉式 最简单的方式 /*** 饿汉式* 类加载到内存后&#xff0c;就实例化一个单例&#xff0c;JVM保证线程安全* 简单实用&#xff0c;推荐使用&#xff01;* 唯一缺点&#xff1a;不管用到与否&#xff0c;类装载时就完成实例化* Class.forName(""…

Leetcode 2998. Minimum Number of Operations to Make X and Y Equal

Leetcode 2998. Minimum Number of Operations to Make X and Y Equal 1. 解题思路2. 代码实现 题目链接&#xff1a;10033. Minimum Number of Operations to Make X and Y Equal 1. 解题思路 这一题就是一个比较简单的动态规划的题目了。 显然&#xff0c;如果x小于y&…