HTML基础铺垫

😊HTML基础铺垫

    • 👻前言
    • 📜HTML文档结构
    • 🎭头部head
      • 🥏标题title标记
      • 🥏元信息meta标记
    • 🎭主体body
      • 🥏body标记
      • 🥏body标记属性
    • 🎭HTML基本语法
      • 🥏标记类型
      • 🥏HTML属性
    • 🎭注释
    • 🎭HTML文档编写规范
      • 🥏HTML代码书写规范
      • 🥏HTML文档命名规则
    • 🎭HTML文档类型
      • 🥏<!DOCTYPE>标记
      • 🥏DTD类型
    • 🪐总结

👻前言

😊各位小伙伴们，新文章新专栏持续更新中！！！

在前面的两篇文章中，我们介绍了Web前端开发概述，在这篇文章中，我们主要了解HTML的基本组成结构，理解HTML头部head和主体body两大部分在网页设计中的作用。掌握head、body标记中可以包含哪些标记；理解HTML标记的作用和标记语法、学习标记的类型，学会编写简单的HTML代码。
在这里插入图片描述


📜HTML文档结构

HTML文档结构是指HTML文档中的各个部分的组织方式。HTML文档由标签、属性和内容三个部分组成。标签用于标识文档中不同的部分，属性用于定义标签的特性，内容用于填充文档的实际内容。HTML文档由头部head和主体body两部分组成，头部head标记中可以定义标题、样式等，头部信息不显示在网页上；主体body标记中可以定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。
在这里插入图片描述
HTML文档以<html>标记开始，以</html>标记结束。所有的HTML代码都位于这两个标记之间。浏览器根据HTML文档类型和内容来解释整个网页，然后呈现给用户。一般情况下，每个HTML的文档都应该有且只有一个html、head和body元素。


🎭头部head

HTML文档的头部head标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。 它由title标签和meta标签组成。title标签用于定义文档的标题，meta标签用于定义文档的其他元数据，如描述、作者、日期等。head部分是搜索引擎优化（SEO）的重要部分，因为它可以提供搜索引擎索引文档内容的关键信息。头部head标记所包含的信息一般不会显示在网页上。

🥏标题title标记

HTML标题title标记是指HTML文档中用于定义文档标题的标签。title标记的内容会被搜索引擎用作文档的标题，也会显示在浏览器的标题栏中，因此对于SEO非常重要。

<!--基本用法-->
<title>标题信息显示在浏览器的标题栏上</title>

title标记是成对标记，<title>是开始标记，</title>是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。
在这里插入图片描述

🥏元信息meta标记

meta标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），这些信息并不会显示在浏览器的页面中，例如作者、日期和时间、网页描述、关键词、页面刷新等。meta标记是单个标记，位于文档的头部，其属性定义了与文档相关联的“名称/值”对。

<!--基本用法-->
<meta name="" content=""/>
<meta http-equiv=""/>

🎯meta属性主要分为两组：name属性和content属性、http-equiv属性和content属性

name属性用于描述网页，它是“名称/值”形式中的名称，name属性的值所描述的内容通过content属性表示，便于搜索引擎查找、分类。其中最重要的是description、keywords和robots

http-equiv属性用于提供HTTP协议的响应头报文，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。它是“名称/值”形式中的名称，http-equiv属性的值所描述的内容通过content属性表示。
在这里插入图片描述

<!--基本用法-->
<meta name="keywords" content="信息参数">
<meta name="description" content="信息参数">
<meta name="author" content="信息参数">
<meta name="generator" content="信息参数">
<meta name="copyright" content="信息参数">
<meta name="robots" content="信息参数">

robots告诉搜索引擎抓取那些页面。
在这里插入图片描述

http-equiv属性设置

<meta http-equiv="cache-control" content="no-cache">   
<meta http-equiv="refresh" content="时间" url="网址参数">
<meta http-equiv="content-type" content="text/html" charset="信息参数">   
<meta http-equiv="expires" content="信息参数">

第一行说明禁止浏览器从本地计算机的缓存中访问页面内容，同时访问者将无法脱机浏览。

第二行说明多长时间网页自动刷新，加上URL中的网址参数就代表多长时间自动链接其他网址。

第三行中的content-type代表的是HTTP协议的头部，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

第四行设置meta标记的expires（期限），可以用于设定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新传输。


🎭主体body

主体body是一个Web页面的主要部分，其设置内容是读者实际看到的网页信息。所有WWW文档的主体部分都是由body标记定义的。在主体body标记中可以放置网页中所有的内容，如图片、图像、表格、文字、超链接等元素。body部分是HTML文档中最重要的部分，它是文档的核心内容，也是浏览器显示的主要内容。

🥏body标记

基本语法
<body>这是网页内容。。。。
</body>

<body>是开始标记，</body>是结束标记。两者之间包括的内容为网页上显示的信息。

🥏body标记属性

设置body标记属性可以改变页面的显示效果。该标记主要属性有topmargin、leftmargin、text、bgcolor、background、link、alink、vlink等。HTML5中可以使用CSS属性替代。

<!--为body设置属性值-->
<body leftmargin="50px" topmargin="50px" text="#000000" bgcolor="#333333" link="bule" alink="white" vlink="red" background="1.png"></body>

在这里插入图片描述


🎭HTML基本语法

HTML基本语法是指HTML文档的基本结构和语法规则。HTML文档由标签、属性和内容三个部分组成，其中标签用于标识文档中不同的部分，属性用于定义标签的特性，内容用于填充文档的实际内容。HTML文档的基本语法包括标签的书写规则、属性的书写规则、内容的书写规则以及文档的结构和布局规则等。掌握HTML基本语法是创建和编辑HTML文档的基础。

🥏标记类型

HTML标记是由尖括号包围的关键词，用于说明指定内容的外貌和特征，也可以称之为标签（Tag），<html></html>、<head></head>、<body></body>、<br/>、<hr/>等都是标记。标记类型通常分为单（个）标记和双（成对）标记两种类型。


单（个）标记
仅使用单个标记就能够表达特定的意思，称为单（个）标记，W3C定义的新标准（XHTML1.0、HTML4.01）建议单个标记应该以“/”结尾，即<标记名称/>

<!--基本用法-->
<标记名称>或<标记名称/>

常用的单个标记有</br>、<hr/>、<link>。<br/>表示换行，<hr/>表示水平分隔线，<link/>表示链接标记。


双（成对）标记
HTML标记通常是成对出现的，比如<div></div>等等，标记对中的第一个标记是开始标记（也称为首标记），第二个标记是结束标记（也称为尾标记）。

<!--基本用法-->
<标记名称>内容</标记名称>

在双标记中，内容就是被双标记说明特定外貌的部分。例如，<html></html>之间的文本描述网页，<body></body>之间的文本是可见的页面内容。<strong>内容加粗</strong>标记让浏览器将内容“内容加粗”几个字以标准粗体方式显示。

🎯标记可以相互嵌套，但是不能交叉，尽管浏览器能理解，但是这是不好的编程习惯。

🥏HTML属性

HTML使用标记来描述网页，浏览器根据标记解释标记所包含内容的效果。每一个标记均定义了一个默认的显示效果，这些默认效果是通过标记的附加信息（也称为属性，Attribute）来定义的。如果要修改某一个效果，那就需要修改该标记附加信息。

例如，段落p标记默认内容是居左对齐，如果需要将段落居中对齐显示，只需要设置对齐align属性。

<p align="center">这个段落内容居中显示</p>

属性应在开始标记（首标记）内定义，且与首标记名称之间至少留一个空格，例如在上述代码p标记中，align为属性，center为属性值，属性与属性值之间通过赋值号“=”来连接，属性值可以直接书写，也可以使用双引号“”包括起来。多个属性/值对之间至少留有一个空格。

在学习前端开发HTML代码的编写过程中，应养成良好的编写属性/值对的好习惯，建议统一为属性值加上双引号。


🎭注释

为了提高代码的可读性、可维护性，在编写HTML代码时，可以通过注释标记给代码或样式定义增加注释文本信息，便于给其他人员或自己理解代码和阅读提供帮助，对后期的开发和维护奠定基础。使用锯齿格式编写代码，即代码向右缩进4个字符，也可自定义缩进量。在HTML代码中插入注释标记可以提高代码的可读性。浏览器不会解释注释标记，注释标记的内容也不会在页面上显示。

HTML代码中添加注释的方法有两种：

<!--注释信息-->或<comment></comment>

以左尖括号和感叹号组合开始（<!--），以右尖括号（-->）结束

<!--这是一个注释-->

comment标记是成对标记。以<comment>开始，以</comment>结束，标记包围的信息为注释内容。但是这种方式很多浏览器（Chrome等）会显示在页面上，所以不建议采用。

<comment>这是一个注释</comment>

🎭HTML文档编写规范

HTML文档编写规范是指HTML文档编写过程中需要遵循的一些规则和建议。 编写规范的目的是使HTML文档更加符合标准，更容易被浏览器正确解析和显示。HTML文档编写规范包括标签的书写规则、属性的书写规则、内容的书写规则、文档的结构和布局规则等。遵循HTML文档编写规范可以让HTML文档更加可靠、可维护和可访问。

🥏HTML代码书写规范

HTML语法是Web页面设计所应遵循的基础规范，养成按规范编写代码的习惯，能够大大减少设计页面中存在的缺陷。文档编写质量直接影响网站呈现形式、访问速度、网络流量和用户体验。所以遵循HTML文档编写规范十分重要。

1.HTML标记是由尖括号包围的关键字，所有标记均以“<”开始、以“>”结束。结束的标记在开始标记名称前加上斜杠“/”。例如头部标记格式如下所示：

<head>
......
</head>

2.根据标记类型，正确书写标记，单个标记最好在右尖括号前加一个斜杠“/”，如换行标记可以是单个标记<br>，成对标记最好同时输入开始标记和结束标记，以免忘记。

3.标记可以是互相嵌套（或称为包含）的，但不能交叉，如：

<!--正确书写格式-->
<head><title>...</title>
</head><!--错误书写格式-->
<head><title>...
</head></title>

4.在HTML代码书写时不区分大小写，如头部标记写成<HEAD>、<head>、<Head>、<HEAd>都可以，但建议在同一个Web开发项目中保持一种风格，如统一小写标记名称。

5.代码中包含任意多的回车符和空格在HTML页面显示时均不起作用，需要时可使用<br/>或$nbsp;来实现换行和插入空格，为了代码清晰，建议不同的标记都独占一行。

6.给标记设置属性时，属性值建议使用双引号标注起来，如段落内容居中格式如下所示：

<p align="center">这是一个段落，居中显示 
</p>

7.书写开始与结束标记时，在左尖括号与标记名或与斜杠“/”之间不能留有多余空格，否则浏览器不能识别该标记，导致错误标记直接显示在页面上，影响页面美观效果。例如：

<!--错误示例-->
< comment>这是一个注释
< /comment>

8.编写HTML代码时，应该使用适当的缩进，使代码结构清晰，提高代码的可读性，为后期阅读和维护提供帮助。

🥏HTML文档命名规则

HTML文档是展示web前端开发成果的最好表示方式，为了便于文档规范化管理，在编写HTML文档时，必须遵循HTML文件命名规则。

  • 文档的拓展名为html或htm，建议统一用html
  • 文档名称只可由英文字母，数字或下划线组成，建议以字母或下划线开始。
  • 文档名称中不能包含特殊字符，如空格、$、&等
  • 文档名称区分大小写，特别在UNIX、Linux系统中大小写表示的文件是不同的。
  • Web服务器主页一班命名为index.html或者default.html

🎭HTML文档类型

Web前端开发中存在许多不同的文档，只有了解文档的类型，浏览器才能正确的显示文档。HTML也有多个不同的版本，只有完全明白页面中使用的确切的HTML版本，浏览器才能完全正确的显示出HTML页面。

🥏<!DOCTYPE>标记

DOCTYPE是Document Type的英文缩写，<!DOCTYPE>标记不是HTML标记，此标记可告知浏览器文档使用哪种HTML或XHTML规范，<!DOCTYPE>声明位于文档中的最前面的位置，处于<HTML>标记之前。

<!--示例-->
<!DOCTYPE element-name DTD-type DTD-name DTD-url>

<!DOCTYPE>表示开始声明文档类型定义（Document Type Definition，DTD） 其中DOCTYPE是关键字。element-name指定该DTD的根元素名称，DTD-type指定该DTD类型，设置为PUBLIC，则表示该DTD是标准公用的，设置为SYSTEM，则表示私人定制的。DTD-name指定该DTD的文件名称，DTD-url指定该DTD文件所在的URL地址。>是指结束DTD的声明。

🥏DTD类型

HTML4.01中规定了三种DTD类型：严格型（Strict）、过渡型（Transitional）以及框架型（Farmeset）

1.HTML Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//En" "http://www.w3c.org/TR/html4/strict.dtd">

2.HTML Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//En" "http://www.w3c.org/TR/html4/loose.dtd">

3.HTML Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//En" "http://www.w3c.org/TR/html4/frameset.dtd">

HTML5中的定义

<!doctype html>

HTML文档中规定doctype是非常重要的，这样浏览器就能了解预期的文档类型。HTML4.01中的doctype需要对DTD进行引用，因为HTML4.01基于SGML，而HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。


🪐总结

本篇文章主要介绍了HTML文件的基本结构，HTML文档主要包含<html></html>、<head></head>、<body></body>三个标记。同时介绍了HTML标记语法和HTML属性语法，最后简单介绍了HTML的开发文档规范，这些基础内容虽然很简单，但是却是为后续的学习打下了不可替代的基础，为前端开发工作做充足的准备，所以，小伙伴们也要好好学习基础部分，只有打好基础，才能一步一步往上走，下一期文章将会更详细的介绍HTML其余部分，大家一起加油，学好前端开发三剑客。


🎨觉得不错的话记得点赞收藏呀！！🎨

😀别忘了给我关注~~😀

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

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

相关文章

EventBus 开源库学习（三）

EventBus 开源库学习（三）

源码细节阅读 上一节根据EventBus的使用流程把实现源码大体梳理了一遍&#xff0c;因为精力有限&#xff0c;所以看源码都是根据实现过程把基本流程看下&#xff0c;中间实现细节先忽略&#xff0c;否则越看越深不容易把握大体思路&#xff0c;这节把一些细节的部分再看看。 …
阅读更多...
音视频--DTMF信号发送及检测

音视频--DTMF信号发送及检测

参考资料 https://zh.wikipedia.org/wiki/%E5%8F%8C%E9%9F%B3%E5%A4%9A%E9%A2%91https://www.cnblogs.com/lijingcheng/p/4454932.html 1. DTMF是什么 1.1 DTMF定义 双音多频信号&#xff08;英语&#xff1a;Dual-Tone Multi-Frequency&#xff0c;简称&#xff1a;DTMF&a…
阅读更多...
哈工大计算机网络课程网络安全基本原理详解之：消息完整性与数字签名

哈工大计算机网络课程网络安全基本原理详解之：消息完整性与数字签名

哈工大计算机网络课程网络安全基本原理详解之&#xff1a;消息完整性与数字签名 这一小节&#xff0c;我们继续介绍网络完全中的另一个重要内容&#xff0c;就是消息完整性&#xff0c;也为后面的数字签名打下基础。 报文完整性 首先来看一下什么是报文完整性。 报文完整性…
阅读更多...
四数之和——力扣18

四数之和——力扣18

文章目录 题目描述双指针法 题目描述 双指针法 class Solution { public:vector<vector<int>> fourSum(vector<int>& nums, int target){int nnums.size();vector<vector<int>> res;sort(nums.begin(), nums.end());for(int a0;a<n;a){if…
阅读更多...
如何用cpolar创建隧道，实现外网访问内网？

如何用cpolar创建隧道，实现外网访问内网？

如何用cpolar创建隧道&#xff0c;实现外网访问内网&#xff1f; 文章目录 如何用cpolar创建隧道&#xff0c;实现外网访问内网&#xff1f; 在安装和调试完本地的cpolar后&#xff0c;我们终于可以接触到cpolar的核心功能&#xff1a;建立一条专属于自己的数据通道&#xff0c…
阅读更多...
TCP连接的状态详解以及故障排查（六）

TCP连接的状态详解以及故障排查（六）

TCP通信中服务器处理客户端意外断开 如果TCP连接被对方正常关闭&#xff0c;也就是说&#xff0c;对方是正确地调用了closesocket(s)或者shutdown(s)的话&#xff0c;那么上面的Recv或Send调用就能马上返回&#xff0c;并且报错。这是由于close socket(s)或者shutdown(s)有个正…
阅读更多...
Xposed回发android.os.NetworkOnMainThreadException修复

Xposed回发android.os.NetworkOnMainThreadException修复

最近用xposed进行hook回发的时候&#xff0c;又出现了新的问题&#xff1b; android.os.NetworkOnMainThreadException&#xff1b; 在Android4.0以后&#xff0c;写在主线程&#xff08;就是Activity&#xff09;中的HTTP请求&#xff0c;运行时都会报错&#xff0c;这是因为…
阅读更多...
硬件串口通信协议学习(UART、IIC、SPI、CAN)

硬件串口通信协议学习(UART、IIC、SPI、CAN)

0.前言 学习资料&#xff1a;江协科技的个人空间-江协科技个人主页-哔哩哔哩视频 通信的目的&#xff1a;将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统通信协议&#xff1a;制定通信的规则&#xff0c;通信双方按照协议规则进行数据收发 全双工&#xff1a;通信…
阅读更多...
OPC DA 客户端与服务器的那点事

OPC DA 客户端与服务器的那点事

C#开发OPC客户端&#xff0c;使用OPCDAAuto.dll。在开发过程中偶遇小坎坷&#xff0c;主要记录一下问题解决办法。 1、建立客户端&#xff0c;参考链接。建立WinFrom工程&#xff0c;将博客中代码全部复制即可运行&#xff1a; https://www.cnblogs.com/kjgagaga/p/17011730.…
阅读更多...
01-1 搭建 pytorch 虚拟环境

01-1 搭建 pytorch 虚拟环境

pytorch 管网&#xff1a;PyTorch 一 进入 Anaconda 二 创建虚拟环境 conda create -n pytorch python3.9注意要注意断 VPN切换镜像&#xff1a; 移除原来的镜像 # 查看当前配置 conda config --show channels conda config --show-sources# 移除之前的镜像 conda config --…
阅读更多...
OSPF协议RIP协议+OSPF实验（eNSP）

OSPF协议RIP协议+OSPF实验（eNSP）

本篇博客主要讲解单区域的ospf&#xff0c;多区域的仅作了解。 目录 一、OSPF路由协议概述 1.内部网关协议和外部网关协议 二、OSPF的应用环境 1.从以下几方面考虑OSPF的使用 2.OSPF的特点 三、OSPF重要基本概念 3.1&#xff0c;辨析邻居和邻接关系以及七种邻居状态 3…
阅读更多...
7年测试经验之谈 —— WebSocket协议测试实战

7年测试经验之谈 —— WebSocket协议测试实战

当涉及到WebSocket协议测试时&#xff0c;有几个关键方面需要考虑。在本文中&#xff0c;我们将探讨如何使用Python编写WebSocket测试&#xff0c;并使用一些常见的工具和库来简化测试过程。 1、什么是WebSocket协议&#xff1f; WebSocket是一种在客户端和服务器之间提供双向…
阅读更多...
【RabbitMQ（day3）】扇形交换机和主题交换机的应用

【RabbitMQ（day3）】扇形交换机和主题交换机的应用

文章目录 第三种模型&#xff08;Publish/Subscribe 发布/订阅&#xff09;扇型&#xff08;funout&#xff09;交换机Public/Subscribe 模型绑定 第四、第五种模型&#xff08;Routing、Topics&#xff09;第四种模型&#xff08;Routing&#xff09;主题交换机&#xff08;To…
阅读更多...
如何使用ONLYOFFICE+ffmpeg来给视频文件打马赛克

如何使用ONLYOFFICE+ffmpeg来给视频文件打马赛克

如何使用ONLYOFFICEffmpeg来给视频文件打马赛克 我这里之前写过很多关于ONLYOFFICE使用、安装的系列图文&#xff0c;也写过很多关于ffmpeg使用的图文&#xff0c;那么这次继续&#xff0c;把这两个开源软件放在一起&#xff0c;能碰撞出什么火花般的功能来。 这就是给视频文…
阅读更多...
Linux虚拟机中安装MySQL5.6.34

Linux虚拟机中安装MySQL5.6.34

目录 第一章、xshell工具和xftp的使用1.1&#xff09;xshell下载与安装1.2&#xff09;xshell连接1.3&#xff09;xftp下载安装和连接 第二章、安装MySQL5.6.34&#xff08;不同版本安装方式不同)2.1&#xff09;关闭防火墙&#xff0c;传输MySQL压缩包到Linux虚拟机2.2&#x…
阅读更多...
熟练掌握ChatGPT解决复杂问题——学会提问

熟练掌握ChatGPT解决复杂问题——学会提问

目录 引言 一、5W1H分析法 1. 简单的问题&#xff08;what、where、when、who&#xff09; 2.复杂的问题&#xff08;why、how&#xff09; 2.1 为什么&#xff08;Why&#xff09;——原因 2.2 方式 &#xff08;How&#xff09;——如何 二、如何提问得到更高质量的答案…
阅读更多...
（自控原理）线性系统的根轨迹法

（自控原理）线性系统的根轨迹法

目录 一、根轨迹法的基本概念 1、根轨迹概念 2、根轨迹方程 二、根轨迹绘制的基本法则 1、绘制根轨迹基本法则 三、系统性能的分析 1、闭环零点与时间响应 一、根轨迹法的基本概念 1、根轨迹概念 三大分析矫正方法&#xff1a;时域法、复域法(根轨迹法)、频域法 2、根…
阅读更多...
Jmeter组件作用域及执行顺序

Jmeter组件作用域及执行顺序

目录 一、Jmeter八大可执行元件 二、组件执行顺序 三、组件作用域 四、特殊说明 一、Jmeter八大可执行元件 配置元件---Config Element 用于初始化默认值和变量&#xff0c;以便后续采样器使用。配置元件大其作用域的初始阶段处理&#xff0c;配置元件仅对其所在的测试树分…
阅读更多...
Screens 4 for mac VNC客户端 强大的远程控制工具

Screens 4 for mac VNC客户端 强大的远程控制工具

Screens 4 for Mac 是一款功能强大的 VNC 客户端软件&#xff0c;为 Mac 用户提供了便捷的远程访问和控制解决方案。无论您是需要远程管理服务器、办公电脑&#xff0c;还是需要远程协助他人解决问题&#xff0c;Screens 4 都是您的理想选择。 Screens 4 for Mac具备简洁直观的…
阅读更多...
elasticsearch 将时间类型为时间戳保存格式的时间字段格式化返回

elasticsearch 将时间类型为时间戳保存格式的时间字段格式化返回

dsl查询用法如下&#xff1a; GET /your_index/_search {"_source": {"includes": ["timestamp", // Include the timestamp field in the search results// Other fields you want to include],"excludes": []},"query": …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023