Java Web——前端HTML入门

HTML&CSS3&JavaScript简述

1. HTML概念

2. 超文本

3. 标记语言

4. HTML基础结构

5. HTML基础词汇

6. HTML语法规则

7. VS Code 推荐使用的插件

8. 在线帮助文档

HTML&CSS3&JavaScript简述

HTML 主要用于网页主体结构的搭建，像一个毛坯房

CSS 主要用于页面元素美化，对毛坯房进行精装修

JavaScript 主要用于页面元素的动态处理，在房屋中添加各种智能设备和系统，响应用户的点击事件，或者在用户滚动页面时显示或隐藏某些元素，这些都需要 JavaScript 来实现。

1. HTML概念

HTML5是HTML的最新版本，它在2008年发布，结合了HTML4.01的相关标准并进行了更新和改进，以适应现代网络的需求。HTML5包含了许多不同的技术，这些技术在互联网上得到了广泛应用，并且提供了更好的网络应用功能。与旧的技术相比，HTML5的语法更加清晰，并且它还可以支持SVG内容，使得处理网页中的多媒体内容更加容易。此外，HTML5还引入了一些新元素，对原有的一些功能进行了改进和标准化。最终在2014年，W3C发布了HTML5的最终版本。

2. 超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

3. 标记语言

HTML是一种标记语言，不是编程语言。它没有编程语言的复杂功能，只是通过简单的标签来定义网页的结构和内容，每个标签都有固定的含义和显示效果。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

双标签: 标签是通过一组尖括号+标签名的方式来定义的

<p>Hello world</p>

这个例子中使用了一个p标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。

单标签

<input type="text" name="username" />

属性

<a href="http://www.xxx.com">show detail</a>

href="网址" 就是属性，href是属性名，"网址"是属性值

4. HTML基础结构

<!DOCTYPE html>  
<html>  
<head>  
    <title>我的第一个网页</title>  
</head>  
<body>  
    <!--一个简单的示例代码--> 
    <h1>欢迎来到我的网页</h1>  
    <p>这是一个段落。</p>  
</body>  
</html>

文档声明：<!DOCTYPE html> 是HTML5的文档声明，它告诉浏览器这个文档使用的是HTML5的标准。
根标签：<html> 和 </html> 是HTML文档的根标签，其他所有标签都需要位于这对标签之间。
头部元素：<head> 和 </head> 标签定义了文档的头部。在头部中，我们使用了 <title> 标签来设置网页的标题。这个标题会显示在浏览器的标签页上。头部还可以包含其他元素，如样式链接、脚本链接等。
主体元素：<body> 和 </body> 标签定义了网页的主体内容。这部分内容会在浏览器窗口中显示出来。在示例中，主体包含了一个一级标题 <h1> 和一个段落 <p>。
注释：在HTML代码中，可以使用  来添加注释。注释的内容不会在浏览器中显示，用于添加一些说明或备注。

这个简单的示例展示了HTML文档的基本结构，包括文档声明、根标签、头部元素、主体元素和注释。通过学习和使用更多的HTML标签和属性，你可以创建更丰富和复杂的网页内容。

5. HTML基础词汇

标签（Tag）：

在HTML中，标签是用于标识和定义网页元素的关键词。标签通常成对出现，由一个开始标签和一个结束标签组成，结束标签前有一个斜杠（/）。例如，<p> 是段落标签的开始标签，</p> 是段落标签的结束标签。这样的标签称为双标签。
有些标签单独出现，不需要结束标签，称为单标签。例如，<br> 是一个换行标签，它单独出现，表示在文本中换行。

属性（Attribute）：

属性是HTML标签的一部分，用于提供更多关于标签的信息。它们通常出现在开始标签中。
属性用于定义标签的一些特征或设置，例如颜色、大小、链接目标等。它们由属性名和属性值组成，中间用等号连接。例如，在<a href="https://www.example.com">中，href是一个属性名，它指定了链接的目标地址。

文本（Text）：

在HTML中，文本是指双标签中间的内容，它可以是文字、空格、换行等任何可见的内容。
文本是网页上实际显示给用户的内容，可以包含各种文本元素和文本格式。通过在文本周围使用不同的HTML标签，我们可以控制文本的样式、布局和其他视觉效果。

元素（Element）：

元素是经过浏览器解析后，由标签、属性和文本组成的完整结构。它是HTML页面的构建块。
一个元素可以包含其他元素，形成一个层次结构。例如，一个<div>元素可以包含一个<p>元素和一些文本，形成一个块级元素，其中包含一段文本。

这些概念是HTML的基础，理解它们对于学习和应用HTML非常重要。通过合理地使用各种HTML标签、属性和文本内容，我们可以创建出结构清晰、样式美观的网页。

6. HTML语法规则

1. 根标签有且只能有一个

HTML文档只能有一个根标签，即<html>，它包裹着整个HTML文档的内容。其他所有标签都应位于根标签之内。

2. 无论是双标签还是单标签都需要正确关闭

双标签需要正确闭合，即在结束位置使用相应的结束标签。例如，<p>标签需要使用</p>来闭合。
单标签则不需要结束标签，但它们在闭合时可能包含斜杠。例如，<br/>标签用于换行。

3. 标签可以嵌套但不能交叉嵌套

在HTML中，标签可以嵌套在其他标签中，以形成层次结构。但是不允许交叉嵌套，即一个标签不能完全包含在另一个标签的中间部分。

以下是一个不符合规则的交叉嵌套例子：

<b><i>这是错误的交叉嵌套</b></i>

正确的嵌套方式应该是：

<b><i>这是正确的嵌套</i></b>

4. 注释语法为，注意不能嵌套

HTML中的注释使用包围，注意在这之间不能再次嵌套注释。

5. 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值

HTML标签的属性必须指定一个值，并且这个值必须用引号包围。但在HTML5中，当属性名和值相同时，可以省略属性值。例如，<input type="text" disabled="disabled">可以简写为<input type="text" disabled>。

6. HTML中不严格区分字符串使用单双引号

在HTML中，可以使用单引号或双引号来包围属性的值，两者的效果是相同的。例如，<a href="example.com">和<a href='example.com'>是等价的。

7. HTML标签不严格区分大小写,但是不能大小写混用

HTML标签不区分大小写，<p>和<P>是等效的。但是在同一个文档中，不能大小写混用，否则会出现错误。

8. HTML中不允许自定义标签名,强行自定义则无效

在HTML中，不能使用自定义的标签名。所有标签都应使用HTML标准中定义的标签名。如果使用了自定义的标签名，浏览器将不会识别它，并且将其视为无效内容。

7. VS Code 推荐使用的插件

Auto Rename Tag 自动修改标签对插件
Chinese Language Pack 汉化包
HTML CSS Support HTML CSS 支持
Intellij IDEA Keybindings IDEA快捷键支持
Live Server 实时加载功能的小型服务器
open in browser 通过浏览器打开当前文件的插件
Prettier-Code formatter 代码美化格式化插件
Vetur VScode中的Vue工具插件
vscode-icons 文件显示图标插件
Vue 3 snipptes 生成VUE模板插件
Vue language Features Vue3语言特征插件

8. 在线帮助文档

提供丰富的编程和前端开发教程的一个好用的教程网址

w3school 在线教程