嗨大家好啊，又见面了，昨天咱们学习了HTML的一些基本的概念，了解了HTML是什么东西以及他的作用和咱们浏览器是如何解析HTML文件的，有举了一个小例子来看了下HTML文件长什么样子，今天咱们就来看一下HTML的内容。
咱们在这一节里主要看一下HTML的 标题、段落、链接、图片，以及这些元素中的一些属性，好了咱们进入主题。
首选是咱们的标题元素：
HTML的标题是元素<h/>进行定义的，HTML中主要定义了6个标题，分别是h1 -- h6，标题的数字表示的标题的大小，数字小的反而标题是最大的。咱们来看一下代码是：
<html>
<body>
html 字体大小是标签 <h>
<h1>hello HTML h1</h1>
<h2>hello HTML h2</h2>
<h3>hello HTML h3</h3>
</body>
</html>
我在这里只是列举了其中的三个，主要意思就是看一下这个效果咱们后面自己练习下领会领会。保存之后看一下效果图：
咱们可以看到具体的标题大小。是数字小的反而标题大，字体小的反而小。标题的使用就是这么简单，后面的几个标签也是如此简单，在后面的学习中咱们在做一些复杂的运用，今天咱们只是认识和简单的使用这些标签，在后面咱们不会陌生。
需要注意的一点是咱们不要使用标题进行字体的加粗等操作，标题就是标题，只有字体的样式咱们在后面的样式中进行学习。
标题完了就是咱们的段落，HTML中段落是使用的标签<p/>
段落的意思就是一整段文本咱们可以在HTML中定义一个段落然后放置咱们需要展示的文本信息。当然也是比较简单、基础的标签，看一下代码：
<html>
<body>
<p>这是一个HTML段落</p>
<p>这是另一个HTML段落</p>
</body>
</html>
p.jpg
咱们可以看到这两行文本显示在浏览器页面上，段落有一点就是浏览器是自定屏蔽掉他中间的空格的，大家可以试试，在你实验的时候随意添加一些空格，但是浏览器在解析的时候空格是自动屏蔽掉的。标题和段落这样的标签浏览器是自动在标签开始和结束的时候添加一个换行的。所以没有必要使用换行标签<b/>在对他换行操作。
下面咱们看一下HTML中的链接，在HTML中链接是使用的标签<a/>,咱们通常在浏览网页的时候会发现有一个链接或者是有一段特殊颜色的文字是可以点击的，点击之后回调转到一个新的网页，提供一些新的图文信息，或者是音频信息，供我们浏览，其实这里就是使用的 <a/>标签。咱们看一下吧：
<html>
<body>
<a href="http://www.jianshu.com/u/b93b80b37b9e">这是HTML的链接</a>
</body>
</heml>
在这里有一个标签的属性，href，这个属性就是告诉浏览器解析的时候这个是链接，点击这个链接，浏览器会自动请求咱们配置的链接地址，从而呈现给用户的是一个新的网页内容。咱们看一下效果：
![]
大家可以看一下上面这个就是点击咱们的文件浏览器解析的<a/>标签，他是显示的咱们在标签中的文本信息。这段文本是不同的颜色进行表示的，就是为了提醒用户的注意从而可以点击他。下面咱们看一下点击之后的效果：
咱们可以看到浏览器地址栏中的链接已经不是之前的链接了，是咱们配置在<a/>标签中的新的地址，在咱们点击这个链接的时候浏览器请求了新的地址，就是咱们配置的地址，返回给我们新的内容。
接下来咱们看一下图片，HTML中的图片使用的是<img/>,图片这个标签咱们可以设置北京图片，也可以设置图片的排列顺序，浮动图片等，这些咱们在后面深入学习的时候在看现在这是看看<img/>标签的简单使用，看下代码
<html>
<body>
</img>
</body>
</html>
这里也是使用了咱们<img/>标签的元素 src 故名思议是资源的意思啦，图片就是一种资源了。这个图片地址是我申请的七牛云存储的地址，在后面有时间了可以总结下七牛API的操作。好了咱们看一下效果：
这个就是浏览器解析咱们的配置的资源地址去请求了这个资源呈现给用户展示。
好了今天咱们熟悉了几个标签：标题、段落、链接、图片，其中标签和段落是浏览器会自动在标签前后添加一个换行，所以咱们自己在没有必要的情况下进行换行的操作其实一个愚蠢的操作。还有需要注意的是不要使用标题进行文字的加黑、加粗操作，不要使用段落进行换行的操作。后面我们在学习新的知识。
欢迎大家来我们的网站逛逛：https://www.codeinventor.club/
网友评论