前端学习8:HTML块、类、Id

目录

一、块元素、内联元素

二、HTML

一、块元素、内联元素

大多数HTML元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

例子:<h1>、<p>、<ul>、<table>

内联元素在显示时,通常不会以新行开始。

例子:<b>、<td>、<a>、<img>

二、HTML<div>元素

HTML<div>元素是块级元素,它是用于组合其他HTML元素的容器

<div>元素没有特定的含义,如果与CSS一同使用,<div>元素可用于对大的内容快设置样式属性。

<div元素的另一个常见的用途是文档布局。

三、HTML<span>元素

HTML<span>元素是内联元素,可作为文本的容器。

<span>元素也没有特定的含义。

与CSS一同使用时,<span>元素可用于为部分文本设置样式属性。

对HTML进行分类(设置类),使我们能够为元素的类定义CSS样式。

为相同的类设置相同的样式,或者为不同的类设置不同的样式。

 一、分类块级元素

HTML<div>元素是块级元素。它能够用作其他的HTML元素的容器。

设置<div>元素的类,是我们能够为相同的<div>元素设置相同的类

二、分类行内元素

HTML<span>元素是行内元素,能够用作文本的容器。

设置<span>元素的类,能够为相同的<span>元素设置相同的样式。

Id 

 HTML id 属性用于为HTML元素指定唯一的id。

 一个HTML文档中不能存在多个有相同 id 的元素。

一、使用 id 属性

id 属性指定HTML元素的唯一ID。id 属性的值在HTML文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。

语法是:下一个井号(#),后跟一个id名称。然后,在花括号{}中定义CSS属性。

补充:id名称对大小写敏感!且必须包含至少一个字符,且不能包含空白字符(空格、制表符等)。

二、 class与ID的差异

同一个类名可以由多个HTML元素使用,而一个id名称只能由页面中的一个HTML元素使用

三、总结

  • id属性用于为 HTML 元素指定唯一的 id
  • id 属性的值在 HTML 文档中必须是唯一的
  • CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
  • id属性的值区分大小写
  • id属性还可用于创建 HTML 书签
  • JavaScript 可以使用getElementById() 方法访问拥有特定 id 的元素
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot是基于Spring框架的开发框架,而SSM框架则是Spring+SpringMVC+MyBatis的组合,用于Java Web开发。对于前端的话,可以使用HTML、CSS、JavaScript等技术进行开发,实现一个基于Spring Boot和SSM框架的Web应用。 以下是一个简单的示例: 1. 首先,在Spring Boot项目中,创建一个Controller,用于接收前端请求,并返回相应的数据或视图。 ```java @Controller public class MyController { @Autowired private MyService myService; @RequestMapping("/") public String index(Model model) { List<MyObject> myObjects = myService.getAllObjects(); model.addAttribute("myObjects", myObjects); return "index"; } @RequestMapping("/add") public String addObject(MyObject myObject) { myService.addObject(myObject); return "redirect:/"; } // 还可以添加其他请求处理方法 } ``` 2. 在resources目录下创建一个templates目录,用于存放HTML模板。 3. 创建一个HTML模板,例如index.html,使用Thymeleaf模板引擎来渲染数据,实现动态页面展示。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>My Spring Boot App</title> </head> <body> <h1>My Objects:</h1> <table> <tr> <th>ID</th> <th>Name</th> <th>Value</th> </tr> <tr th:each="myObject : ${myObjects}"> <td th:text="${myObject.id}"></td> <td th:text="${myObject.name}"></td> <td th:text="${myObject.value}"></td> </tr> </table> <h1>Add Object:</h1> <form th:action="@{/add}" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="value">Value:</label> <input type="number" id="value" name="value" required> <button type="submit">Add</button> </form> </body> </html> ``` 其中,使用Thymeleaf模板引擎的语法,通过${}来引用Controller中的数据,@{}来生成URL等。 4. 最后,在MyService中实现对数据库的操作,例如使用MyBatis框架进行数据持久化。 这样,就可以通过这个简单的示例,实现一个基于Spring Boot和SSM框架的Web应用,并使用HTML、CSS、JavaScript等技术进行前端开发。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值