我的前端小白之旅-HTML常用的标签元素

发表于 | 分类于

开个头


上一篇我们了解了一个HTML文档的基本组成，那么接下来，我们就可以在HTML文档中自由的发挥，构建一个让自己满意的网页。但是在这之前，我们还是要先了解一下HTML中一些常用的标签元素，这些元素就像一块块的砖头一样，能够构建一个伟大的Web页面。好了，话不多说，让我们进入主题吧。

常用的标签

标签的分类:

HTML中有各种各样的标签，但是这些标签的表现形式会有很多不同之处，比如说有些标签元素独自占用一行，而有些标签元素却在同一行中一次排列。所以对于所有的HTML标签元素，我们进行了一个分类：块状元素、内联元素和内联块状元素。下面我们一个个的说一下这三种标签元素的特点
块状元素:
块状元素有如下的几个特点:
1、块状元素在HTML布局中是独占一行的，即开始于新的一行，后面的元素也必须要另起一行才行
2、块状元素是可以设置宽高以及边距,块状元素的宽度默认情况下撑满父级元素，即默认情况下宽度为100%
常见的块状元素有:<div>、<p>、<form>、<ul>、<h1>…
内联元素（行内元素）:
内联元素有如下的几个特点：
1、内联元素在布局中不能独占一行，内联元素之间会在同一行上一次排列
2、内联元素不能设置宽高和上下边距,内联元素的宽高刚好包裹住它所包含的内容
常见的内联元素有：<a>、<span>、<strong>、<em>…
内联块状元素:
内联块状元素有如下的几个特点：
1、内联块状元素与其他元素都在同一行上
2、元素的的宽高、上下边距都可以进行设置
常见的内联块状元素有：<img>、<input>

标签的用法:

1、<div>标签
<div>标签主要是为作为一个大的布局模块使用的，比如说一个页面分为四个部分：头部、侧边栏、底部和主体内容，这样的情况下每个部分都可以分别放在一个<div>中，作为一个大的模块进行布局。例如下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="header_tag"></div>
    <div class="aside_tag"></div>
    <div class="main_tag"></div>
    <div class="footer_tag"></div>
</body>
</html>

在代码中我们用css样式将这四个部分按下图的方式摆放
cmd-markdown-logo
每种颜色的区域都是包含在一个<div>之中的。所以<div>主要是用于包裹一个大的模块的布局。

2、<a>标签
<a>标签主要是定义一个超链接，从一个页面跳转到另一个页面。我们可以通过“href”这个属性定义要跳转的页面,然后通过“target”这个属性定义该链接在何处打开链接文档。关于target属性的值可以到HTML <a>> 标签的 target 属性中进行查看。

1
<a href="http://www.baidu.com" target="_blank">跳转到百度页面</a>

此时点击该标签的话，就会打开一个新的页面，并且会直接访问到百度的首页。

3、<img>标签
<img>是一个用于展示图片的标签，我们看一下这个标签的用法：

1
<img src="https://hurui1990.github.io/hurui.github.io/uploads/html_tag/picture.png" alt="风景图片">

上面这个例子有两个属性，第一个属性“src”是该图片标签指向的图片资源的地址，“alt”这个属性的作用就是当设置路径的图片无法加载出来的时候显示的提示语。

4、<span>标签
<span>标签最常用的场景就是包含一段文字，比如说我们想给一段文字进行一些操作(改变颜色、字体，替换字符串等等)，我们就可以给这段文字包裹上<span>这个标签，下面我们看一个给一段字符串加上颜色的例子：

1
<p>超文本标记语言，<span style="color: red">标准通用标记语言</span>下的一个应用</p>

上面这个一段文字中，我们想给”标准通用标记语言”这个字符串加上一个红色的效果，其余的文字颜色不变，我们就可以给这个字符串包裹上<span>这个标签，然后通过给这个标签设置样式，从而给这个字符串设置红色的效果。效果如下图：
cmd-markdown-logo

5、<input>标签
<input>标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段(text)、复选框(checkbox)、掩码后的文本控件(password)、单选按钮(radio)、按钮(button)等等。

1
2
3
4
5
<input type="button" name="按钮">
<input type="text" name="文本">
<input type="password" name="密码输入框">
<input type="radio" name="单选框">
<input type="checkbox" name="复选框">

6、<h1>～<h6>标签
从h1到h6这6个是标题标签，可以定义某段文字的标题，<h1> 定义最大的标题。<h6> 定义最小的标题。我们通过代码来看一看具体的效果：

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

cmd-markdown-logo
从图片中可以看出<h1>定义的字体最大，<h6>定义的字体是最小的。当然也可以通过设置字体的大小来达到标题标签的效果，但是不建议这样的做法，当我们要设置一段文字为标题时，最好还是用<h1>～<h6>这几个标签来进行设置。

总结


上面提到的几个标签是进行布局时经常用到的，当然还有其他的很多标签，这里不一一列举了，具体的可以前往HTML标签进行查阅。