一、概念
1、标签
1. 标签由英文状态下的尖括号<和>括起来
如:<html>
就是一个标签
2. html中的标签一般都是成对出现的 分为开始标签和结束标签
结束标签比开始标签多了一个/
如:
(1) <p></p>
(2) <div></div>
(3) <span></span>
3. 标签与标签之间是可以嵌套的 但先后顺序必须保持一致
如:<div>
里嵌套<p>
那么</p>
必须放在</div>
的前面。
4. HTML标签不区分大小写 <h1>
和<H1>
是一样的 但建议小写 因为大部分程序员都以小写为准。
一个HTML文件是有自己固定的结构的
<html>
<head>...</head>
<body>...</body>
</html>
-
<html></html>
称为根标签 所有的网页标签都在<html></html>
中 -
<head>
标签用于定义文档的头部 它是所有头部元素的容器 头部元素有<title>
、<script>
、<style>
、<link>
、<meta>
等标签 -
在
<body>
和</body>
标签之间的内容是网页的主要内容 如<h1>
、<p>
、<a>
、<img>
等网页内容标签 在这里的标签中的内容会在浏览器中显示出来
<head>
标签的作用:
文档的头部描述了文档的各种属性和信息 包括文档的标题等 绝大多数文档头部包含的数据都不会真正作为内容显示给访问者
下面这些标签可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>
标签:在<title>
和</title>
标签之间的文字内容是网页的标题信息 它会出现在浏览器的标题栏中
网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么 搜索引擎可以通过网页标题迅速地判断出网页的主题 每个网页的内容都是不同的 每个网页都应该有一个独一无二的title
例如:
<head>
<title>hello world</title>
</head>
此时 <title>
标签的内容“hello world”会在浏览器中的标题栏上显示出来
代码注释
什么是代码注释?代码注释的作用是帮助程序员标注代码的用途 过一段时间后再看你所编写的代码就能很快想起这段代码的用途
代码注释不仅方便程序员自己回忆起以前代码的用途 还可以帮助其他程序员很快的读懂你的程序的功能 方便多人合作开发网页代码
语法:
<!--注释文字 -->
二、部分常用标签
<body>
:
<body>
标签 网页上显示的内容放在这里
在网页上要展示出来的页面内容一定要放在body标签中
<p>
:
如果想在网页上显示文章 这时就需要<p>
标签了 可以把文章的段落放到<p>
标签中
语法:
<p>段落文本</p>
注意一段文字一个<p>
标签
如在一篇新闻文章中有3段文字 就要把这3个段落分别放到3个<p>
标签中
<hx>
:
使用<hx>
标签来制作文章的标题 x代表1-6的任意一个数字
标题标签一共有6个:h1 h2 h3 h4 h5 h6分别为一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 并且依据重要性递减
其中 <h1>
是最高的等级
语法:
<hx>标题文本</hx> (x为1-6)
<strong>
和<em>
:
有了段落又有了标题 现在如果想在一段话中特别强调某几个文字 这时候就可以用到<em>
或<strong>
标签。
但两者在强调的语气上有区别:<em>
表示强调 <strong>
表示更强烈的强调 并且在浏览器中<em>
默认用斜体表示 而<strong>
用粗体表示
两个标签相比 目前国内前端程序员更喜欢使用<strong>
表示强调
语法:
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
<span>
:
<em>
和<strong>
标签是为了强调一段话中的关键字时使用 它们的语义是强调而<span>
标签是没有语义的 它的作用就是为了设置单独的样式用的
语法: