HTML (1)相关简介和VSCode

作者: 物非0人非 | 来源:发表于2021-08-11 09:36 被阅读0次

HTML (1)相关简介和VSCode
前端学习之CSS——emmet语法
前端基础 HTML、CSS 重点整理
VScode配置python(Win7系统)
拖拽实现
2018-06-07Ubuntu+OpenCV+VScode+C
vscode打开html无法实现跳转页面
HTML简介 1
代码片段及使用习惯
开发用常见问题

更多学习HTML，可以去看。

一：什么是HTML?

HTML 是用来描述网页的一种语言。

HTML指的是超文本标记语言:HyperText Markup Language。

不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)。

二：HTML页面构造

image.png

页面结构说明

1，<!DOCTYPE>申明为 HTML5 文档，有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
2，<html>元素是 HTML 页面的根元素
3，<head>元素包含了文档的元（meta）数据，在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。如 <meta charset="utf-8">定义网页编码格式为utf-8。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
4，<title> 元素描述了文档的标题
5，<body> 元素包含了可见的页面内容
6，<h1>元素定义一个大标题
7，<p> 元素定义一个段落

如头部 <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

如头部 <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表::

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

如头部 <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

如头部<meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
<meta> 标签- 使用实例
为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

如头部<script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的章节中会详细描述。

ISO 国家/地区代码

在 HTML 中，国家/地区代码可以用作 [lang](https://www.w3school.com.cn/tags/att_standard_lang.asp "HTML lang 属性") 属性中语言代码的补充。

语言代码的前两个字符定义了网页的语言（请参阅语言代码参考）。

最后两个字符定义国家/地区。
下例将中文指定为语言，将中国指定为国家：

<html lang="zh-CN">
...
</html></pre>

注意千万不要弄混: head 标签和 header 标签的不同
head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
如：

<html>
  <head>
     <title>文档标题</title>
  </head>
</html>

header 标签用于定义文档的页眉（介绍信息）。
如：

<html>
  <body>
    <header>
        <p>段落</p>
        <h1>一级标题</h1>
    </header>
  </body>
</html>

三：HTML标签（也就是HTML元素）

"HTML 标签"和"HTML 元素"通常都是描述同样的意思.
但是严格来讲, 一个HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:

<p>这是一个段落。</p>

下面是标签的分类汇总：
1，按功能类别排列 HTML 标签

标签	描述
<!DOCTYPE>	定义文档类型。
<html>	定义 HTML 文档。
<head>	定义关于文档的信息。
<title>	定义文档的标题。
<body>	定义文档的主体。
<h1> to <h6>	定义 HTML 标题。
<p >	定义段落。
<br >	定义简单的折行。
<hr >	定义水平线。
<!- -注释- ->	定义注释。

2，格式化

标签	描述
<acronym>	定义只取首字母的缩写。HTML5 中不支持。请使用 <abbr> 代替。
<abbr>	定义缩写。
<address>	定义文档作者或拥有者的联系信息。
<b>	定义粗体文本。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文字方向。
<big>	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<blockquote>	定义长的引用。
<center>	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<del>	定义被删除文本。
<dfn>	定义定义项目。
<em>	定义强调文本。
<font>	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<i>	定义斜体文本。
<ins>	定义被插入文本。
<kbd>	定义键盘文本。
<mark>	定义有记号的文本。
<meter>	定义预定义范围内的度量。
<pre>	定义预格式文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	定义加删除线的文本。
<samp>	定义计算机代码样本。
<small>	定义小号文本。
<strike>	定义加删除线文本。HTML5 中不支持。请使用 <del> 或 <s> 代替。
<strong>	定义语气更为强烈的强调文本。
<sup >	定义上标文本。
<sub >	定义下标文本。
<template>	定义用作容纳页面加载时隐藏内容的容器。
<time>	定义日期/时间。
<tt>	定义打字机文本。HTML5 中不支持。请使用 CSS 代替。
<u>	定义下划线文本。
<var>	定义文本的变量部分。
<wbr>	定义可能的换行符。

3，表单和输入

标签	描述
<form>	定义供用户输入的 HTML 表单。
<input>	定义输入控件。
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。
<isindex>	定义与文档相关的可搜索索引。HTML5 中不支持。
<datalist>	定义下拉列表。
<keygen>	定义生成密钥。
<output>	定义输出的一些类型。

4，框架

标签	描述
<frame>	定义框架集的窗口或框架。HTML5 中不支持。
<frameset>	定义框架集。HTML5 中不支持。
<noframes>	定义针对不支持框架的用户的替代内容。HTML5 中不支持。
<iframe>	定义内联框架。

5，图像

标签	描述
<img>	定义图像。
<map>	定义图像映射。
<area>	定义图像地图内部的区域。
<canvas>	定义图形。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<svg>	定义 SVG 图形的容器。

6，音频/视频

标签	描述
<audio>	定义声音内容。
<source>	定义媒介源。
<track>	定义用在媒体播放器中的文本轨道。
<video>	定义视频。

7，链接

标签	描述
<a>	定义锚。
<link>	定义文档与外部资源的关系。
<nav>	定义导航链接。

8，列表

标签	描述
<ul>	定义无序列表。
<ol>	定义有序列表。
<li>	定义列表的项目。
<dir>	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<menu>	定义命令的菜单/列表。
<menuitem>	定义用户可以从弹出菜单调用的命令/菜单项目。
<command>	定义命令按钮。

9，表格

标签	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。

10，样式和语义

标签	描述
<style>	定义文档的样式信息。
<div>	定义文档中的节。
<span>	定义文档中的节。
<header>	定义 section 或 page 的页眉。
<footer>	定义 section 或 page 的页脚。
<main>	定义文档的主要内容。
<section>	定义 section。
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<details>	定义元素的细节。
<dialog>	定义对话框或窗口。
<summary>	为 <details> 元素定义可见的标题。
<data>	添加给定内容的机器可读翻译。

11，元信息

标签	描述
<head>	定义关于文档的信息。
<meta>	定义关于 HTML 文档的元信息。
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。

12，编程

标签	描述
<script>	定义客户端脚本。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<applet>	定义嵌入的 applet。HTML5 中不支持。请使用 <embed> 和 <object> 代替。
<embed>	为外部应用程序（非 HTML）定义容器。
<object>	定义嵌入的对象。
<param>	定义对象的参数。