HTML入门

常用标签

此课程是收费课程,请先购买或加入会员后再访问。

标题 h标签

我们随便打开一个网站,网页中的这些内容,就是标题了。
其中标题,就要由这个叫做h的标签来表示了。

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

浏览器中显示,可以看到,这些h1 ~ h6这些标签,是由大到小的。数字越小,显示的字却越大。但是注意下,h标签,就只有h1 ~ h6。真的没有h7了,不信你试试。

分割线 hr标签

如果你想在页面,加这种分割线,那就是它了 hr标签

<hr>

换行 br标签

我们先写下面这样两段文字

这是一个段落哦
这是另一个段落

浏览器中访问,有一个奇怪的问题。咦,我们代码里明明换行了啊,那为什么浏览器中还是显示在一行呢?
原因是,你这里打的回车,HTML它根本不理你。你需要做的,是在这两段文字中间,加上br标签

这是一个段落哦
<br>
这是另一个段落

现在再来刷新,就有换行的效果了。

段落 p标签

除此外,实现换行,还有个段落的p标签。我们把br标签删掉,然后用两对p标签分别把他们包裹起来。

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

再来刷新试试,可以看到依然会显示成两段文字,只不过间距比刚才的br标签实现的换行大一些。这里的这个p标签,它的意思是段落,表示这里是两段文字。

超链接 a标签

网页中所有能点击的地方,都叫做超链接超链接要用a标签来写。

<a href="https://itfun.tv">点我跳转到ITFun.tv</a>
<a href="https://itfun.tv" target="_blank">点我在新窗口中打开ITFun.tv</a>

其中的href,这个叫做属性,它里面要放点击这个链接后,跳转到哪里去。那我们就放itfun的网址好了。注意下,前面需要加上这个网址所使用的协议https://

如果点击后,想在新窗口中打开,那你需要加上target="_blank"target的中文意思就目标blank空白的意思。目标空白,意思也就是打开一个新窗口。

图片 img标签

想在网页中插入图片,那要用到的就是img标签了,img是英文单词image的缩写。里面有一些属性需要注意。

src需要填图片的地址。alt你现在可以先不管它,其实不写这个属性,显示上也完全没有任何区别。写alt属性的作用,是为了告诉像百度、谷歌这种搜索引擎,这里的图片是什么意思。它知道了后,你就可以在搜索引擎中,搜索到相关的图片了。

<img src="html.jpg" alt="html 入门课程"/>

表格 table标签

表格有行、有列。记住了,横着的是,竖着的是,先要有行,再有列。
tr标签表示,td标签表示。
如果要做合并单元格,那就用colspan这个属性。

<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td colspan="2">合并单元格</td>
    </tr>
</table>

列表

无序列表 ul标签、li标签

一段段的文章列表,这就是要用ul标签li标签了。

<ul>
    <li>学IT就来ITFun.tv</li>
    <li>每个知识点都有实践内容</li>
    <li>学习中碰到难点,就来QQ群里找东哥</li>
    <li>100%帮你解决问题!</li>
</ul>

注意看,默认前面会出现一个小圆点,这种就叫做无序列表。与之对应的,还有个叫做有序列表。

有序列表 ol标签、li标签

有序列表非常简单,将ul换成ol,其他什么都不用改了。现在出现的就是数字编号了。

<ol>
    <li>学IT就来ITFun.tv</li>
    <li>每个知识点都有实践内容</li>
    <li>学习中碰到难点,就来QQ群里找东哥</li>
    <li>100%帮你解决问题!</li>
</ol>

两个无意义的标签

<div>你好</div>
<span>Hello</span>

这两个标签,叫做无意义的标签。因为它们不像 h标签,大家一看就知道它是标题。它两就根本没有具体的含义。但是这两个标签还非常重要,经常做一些页面的排版工作都离不了它们的。这些我们在后续的CSS入门课程中再和大家介绍。

HTML的基础标签,也就是上面这些了,真的都不难的。只要你自己多写个几遍,相信你一定能很快掌握它们的。
学会后,我们马上就进入下一节的课程了,HTML中非常重要的的表单标签


现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×