B/S开发之路，如何学习HTML

港控/mmm° 2022-06-03 02:30 163阅读 0赞

![20171215110434334][]

老规矩，先上张图。

大家可以看到，HTML有它的书写规范，也就是格式。我们先看一下下面这段代码：

<!DOCTYPE html> 
    <html> 
    <head>
          <title>这是网页标题</title>
    </head>
    <body> 
          <h1>我是一个标题</h1> 
          <p>我是一个段落。</p> 
          <br/>
    </body> 
    </html>

大家看出什么没有？没看出什么也没关系，请继续看下面

1.这段代码都是由符号  “<”   与   “>”  括起来的，然后再中间写上字母（字母是规定的，有它的特殊含义），我们先不管它是什么含义。

2.  <title>这是网页标题</title>      <h1>我是一个标题</h1>     <p>我是一个段落。</p>         看到这些“标签”有什么规律没，它们有<title></title>这样的结构（中间的文字先不管），这样的结构我们称为开始标签和结束标签，而HTML整个网页就是有标签组成的，这些   “<” “>”我们称为标签，<title>这个叫开始标签，</title>这个多了“/”的叫结束标签，它们是成对存在的，当然，也有特殊的存在比如<br/>

3.它们有子标签  ，比如<body></body>这个标签内部还有<h1>我是一个标题</h1>和<p>我是一个段落</p>标签等。同理，<head></head>标签也是一样的。（此处说明一下：开始标签和结束标签包围起来的部分就是这个标签的内部，内部的标签就是它的子标签）。

这里只是大致总结了下HTML的结构特点，这也是初学者需要认识的，更加详细的HTML特点请自行百度（我只是分享学习方法，技术文章不是我的专长 ![尴尬][awkward.gif]请谅解）。

## 如何书写HTML代码？ ##

既然是代码，那该这么写出这些标签呢？我给大家总结几点：

记事本方式：

这个是HTML老师常用的引导学生使用的一种方式（这种方式专治编辑器依赖者），也就是在你的电脑上（windows系统，并且我分享的B/S开发模式都是以windows系统为准）右键——》新建——》文本文档，然后你就可以在你的这个文本文档中写代码了（可以先把上方的代码复制过去体验一下）。写好代码后把文本文档后缀改为“.html”（自己电脑看不到文件后缀名的请百度）,然后双击打开，你就可以看到效果了。示例图如下：

![20171215114029760][] ![20171215114057232][] ![20171215114116216][] ![20171215114131706][]

编辑器方式：

新手建议就使用记事本写代码练习，但是记事本有很多不方便的地方，编写效率也极低，页面多了不方便管理等问题存在。所以就产生了编辑器。常用HTML编辑器有这些

Dreamweaver   这款工具如果你仅仅是做前端开发是够用了，可以编写HTML、js、css，有管理目录等，博主初学前端就是使用的这款编辑工具。

Microsoft Visual Studio  这款工具就比较强大了，做B/S开发使用asp.net（C\#）开发网站的时候常用这款编辑器，同时也可以编写前端代码，当然它还可以做其他很多事情，此处略。

Eclipse   这也是一款强大的编辑器，主要做Java开发时使用，也支持前端编码

PhpStorm   php开发时常用，支持前端编码，php常用编辑器比较多，此处列举一个。

这些编辑器大家都可以通过文件——》新建——》html文件  的步骤来创建HTML文件。如果有不会的直接百度你那款编辑器创建方法。

##  ##

## 学习HTML需要掌握哪些知识点？ ##

## 大家看到本篇文章的顶部那张图没？那是HTML的大概知识点，下面我就给大家罗列出来。 ##

1.需要掌握标签怎么读！对就是怎么读（方便以后交流），<html></html>  这个读html标签，<b></b>这个读b标签，工具尖括号中单词读。

2.知道哪些标签的常用标签，这个可以给大家提供个参考地址   [HTML常用标签][HTML]

3.了解这些标签的作用。 比如<b>点击我</b>   这个b标签的作用就是把 “点击我” 这三个字加粗，这就是它的作用。每个标签作用在此处了解学习  [HTML常用标签][HTML]

4.熟悉每个常用标签的默认属性和属性值。   比如  <a href="https://www.baidu.com">打开百度</a>   这是一个a标签（作用是点击文字打开一个链接），他的默认属性href 就是它所指向的链接地址，这个href就是a标签的属性，而里面的https://www.baidu.com这是href属性的属性值。这么说大家应该明白吧。同样的[HTML常用标签][HTML] 这里有标签的属性以及属性值。

5.了解常用标签的使用场景，其实这点和标签的作用一个意思，比如你要打开链接就使用a标签，要把字体加粗就用b标签。

6.了解标签有哪些子标签，这个其实你熟悉了html后就会自然明白，不用刻意去记。

**检验成果**

检验学习成果最好的方式就是写一段html代码，在浏览器打开看看有没有达到效果就行了，没有效果再百度一下教程，如果达到效果说明你会使用了，切记反复练习多次，你才能算是掌握了这个标签，否则会忘记的，最好是每天练习几遍，直到能随手写出的程度。

此处啰嗦一句：**学习编程，一定要反复的去操作、去练习，不然绝对会忘！一个能记住，两个呢？多个呢，你会发现学习的越来越多，靠眼睛来记忆是不行的，必须得靠练习来记忆，好记性不如烂笔头的道理用在这里再合适不过。**

好了，以上就是HTML学习方法，希望能给初学者一个方向——致曾经埋头瞎J8折腾的我们！

如果有漏掉的请在下面评论区留言，我好补上。

[20171215110434334]: /images/20220603/46322cb0705f431b94f75d4e5daad655.png
[awkward.gif]: /images/20220603/05c0fd2122294a50b606802b21abf23c.png
[20171215114029760]: https://img-blog.csdn.net/20171215114029760
[20171215114057232]: https://img-blog.csdn.net/20171215114057232
[20171215114116216]: https://img-blog.csdn.net/20171215114116216
[20171215114131706]: /images/20220603/7971e535e9254c1992769a821b501143.png
[HTML]: http://www.w3school.com.cn/html/index.asp