认识HTML

无心的空白

已于 2022-05-21 20:46:40 修改

阅读量134

点赞数

分类专栏： html 文章标签： html 前端 html5

于 2022-05-19 23:05:15 首次发布

本文链接：https://blog.csdn.net/m0_55240753/article/details/124871965

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习技能这件事本身不难，难的是自己能否坚持到最后。 ------ niannian

什么是HTML？

HTML（超文本标记语言——HyperText Markup Language）是构成Web世界的一砖一瓦，它定义了网页内容的含义和结构。除HTML以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS）或功能与行为（如 JavaScript）。

超文本（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
标记（markup）用来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。

HTML能用来干什么？

HTML主要用于搭建一个网页的结构的，前端最原始的三件套就是html+css+JavaScript，例如：现在我们需要造一个机器人，那么html的角色就是真个机器人的骨架，css就是这个机器人的外观，而JavaScript就是这个机器人的行为。

HTML结构（以下是最基本的结构）

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
    <title>网页标题</title>
	<link rel="stylesheet" type="text/css" href="" />
	<style></style>
	<script src=""></script>
    <script></script>
</head>

<body>
    <div></div>
    <script src=""></script>
    <script></script>
</body>

</html>

HTML结构标签详解(最后会有图解)

<!DOCTYPE html> 主要声明为 HTML5 文档，就是告诉浏览器我当前使用的是HTML5的语法，请你用编译HTML5的方法来编译我下面的文档。
<html></html> 整个文档的根元素
<head></head> 里面主要写一些文档新的标签，也会存在一些元数据(meta)
<meta> 元数据
<title></title> 当前页面的标题
<link /> 主要用于引入外部样式（因为这里主讲HTML所以这里暂时不讲关于css的内容）
<style></style> 编写内部样式的区域（因为这里主讲HTML所以这里暂时不讲关于css的内容）
<script></script> script主要有两种用于，第一种就是搭配src属性引入外部JavaScript文件，第二种就是在标签内部写JavaScript代码，两种不可混用。script标签既可以写在head标签里面也可以写在body标签里面（因为这里主讲HTML所以这里暂时不讲关于JavaScript的内容）。
<body></body> 整个页面可见的内容都只能写在这个标签内部，就行div标签一样。
<div></div> 这里只是举例所以只写一个这个标签，这个标签也是以后用的最多的标签。

meta标签详解（对页面的SEO很友好）

<!-- 关键字 -->
<!-- 告诉浏览器，你网页的关键字 -->
<meta name="keywords" content="key1,key2,key3,...">

<!-- 网站内容的描述 -->
<!-- 主要就是告诉浏览器你的网页主要的内容 -->
<meta name="desciption" content="测试网页，本页面主要是用于测试">

<!-- 移动端窗口 -->
<!-- 主要是用于控制H5移动端页面缩放问题的 以下设置会让用户在移动端无法对页面进行缩放 当然现在有些支持强制缩放这个设置是无法禁止的 -->
<!-- width: viewport 的宽度，正整数/字符串 -->
<!-- height: viewport 的高度，正整数/字符串 -->
<!-- initial-scale: 设备宽度与 viewport大小之间的缩放比例，0.0-10.0之间的正数 -->
<!-- maximum-scale: 最大缩放系数，0.0-10.0之间的正数 -->
<!-- minimum-scale: 最小缩放系数，0.0-10.0之间的正数 -->
<!-- user-scalable: 如果设置为'no'用户将不能缩放网页，默认值是'yes' -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- 搜索引擎爬虫的索引方式 -->
<!-- 主要用于告诉爬虫那些页面需要索引，那些页面不需要索引，content的值主要有以下几种 -->
<!-- none：提示搜素引擎忽略此页面 -->
<!-- noindex：提示搜索引擎不索引此页面 -->
<!-- nofollow：提示搜索引擎不继续通过此网页的链接索引搜索其它的网页 -->
<!-- all：提示搜索引擎索引此页面并且可以继续通过此页面的链接索引 -->
<!-- index：提示搜素引擎索引此页面 -->
<!-- follow：提示搜索引擎继续通过此页面的链接索引其他的页面 -->
<meta name="robots" content="none">

<!-- 作者 -->
<!-- 主要用于标注当前页面的作者 -->
<meta name="author" content="作者名字"

<!-- 制作网页的软件 -->
<!-- 指当前文档是什么生成的 -->
<meta name="generator" content="VScode">

<!-- 版全信息 -->
<!-- 标签版全信息 -->
<meta name="copyright" content="niannian">

<!-- 搜索引擎爬虫重访时间 -->
<!-- 主要告诉搜索引擎每隔多少天访问⼀次你的页⾯ -->
<meta name="revisit-after" content="8 days" >

<!-- 双核浏览器渲染方式 -->
<!-- 为双核浏览器准备的，主要用于指定双核浏览器默认以何种方式渲染页面，content大概的值如下： -->
<!-- webkit：默认为webkit内核 -->
<!-- ie-comp：默认IE兼容模式 -->
<!-- ie-stand：默认IE标准模式 -->
<meta name="renderer" content="webkit">

<!-- 设定网页字符集 不推荐 -->
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<!-- 设定网页字符集 推荐 -->
<meta charset="utf-8">

<!-- 浏览器采取何种版本渲染当前页面 -->
<!-- 一般都是默认为最新的模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- 指导浏览器如何缓存某个响应以及缓存多长时间，content值如下： -->
<!-- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。 -->
<!-- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。 -->
<!-- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果。 -->
<!-- private : 只为单个用户缓存，因此不允许任何中继进行缓存。 -->
<!-- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=20表示响应可以再缓存和重用20秒。 -->
<meta http-equiv="cache-control" content="no-cache">

<!-- 禁止百度自动转码  注意大小写！！！ -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 网页到期时间 -->
<!-- 用于设定网页的到期时间，过期后网页必须到服务器上重新传输。注意日期格式！！！ -->
<meta http-equiv="expires" content="Mon, 12 May 2001 00:00:00 GMT" />

<!-- 自动刷新并指向某页面 -->
<!-- 网页将在设定的时间内，自动刷新并调向设定的网址。 完全不推荐，这是用户不可控的，很不友好 -->
<!-- 以下内容解释为从页面加载完成开始计算，30秒后跳转到百度首页 -->
<meta http-equiv="refresh" content="30；URL=https://www.baidu.com">

<!-- cookie设置，如果网页过期。那么这个网页存在本地的cookies也会被自动删除。 -->
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Mon, 12 May 2001 00:00:00 GMT; path=/">

link标签详解

用法一（主要用途）：引入外部样式表（在CSS偏会讲到），主要写法：

<link rel="stylesheet" type="text/css" href="" />

用法二：设置页面logo（注意图片文件后缀为.ico），主要写法：

<link rel=”shortcut icon” href=”./niannian1.ico” type=”image/x-icon” />
<link rel=”icon” href=”./niannian2.ico” type=”image/x-icon” > 

<!-- 两者写法的区别 -->
<!-- shortcut icon： 正常情况是执行这里的，如果这里执行异常就会执行第二行 -->
<!-- icon：当希望页面提供另一种备用图像（例如动画GIF）时 -->

html主要标签图解

文件引入路径简单介绍

无心的空白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识HTML

学习技能这件事本身不难，难的是自己能否坚持到最后。 ------ niannian什么是HTML？HTML（超文本标记语言——HyperText Markup Language）是构成Web世界的一砖一瓦，它定义了网页内容的含义和结构。除HTML以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS）或功能与行为（如 JavaScript）。超文本（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人...
复制链接

扫一扫