HTML之常用标签

最新推荐文章于 2023-04-06 21:07:21 发布

forever_wen

最新推荐文章于 2023-04-06 21:07:21 发布

阅读量1k

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/forever_wen/article/details/82833433

版权

一.基本结构标签

**###注：下面的（）在HTML文件是以<>形式存在的**

1.（HTML）：表示该文件为HTML文件
2.（HEAD）：包含文件的标题,使用的脚本,样式定义等
3.(TITLE）—（/TITLE）：包含文件的标题,标题出现在浏览器标题栏中
4.(/HEAD)：(/HEAD)的结束标志
5.（BODY）：放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
6。（/BODY）：（BODY）的结束标志
7.（HTML）：（HTML）的结束标志
在这里插入图片描述

二.文本标签

注：其它主要标签,以下所有标志用在(BODY)---(/BODY)中

1.标题标签: （h1）（/h1）；h1-h6
2.段落标签: ( p) (/p) (段落之间会空一行)
3.加粗标签: (b)(/b),( strong)(/strong)
4.斜体标签: (i)(/i)
5.下划线标签:( u)（/u）
6.删除标签: （s）（/s）
7.换行标签: (br)-----（第一个没有成对出现的标签，单纯的换行，行与行之间无空行）
8.水平分隔符标签: (hr)----
9.预格式化文本标签(保留文本的原有格式): （pre)(/pre)
10.上标和下标标签: (sup)(/sup)， (sub)(/sub)
11.块引用标签: (blockquote)(//blockquote)
12.普通的文本: (span)(/span) — 行内标签(只占据文本本身的大小)
13.普通文本的标签:(div)(/div)------行外标签（一个标签占据一行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<h1>1级</h1>
<h2>2级</h2>
<h3>3级</h3>
<h4>4级</h4>
<h5>5级</h5>
<h6>6级</h6>
<!--这里是用作对比的,会发现我们写两行的东西却在一行-->
<b>第一段</b>

<strong>第二段</strong><br>
<i>第一段</i><br>
<u>第一段</u><br>
<s>第一段</s>
<p>第一段</p><hr>
<p>第二段</p>

<!--这里是用作对比的,会发现我们写两行的东西却在一行-->
击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！

<pre>
击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！
</pre>

x<sup>2</sup>+2x+1 = 1
<br/>
这个方程的解： x<sub>1</sub>=0 x<sub>2</sub>=-2

<blockquote >
    击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！

</blockquote>

<span>hello</span><span>world</span><br><br><br>


<div>hello</div><div>world</div>

</body>
</html>

在这里插入图片描述

文本标签的常用样式（属性）

样式均在style中

1.TEXT.ALIGN:LEFT,左对齐(缺省值),
2.TEXT.ALIGN:CENTER,居中
3.TEXT.ALIGN:RIGHT,右对齐.
4.WIDTH:象素值或百分比,对象宽度.
5.HEIGHT:象素值或百分比,对象高度.
6.COLOR:前景色
7.FONT-SIZE:设置字体的大小
8.BORDER:设置边框
9.padding-top: 文本距边框上部的距离
10padding-left: 文本距边框左部的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>


<pre style="color: red;font-size: larger;
border: 1px solid aquamarine; text-align:left
padding-top: 20px;
padding-left: 80px">
击壤歌

先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！
</pre>


<br/>

<span style="color: red;font-size: medium ;width: 100px; height: 100px;
 border: 1px solid aquamarine">hello</span>
<span>world</span><br><br><br>


<div style="color: red;font-size: medium ;width: 100px; height: 100px;
 border: 1px solid aquamarine">hello</div><div>world</div>

</body>
</html>

在这里插入图片描述

三.超链接标签

<--a标签-->

href="—":引号内是要跳转到的地址
target="—":引号内常用（_parent）/（_blank)
####_parent：在当前窗口打开
####_blank：新建窗口打开
style=" ": 常见的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<!--跳转到指定的-->
<a href="http://www.baidu.com"
   target="_blank"
   style="color: palevioletred;font-size: xx-large">百度知道</a>
<br>
<br>
<a href="http://www.baidu.com"
   target="_parent"
   style="color: red;font-size: small">百度知道</a>

</body>
</html>

在这里插入图片描述

跳转到当前页面的指定位置（锚点&#x

最低0.47元/天解锁文章

forever_wen

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML之常用标签

一.基本结构标签**###注：下面的（）在HTML文件是以&amp;amp;amp;amp;lt;&amp;amp;amp;amp;gt;形式存在的**1.（HTML）：表示该文件为HTML文件2.（HEAD）：包含文件的标题,使用的脚本,样式定义等3.(TITLE）—（/TITLE）：包含文件的标题,标题出现在浏览器标题栏中4.(/HEAD)：(/HEAD)的结束标志5.（BODY）：放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示....
复制链接

扫一扫