web前端学习(二)——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置

简介: web前端学习(二)——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置

1.HTML5标题


HTML 标题(Heading)是通过<h1> ~ <h6> 标签来定义的。


2.HTML5段落


HTML 段落是通过标签 <p> 来定义的。


3.HTML5链接


HTML 链接是通过标签 <a> 来定义的。


4.HTML5注释


HTML 注释是通过标签 <!-- --> 来定义的。


5.HTML5换行


HTML 换行是通过标签 <br> 来定义的。


6.HTML5水平线


HTML 水平线是通过标签 <hr> 来定义的。 hr 元素可用于分隔内容。


7.HTML5对齐与缩进


① <pre>...</pre> :可以让文字按照原始代码的排列方式进行显示。

② <blockquote>...</blockquote> :用来表示引用文字,会将标记内的文字换行并缩进。


image.png


7.实例一:



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>Hello,欢迎来到我的网页!!!</h1>
    <p>一级标题下的一个段落</p>
    <h2>Hello,欢迎来到我的网页!!!</h2>
    <p>二级标题下的一个段落</p>
    <h3>Hello,欢迎来到我的网页!!!</h3>
    <p>三级标题下的一个段落</p>
    <!--这是一行注释,在浏览器将不会显示!!!-->
    <a href="https://www.baidu.com">这是百度的链接网址</a>
  </body>
</html>


运行结果如下:

8.实例二:


<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="gb2312">
    <title>HTML5学习</title>
  </head>
  <body>
    <h1>春晓</h1>
    <p>春眠不觉晓<br/>处处闻啼鸟</p>
    <hr/>
    <p>
      夜来风雨声
        花落知多少
    </p>
    <hr/>
    <p>注意,浏览器忽略了源代码中的排版(省略了第二个段落中多余的空格和换行)</p>
        <h1>锦瑟</h1>
    <h4>李商隐</h4>
    锦瑟无端五十弦,<br/>
    一弦一柱思华年。<br/>
    <blockquote>
    庄生晓梦迷蝴蝶,<br/>
    望帝春心托杜鹃。<br/>
    </blockquote>
    沧海月明珠有泪,<br/>
    蓝田日暖玉生烟。<br/>
    <pre>
    此情可待成追忆,<br/>
    只是当时已惘然。<br/>
    </pre>
  </body>
</html>

运行结果如下:

 


相关文章
|
2月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
69 3
|
2月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
2月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
2月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
42 3
|
2月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
67 2
|
3月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
2月前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
57 0
|
3月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
339 0
|
3月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
272 0
|
3月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
143 0