【WEB前端进阶之路】 HTML 全路线学习知识点梳理(上)

news2024/11/14 3:30:43

前言

HTML 是一切Web开发的基础,本文专门为小白整理,针对前端零基础的朋友们,手把手教你学习HTML,让你轻松迈入WEB开发的行列。

首先,感谢 @橙子_ 在HTML学习以及本文编写过程中对我的帮助。

在这里插入图片描述


文章目录

  • 前言
  • 一.HTML简介
    • 1.什么是HTML?
    • 2.HTML 标签
    • 3.HTML 元素
    • 4.HTML版本
    • 5.Web 浏览器
    • 6.HTML 网页结构
    • 7.中文编码
    • 8.编写第一个网页
  • 二.HTML编辑器
  • 三.HTML基础
    • 1.HTML 标题
    • 2.HTML 段落
    • 3.HTML 链接
    • 4.HTML 图像
  • 四.HTML元素
    • 1.HTML 元素语法
    • 2.嵌套的 HTML 元素
    • 3.HTML 空元素
  • 五.HTML属性


一.HTML简介

万维网W3C标准中网页分为结构,表现和行为三部分,HTML用于描述页面的结构,CSS用于控制页面中的元素样式,JavaScript用于响应用户的操作。HTML,CSS和JavaScript组成了前端技术栈。

学习HTML就是学习标签的一个过程,难度指数低,重在反复练习,首先看看HTML文档的基本结构:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端教程</title>
</head>
<body>

<h1>标题</h1>
<p>段落</p>

</body>
</html>

1.什么是HTML?

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

2.HTML 标签

HTML标记标签又称为 标签。

  • HTML 标签是由尖括号包围的关键词
  • HTML 标签通常是成对出现
  • 标签对中的第一个标签是开始标签(开放标签),第二个标签是结束标签(闭合标签)
<标签>内容</标签>

所有 HTML 文档必须以 <!DOCTYPE> 声明开头,该声明并非一个 HTML 标签,它是一条“信息”,告知浏览器期望的文档类型。


3.HTML 元素

一个 HTML 元素包含了开始标签与结束标签。例如:

<h1>一级标题</h1>

4.HTML版本

下面是HTML的历史版本:

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

5.Web 浏览器

要想学习Web前端,一定要先了解Web浏览器(如谷歌浏览器,Edge,Safari)。Web浏览器用于读取HTML文件,并将其作为网页显示。浏览器并不是直接显示HTML标签,而是负责网页的渲染和呈现,标签决定了如何展现HTML页面的内容给用户。例如:

在这里插入图片描述


6.HTML 网页结构

下面是HTML文档的基本结构,前面我们已经做了示例代码的展示:

在这里插入图片描述


7.中文编码

在一些浏览器直接输出中文会出现乱码的情况,当在浏览器输出中文乱码时,需要在头部将字符声明为 UTF-8 或 GBK。例如:

<meta charset="UTF-8">

8.编写第一个网页

前面介绍了HTML文档的一些基础信息,以及Web浏览器初识,接下来编写我们学习前端的第一个网页:

示例:使用记事本编写你的第一个网页!

<html>

<head>
    <title>这是我的第一个网页</title>
</head>

<body>
    <!--注释:用记事本编写第一个网页,在浏览器中显示一首古诗!-->
    <h1>望庐山瀑布</h1>
    <h2>
        <font color=red></font> 李白
    </h2>
    <p>日照香炉生紫烟,遥看瀑布挂前川。</p>
    <p>飞流直下三千尺,疑是银河落九天。</p>
</body>

</html>

新建一个文本文档,命名为index.html。编写代码,在默认浏览器中运行,查看显示效果!

在这里插入图片描述


二.HTML编辑器

这里推荐使用VsCode来编辑HTML代码!

vscode 是由微软开发的免费开源软件,它具有以下优势:

  1. 轻量级编辑器
  2. 丰富的插件系统
  3. 代码跟踪功能

在这里插入图片描述


三.HTML基础

1.HTML 标题

HTML 标题是通过<h1> - <h6> 标签来定义的,例如:

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

2.HTML 段落

HTML 段落是通过标签 <p> 来定义的,例如:

    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>

3.HTML 链接

HTML 链接是通过标签 <a> 来定义的,例如:

<a href="https://www.baidu.com">百度一下</a>

4.HTML 图像

HTML 图像是通过标签 <img> 来定义的,例如:

<img src="/images/baidu.png" width="258" height="39" />

四.HTML元素

1.HTML 元素语法

  • HTML 元素以开始标签起始,以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容,某些 HTML 元素具有空内容
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

2.嵌套的 HTML 元素

其实,大多数 HTML 元素可以嵌套使用,即HTML 元素可以包含其他 HTML 元素。所以,HTML 文档是由相互嵌套的 HTML 元素构成的,例如:

<!DOCTYPE html>
<html>

<body>
<p>段落1...</p>
</body>

</html>

其中,对几个重要的标签做一个描述:

  • 这个 <p> 元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>。元素内容是: 段落1…。
  • <body> 元素定义了 HTML 文档的主体。这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。元素内容是另一个 HTML 元素(p 元素)。
  • <html> 元素定义了整个 HTML 文档。这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>。元素内容是另一个 HTML 元素(body 元素)。

3.HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的,例如:

    <p>段落1</p>
    <br>
    <p>段落2</p>

其中,<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法。


五.HTML属性

属性是 HTML 元素提供的附加信息,属性值应该始终被包括在引号内,如果属性值本身就含有双引号,那么必须使用单引号包含属性值。

  • HTML 元素可以设置属性,属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name=“value”。

例如,HTML的链接标签中添加属性:

<a href="http://www.baidu.com">百度一下</a>

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定。


在这里插入图片描述

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

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

相关文章

Java使用不同方式获取两个集合List的交集、补集、并集(相加)、差集(相减)

1 明确概念首先知道几个单词的意思&#xff1a;并集 union交集 intersection补集 complement析取 disjunction减去 subtract1.1 并集对于两个给定集合A、B&#xff0c;由两个集合所有元素构成的集合&#xff0c;叫做A和B的并集。记作&#xff1a;AUB 读作“A并B”例&#…

微纳制造技术——基础知识

1.什么是直接带隙半导体和间接带隙半导体 导带底和价带顶处以同一K值&#xff0c;称为直接带隙半导体 导带底和价带顶不处在同一K值&#xff0c;称为间接带隙半导体 2.扩散和漂移的公式 3.三五族半导体的性质 1.high mobility 2.wide bandgap 3.direct bandgap 4.三五族…

SWM181 串口功能使用介绍

SWM181 串口功能使用介绍&#x1f4cc;SDK固件包&#xff1a;https://www.synwit.cn/kuhanshu_amp_licheng/✨注意新手谨慎选择作为入门单片机学习。&#x1f33c;开发板如下图&#xff1a; &#x1f4cb;SWM181描述上写了有4个串口&#xff0c;在数据手册上&#xff0c;将引脚…

教你如何搭建设备-巡检管理系统,demo可分享

1、简介1.1、案例简介本文将介绍&#xff0c;如何搭建设备-巡检管理。1.2、应用场景设备管理员进行制定设备巡检时间/内容计划、记录设备巡检信息、可以查看今日待巡检设备。2、设置方法2.1、表单搭建1&#xff09;新建表单【设备档案-履历表】&#xff0c;字段设置如下&#x…

activiti7执行流程详解

什么是工作流&#xff1f; 官方定义&#xff1a;工作流是将一组任务组织起来以完成某个经营过程&#xff1a;定义了任务的触发顺序和触发条件&#xff0c;每个任务可以由一个或多个软件系统完成&#xff0c;也可以由一个或一组人完成&#xff0c;还可以由一个或多个人与软件系统…

阿赵的MaxScript学习笔记分享八《文件操作》

大家好&#xff0c;我是阿赵。继续分享MaxScript学习笔记第八篇 。这一篇主要讲文件操作&#xff0c;包括文件的I/O和导入导出。 1、获得3DsMax指定的一些目录路径 如果在电脑上安装了3DsMax软件&#xff0c;那么在文档里面会有一个3dsMax的文件夹&#xff0c;里面有一些3dsMa…

《C++ Primer Plus》(第6版)第8章编程练习

《C Primer Plus》&#xff08;第6版&#xff09;第8章编程练习《C Primer Plus》&#xff08;第6版&#xff09;第8章编程练习1. 打印字符串2. CandyBar3. 将string对象的内容转换为大写4. 设置并打印字符串5. max5()6. maxn()7. SumArray()《C Primer Plus》&#xff08;第6版…

【C++】C++11 异常

目录 1. C语言传统的处理错误的方式 2. C异常概念 3. 异常的使用 3.1. 异常的抛出和捕获 3.2. 在函数调用链中异常栈展开匹配原则 3.3. 异常的重新抛出 3.4. 异常安全 3.5. 异常规范 4.自定义异常体系 5. C标准库的异常体系 6. 异常的优缺点 6.1. C异常的优点&…

Spark性能优化二 Shuffle机制分析

&#xff08;一&#xff09; 什么情况下发生shuffle 在MapReduce框架中&#xff0c;Shuffle是连接Map和Reduce之间的桥梁&#xff0c;Map阶段通过shuffle读取数据并输出到对应的Reduce&#xff1b;而Reduce阶段负责从Map端拉取数据并进行计算。在整个shuffle过程中&#xff0c…

Linux 学习整理(使用 iftop 查看网络带宽使用情况 《端口显示》)

一、命令简介 iftop 是实时流量监控工具&#xff0c;可以用来监控网卡的实时流量&#xff08;可以指定网段&#xff09;、反向解析IP、显示端口信息等。 二、命令安装 yum install -y iftop 三、命令相关参数及说明 3.1、相关参数说明 -i&#xff1a;设定监测的网卡&#…

python未来应用前景怎么样

Python近段时间一直涨势迅猛&#xff0c;在各大编程排行榜中崭露头角&#xff0c;得益于它多功能性和简单易上手的特性&#xff0c;让它可以在很多不同的工作中发挥重大作用。 正因如此&#xff0c;目前几乎所有大中型互联网企业都在使用 Python 完成各种各样的工作&#xff0…

CAD中如何将图形对象转换为三维实体?

有些小伙伴在CAD绘制完图纸后&#xff0c;想要将图纸中的某些图形对象转换成三维实体&#xff0c;但却不知道该如何操作&#xff0c;其实很简单&#xff0c;本节CAD绘图教程就和小编一起来了解一下浩辰CAD软件中将符合条件的对象转换为三维实体的相关操作步骤吧&#xff01; 将…

HID协议详解 - Report Descriptor报告描述符构建与解析

USB相关基础知识简述 报告描述符是HID协议里比较复杂的一部分&#xff0c;在理解报告描述符之前&#xff0c;可以对USB协议数据传输的一些基础知识做一些了解&#xff0c;更方便理解后续内容。 报告是USB协议里数据传输&#xff08;Data Transfer&#xff09;的一种&#xff…

Android正确使用资源res文件

观看此文注意首先有的UI改颜色&#xff0c;没用&#xff0c;发现无法更改按钮背景颜色。我的AS下载的是最新版本&#xff0c;Button按钮的背景颜色一直都是亮紫色&#xff0c;无法更改。为什么呢&#xff1f;首先在你的清单文件中看你应用的是哪个主题。我现在用的是这个可能你…

PYthon组合数据类型的简单使用

Python的数据类型有两种&#xff0c;基本数据类型和组合数据类型&#xff0c;组合数据类型在Python的使用中特别重要。 1.组合数据类型的分类&#xff1a; 2.序列类型 序列类型中元素存在顺序关系&#xff0c;可以存在数值相同但位置不同的元素。序列类型支持成员关系操作符&…

计算机编程基础

0与1的世界 计算机是由晶体管和电路板组成的电子设备。 不论是我们微信信息的呈现、图像的储存和数字之间的运算本质上都是0和1的信息。 0、1便可以代表电压的高低、开关的闭合以及电阻的导电和不导电。 0、1表示的数字便是“逢二进一”。计算机的最小的储存单位是位&#…

Java如何String字符串带括号转成List

问题现象 今天在做一个需求&#xff1a;将存入数据库中的数据读到后解析成list遍历分析 数据格式&#xff1a; "[1677660600000, 1677660900000, 1677661200000]" "[5, 4, 4,3,2&#xff0c;0,0]" 我一开始想到的就是使用逗号分割即可 结果变成了这样的…

电容笔和Apple pencil有什么区别?开学季电容笔排行榜

与苹果的 Pencil相比&#xff0c;市面上常见的电容笔在压感上是没有具备重力压感&#xff0c;只具备着一种倾斜压感。对于绘画没有过高要求的话&#xff0c;其实一支普通的平替电容笔&#xff0c;就能为我们解决日常很多问题。它不仅可以用在办公上&#xff0c;也可以用在笔记、…

算法小抄3-理解使用Python容器之列表

引言 首先说一个概念哈,程序算法数据结构,算法是条件语句与循环语句组成的逻辑结构,而数据结构也就是容器. 算法决定数据该如何处理,而容器则决定如何数据如何存储. 不同的语言对容器有不同的实现方式, 但他们的功能都是相似的, 打好容器基础,你就可以在各式各样的语言中来回横…

1.Spring Cloud (Hoxton.SR10) 学习笔记—基础知识

本文目录如下&#xff1a;一、Spring Cloud基础知识什么是微服务架构&#xff1f;服务拆分 有哪些注意事项&#xff1f;什么是分布式集群?分布式的 CAP 原则&#xff1f;组件 - Spring Cloud 哪几个组件比较重要&#xff1f;组件 - 为什么要使用这些组件&#xff1f;组件 - Na…