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

目录

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 空格字符 

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 HTML标签

1.1 标题 h1~h6

1.1.1 测试代码

    
    


    
一级标题heading1
    
二级标题heading2
    
三级标题heading3
    
四级标题heading4
    
五级标题heading5
    
六级标题heading6
    七级标题heading7
    这里是正文文字

 1.1.2 运行结果

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

1.2 段落 p

1.2.1 测试代码

    
    


    
这是段落，每个段落自动换行。
    
这是段落，每个段落自动换行
    
段落内文字忽略连续           空格，

    也不会显示空行，且不会换行

1.2.2 运行结果

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

1.3 段内换行 br

1.3.1 测试代码

    
    


   
这是一个段落。
注意规范的写法，保留“ /”


   如果需要空一行，则可以连续添加两个标签
    
    
    
同时也可以在p标签之外

 1.3.2 运行结果

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

1.4 空格字符 

1.4.1 测试代码

    
    


   
段内忽略连续        空格，但    不忽略， 书写时注意英文顿号，一个表一个空格。

1.4.2 运行结果

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

 

1.5 预留格式 pre

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

1.5.1 测试代码

    
    


    
这是预保留格式文本。它保留了“         ”空格


        和空行
    
    
pre标签很适合显示计算机代码：
    
        for i = 1 to 10
           print i
        next i
    

1.5.2 运行结果

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

1.6 行内组合span

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

1.6.1 测试代码

    
    


    
最新中国人口调查报告指出……

1.6.2 运行结果

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

1.7 水平线hr

1.7.1 测试代码

    


    
正文段落
    

    
正文段落

 1.7.2 运行结果

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

1.8 注释

< !-- 注释内容 -- >

1.8.1 测试代码

1.8.2 运行结果

浏览器输出结果为空

2 综合案例

2.1 效果图

2.2 代码

    
    


    
web前端开发
    
HTML
    
超文本标记语言，用于构建网页结构
    

    
CSS
    
层叠样式表，用于构建网页样式
    

    
JS
    
javascript,脚本语言,用于构建网页行为
    

2.3 运行图