HTML的标签介绍(上)
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)特殊标签:
空格: (分号不可少)
已注册:®
版权:©
商标:™
(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>对应结果为: