前端Demo |HTML常用标签|适合学习前端一个月的同学

微笑的小小刀

发布于 2022-04-12 15:28:49

3590

发布于 2022-04-12 15:28:49

文章被收录于专栏：java技术大本营java技术大本营

标题

在浏览网页中最先关注的是文章的标题,字体很大很突出. 通常使用<h1></h1>对标签.h标签分为6种,分别是 <h1> - <h6> ,字体从大到小.

基本语法：

<h1>...</h1>
<h2>...</h2>
......
<h6>...</h6>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是h1标签</h1 >
    <h2 >我是h2标签</h2 >
    <h3 >我是h3标签</h3 >
    <h4 >我是h4标签</h4 >
    <h5 >我是h5标签</h5 >
    <h6 >我是h6标签</h6 >
</body>
</html>

效果：

字体和颜色

定义文字大小和颜色使用font标签

它的的属性值有：face（字体）color（颜色）等

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <font   face = "黑体"  color = "red" >文字的字体和颜色</font >
</body>
</html>

效果：

段落

浏览器解析HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。<p>标签式段落标记,浏览器会自动地在段落的前后添加空行。

基本语法：

 <p> ……</p>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p >这是第一个段</p >
    <p >这是第二个段</p >
</html>

效果：

字体加粗

基本语法：

<b>...</b>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是没有使用b标签的正常字体
     <b >使用b标签加粗的字体</b >

</body>
</html>

效果：

斜体

基本语法：

<i> ……</i>

<em> ……</em>

<cite> ……</cite>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <i >斜体标记i演示</i >
    <em >斜体标记em演示</em >
    <cite >斜体标记cite演示</cite >
</body>
</html>

效果：

换行

也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。

基本语法：

....<br/>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是第一段<br  />
    这是第二段
</html>

效果：

可跳转链接

允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。

基本语法：

<a href="http://www.baidu.com" title="链接到百度" target="_blank">百度网</a>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com" title="链接到百度" target="_blank">百度网</a>
</html>

效果：