前端 - HTML基础(1)

myzbx 2024-12-01 18:23 62 浏览

HTML基础

HTML基本知识与结构
HTML常见标签
标签写法与嵌套的讨论

HTML、CSS、javascript三者的关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

<!DOCTYPE HTML>
指示 web 浏览器关于页面使用哪个 HTML 版本进行编写,必须写在所有代码的第一行!
如果你的页面添加了<!DOCTYPE html>，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
这就是<!DOCTYPE html>的作用。

固定结构

结构如下：

<html>
 <head>...</head>
 <body>...</body>
</html>

代码讲解：

<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
为 html 文档加上使用的语言类型说明

在很多国际化的网站中会使用到！<html lang="zh-CN"> </html>告诉浏览器等设备，语言使用以中文为显示和阅读基础!英文使用 en

head标签

下面我们来了解一下<head>标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<head>
 <title>...</title>
 <meta>
 <link>
 <style>...</style>
 <script>...</script>
</head>

<title>标签：

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

meta标签

meta是html中的元标签，其中包含了对应html的相关信息，客户端浏览器或服务器端的程序会根据这些信息进行处理。
HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
content（内容类型）：重要！！这个网页的格式是文本的，网页模式
charset（编码）：特别重要！！！这个网页的编码是utf-8，中文编码，需要注意的是这个是网页内容的编码，而不是文件本身的，其他类型的编码中文可能会出现乱码。
http-equiv="Content-Type" 表示描述文档类型

content="text/HTML; 文档类型，这里为html,如果JS就是text/javascript，

charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8

meta标签

meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：

<head> 
 <meta http-equiv="content-Type" content="text/html; charset=gb2312"> 
</head>

也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。

meta标签的组成

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1、name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是：

<meta name="参数" content="具体的参数值">

其中name属性主要有以下几种参数：

1）Keywords(关键字)
　　说明：keywords用来告诉搜索引擎你网页的关键字是什么。
　　举例：
 <meta name ="keywords" content="science, education,culture,politics,ecnomics，relationships, entertaiment, human">
2）description(网站内容描述)
　　说明：description用来告诉搜索引擎你的网站主要内容。
　　举例：
 <meta name="description" content="This page is about the meaning of science, education,culture.">
3）robots(机器人向导)
　　说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
　　content的参数有all,none,index,noindex,follow,nofollow。默认是all。
　　举例：
 <meta name="robots" content="none">
4）author(作者)
　　说明：标注网页的作者
　　举例：
 <meta name="author" content="root,root@21cn.com">

2、http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是：

 <meta http-equiv="参数" content="参数变量值">

其中http-equiv属性主要有以下几种参数：

1）Expires(期限)
　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
　　用法：
 <meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
　　注意：必须使用GMT的时间格式。
2）Pragma(cache模式)
　　说明：禁止浏览器从本地计算机的缓存中访问页面内容。
　　用法：
 <meta http-equiv="Pragma" content="no-cache">
　　注意：这样设定，访问者将无法脱机浏览。
3）Refresh(刷新)
　　说明：自动刷新并指向新页面。
　　用法：
 <meta http-equiv="Refresh" content="2;URL=http://www.root.net">(注意后面的引号，分别在秒数的前面和网址的后面)
　　注意：其中的2是指停留2秒钟后自动刷新到URL网址。
4）Set-Cookie(cookie设定)
　　说明：如果网页过期，那么存盘的cookie将被删除。
　　用法：
 <meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/">
　　注意：必须使用GMT的时间格式。
5）Window-target(显示窗口的设定)
　　说明：强制页面在当前窗口以独立页面显示。
　　用法：
 <meta http-equiv="Window-target" content="_top">
　　注意：用来防止别人在框架里调用自己的页面。
6）content-Type(显示字符集的设定)
　　说明：设定页面使用的字符集。
　　用法：
 <meta http-equiv="content-Type" content="text/html; charset=gb2312">
7）content-Language（显示语言的设定）
　　用法：
 <meta http-equiv="Content-Language" content="zh-cn" />

meta标签的功能

帮助主页被各大搜索引擎登录；
定义页面的使用语言
自动刷新并指向新的页面
实现网页转换时的动画效果
控制页面缓冲
控制网页显示的窗口

3、style中的属性

font-size:数值px; 文字大小控制
color:#六进制的颜色值; 文字颜色控制
text-align:left/center/right; 文字的居左、居中、居右控制。

标题标签

文章的段落用<p>标签，那么文章的标题用什么标签呢？下面我们将使用<hx>标签来制作文章的标题。

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法：

<hx>标题文本</hx> (x为1-6)

文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。

例如：

<body>
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h4>
</body>

HTML注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

<!--注释文字 -->

语义化

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

更容易被搜索引擎收录。
更容易让屏幕阅读器读出网页内容。

后面会带领大家学习了解html中每个标签的语义（用途）。

喜欢前端的小伙伴们可以在评论区留言，寻找和小冯童鞋一样热爱前端的友人，让我们一起玩转前端的世界！

HTML 基础教程

前端 - HTML基础(1)

HTML基础

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿