html+css+js 学习笔记之html篇

YuanDaima2048

已于 2024-05-09 19:46:03 修改

阅读量49

点赞数

分类专栏：前端学习文章标签： html javascript 笔记 vscode html5 css3

于 2023-08-14 14:41:21 首次发布

本文链接：https://blog.csdn.net/2301_79288416/article/details/132275657

版权

html学习笔记

文章总览：YuanDaiMa2048博客文章总览

开发工具

浏览器 : 谷歌
敲代码 : Vscode

Vscode快捷键

代码格式化: Shift+Alt+F
向上或向下快速移动一行: Alt+up 或 Alt+down
在上面或下面复制当前行: Alt+Shift+up 或 Alt+Shift+down
快速保存: Ctrl+S
快速查找: Ctrl+F
快速替换: Ctrl+H
关闭(查找替换小窗口): Esc
插件: open in browser

HTML5简介与基础骨架

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。

HTML5被称为超文本标记语言，它是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。用HTML5编写的文件,后缀以 .html 结尾, 标记语言时一套标记标签, 例如:

双标签: <html></html>
单标签: <img>

HTML5的DOCTYPE说明
!DOCTYPE, 一个文档类型标记是一种标准通用标记语言的文档类型声明, 它的目的是要告诉标准通用标记语言解析器, 它应该使用什么样的文档类型定义（DTD）来解析文档。

<!DOCTYPE html>时HTML5的声明, 应位于文档最前面, 处于标签之前, 是网页必备, 避免浏览器的怪异模式.

<!DOCTYPE html>

HTML5基本骨架

<!DOCTYPE html>
<html>
    <head>
        <title>标题</title>
        <meta charset="utf-8"> 
    </head>
    <body>
        显示在页面中的内容
    </body>
</html>

<html></html> 限定文档的开始和结束
<head></head> 定义文档的头部, 描述文档的各种属性和信息, 包括文档的标题/在web中的位置以及和其他文档的关系等.
- 绝大多数头部内包含的数据不会真正作为内容显示给读者
<body></body> 定义文档的主体, 包含文档中文本/超链接/图像/表格/列表等内容, 直接在页面中显示.
<title></title> 定义文档标题, 显示在浏览器窗口的标题栏或者状态栏, 在 <head></head> 中必须要包含 <title></title>
- 有利于搜索引擎优化, 满足搜索引擎的排名需求.

<meta> 用来描述HTML网页文档的属性/关键词, 一般在 <head></head> 标签里

<meta charset="utf-8"> 表示当前使用的是 utf-8 编码格式

例子:

<!--实例 1 - 定义文档关键词，用于搜索引擎：-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!--实例 2 - 定义web页面描述：-->
<meta name="description" content="Free Web tutorials on HTML and CSS">
<!--实例 3 - 定义页面作者：-->
<meta name="author" content="Hege Refsnes">
<!--实例 4 - 每30秒刷新页面：-->
<meta http-equiv="refresh" content="30">