学习HTML笔记（一）

今天学习的是HTML基本骨架，有5个：

html标签，head标签，body标签，title标签，meta标签

##介绍HTML5

HTML5是超文本标记语言(HTML)的第五个版本，用于构建和展示网页内容。它引入了许多新特性和改进，旨在提高网页的功能和用户体

验。以下是一些主要特性：

1.语义元素：新增了许多语义化标签,如<header>、<footer>、<article>、<section>等，使得网页结构更加清晰和易于理解。

2.多媒体支持：引入了<audio>和<video>标签，允许直接在网页中嵌入音频和视频文件，而无需依赖第三方插件。

3.图形和绘图：新增了<canvas>元素，用于绘制图形和动画，以及SVG(可缩放矢量图形)支持。

4.表单增强：改进了表单控件，增加了新的输入类型(如email、date、number等)和属性(如 placeholder、required等)。

5.本地存储：提供了 localstorage和sessionstorage接口，用于在客户端存储数据,替代传统的cookie。

6.离线支持：通过应用缓存(AppCache)和Service Workers实现离线应用支持,使得网页在没有网络连接时也能正常工作。

7.地理定位：引入了GeolocationAPI，允许网页获取用户的地理立置信息

8.WebSocket：提供了WebSocket API，实现了客户端与服务器之间的双向通信,适用于实时应用。

HTML5的这些新特性和改进，使得网页开发更加高效和强大，能够创建更丰富和互动的用户体验。

##HTML5的声明

HTML5的声明方式非常简单，只需在文档的第一行添加以下代码：

<!DOCTYPE html>

这个声明告诉浏览器该文档使用的是HTML5标准。与之前版本的HTML声明相比，HTML5的声明更加简洁和易于记忆。

一、<html>标签是什么

<html>标签是HTML文档的根元素,包含了整个HTML文档的内容。所有其他HTML元素都必须是<html>元素的子元素。以下是一个简单的示例：

<!DOCTYPE html>

<head>

</head>

<body>

<h1>欢迎来到我的网站</h1>

<p>这是一个示例页面。</p>

</body>

</html>

在这个示例中,<html>标签包含了<head>和<body>两个主要部分。<head>部分包含了文档的元数据,如字符编码和标题,而<body>部分包含了实际显示在网页上的内容。

二、<head>标签是什么

<head>是 HTML 文档的头部区域，用于存放网页的配置信息。 1. 主要作用 - 设置网页标题（显示在浏览器标签上） - 指定字符编码（确保中文正常显示） - 为搜索引擎提供信息 - 引入CSS样式文件 - 设置移动端显示方式 2. 最基本内容 <html> <head> <meta charset="UTF-8">  <title>网页标题</title>  </head> </html>

三、<body>标签是什么？

<body>是 HTML 文档的主体区域，用于存放用户可见的网页内容。 1. 主要作用 - 包含所有用户可见的内容 - 定义网页的结构和布局 - 放置文字、图片、链接等元素 2. 基本结构 <html> <body> <h1>标题</h1> <p>这是一个段落</p> <img src="image.jpg" alt="图片描述"> <a href="https://example.com">这是一个链接</a> </body> </html> 3. 常用内容 - 标题：<h1>到<h6> - 段落：<p> - 图片：<img> - 链接：<a> - 列表：<ul>，<ol>，<li> - 表格：<table> - 表单：<form>

四、<title>标签是什么？

<title>标签是HTML文档中用于定义网页标题的标签，它必须放在<head>标签内部。作用： - 显示在浏览器的标题栏或标签页上 - 作为书签保存时的默认名称 - 影响搜索引擎结果中的显示标题 基本语法： <title>这里填写网页标题</title> 使用示例： <!DOCTYPE html> <html> <head> <title>我的个人网站</title> </head> <body> <h1>欢迎访问</h1> </body>

</html> 注意事项： 1. 每个HTML文档只能有一个<title>标签 2. 标题内容应该简明扼要，通常不超过60个字符 3. 应包含关键词以提高SEO效果 4. 必须放在<head>标签内，不能放在<body>中 最佳实践： - 使用描述性标题，如"产品介绍 - 公司名称" - 不要使用过长的标题 - 避免使用特殊字符 - 保持标题与页面内容相关 <title>是网页最基本的元信息之一，对用户体验和SEO都很重要。

五、<meta>标签是什么

<meta>标签是HTML中用于提供关于HTML文档元数据的标签，位于<head>标签内部。它不会在网页上显示，但对浏览器、搜索引擎和其他Web服务非常重要。

基本语法：<meta name="属性名" content="属性值">或<meta http-equiv="属性名" content="属性值">

常用类型：

字符编码设置（必须）<meta charset="UTF-8">说明：确保网页正确显示中文等特殊字符，通常放在<head>最顶部
页面描述<meta name="description" content="这里是页面的简短描述，通常150字以内">说明：影响搜索引擎结果中的摘要显示
关键词（SEO）<meta name="keywords" content="关键词1,关键词2,关键词3">说明：帮助搜索引擎理解页面主题
视口设置（移动端适配）<meta name="viewport" content="width=device-width, initial-scale=1.0">说明：使网页在手机和平板上正常显示
重定向页面<meta http-equiv="refresh" content="5;url=https://example.com">说明：5秒后跳转到指定URL
作者信息<meta name="author" content="作者姓名">

最佳实践：