【全网最全】HTML标签详解大全-第一篇{建议收藏}-阿里云开发者社区

开发者社区> 静Yu> 正文

【全网最全】HTML标签详解大全-第一篇{建议收藏}

简介: 【全网最全】HTML标签详解大全-第一篇{建议收藏}
+关注继续查看

前文导读:前端学习路线

Html代码都是由标签组成的,标签就是最基础的东西,所以我们要重点学习这些标签。本人爆肝整理了几乎所有常用的标签详解,期待各位的关注与支持。

废话少说直接进入重点。


基本结构标签


1.<!-- 这是注释标签-->

注释标签使我们的代码更加清楚明了,在网页中不起到任何作用也不会显示到桌面上


2.文档类型声明标签:<!DOCTYPE>

DOCTYPE是Document Type的简写,含义为文档类型。HTML文档基础结构中第一行就是HTML的DOCTYPE声明。


3.根标签:<html>

除了文章开头的文档类型声明以外,所有的HTML文档都是以<html>标签开始,以</html>结束,在<html>和</html>标签内部还包含了两个重要的标签<head>首部标签和<body>主体标签,分别标记文档的首部和主体部分。


4.首部标签:<head>

html文档首部以<head>开始,以</head>标签结束。<head>标签中的内容不会显示在网页的页面中。<head>标签中可含有<title>和<meta>等标签,用于声明页面标题,字符集,关键字等。


5.网页标题标签:<title>

html文档使用<title>和<title>标签标记网页标题,该标题会显示在浏览器窗口的标题栏中,若省略了该标签,则网页标题会显示为“无标题文档”。


6.基础地址标签:<base>

<base>标签用于为页面上所有的链接设置默认URL地址或目标target

当html文档中使用了相对路径,浏览器会用<base>标签指定的URL进行补全。

<head>
<base href="http://loacalhost/images"/>
</head>
<body>
<img arc="sunflower.jpg"/>
</body>


此时在图像标签<img>中src属性填写的是一个相对路径,由于<base>标签的作用,该路径会被浏览器自动补全为:<img src="http://loacalhost/imagessunflower.jpg/" />

<base>标签也可以为该网页上所有超链接统一设置打开方式,其中target="_blank"指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。


<head>
<base target="_blank">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.163.com">网易</a>
</body>


7.元数据标签:<meta>

<meta>标签用于提供当前HTML文档的元数据,这些数据不会直接显示在网页上,但是对于机器是可读的,适用于搜索引擎索引。通常可以用于定义网页的字符集,关键词,描述,作者信息等。


8.样式标签:<style>

样式标签可用于定义文档中指定区域的字体风格、背景颜色,对齐方式等各类样式信息。

<head>
<style>
p {color:red}
</style>
<body>
<p>这是一个段落标签</p>
</body>


这段代码是将HTML文档中未指定字体颜色的段落显示为红色。


9.链接标签:<link>

<link>标签用于连接外部资源和当前HTML文档,它只出现在首部标签<head>和</head>中,通常用于链接外部样式表。

例如:

<head>
<link rel="stylesheet" href="yangshi.css"/>


10.脚本标签:<script>

<script>标签为可选,取决于当前页面是否需要使用脚本内容,比如JavaScript。该标签可以直接引用外部脚本文件,也可以直接将脚本命令写在<script>和</script>标签中。

例如:

<head>
<script src="text.js"></script>
</head>


11主体标签:<body>

HTML文档的主体部分以<body>标签开始,以</body>标签结束。<body>标签中的内容全部显示在网页的页面中。<body>标签中可直接添加文本内容,也可继续嵌套其它标签,形成多元化的显示效果。


实例:

.html代码

<!DOCTYPE html>
<html>
  <head>
    <title>这是标题标签</title>
<link rel="stylesheet" type="text/css" href="./yangshi.css">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--style属性标签  -->
    <style>
    .div{
    width:100px;
    height:100px;
    background:green;
    }
    </style>
  </head>
 
  <!--主体标签-->
  <body>
  <p>这是段落标签</p>
  <div class="div">这是块级元素</div>
  </body>
 
</html>


yangshi.css代码

@CHARSET "UTF-8";
p{color:red;
font-size:9;
font-family:隶书;
background-color:blue;
}


运行结果:

image.png


基础标签

1.段落标签:<p>

段落标签<p>和</p>用于形成一个新的段落,段落与段落之间默认为空一行进行分割。

<head>
<style>
      .p1{
  background-color:red;
  }
  .p2{
  background-color:green;
  }
    </style>
</head>
<body>
<p class="p1">这是段落一</p>
<p class="p2">这是段落二</p>
</body>


运行结果:加以颜色容易区分

image.png

2.标题标签:<h1>~<h6>

HTML使用<hn>和</hn>来标记文本中的标题,其中n的范围是1~6,<h1>标签所标记的字体最大,依次减小,标题标签的默认状态是左对齐显示的黑体字。

<body>
  <h1>h1效果</h1>
  <h2>h2效果</h2>
  <h3>h3效果</h3>
  <h4>h4效果</h4>
  <h5>h5效果</h5>
  <h6>h6效果</h6>
  </body>


运行结果:

image.png


3.水平线标签:<hr>

水平线标签是在网页上画出一条水平线,从而在视觉上将文本分段。<hr>没有结束标签可以单独使用。

<body>
  <h1>h1效果</h1>
    <hr>
  <h2>h2效果</h2>
    <hr>
  <h3>h3效果</h3>
    <hr>
  <h4>h4效果</h4>
    <hr>
  <h5>h5效果</h5>
    <hr>
  <h6>h6效果</h6>
  </body>


运行结果:

image.png

4.粗体标签<b>和<strong>

粗体标签<b>和<strong>均可以将其首位标签之间的文本内容显示为粗体字型效果。区别在于使用<strong>标签的内容被认为是重要的内容。

<body>
 我是非粗体标签<br>
 <b>我是粗体标签(使用了标签b)</b><br>
 <strong>我是粗体标签(使用了标签strong)</strong>
  </body>


运行结果:

image.png


5.上标标签<sup>和下标标签<sub>

它们的作用是使显示的文本内容可以是上标的形式,比如x的平方。

<body>
 上标的样式:2<sup>10</sup>=1024<br>
 下标的样式:二氧化碳CO<sub>2</sub>
  </body>


运行结果:

image.png

6.修订标签<del>和<ins>

修订标签有两种,分别为文本内容添加删除线和下划线


<body>
 删除线标签的应用:<del>错误内容</del><br>
 下划线标签的应用:<ins>正确内容</ins>
  </body>


运行结果:image.png


7.预格式化标签<pre>

预格式化标签可以将所标记的文本内容在显示时保留换行与空格的排版效果。

<body>
 
         静夜思
    床前明月光。
    疑是地上霜。
    举头望明月,
    低头思故乡。  
    <br>
    <!--加了<pre>和不加的对比-->
    <pre>
           静夜思
    床前明月光。
    疑是地上霜。
    举头望明月,
    低头思故乡。 
    </pre>
  </body>


运行结果:

image.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10074 0
HTML标签 -特殊字符|学习笔记
快速学习HTML标签 -特殊字符
22 0
在SQL中用正则表达式替换html标签
原文: 在SQL中用正则表达式替换html标签   由于数据库的一个表字段中多包含html标签,现在需要修改数据库的字段把html标签都替换掉。当然我可以通过写一个程序去修改,那毕竟有点麻烦。
904 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13882 0
Html标签列表【转】
Html标签 Html标签按功能类别排列 基础 标签 描述   定义文档类型。 定义 HTML 文档。 定义文档的标题。 定义文档的主体。 to 定义 HTML 标题。
654 0
07.HTML标签以及自定义定界符配置---《Beetl视频课程》
HTML标签以及自定义定界符配置---《Beetl视频课程》
1324 0
HTML标签- 锚点定位|学习笔记
快速学习HTML标签- 锚点定位
31 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
91
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载