初步认识HTML
HTML1是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
HTML文档结构以及语法初识
HTML文档结构
1.HTML基本结构
1 <html>
2 <head>
3 包括资讯信息：整个页面的属性、指导浏览器解析的标签、引入外部文件的标签
4 </head>
5 <body>
6 我是需要展示的信息
7 </body>
8 </html>
2.HTML基础标签
-
html：根标签
- 如上图所示，HTML文档以 html作为根标签，以< html>标签开始，以< /html >标签结束，在开始标签和结束标签中间的便是HTML文档的所有内容。 head：头部标签
- 如下图所示，头部开始标签< head >和头部结束标签< /head >中间的内容为关于HTML文档的各项属性设置。
1 <head>
2 //设置整个网页的编码格式
3 <meta charset = "UTF-8">
4 //设置网页标题
5 <title>我是网页标题</title>
6 </head>
-
body：身体标签
- 如下图所示，在开始标签< body >和结束标签< /body >中间的内容就是我们想要展示的信息。
1 <body>
2 text：我是文本颜色
3 bgcolor: 我是背景色
4 background：我是背景图片
5
6 <body text="#00ff00" bgcolor="#00" backgroud="">
7 </body>
-
p：段落标签
- 如下图所示，段落开始标签< p >和段落结束标签< /p >之间的内容是我们要展示的段落内容。
1 <p>我是段落内容嘎嘎嘎</p>
3.剖析一个HTML元素
如图所示，这是一个用于展示段落的元素。
这个元素包含了：
1.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
2.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。
3.内容（Content）：元素的内容，本例中就是所输入的文本本身。
4.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
HTML语法简要概述
1.标题
和Markdown编辑器格式一样，HTML文档提供从大到小六级标题，分别是< h1 > ~ < h6>。
2.文本格式
在段落文本中，我们需要知道< del >,< s >,< ins >,< u >,< small >,< strong >,< em >等文本格式标签，其他用于设置段落文本格式的标签不推荐使用。专门用于页面美化应使用后续学习的CSS。
3.超链接
<a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>
-
说明：
- 1、 href即为要跳转去的地址 URL（Uniform Resorce Locator)
- 2、 target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
- 3、超链接标签包含的内容即为显示在页面上供用户点击的
4.图片以及文件路径
图片
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
-
说明：
- 1、 src属性为图片文件的位置 URL，即图片文件的路径
- 2、 alt属性当获取图片出现问题时显示的文字（占位符）
- 3、可为图片指定高宽度，但可能导致图片变形，故不建议
文件路径
文件路径分为绝对路径和相对路径两种。
在相对路径中，.表示当前目录，. .表示上一级目录
5.表格
当页面的内容需要用表格来进行呈现时，我们用< table >等标签。
其中，< tr >表示行, < td >表示行中的单元, < th >是表头的单元（将会加粗显示）
6.列表
列表分为无序列表和有序列表。
无序列表
1 <ul type="square">
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ul>
无序列表使用< ul >标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
有序列表
1 <ol type="a">
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ol>
有序列表使用< ol >标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
7.表单
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
8.其他
- 区块元素
- 内联元素
- 预设格式
- 特殊字符
学习总结
关于HTML认知
在初步学习HTML之前，我只知道HTML是用于构建网页的，我只能将它看作成一个整体，各部分却难以分割来看。而现在，我不仅能将它作为一个整体来看，还能庖丁解牛般把它的各部分挑出来说上那么个一二三来。
相比过去，我对HTML的认知更深刻了。
初步学习HTML后的感受
此前，我一直认为HTML制作和设计是一件非常难的事情，但在初步学习HTML之后，它其实并不是一件特别难的事。
首先，HTML中所有部分都是清晰划分的，一切元素也都是可知的，更何况HTML的各种样式和标签已经并且标出，在理论知识充足以及大部分问题都能通过查询解决的情况下，HTML相较于C++和Java等计算机语言尤为好上手。
其次，和计算机语言一样，即使理论再多，也总有一些理论照顾不到或者容易引起理解错误的问题，这实际上是理论和实操之间不契合的问题。故而平时制作网页时，除了丰富理论知识并熟练运用，还要注意实操上的一些细节问题和样式问题，不仅要学会合理利用网络资源解决问题，更需要自己动手去验证和调整制作效果。
最后，学习HTML的过程令人愉悦，希望自己在学余时间也能更精进网页制作技术，使自己的水平更上一个台阶。
HTML以及我们后面将要学习的 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。 ↩︎
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
