昨天意外的发现自己已经注册账号两年了，至于两年前为啥要注册就实在想不起来了。。。。不过既然注册了还是好好写博客吧。因为最近在看Web技术相关的东西，所以就随手写了一篇关于HTML的入门知识
Web技术，就是和网页相关的技术。网页，通俗点说就是一个在浏览器上打开的文件，它存放在某台计算机内，当我们用浏览器访问某一网页的时候，我们就可以通过互联网访问到这个网页文件。当网页文件从目的计算机借由互联网传输过来的时候，浏览器会帮我们解析网页内容并显示出来。这里的浏览器，通俗一点说就是一种应用程序，它可以完成万维网信息资源的检索。 （以上的话是写给刚入门的朋友看的，如有表述不严谨的地方还请大家海涵啊~~） 关于Web技术的学习，其实就是HTML,CSS和JavaScript的学习。HTML与网页内容相关，而CSS则与网页内容显示相关,JavaScript则与网页具体的实现细节有关。详细的学习，大家可以去W3school上看，在这里，我把链接也分享给大家了（本篇博客的写作思路也是参考了W3school） W3school-------HTML篇 W3school-------CSS篇 W3school-------JavaScript篇 其余相关的知识都有，我就不赘述了，大家都可以在W3school上查阅。
本篇是关于HTML相对基础的知识的介绍，因此会忽略一些细节
HTML本身并不是一种编程语言，只是一种标记语言，它告诉浏览器，标记的文本内容属于什么样的HTML元素（如标题元素，段落元素等等）。一个HTML文档就是一个网页，我们编写HTML文档的方式很简单，甚至记事本都可以。我们在记事本上写完一个HTML文档以后，将后缀.txt改为.html，再次打开的时候就会在浏览器上显示了。 一、基本的HTML元素 二、HTML元素的属性 三、其他的一些HTML元素 四、最后的一些说明
HTML元素，就是以类似<…>…</…>形式，其中<…>内的，就是HTML元素，并且，每个HTML元素还拥有属性，属性在<>内标记。例如<body>…</body>就是一个HTML元素，它内部放置的是文本的主体内容。body元素有bgcolor属性，该属性用于设置body元素内的背景颜色，如果设置主体背景为红色，则可以写成<body bgcolor=“red”>…</body>的形式。注意，一般的HTML元素讲究有始有终，当声明一个HTML标签的时候，需要加上终止符号一般终止符号的格式就是<…>的基础上在前面加上/。例如，<body>…，<h1>…</h1>和<p>…</p>。这里你可以并不知道这些标签具体是什么，但是没关系，你知道这些都是HTML的元素以及他们一般的格式就好了，详细的知识我会在后续介绍。 下面我将介绍一些HTML最基础的一些元素。 （1）<html>…</html>元素。这个元素标记了HTML文档的全体，所有HTML文档的内容都要在这个元素内书写（回忆一下，之前我说过，HTML不是一种编程语言，只是一种标记语言，这里标记的含义就出来了，<html>…</html>只是标记此元素内部为HTML文档，以便浏览器解析） （2）<body>…</body>元素，标记了文档的文本内容主体 （3）<h1>…</h1>，<h2>…</h2>,…等以<hx>形式出现的元素，这些元素是标题元素，它们所标记的内容将会以标题的形式被网页解析显示。显然，以<h1>，<h2>等元素都是在<\body>元素内的.但是要注意，<h1>元素标记的标题是一级标签，而<h2>元素标记的是一级标签下的二级标签 （4）<p>…</p>元素。被此元素标记的文本内容即为段落文本内容。要注意，HTML不会严格区分空格，因此在被<p>…</p>标记为段落的文本中，既使我们敲了空格也没有效果。如果希望文本以原来打的格式（也就是保留原文本的空格换行等信息），则在此元素内需要嵌套使用<pre>…</pre>元素 （5）<a>…</a>，超链接文本的指示元素，可以将一段文字链接到另一个网页去，以<a href=“目标网页的url”>…</a>格式指示超文本链接的目标网页地址。这里,如果大家对href不太了解的话也没有关系，现在我们只要知道，通过href的设置，我们可以链接到目标网页。 （6）<br/>，单个HTML元素，没有之前那样的开始终止，而这个HTML元素表示的是换行的意思，当网页遇到<br/>时会自动换行 （7）<hr/>，将会展示一条横线 最后我们做个简单的汇总:
<html> </body> <h1>这是由元素h1标记的标题1</h1> <h2>这是由元素h2标记的标题2，它是二级标签</h2> <h1>这是另一个一级标签</h1> <p>这是一段话</p> <p>这是一段话 但是它不会区别出空格</p> <P><pre>这是一段话 因为使用了pre标签所以能保留原格式</pre></p> <a href="https://www.w3school.com.cn/html/index.asp">它会链接到W3school</a> <p>下面演示换行元素</p> <br/> <br/> <p>将会空出两行</p> <p>下面演示hr的画出横线的作用</p> <hr/> <hr/> </body> </html>这段HTML标记会被网页解释成如上图所示的样子 其中链接标签效果： 它会链接到W3school
HTML元素的属性，也就是对HTML相关表现形式的一种设置，这些属性都是在标签内部进行设置的。不同的HTML元素会有不同的属性。例如，之前提到的<a>…</a>就具有href属性，这个属性指向了超文本链接所要链接到的目标网址，通过<a href=“目标网址”>…</a>即可设置完成。 下面我列举一些常见的HTML元素以及它们的属性。 （1）在<body>标签中有bgcolor属性，设置这个属性的属性值以后可以改变主体文档的背景颜色 （2）在<h1>,<h2>等标题元素中有align属性，用以指明对齐方式 （3）在所以HTML元素中都有的属性，style属性。style属性通过 键：值 对的方式来进行统一的属性设置，键可以是该HTML元素的任何一个属性（style）本身除外。例如在一些标记文本的HTML元素中，有设置字体格式的属性font-family和字体颜色的属性color等，则可以利用style属性进行统一设置。例如<p style=“font-family=verdana;color:red”>…</p>。等学到CSS的时候我们会知道使用style属性其实是在设置内联样式表 其余的HTML属性，大家在用的过程中都可以去查到，我觉得不经常使用的话，没有必要花大量的时间去记忆，因此我在这里就只说一些最基础的了。最后，我会举出一个实例来演示这些结果。
<html> <body bgcolor="yellow"> <h1>这是标题1并且它按照默认方式对齐</h1> <h2 align="center">这是标题2并且它将按照居中方式对齐</h2> <h3 align="right">这是标题3并且它按照右对齐的方式对齐</h3> <p>下面演示style属性</p> <p style="background-color:red;font-family:verdana;ecolor:blu;font-size:30px">演示文字是我随便打的</p> </body> </html>最终的效果如图所示。因为只介绍了基本的HTML元素的属性，所以还有很多无法演示的，但是我相信大家一定有能力自己去探索，因为实现它们的方式都是类似的。
其他的一些HTML元素，相当于是在第一部分的介绍中拓展了一些除此之外比较常见的元素。 （1）关于引用的一些标记。<blockquote>…</blockquote>和<q>…</q>都可以标记我们引用的文字，这些被标记为引用文字的内容都会以特殊的形式被浏览器解析显示。具体的情况我会在演示样例中为大家展示。<blockquote>和<q>的区别就是一个"block"，即，块。如果我们引用的是一小段文字，那么使用<q>比较好；而如果我们引用的是一大段文字，则使用<blockquote>更好。其余的表示引用的，有<cite>等，我就不一一赘述了 （2）列表相关的HTML元素。这些列表元素主要分为无序列表，有序列表和自定义列表三种方式。无序列表在显示上只是带黑点标记每一项；有序列表会为列表项自动添加排序的数字，从1开始；自定义列表包括自己定义的表头和每个表头下的子项。在无序列表中，以<ul>…</ul>中标记一个无序列表，并且在这个元素内部，用<li>…</li>标记每一个表项；有序列表以<ol>…</ol>来标记一个有序列表，但是在有序列表内部标记表项的方式和无序列表是相同的，都是<li>…</li>；自定义列表以<dl>…</dl>来标记一个自定义列表，在这个标签中以<dt>…</dt>标记每一个表头，内部即为表头说明信息，与表头并行排版的是表项（注意，表头和表项都要在<dl>中，但是内部二中属于兄弟关系而非父子关系），表项以<dd>…</dd>来标记 （3）表格元素。表格元素标记的信息会被浏览器解释为一个表格，且其拥有border等属性可以改变表格的边框显示。表格以<table>…</table>元素来标记，由于表格是一个二维的结构，因此需要两个父子关系的标签<tr>…</tr>和<td>…</td>来表示行和列。行元素包含在table标签内，列元素包含在行元素内 同样的，我会以一个实例来说明上面的HTML元素，以使得大家能够更加直观的理解它们。但是由于下面演示的内容较多而W3school在线编辑器不支持那么长的解析所以我拆成几段来演示。 首先是关于引用的:
<html> <body> <h1>下面我将演示一些实例</h1> <h2>关于引用</h2> <h3>单段引用</h3> <q>惊风飘白日，光景驰西流。</q> <h3>块引用</h3> <blockquote> 置酒高殿上，亲交从我游。 中厨办丰膳，烹羊宰肥牛。 秦筝何慷慨，齐瑟和且柔。 阳阿奏奇舞，京洛出名讴。 乐饮过三爵，缓带倾庶羞。 主称千金寿，宾奉万年酬。 久要不可忘，薄终义所尤。 谦谦君子德，磬折欲何求。 惊风飘白日，光景驰西流。 盛时不再来，百年忽我遒。 生存华屋处，零落归山丘。 先民谁不死，知命复何忧？ </blockquote> </body> </html>其次关于列表演示的如下：
<html> <body> <h1>下面我将演示一些实例</h1> <h2>关于列表</h2> <h3>无序列表</h3> <ul> <li>高等数学</li> <li>线性代数</li> <li>操作系统</li> </ul> <h3>有序列表</h3> <ol> <li>高等数学</li> <li>线性代数</li> <li>操作系统</li> </ol> <h3>自定义列表</h3> <dl> <dt>数学基础课</dt> <dd>高等数学</dd> <dd>离散数学</dd> <dt>专业基础课</dt> <dd>程序设计基础</dd> <dd>操作系统</dd> </dl> </body> </html>最后是关于表格的演示:
<html> <body> <h1>下面我将演示一些实例</h1> <h2>关于表格</h2> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <tr> <tr> <td>4</td> <td>5</td> <td>6</td> <tr> </table> <table border="0"> <tr> <td>1</td> <td>2</td> <td>3</td> <tr> <tr> <td>4</td> <td>5</td> <td>6</td> <tr> </table> </body> </html>写在最后的话就是，本篇文章关于HTML的只是最简单的基础介绍，希望能给所有想要学习HTML的朋友提供一个入门的讲解，其余的进阶内容还是推荐去W3school上去学习，链接我已经发在最前面的位置了
