HTML-1

最新推荐文章于 2022-10-24 14:55:00 发布

大大126

最新推荐文章于 2022-10-24 14:55:00 发布

阅读量776

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_59938047/article/details/119616494

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是 HTML？

HTML 是用来描述网页的一种超文本标记语言： HyperText Markup Language。

超文本包括文字、图片、视频等数据。

标记是通过一个一个的具体标记来描述内容，标记不是我们自己想象制造的，而是有HTML语法格式规定的。

标记语言是一套标记标签 (markup tag)。

HTML 使用标记标签来描述网页。

HTML 文档包含了HTML 标签及文本内容。

HTML文档也叫做 web 页面。

2.HTML版本

HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。

HTML历史上有如下版本：

①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

③HTML 3.2：1997年1月14日，W3C推荐标准。

④HTML 4.0：1997年12月18日，W3C推荐标准。

⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。

⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。 [6]

HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。

总而言之，HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。

3.网页结构

<!DOCTYPE html>声明有助于浏览器中正确显示网页,用来告知 Web 浏览器页面使用了哪种 HTML 版本,如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

<!DOCTYPE html>不用区分大小写

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

以上均为HTML5，均可用

HTML 4.01

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

在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML，因此不要求引用 DTD。

head标记中定义的内容是给浏览器提供的附加信息，告诉浏览器当前html文件应该如何执行（头部）。

body标记所表示的部分--html文件的身体。

显示该用户当前html网页的具体内容。

head标记用户不可见，body标记用户可见【不看脸，看身材】

<!DOCTYPE html> 声明为 HTML5 文档。

<html> 元素是 HTML 页面的根元素。

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题。

<body> 元素包含了可见的页面内容。

<h1> 元素定义一个大标题。

<p> 元素定义一个段落。

4.HTML编辑器

1.通过记事本编辑html文件

1.1新建记事本文件。

1.2打开记事本文件，键入html代码。

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title>记事本</title>
    </head>
    <body>
         <h1>记事本编辑的第一个标题</h1>
         <p>记事本编辑的第一段落</p>
    </body>
</html>

1.3保存记事本文件

保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您喜好。

1.4在浏览器上运行HTML文件，直接在文件夹中双击您的 HTML 文件。

2.通过专业的HTML 编辑器

Notepad++：http://www.html.cn/tool/edit/2.html

Sublime Text：http://www.html.cn/tool/edit/6.html

WebStorm:https://www.html.cn/tool/edit/8.html

HBuilderX: https://www.dcloud.io/hbuilderx.html

VS Code：https://code.visualstudio.com/

VS Code编辑器使用

1.下载VS Code编辑工具

2.双击运行安装文件，按步骤安装，安装时修改安装目录即可

3.打开vscode

4.文件-->新建文件

5.文件--->另存为或者选中当前文件【Ctrl+S】保存新建的文件为html文件

6.编辑html代码

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>vscode</title>
     </head>
     <body>
          <h1>vscode 编辑HTML文件</h1>
     </body>
</html>

7.编辑完成以后，文件--->另存为或者选中当前文件【Ctrl+S】保存一下编辑的文件。

8.找到文件的标题右键找到Open in Default Browser,点击运行。

VS Code编辑工具汉化

首先点击扩展（也就是四个小方格），在搜索栏内输入 Chinese。

下载安装简体中文，点击 install ，在右下方会出现 restart 点击就好。

再重启 vs 后就会变成简体中文。

Open in Default Browser运行问题

我们安装好的VS Code有时可能在运行的时候找不到Open in Default Browser选项，这是怎么办？

首先点击扩展（也就是四个小方格），在搜索栏内输入 Open。

下载安装open in browser，点击 install,就可以了。

5.web浏览器

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

无论我是使用记事本还是 HBuilderX，创建出来的网页都是要在浏览器中运行查看结果。

浏览器就是网页的运行环境。

浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。Web 信息资源由统一资源标识符

浏览器又因为内核不同分为4类：

1.Trident 内核 -- 是微软开发的一种排版引擎 [Internet Explorer]。

2.Gecko 内核 -- Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一[Firefox]。

3.WebKit 内核 -- WebKit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快[Chrome,Safari]。

4.Presto 内核--由 Opera Software 开发的浏览器排版引擎[Opera]。

不同内核的浏览器所呈现出来的内容不一样。

6.中文编码

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

7.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

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

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

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

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

像下面的形式一样的结构:

<标签>内容</标签>

8.HTML元素

HTML 文档由 HTML 元素定义。

1.语法元素

HTML 元素以开始标签起始。

HTML 元素以结束标签终止。

元素的内容是开始标签与结束标签之间的内容。

某些 HTML 元素具有空内容（empty content）。

空元素在开始标签中进行关闭（以开始标签的结束而结束）。

大多数 HTML 元素可拥有属性。

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

2.嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>嵌套元素</title>
    </head>
    <body>
        <h1>我是h1元素，我嵌套在body元素中</h1>
    </body>
</html>

3.不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示，

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

例如：开始标签<b>内容</b>结束标签

4.空元素

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

<br> <meta ><img>就是没有关闭标签的空元素。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障.

5.HTML属性

属性是 HTML 元素提供的附加信息。

HTML 元素可以设置属性.

属性可以在元素中添加附加信息.

属性一般描述于开始标签.

属性总是以名称/值对的形式出现，比如：name="value"。

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

<a href="http://www.click369.com">这是一个链接</a>

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'.

属性和属性值对大小写不敏感。

6.水平线

<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平线</title>
	</head>
	<body>
		<p>水平线</p>
		<hr width="500"size="50"color="crimson">
	</body>
</html>

7.注释

浏览器会忽略，不会在网页显示

>在要注释的代码上方

提高代码可读性

可以用来修改代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注释</title>
	</head>
	<body>
		<h3>--注释--浏览器会忽略，不会在网页显示</h3>
		<!-- 注释不会在网页显示 -->
		<h3>--注释--在要注释的代码上方</h3>
		<h3>--注释--提高代码可读性</h3>
		<h3>--注释--可以用来修改代码</h3>
	</body
</html>

8.如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

9.HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

h1字体最大，依次h6最小
标题自动换行，自动加粗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
	</head>
	<body>
		<h1>内容标题</h1>
		<h2>内容标题</h2>
		<h3>内容标题</h3>
		<h4>内容标题</h4>
		<h5>内容标题</h5>
		<h6>内容标题</h6>
		<h1>h标签自动换行</h1>
	</body>
</html>

10. HTML 段落

HTML 段落是通过标签 <p> 来定义的。

注意区分段落p和标题h

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落</title>
	</head>
	<body>
		 <p>#操场埋尸案改编电影未获被害人家属授权#【#被害人家属回应操场
		埋尸案将拍电影#：未授权制片方，担心事件被胡乱改编】8月10日，湖
		南“操场埋尸案”将被改编成电影《操场》的信息在网络引发关注。11日，
		红星新闻记者从《操场》选角导演戴晓晨处获悉，目前影片处于前期
		筹备阶段，预计在10月开机。同时，“操场埋尸案”被害人邓世平女儿邓
		玲告诉记者，《操场》团队没有通过家属授权，她担心事件被胡乱改
		编。目前，邓玲已委托律师处理相关影视片未来可能涉及的侵权纠纷。
		@红星视频</p>
	</body>
</html>

11. HTML 图像

HTML 图像是通过标签 <img> 来定义的.

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

HTML 图像-src属性

src属性指 "source"。源属性的值是图像的 URL 地址。也就是图片资源的路径。

图片资源的路径分绝对路径和相对路径

绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。

例如:<img src="E:\wangxing\lianxi\20210811\imgs\img1.jfif"width="500" >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对路径</title>
	</head>
	<body>
		<img src="E:\wangxing\lianxi\20210811\imgs\img1.jfif"width="500" >
	</body>
</html>

绝对路径缺点:

1.如果图片保存目录太深，图片的操作路径就会很长。

2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。

相对路径--以当前网页为参照、为中心，对外开始查找图片的路径。

图片与当前网页在同一个目录下【src=”图片名称”】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对路径</title>
	</head>
	<body>
		<h2>网页与图片在同一目录下</h2>
		<img src="img2.jfif"width="300" >
	</body>
</html>

图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对路径</title>
	</head>
	<body>
		<h2>图片保存在当前网页所在目录的子文件夹中</h2>
		<img src="imgs/img1.jfif"width="300" >
	</body>
</html>

图片保存在当前网页所在目录的父文件夹中[../上一层]

【src=”../父文件夹的名称/图片名称”】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对路径</title>
	</head>
	<body>
		<h2>图片保存在当前网页所在目录的父文件夹中</h2>
		<img src="../img3.jfif"width="200" >
	</body>
</html>

当然我们也可以用网络地址路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网络路径</title>
	</head>
	<body>
		<img src="https://t7.baidu.com/it/u=618936275,430993586&fm=193&f=GIF" >
	</body>
</html>

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>alt属性</title>
	</head>
	<body>
		 <img src="../img3.jfif"width="200" ><br>
		 <img src="../img9.jfif"alt="这是一个图片" >
	</body>
</html>

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。

指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像的高度与宽度</title>
	</head>
	<body>
		 <img src="../img3.jfif"width="200"height="150" >
	</body>
</html>

12.HTML格式化标签

格式化标签定义文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>格式化标签</title>
	</head>
	<body>
		<b>加粗</b><br>
		<strong>加粗</strong><br>
		<small>变小</small><br>
		<i>斜体</i><br>
		<em>斜体</em><br>
		上标3<sup>2</sup><br>
		下标<sub>下标</sub><br>
		<del>删除线</del><br>
		<ins>下划线</ins><br>
	</body>
</html>

大大126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-1

1.什么是 HTML？HTML 是用来描述网页的一种超文本标记语言：HyperTextMarkupLanguage。超文本包括文字、图片、视频等数据标记是通过一个一个的具体标记来描述内容，标记不是我们自己想象制造的，而是有HTML语法格式规定的标记语言是一套标记标签(markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML标签及文本内容HTML文档也叫做web 页面2.HTML版本编辑语音HTML是用来标记Web信息如何展示以...
复制链接

扫一扫