HTML 基本标签

时间 2019-11-19

标签 html 基本标签栏目 HTML 繁體版

原文原文链接

Html和CSS的关系

学习web前端开发基础技术须要掌握：HTML、CSS、JavaScript语言。下面咱们就来了解下这三门技术都是用来实现什么的：css

1. HTML是网页内容的载体。内容就是网页制做者放在页面上想要让用户浏览的信息，能够包含文字、图片、视频等。html

2. CSS样式是表现。就像网页的外衣。好比，标题字体、颜色变化，或为标题加入背景图片、边框等。全部这些用来改变内容外观的东西称之为表现。前端

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。能够这么理解，有动画的，有交互的通常都是用JavaScript来实现的。程序员

标签的语法

1. 标签由英文尖括号<和>括起来，如<html>就是一个标签。web

2. html中的标签通常都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。面试

如：编程

（1） <p></p>浏览器

（2） <div></div>编辑器

（3） <span></span>学习

3. 标签与标签之间是能够嵌套的，但前后顺序必须保持一致。

如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。以下图所示。

4. HTML标签不区分大小写，<h1>和<H1>是同样的，但建议小写，由于大部分程序员都以小写为准。

html文件基本结构

这一节中咱们来学习html文件的结构：一个HTML文件是有本身固定的结构的。

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

代码讲解：

1. <html></html>称为根标签，全部的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是全部头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

head标签

<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标签中。

<p>标签，添加段落

若是想在网页上显示文章，这时就须要<p>标签了，把文章的段落放到<p>标签中。

语法：

<p>段落文本</p>

注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。以下图所示。

在浏览器中显示的效果：

<p>标签的默认样式，能够在上图中看出来，段前段后都会有空白，若是不喜欢这个空白，能够用css样式来删除或改变它。

<hx>标签，为你的网页添加标题

文章的段落用<p>标签，那么文章的标题用什么标签呢？在本节咱们将使用<hx>标签来制做文章的标题。
标题标签一共有6个，h一、h二、h三、h四、h五、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。而且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)
文章的标题前面已经说过了，可使用标题标签，另外网页上的各个栏目的标题也可以使用它们。以下图为腾讯网站。

注意：由于h1标签在网页中比较重要，因此通常h1标签被用在网站名称上。腾讯网站就是这样作的。如：<h1>腾讯网</h1>

h1-h6标签的默认样式：

标签代码：

在浏览器中显示的样式：

从上面的图片能够看出标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。

<strong>和<em>，加入强调语气

有了段落又有了标题，如今若是想在一段话中特别强调某几个文字，这时候就能够用到<em>或<strong>标签。

但二者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。

而且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

语法：

<em>须要强调的文本</em>

<strong>须要强调的文本</strong>

如，在网上商城中，某产品的打折后的价格是须要强调的。以下图。

代码实现：

在浏览器中默认样式是有区别的：

原代码，以下图。

浏览器中的样子，以下图。

<em>的内容在浏览中显示为斜体，<strong>显示为加粗。之后可使用css样式去改变这种样式。

<span>标签，为文字设置单独样式

对<em>、<strong>、<span>这三个标签进行一下总结：

1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。

2. <span>标签是没有语义的，它的做用就是为了设置单独的样式用的。

若是如今咱们想把“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不一样的样式（并不想让屏幕阅读器对“美国梦”这三个字加剧音读出），因此这样状况下就能够用到<span>标签了。

语法：

<span>文本</span>

<q>标签，短文本引用

语法：

<q>引用文本</q>

以下面例子：

<p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是以为诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》表明了庄子思想的最高境界，是对世俗社会的功名利禄及本身的舍弃。</p>

讲解：

1. 在上面的例子中，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》。由于不是做者本身的文字，因此须要使用<q></q>实现引用。

2. 注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

下图是代码显示结果：

注意这里用<q>标签的真正关键点不是它的默认样式双引号（若是这样咱们不如本身在键盘上输入双引号就好了），而是它的语义：引用别人的话。

<blockquote>标签，长文本引用

<blockquote>的做用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名做家的文字，这时须要这个标签。

<q>标签是对简短文本的引用，好比说引用一句话就用到<q>标签。

如想在个人文章中引用李白《关山月》中的诗句，由于引用文本比较长，因此使用<blockquote>。

语法:

<blockquote>引用文本</blockquote>

以下面例子：

<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>

浏览器对<blockquote>标签的解析是缩进样式。以下图所示：

<br>标签，分行显示文本

<br />标签做用至关于word文档中的回车。

上节的代码改成：

语法：

xhtml1.0写法：

<br />

html4.01写法：

<br>

你们注意，如今通常使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

与之前咱们学过的标签不同，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只须要写一个开始标签，这样的标签有<br />、<hr />和<img />。

讲到这里，你是否是有个疑问，想折行还很差说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就好了吗？很遗憾，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。

总结：在 html 代码中输入回车、空格都是没有做用的。在html文本中想输入回车换行，就必须输入<br />。

`&nbsp，`网页中添加一些空格

要想输入空格，必须写入 。

语法：

 

在html代码中输入空格是不起做用的。

<hr>标签，添加水平横线

在信息展现时，有时会须要加一些用于分隔的横线，这样会使文章看起来整齐些。以下图所示：

语法：

html4.01版本<hr>

xhtml1.0版本 <hr />

注意：

1. <hr />标签和<br />标签同样也是一个空标签，因此只有一个开始标签，没有结束标签。

2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人以为这种样式不美观，没有关系，这些外在样式在咱们之后学习了css样式表以后，均可以对其修改。

3. 你们注意，如今通常使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

<address>标签，为网页加入地址信息

通常网页中会有一些网站的联系地址信息须要在网页中展现出来，这些联系地址信息如公司的地址就能够<address>标签。也能够定义一个地址（好比电子邮件地址）、签名或者文档的做者身份。

语法：

<address>联系地址信息</address>

如：

<address>文档编写：lilian 北京市西城区德外大街10号</address>

<address>
本文的做者：<a href="mailto:lilian@imooc.com">lilian</a>
</address>

在浏览器上显示的样式为斜体，若是不喜欢斜体，固然能够，能够在后面的课程中使用 css 样式来修改它<address>标签的默认样式。

<code>标签，加入一行代码

在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可使用<code>标签了，以下面例子：

<code>var i=i+300;</code>

注意：在文章中通常若是要插入多行代码时不能使用<code>标签了。

语法：

<code>代码语言</code>

注：若是是多行代码，可使用<pre>标签。

<pre>标签，为网页加入大段代码

加入一行代码的标签为<code>，可是在大多数状况下是须要加入大段代码的，以下图：

怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可使用<pre>标签。

语法：

<pre>语言代码段</pre>

<pre> 标签的主要做用:预格式化的文本。被包围在 pre 元素中的文本一般会保留空格和换行符。

以下代码：

<pre>
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
</pre>

在浏览器中的显示结果为：

在上面的例子中能够看到代码中的空格，换行符都保留下来。若是用之前的方法，回车须要输入<br>签，空格须要输入 

注意：<pre> 标签不仅是为显示计算机的源代码时用的，在你须要在网页中预显示格式时均可以使用它，只是<pre>标签的一个常见应用就是用来展现计算机的源代码。

ul，无序列表

ul-li是没有先后顺序的信息列表。

语法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

举例：

<ul>
  <li>精彩少年</li>
  <li>美丽忽然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式通常为：每项li前都自带一个圆点，以下图所示：

ol，有序列表

在网页中展现有先后顺序的信息列表

语法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例：

下面是一个热点课程下载排行榜：

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式通常为：每项<li>前都自带一个序号，序号默认从1开始，以下图所示：

div在排版中的做用

在网页制做过程过中，能够把一些独立的逻辑部分划分出来，放在一个<div>标签中。

这个<div>标签的做用就至关于一个容器。

语法：

<div>…</div>

肯定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。以下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可使用<div>标签做为容器。

给div命名，使逻辑更加清晰

在上一小节中，咱们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，咱们能够为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供惟一的名称，这个就像咱们每一个人都有一个身份证号，这个身份证号是惟一标识咱们的身份的，也是必须惟一的。

以下两图进行比较，若是设计师把两个图给你，哪一个图你看上去能更快的理解呢？是否是右边的那幅图呢。

语法：

<div id="版块名称">…</div>

table标签，认识网页上的表格

有时候咱们须要在网页上展现一些数据，如某公司想在网页上展现公司的库存清单。以下表：

想在网页上展现上述表格效果可使用如下代码：

建立表格的四个元素：

table、tbody、tr、th、td

一、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

二、<tbody>…</tbody>：当表格内容很是多时，表格会下载一点显示一点，但若是加上<tbody>标签后，这个表格就要等表格内容所有下载完才会显示。如右侧代码编辑器中的代码。

三、<tr>…</tr>：表格的一行，因此有几对tr 表格就有几行。

四、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

五、<th>…</th>：表格的头部的一个单元格，表格表头。

六、表格中列的个数，取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为：

总结：

一、table表格在没有添加css样式以前，在浏览器中显示是没有表格线的

二、表头，也就是th标签中的文本默认为粗体而且居中显示

用css样式，为表格加入边框

Table 表格在没有添加 css 样式以前，是没有边框的。这样不便于咱们后期合并单元格知识点的讲解，因此在这一节中咱们为表格添加一些样式，为它添加边框。

在右侧代码编辑器中添加以下代码：

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。

结果窗口显示出结果样式：

caption标签，为表格添加标题和摘要

表格仍是须要添加一些标签进行优化，能够添加标题和摘要。

摘要

摘要的内容是不会在浏览器中显示出来的。它的做用是增长表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：<table summary="表格简介文本">

标题

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

<a>标签，连接到另外一个页面

使用<a>标签可实现超连接，它在网页制做中能够说是无处不在，只要有连接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">连接显示的文本</a>

例如：

<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

上面例子做用是单击click here!文字，网页连接到http://www.imooc.com这个网页。

title属性的做用，鼠标滑过连接文字时会显示这个属性的文本内容。这个属性在实际网页开发中做用很大，主要方便搜索引擎了解连接地址的内容（语义化更友好），以下

注意：还有一个有趣的现象，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面咱们学习了css样子就能够设置过来（a{color:#000}),后面会详细讲解。

在新建浏览器窗口中打开连接

<a>标签在默认状况下，连接的网页是在当前浏览器窗口中打开，有时咱们须要在新的浏览器窗口中打开。

以下代码：

<a href="目标网址" target="_blank">click here!</a>

使用mailto在网页中连接Email地址

<a>标签还有一个做用是能够连接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。

咱们还能够利用mailto作许多其它事情。下面一一进行讲解，请看详细图示：

注意：若是mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每个都以“&”分隔。

下面是一个完整的实例:

在浏览器中显示的结果：

发送

点击连接会打开电子邮件应用，并自动填写收件人等设置好的信息，以下图：

“对此影评有何感想，发送邮件给我”加入连接，使其单击后能够自动发送邮件，具体要求：

一、发送人邮箱地址：yy@imooc.com。

二、邮件主题：观了不得的盖茨比有感。

三、邮件内容：你好，对此评论有些想法。

<img>标签，为网页插入图片

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

四、图像能够是GIF，PNG，JPEG格式的图像文件。

HTML 基本标签

Html和CSS的关系

标签的语法

html文件基本结构

head标签

<body>标签，网页上显示的内容放在这里

<p>标签，添加段落

<hx>标签，为你的网页添加标题

<strong>和<em>，加入强调语气

<span>标签，为文字设置单独样式

<q>标签，短文本引用

<blockquote>标签，长文本引用

<br>标签，分行显示文本

&nbsp，网页中添加一些空格

<hr>标签，添加水平横线

<address>标签，为网页加入地址信息

<code>标签，加入一行代码

<pre>标签，为网页加入大段代码

ul，无序列表

ol，有序列表

div在排版中的做用

给div命名，使逻辑更加清晰

table标签，认识网页上的表格

用css样式，为表格加入边框

caption标签，为表格添加标题和摘要

<a>标签，连接到另外一个页面

在新建浏览器窗口中打开连接

使用mailto在网页中连接Email地址

<img>标签，为网页插入图片

`&nbsp，`网页中添加一些空格