从HTML开始

什么是HTML?

说起前端开发自然要从HTML说起了，正是一个一个的HTML页面搭建起了如今的网页世界，HTML本身并不是一种真正编程语言，而是定义内容结构的标记语言，并没有传统C语言和Java所具有的变量、循环等等这些。HTML文件就是以.html结尾的文件，它可以运行在浏览器上，由浏览器来解析。
你可以在桌面右键新建一个txt文件，复制粘贴如下代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>我的第一个web页面</title>
  </head>
  <body>
    <p>这是一个段落</p>
    <img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="简书LOGO">
  </body>
</html>

之后将文件扩展名改为html，通过浏览器打开就能看到以下结果了。

HTML元素

HTML由各种各样的元素组成，如下就是HTML元素:

<p>这是一个段落</p>
 <img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="简书LOGO">

上面两个元素都是HTML元素：

第一个被称为闭合元素,闭合元素有着开始标签<p>、闭合标签</p>以及内容这是一个段落，他们被统称为一个闭合元素；
第二个被称空元素，它没有 </img> 闭合标签，也没有内部内容。因为img元素不包含内容是有效果的，它的作用是向其所在的位置嵌入一个图像。

HTML元素中的属性

这里我们看在上一小节中的第二行代码：

 <img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="简书LOGO">

通过阅读上面我们已经知道了img是空元素，那么img标签中的src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" 和alt="简书LOGO"是什么呢？这些就是HTMl元素中的属性，举例来说，当img标签中含有src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"这段代码时，就会在浏览器中显示简书的LOGO图，src就是设置img标签的显示内容，alt则是当浏览器加载不出图片时，代替图片显示的文字。
另外，每个不同的标签都会有不同的属性，需要我们不断地练习和熟悉。

使用HTML的正确姿势

接下来我们回到最开始的那一段代码，并逐行解析：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>我的第一个web页面</title>
  </head>
  <body>
    <p>这是一个段落</p>
    <img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="简书LOGO">
  </body>
</html>

<!DOCTYPE html>和英文doctype的含义一样，这一行代表了该文档的类型为html，并且这行代码应该始终位于文档的最上面。
<html lang="zh"></html>——html元素包含了整个页面的内容，有时也被称作根元素。该元素属性lang代表页面语言，当你设置这个属性时，浏览器就会默认该页面为你设置的语言，此时浏览器就可以做很多事情，比如当你的地区使用语言和你设置的语言不同时，就可以提醒你需不需要翻译。
<head> </head> ——head元素包含了你想要添加的内容，但并不会被用户看到，这里面包括像想被搜索引擎搜索到的关键字和页面描述，CSS样式表和字符编码声明等等。
<meta charset="utf-8">——当前的这个meta元素定义了页面使用的字符集为UTF-8；meta元素也可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词；meta标签位于文档的头部，不包含任何内容；meta 标签的属性定义了与文档相关联的名称/值对。关于meta的具体使用，请关注本博客的后续内容。
<title></title>——title元素设置了页面的标题，标题显示在浏览器标签页上，而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。
<body></body> — body元素，这个元素作为你的画布和写作空间，不管是文本，图像，视频，游戏，可播放的音轨或是其他内容，都可以显示在网页上。

常用标签

在这里将会对一些常用的标签进行详细的讲解。

关于文本

标题

标题就像一本书，它有它的书名，每本书会有章节，其中书名的标题就像<h1>一级标题</h1>，章节就像<h2>二级标题</h2>。HTML有6种级别的标题<h1>-<h6>，就像下面一样：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落

<p>标签代表着一个段落，就像上面的代码一样：

<p>这是一个段落</p>

列表

在web中，许多内容都是由列表来呈现，列表又分为无序列表( unordered lists)和有序列表
(ordered lists):
有序列表:

<ol>
  <li>文章一</li>
  <li>文章二</li>
  <li>文章三</li>
</ol>

无序列表:

<ul>
  <li>简·爱</li>
  <li>钢铁是怎样炼成的</li>
  <li>红楼梦</li>
</ul>

关于链接

链接可以进行页面跳转，首先创建一个a标签，将显示内容放入a标签中：

<a>简书官网</a>

之后向a标签添加href属性，并将href属性的值设置为https://www.jianshu.com/：

<a href="https://www.jianshu.com/">简书官网</a>

这样通过点击<a>标签就可以跳转页面，进入简书官网了。

结束

通过上面的学习，可以搭建一个简单的页面，像这样：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>简书</title>
  </head>
  <body>
    <h1>简书</h1>
    <img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="简书LOGO">
    <ul>
      <li>
        <a href="https://www.jianshu.com/">发现</a>
      </li>
      <li>
        <a href="https://www.jianshu.com/subscriptions#/timeline">关注</a>
      </li>
      <li>
        <a href="https://www.jianshu.com/notifications#/comments">消息</a>
      </li>
    </ul>
     <ol>
       <li>从HTML开始</li>
       <li>HTML表格</li>
       <li>HTML表单</li>
     <ol>
  </body>
</html>

五毛钱的仿简书官网

继续学习

想继续学习有关HTML的知识，可以通过下面的网站进行学习：