标题 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
中非常重要的的表单标签
。