
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>一级标题heading1</h1>
    <h2>二级标题heading2</h2>
    <h3>三级标题heading3</h3>
    <h4>四级标题heading4</h4>
    <h5>五级标题heading5</h5>
    <h6>六级标题heading6</h6>
    <h7>七级标题heading7</h7>
    这里是正文文字
</body>
</html>

1.1.2 运行结果

可以看到h7标签没有用，只有到h6，同时可以不用加任何标签添加文字

1.2 段落 p

1.2.1 测试代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <p>这是段落，每个段落自动换行。</p>
    <p>这是段落，每个段落自动换行</p>
    <p>段落内文字忽略连续           空格，
 
    也不会显示空行，且不会换行</p>
</body>
</html>

1.2.2 运行结果

可以看到，每个p标签自动换行，段内文字无论有多少个空格和换行都会被替换成一个空格，段内换行的实现需要借助br标签，段内的多个空格显示需要借助span标签

1.3 段内换行 br

1.3.1 测试代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
   <p>这是一个段落。<br />注意规范的写法，保留“ /”<br /><br />
   如果需要空一行，则可以连续添加两个标签</p>
    <br />    
    <p>同时也可以在p标签之外</p>
</body>
</html>

1.3.2 运行结果

可以注意到，段内需要空一行时可以放两个br标签，在p标签之外放br标签再接p标签会空两行，br标签空一行，p标签本身又会空一行

1.4 空格字符 

1.4.1 测试代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
   <p>段内忽略连续        空格，但&nbsp;&nbsp;&nbsp;&nbsp;不忽略， 书写时注意英文顿号，一个表一个空格。</p>
</body>
</html>

1.4.2 运行结果

尽管用 可以表示空格，但如何有很多个时或者用br标签换多行时仍然很不方便，因此可以用预保留标签pre

1.5 预留格式 pre

定义预格式化的文本，文本中的空格和换行符会被保留

1.5.1 测试代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <pre>这是预保留格式文本。它保留了“         ”空格
 
 
        和空行
    </pre>
    <p>pre标签很适合显示计算机代码：</p>
    <pre>
        for i = 1 to 10
           print i
        next i
    </pre>
</body>
</html>

1.5.2 运行结果

使用pre标签可以保留原有的空格和换行，但是不能突出显示段内的某些文字，比如加粗不同字号等，span标签可以解决这个问题

1.6 行内组合span

组合行内元素，以便通过CSS样式来格式化

1.6.1 测试代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        span{
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>最新<span>中国人口调查报告</span>指出……</p>
</body>
</html>

1.6.2 运行结果

css添加的方法为内嵌添加方法，还有几种方法后面会提到

1.7 水平线hr

1.7.1 测试代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>正文段落</p>
    <hr />
    <p>正文段落</p>
</body>
</html>

1.7.2 运行结果

注意到hr标签为单标签，不是一对，规范书写时注意“ /”

1.8 注释

< !-- 注释内容 -- >

1.8.1 测试代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!--这是一段注释-->
    <!--注释时不会再浏览器种显示。-->
    <!--注释可以
    跨行-->
</body>
</html>

1.8.2 运行结果

浏览器输出结果为空

2 综合案例

2.1 效果图

2.2 代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>web前端开发</h1>
    <h2>HTML</h2>
    <p>超文本标记语言，用于构建网页结构</p>
    <hr />
    <h2>CSS</h2>
    <p>层叠样式表，用于构建网页样式</p>
    <hr />
    <h2>JS</h2>
    <p>javascript,脚本语言,用于构建网页行为</p>
    <p></p>
</body>
</html>

2.3 运行图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/197744

Web前端开发——HTML之HTML标签（Ⅰ）h1~h6、p、br、pre、span、hr_html tag pre

1 HTML标签

1.1 标题 h1~h6

1.1.1 测试代码

1.1.2 运行结果

1.2 段落 p

1.2.1 测试代码

1.2.2 运行结果

1.3 段内换行 br

1.3.1 测试代码

1.3.2 运行结果

1.4 空格字符&nbsp;

1.4.1 测试代码

1.4.2 运行结果

1.5 预留格式 pre

1.5.1 测试代码

1.5.2 运行结果

1.6 行内组合span

1.6.1 测试代码

1.6.2 运行结果

1.7 水平线hr

1.7.1 测试代码

1.7.2 运行结果

1.8 注释

1.8.1 测试代码

1.8.2 运行结果

2 综合案例

2.1 效果图

2.2 代码

2.3 运行图

1.4 空格字符