HTML常用标签

最新推荐文章于 2023-05-28 14:20:42 发布

Forward627

最新推荐文章于 2023-05-28 14:20:42 发布

阅读量1.1k

点赞数 1

文章标签： html

文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。

HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

以常用为准，其它标签省略（属性不讲）。

注：HTML 标签对大小写不敏感，但推荐使用小写！

基本

<html>…</html>      定义 HTML 文档
<head>…</head>   文档的信息
<meta>                    HTML 文档的元信息
<title>…</title>        文档的标题
<link>                      文档与外部资源的关系
<style>…</style>    文档的样式信息
<body>…</body>   可见的页面内容
                 注释

文本

<h1>...</h1>               标题字大小（h1~h6）
<b>...</b>                   粗体字
<strong>...</strong>   粗体字(强调)
<i>...</i>                      斜体字
<em>...</em>              斜体字(强调)
<u>...</u>                   下划线
<del>...</del>              删除线(表示删除)
<center>…</center>   居中文本
<ul>…</ul>                 无序列表
<ol>…</ol>                 有序列表
<li>…</li>                    列表项目
<a href=”…”>…</a>    超链接

<font>                         定义文本字体尺寸、颜色、大小
<sub>                         下标
<sup>                         上标
<br>                           换行
<p>                            段落

图形

<img src=’”…”> 定义图像
<hr> 水平线

表格

<table>…</table>   定义表格
<th>…</th>            定义表格中的表头单元格
<tr>…</tr>             定义表格中的行
<td>…</td>           定义表格中的单元

其它

<form>…</form> 定义供用户输入的 HTML 表单
<frame> 定义框架集的窗口或框架

另加16进制颜色，但仅仅有16种颜色名可用英文字母，其余的要用16进制值。记住哦！

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

另附图一张，Hello world !(来自于IMOOC~)

<add>:

<一>

一个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>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

例如：

<head>
    <title>hello world</title>
</head>

<三>

代码注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

<四>

<BODY>

在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。

在浏览器中的显示效果：

语法：

<p>段落文本</p>

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

在浏览器中显示的效果：

文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

在浏览器中显示的样式：

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

<五> STRONG EM SPAN

加入强调语气，使用<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>标签了。
   
   

   
   <六>文本
   
   
   
   <q>标签，短文本引用
   
   
   
   语法：
   
   <q>引用文本</q>
   
   注意要引用的文本不用加
   
   双引号
   
   ，浏览器会对q标签自动添加双引号。

   
   
   
   如下面例子：
   
   
    
    <p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。</p>
   
   
   
   下图是代码显示结果：
   
   
   
   <blockquote>标签，长文本引用
   
    <blockquote>的作用也是引用别人的文本。但它是对
   
   长文本
   
   的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。不要忘记<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。
   
   
   
   语法:
   
   <blockquote>引用文本</blockquote>
   
   如下面例子：
   
   
    
    <blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>
   
   
   
   浏览器对<blockquote>标签的解析是缩进样式。如下图所示：
   
   
   
   使用<br>标签分行显示文本
   
   
   
   

   
   怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br />标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。
   
   例如:

   
   为你的网页中添加一些空格
   
   在上一节的例子，我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入&nbsp;。
   
   语法：
   
   &nbsp;
   
   输入空格的正确方法：
   
   
   
   在浏览器中的显示出来的空格效果。如下图所示。
   
   
   
   认识<hr>标签，添加水平横线
   
   在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：
   
   
   
   语法：
   
   html4.01版本 <hr>
   
   xhtml1.0版本 <hr />
   
   注意：
   
   1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
   
   2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
   
   <address>标签，为网页加入地址信息
   
   一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
   
   语法：
   
   <address>联系地址信息</address>
   
   如：
   
   <address>文档编写：lilian 北京市西城区德外大街10号</address>
   
    在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它<address>标签的默认样式。
   
   
   
   <七>
   
   
   
   想加入一行代码吗？使用<code>标签
   
   
    
    在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：
    
    

   
   
   
   
    
    <code>var i=i+300;</code>
    
    注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。
    
    语法：
    
    <code>代码语言</code>
    
    
    
    使用<pre>标签为你的网页加入大段代码
    
    
    
    在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图：
    
    
    
    怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可以使用<pre>标签。
    
    语法：
    
    <pre>语言代码段</pre>
    
    <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
    
    如下代码：
    
    <pre>
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
</pre>
    
    在浏览器中的显示结果为：
    
    
    
    在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入<br>签，空格需要输入&nbsp;
    
    注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。