本人在上周刚刚开始进行前端页面HTML5语言的使用学习,在此分享一些知识和使用方法!如有问题和建议欢迎大家评论。
一、HTML基础结构
HTML基础结构分为两大板块
<head><head/>之中包含的内容为网页头部,内含类似于<tittle><tittle/>(网页标题标签)等标签。
<body><body/>为网页主题部分,内部书写网页主题内容。
注意:
< body>、</body>等成对的标签,分别叫开放标签和闭合标签
单独呈现的标签(空元素),如 <hr/> ;意为用 / 来关闭空元素
二、HTML中的基本标签
①标题标签
使用
<h1>···<h1/>:一级标题
<h2>…</h2>:二级标题
<h3>…</h3>:三级标题
<h4>…</h4>:四级标题
<h5>…</h5>:五级标题
<h6>…</h6>:六级标题
例如:
②段落标签
<p>…</p>
文字输入在标签内,显示为一个段落,body主题中可包含多个段落。
例如:
<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起!</p>
<p>有勇气就会有奇迹。</p>
③换行标签
<br/>
用在换行处,例如:
<p>
北京欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。<br />
北京欢迎你,为你开天辟地<br />
……
</p>
即可为文字换行。
④水平线标签
<hr/>
可在网页中添加水平线,用来切分布局
例如:
<h1>北京欢迎你</h1>
<hr/>
<p>
北京欢迎你,有梦想谁都了不起!<br />
有勇气就会有奇迹。<br />
北京欢迎你,为你开天辟地<br />
……
</p>
⑤字体样式标签
加粗:<strong>…</strong>
斜体:<em>…</em>
例如:
<strong>徐志摩人物简介</strong>
<p>
<em>1910</em>年入杭州学堂<br/>
<em>1918</em>年赴美国克拉大学学习银行学<br/>
……
</p>
⑥一些注释和特殊符号
三、图像标签
在网页的制作过程中常常需要插入一些图片来做美化或者更好的体验,那么在代码中我们应该如何去书写呢?
首先要明白插入图片之前我们需要了解图片的基本格式。
目前比较常见的四种格式有:
①JPG
②GIF
③PNG
④BMP
在清除自己的图片格式之后,我们插入图片的基本语法如下:
<img src="path" alt="text" title="text" width="x" height="y" />
src用来添加图片的地址。
alt内的内容为图像的替代文字。
tittle内的内容为鼠标悬停在图像上时所显示的文字。
width代表图像的宽度。
height代表图像的高度。
四、链接标签
在日常的网页使用中,我们的内容不可能在一个网页上即显示完,内容多且会造成体验感差,所以我们经常会看到链接存在,用来跳转到更多的内容,那我们要建立链接标签,首先需要明白它的语法。
<a href="path" target="目标窗口位置">链接文本或图像</a>
href的值即为你需要跳转到的链接地址,比如跳转到百度即可写http://www.baidu.com
target的值即为你想让链接在何处显示,常见的有两个值“-self”(在本页面中显示)和“-blank”即打开新的网页来显示内容。
在链接中我们既可以用文字来做,亦可让图片成为我们的链接,即在上述“链接文本或图像”的位置用到我们上面的图像标签即可。
锚链接:
在超链接中,我们尝尝还会见到一种“电梯”类型的链接,即点击链接会跳转到本页面中的一个特定位置,比如在淘宝、京东等购物网页中我们会经常见到,它可以让我们在众多元素和信息中精确找到我们所想要看到的一部分,我们就可以用超链接中的另一种形式来完成:锚链接
锚链接的作用:
从A页面的甲位置跳转到本页中的乙位置
从A页面的甲位置跳转到B页面中的乙位置
创建步骤:
①创建跳转标记:
<a name="marker">乙位置</a>
②创建跳转链接:
<a href="#marker">甲位置</a>
功能性链接:
除了锚链接这种比较特殊的超链接以外,我们还有功能性链接,在日常的网页使用中,我们经常能看到“联系我们”这样的链接字样,点击之后即会打开Windows默认的邮箱来发送邮件给目标邮箱,我们可以通过这样来实现:
<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
malito即为目标邮箱,同样的使用场景还有在网页中点击QQ图片来打开对话框等等,在这里就不一一展示。
五、块元素和行内元素
①块元素:
无论内容多少,该元素独占一行(p、h1-h6…)
②行内元素:
内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)
本文为初学HTML网页制作中常见的一些标签及其使用方法和场景,希望为同为初学者的伙伴提供到一些帮助,当然还有很多标签以及用法还没有阐述到,日后会把自己的一些学习心得和知识进行分享,大佬们也可以做一些补充说明和重点提醒!