您的位置：首页 > Web前端

前端简单入门第二讲 HTML标签(一)

2018-12-31 17:10 661 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yerenyuan_pku/article/details/85473441

在本讲，我会具体介绍HTML中的常用标签，每讲几个标签，我就会将这些标签应用到一个实际案例中，案例虽然扯，但入门刚刚好。

网站信息页面

一个公司需要一个对外宣传的网站介绍，应该介绍公司的主要业务、公司的发展历史以及公司的口号等等信息。例如，

为了解决以上需求，我们就需要学习如下HTML标签。

要学习的HTML标签

<h1>
~
<h6>

标题标签，对应一级到六级标题。h字符后面的数字取值范围：1~6。

至于每个标题具体字号样式如何，取决于各个浏览器或者网站。

<p>

<p>
标签用于表示段落，标签围起来的文本内容表示一个段落。
因为浏览器会忽略所有的空格、缩进、换行，最多只会解析成一个空格，所以，即使文本内容的段落结构很好，但经由浏览器解析出来后的文本内容全部都挤到了一堆。因此，
<p>
段落标签还是很有必要的，可以用此来标记哪些文本内容作为一个段落。

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

<hr>

水平分割线，用法如下：

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h77>标题77</hh77>
普通文本

<!--水平分割线-->
<hr />

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<!--水平分割线-->
<hr />


<font>

字体标签，该标签常用的属性有：

  • color：指定字体颜色；
  • size：指定字体大小，属性值的取值范围：1~7；
  • face：指定使用哪种字体，如微软雅黑、宋体等。

<b>

该标签可以给字体加粗。用法如下：

<p>
本讲是前端简单入门第二讲 <b>HTML标签</b>，作者是李阿昀。
</p>

<i>

该标签作用在字体上，可以使字体变为斜体。用法如下：

<p>
本讲是前端简单入门第二讲 <b><i>HTML标签</i></b>，作者是李阿昀。
</p>

<strong>

该标签也可以给字体加粗，不过它是带语义的、对搜索引擎友好的标签。用法如下：

<p>
本讲是前端简单入门第二讲 <strong>HTML标签</strong>，作者是李阿昀。
</p>

<em>

该标签作用在字体上，也可以使字体变为斜体，不过它是带语义的、对搜索引擎友好的标签。用法如下：

<p>
本讲是前端简单入门第二讲 <strong><em>HTML标签</em></strong>，作者是李阿昀。
</p>

案例代码实现

学习完以上这些标签，我们就可以使用这些标签将一个网站信息页面写出来，代码实现如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站信息页面</title>
</head>
<body>
<!--
1. 公司简介，需要标题
2. 水平分割线
3. 四个段落
4. 第一个段落字体需要红色
-->
<h3>公司简介</h3>
<hr />
<p>
<font color="red">“中关村黑马程序员训练营”</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
<strong>黑马程序员</strong>的学员多为大学毕业后，<em>有理想、有梦想，</em>想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>

网站图片信息页面

在一个公司的网站中通常需要显示LOGO图片，例如，

为了解决以上需求，我们就需要学习如下HTML标签。

要学习的HTML标签

<img>

基本每个网页都会有图片，在HTML文档中嵌入一张图片，可以用

<img>
标签，但是需要指定图片来源，区域宽高等。

<img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载有问题" />

案例代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站图片信息页面</title>
</head>
<body>
<!--在网页中显示图片-->
<img src="../img/logo2.png" width="30%"/>
<img src="../image/header.jpg" width="30%" />
</body>
</html>

网站友情链接页面

打开一个网站，通常会显示这个网站的友商公司的网站链接。博客园的友情链接截图如下，

现在我们要写一个网站的友情链接，那么就需要学习如下HTML标签。

要学习的HTML标签

<ol>
与
<li>

<ol>
标签用于表示有序列表，
<li>
标签用于表示列表中的每一项。用法如下，

既然是有序列表，那么序号的起始以及样式是支持通过属性设定的，如下：

通过start属性设置起始的编号，通过type属性设置编号的样式，可设置的type样式如下：

<ul>
与
<li>

<ul>
标签用于表示无序列表，
<li>
标签表示列表里的每一项。用法如下：

因为是无序列表，所以用法比起有序列表
<ol>
简单很多，无需使用任何属性，直接用无序标签
<ul>
包含一系列子项
<li>
即可。至于，每一项前的样式，可通过CSS样式，通过list-style-type属性实现，以上样式对应的CSS：

ul { list-style-type: disc }

<a>

<a>
标签的作用是引导用户从一张页面链接到另一张页面，互联网说到底就是一张张网页通过超链接
<a>
互相关联起来的。所以，只要不是单个页面，只要页面支持跳转，那么HTML文档中就肯定有
<a>
标签的存在，用于指定下个页面的跳转。

<a href="http://www.baidu.com">百度</a>
<a href="index.html">首页</a>
<a href="#myId">标题5</a>

以上是

<a>
标签的三种用法，分别是指定绝对路径的链接、指定相对路径的链接、指定文档内的链接。也就是说，
<a>
标签既可以用于指定页面间的跳转，也可以指定页面内的跳转。注意，
<base>
标签设置的基准URL会影响到相对路径的拼接，默认以当前HTML文档的路径作为基准路径。
另外新页面的打开方式也支持多种形式配置，如：

<a href="http://www.baihe.com" target="_blank">百合网</a>

通过target属性来声明新页面的打开方式，target可以取值如下：

target属性值 含义
_blank 在新页面或标签页中打开文档
_parent 在父窗框组（frameset）中打开文档
_self 在当前窗口中打开文档（默认行为）
_top 在顶层窗口打开文档 
<frame>
 在指定窗框中打开文档

案例代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
使用无序列表
百合网
世纪家园
珍爱网
非诚勿扰
-->
<ul>
<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
<li><a href="http://www.jiayuan.com">世纪家园</a></li>
<li>珍爱网</li>
<li>非诚勿扰</li>
</ul>
</body>
</html>

在Google Chrome浏览器中的运行效果如下。

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航