标签写法分类及介绍

一、标签写法分类

双标签: 有开始和结束的标签.

  总结:

      1. 如果页面中出现嵌套关系,父元素一定是双标签,子元素可以是双标签或者单标签

单标签: 只有开始没有结束

  总结:

      1. 单独标签一定不能作为父元素

#### 单标签

☞ 换行标签:  <br>

☞ 横线:  <hr>

☞ 文档类型:  <!doctype  html>  

☞ 注释标签: <!-- 内容 -->     ctrl + /

#### 双标签

☞ 双标签:  <head></head>   <body></body>

二、常用的标签

1、标题标签

用来设置页面中的内容标题:<h1></h1>  -  <h6></h6>

    注意:

        1.数字越大,标题标签中的默认字体越小

        2.一个页面一般只有一个h1标签,给logo使用

2、段落标签<p></p>

用来表示文章段落或者一段文本: <p></p>

    注意:独占一行

3、换行标签<br />

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

4、水平线标签<hr />

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,<hr />就是创建横跨网页水平线的标签。其基本语法格式如下:

<hr />是单标签

 在网页中显示默认样式的水平线。    

5、格式化(修饰)标签[双标签]

☞ 设置文字颜色或者设置文字大小:  <font></font>

    1. 改变文字颜色需要添加color属性   <font color="red">我是红颜色的文字</font>

    2.  改变文字大小需要添加size属性    <font color="orange" size="7">我是红颜色的文字</font>


 

☞ 设置文字是否加粗:  <strong> </strong> 或者 <b> </b>

☞ 设置文字斜体显示: <em></em> 或者  <i> </i>

☞ 设置文字删除线效果: <del></del>  或者  <s></s>

☞ 设置文字下划线效果: <ins></ins>   或者  <u></u>

```

6、div span标签(重点)

div  span    是没有语义的 ,是我们网页布局主要的2个盒子。

div 就是  division  的缩写   分割, 分区的意思  其实有很多div 来组合网页。

span, 跨度,跨距;范围    。

语法格式:

<div> 这是头部 </div>    <span>今日价格</span>

7、图片标签【多媒体标签】

图片标签: <img>

属性:  

        src:设置要显示的图片路径     <img src="1.jpg">.

        width: 设置标签宽度.

        height: 设置标签高度.

        title:  鼠标悬停到图片上的文字提示.

        alt:   当图片无法正常显示时候的文字提示.

8、路径(重点)

 ☞ 绝对路径:

     1. 如果路径中包含具体的磁盘目录:   d:/img/1.jpg

     2. 如果路径中具有具体的网址:    www.baidu.com/img/1.jpg

 ☞ 相对路径: 必须在同一个根目录下.

    1. 如果当前页面和被访问的资源在同一个文件夹中,路径=直接设置文件名称

    2. 如果当前页面在被访问资源的上一级目录中, 路径=文件所在的文件夹名称/文件名

    3. 如果当前页面在被访问资源的下一级目录中,路径=../文件名称

9、超链接(重点)

本质: 就是用来实现页面跳转。

<a  href="目标页面路径"></a>

属性:

    target:设置目标页面打开方式(默认在当前页面中打开_self | _blank 新窗口中打开)

总结:

    如果希望当前页面中所有超链接跳转页面的时候,都在新窗口中打开,那么只需要在head标签中设置 base标签,给base标签设置target属性即可.

10、锚链接

本质: 在当前页面中跳转. 网页中的返回顶部效果

<a href="#"></a>

"#": 返回当前页面开始位置

  • 9
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebFlux是Spring Framework 5引入的一种响应式编程模型,用于构建基于事件驱动的非阻塞Web应用程序。相比传统的Servlet API,WebFlux提供了更高的性能和可伸缩性。 在WebFlux中,你可以使用函数式编程或者基于注解的方式来定义处理请求的方法。下面是两种常见的写法介绍: 1. 函数式编程方式: ```java @Configuration public class WebConfig { @Bean public RouterFunction<ServerResponse> routes(UserHandler userHandler) { return RouterFunctions.route() .GET("/users", userHandler::getAllUsers) .POST("/users", userHandler::createUser) .GET("/users/{id}", userHandler::getUserById) .PUT("/users/{id}", userHandler::updateUser) .DELETE("/users/{id}", userHandler::deleteUser) .build(); } } @Component public class UserHandler { public Mono<ServerResponse> getAllUsers(ServerRequest request) { // 处理获取所有用户的逻辑 } public Mono<ServerResponse> createUser(ServerRequest request) { // 处理创建用户的逻辑 } public Mono<ServerResponse> getUserById(ServerRequest request) { // 处理根据ID获取用户的逻辑 } public Mono<ServerResponse> updateUser(ServerRequest request) { // 处理更新用户的逻辑 } public Mono<ServerResponse> deleteUser(ServerRequest request) { // 处理删除用户的逻辑 } } ``` 2. 基于注解的方式: ```java @RestController public class UserController { @Autowired private UserService userService; @GetMapping("/users") public Flux<User> getAllUsers() { // 处理获取所有用户的逻辑 } @PostMapping("/users") public Mono<User> createUser(@RequestBody User user) { // 处理创建用户的逻辑 } @GetMapping("/users/{id}") public Mono<User> getUserById(@PathVariable String id) { // 处理根据ID获取用户的逻辑 } @PutMapping("/users/{id}") public Mono<User> updateUser(@PathVariable String id, @RequestBody User user) { // 处理更新用户的逻辑 } @DeleteMapping("/users/{id}") public Mono<Void> deleteUser(@PathVariable String id) { // 处理删除用户的逻辑 } } ``` 以上是WebFlux的两种常见写法,你可以根据自己的需求选择适合的方式来开发响应式的Web应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值