(1)从零开始学前端(学习笔记)-JavaWeb-HTML-概述
本帖最后由 LHW 于 2022-3-22 20:01 编辑(1)从零开始学前端(学习笔记)-JavaWeb-HTML-概述
本人自学两年，想通过笔记来帮助一些刚入门的小白快速的了解前端知识，如果喜欢这个系列，可以点赞评论支持一下嘛，谢谢各位啦:$qqq 纯手打非复制，如有错误可以在评论区纠正，感谢支持{:1_893:}
HTML
1.概念：是最基础的网页开发语言
[*] Hyper Text Markup Language 超文本标记语言
[*] 超文本：
[*] 超文本是用超链接的方式，将各种不同空间的文字信息组织在一起的网状文本。
[*] 标记语言：
[*] 由标签构成的语言。<标签名称>如 html, xml...
[*] 标记语言不是编程语言
2.属性
标签中还可以拥有属性，属性可以为标签提供更多的信息。
属性只能添加到开始标签中。格式为：属性名=属性值
例如：align属性，代表对齐方式。我们可以在开始标签中添加该属性，就能让内容在不同位置显示了
HTML入门案例
1.实现步骤
(1).在项目下web目录中新建一个HTML文件。
(2).修改<title>标签中的内容为：01-入门案例。
(3).在<body>标签中编写一个<h1>标签，内容为：这是我的第一个HTML入门案例。
(4).在<h1>标签中指定属性align，属性值为center。
(5).通过浏览器打开查看页面。
2.实现步骤
<!DOCTYPE html>:H5的文档声明
<html lang="en">:根标签，一个文件中只能有一个根标签
<head>:头部标签
<meta charset= "UTF-8">:设置字符集
<title>:文档标签，显示在浏览器标签上
<body>:身体标签，包含所有的文档内容
(1)：首先我们需要在Web目录下创建一个HTML文件，如图所示
https://s1.ax1x.com/2022/03/22/qQFewF.png
(2)：然后在文件中输入以下内容，并且修改title标签里面的文字内容
https://s1.ax1x.com/2022/03/22/qQFaYd.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-入门案例</title>
</head>
<body>
</body>
</html>
(3)：在body标签中添加一个h1标签，在h1标签中添加文字
https://s1.ax1x.com/2022/03/22/qQk6jx.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-入门案例</title>
</head>
<body>
<h1>这是我的第一个HTML入门案例</h1>
</body>
</html>
(4)：在<h1>添加属性align，并且给属性添加值
https://s1.ax1x.com/2022/03/22/qQFzX6.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-入门案例</title>
</head>
<body>
<h1 align="center">这是我的第一个HTML入门案例</h1>
</body>
</html>
(5)：在浏览器打开该文件
https://s1.ax1x.com/2022/03/22/qQAAVU.png
https://s1.ax1x.com/2022/03/22/qQANRA.png
HTML概念小结
HTML是一种标记语言，使用元素和和属性来编写页面
组成部分
元素(Element):开始标签，结束标签与内容相结合，便是一个完整的元素
开始标签(Opening tag):包含元素名称，被左、右尖括号所包围。表示元素从这里开始或者开始起到作用
结束标签(Closing tag):与开始标签相似，只是其在元素名之前包含了一个斜杠，这表示着元素的结尾
内容(Content):元素的内容，本例中就是所输入的文本本身
属性(Attribute):标签的附加信息
学习HTML要抓住两个重点
掌握标签所表达的含义
掌握在标签中属性的含义
本文主要内容：HTML概述、HTML入门案例、HTML概念小结，后续也会推出续集。希望大家能持续关注{:1_921:}
{:1_893:}谢谢大家能够看到这里，如果觉得对你有帮助的话，可以点赞评论支持一下嘛谢谢各位啦:loveliness:
写的确实挺用心的，和菜鸟教程有得一拼，适合入门，加油 学习笔记不能发这个区啦。才发的版规 加油啊，学习使我们强大 jqk2001 发表于 2022-3-22 20:20
写的确实挺用心的，和菜鸟教程有得一拼，适合入门，加油
感谢支持{:1_893:} 有空学习啊 很基础，确实从零开始。 学习到了，分享万岁 学到老，活到老 谢谢分享,感觉这个介绍什么的不用学他