HTML的标签介绍(上)

最新推荐文章于 2020-01-15 22:20:17 发布

原创最新推荐文章于 2020-01-15 22:20:17 发布 · 307 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

HTML 专栏收录该内容

3 篇文章

订阅专栏

HTML:是网页内容的载体.内容就是网页制作者放在页面上想要用户浏览的信息,包含图片,文字,视频等.

HTML是用于创建网页的语言,HTML代表超文本标记语言.

HTML文件结构:

<html>
    <head>...</head>
    <body>...</body>
</html>

注:<html></html>为根标签,所有的网页标签都在其中.

<head>用于定义文档头部,他是所有头部元素的集合.一般头部元素有<title> <script> <style> <link> <meat>等

<body>与</body>之间的内容是网页主要的内容.如<h1> <p> <a>等

用在head头部的对应标签:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link>
    <style>...</style>
    <script>...</script>
</head>

为方便我们读懂以及使用,需要对相应的代码进行注释,对应表示为:

<!--注释-->

1.HTML文本标签

(1)段落标签<p>

语法:

<p>段落文本</p>

对应举例为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落文本</title>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>

对应结果为:

对应举例为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>春晓</title>
</head>
<body>
<p>
    春眠不觉晓,
    处处闻啼鸟,
    也来风雨声,
    花落知多少.
</p>
</body>
</html>

对应结果为:

由上图两张结果可知,所有的连续空格或空行都会被算作一个空格.

(2)标题标签:<hx>

注:标题是通过<h1>---<h6>等标签来进行定义的.

对应举例为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>

对应结果为:

由上图可知:<h1>定义最大标题,<h6>定义最新标题.

(3)强调标签<em> <strong>

<em>:注重的是强调;<strong>注重更加强烈的强调.

注:在浏览器中<em>默认为斜体,<strong>用粗体.

(4)span标签与div标签

span标签是行内标签,div标签是块标签

对应举例为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<span>span标签1</span>
<span>span标签1</span>
<div>div标签</div>
<div>div标签</div>
</body>
</html>

对应结果为:

由上图可知:span标签在同一行,div标签每个占一行.

<em> <strong> <span>的区别:

1.<em>与<strong>标签为了强调一段话的关键字,他们是为了强调

2.<span>没有语义,它单纯为了样式的使用.

(5)换行标签:<br/>

<br/>:作用相当于word文档中的回车换行.

(6)字体标签:font

用法:

<font color = "red">字体标签</font>

(7)居中标签:center

用法:

<center> <h1>标题</h1> </center>

(8)特殊标签:

空格:&nbsp;(分号不可少)
已注册:&reg;
版权:&copy;
商标:&trade;

(9)无序列表与有序列表:(ul li) (ol lo)

对应举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表与有序列表</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ol>
    <lo>我</lo>
    <lo>你</lo>
    <lo>他</lo>
    <lo>它</lo>
</ol>
</body>>
</html>

对应结果为: