HTML5

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
your content here
</body>
</html>
复制代码

 

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。（http中是content-type）
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

 

<em>强调作用，斜体

 

Semantic Tags 

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

 

 

 

 

 

  • <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
  • <nav>：标记导航，仅对文档中重要的链接群使用。
  • <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
  • <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
  • <figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）
  • <footer>：页脚，只有当父级是body时，才是整个页面的页脚。

Placeholder Tags

 

<section>: to structure your content

<span>:generic inline tag

<div>:generic block tag

Attributes

<p id="today">28 September</p>

<p class="info">Lecture 2</p>

 

HTML ELEMENTS

links

 

Forms

三个"name"要一致

 

Form-Validation

Form-Input types

button checkbox 复选框  date  email month 

password radio 单选 

submit 提交  time  <textarea> 文本区

color tel text url week range reset search datetime-local file hidden image number

Form-Autocomplete

autocomplete 属性规定表单是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

Form-Select

<select name="animal">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>

 

Table 

<table>
    <thead>
  　　<tr><th>Name</th><th>ID</th></tr>
    </thead>
    <tbody>
    　　<tr><td>Amy</td><td>100</td></tr>
    </tbody>
</table>

 

 

Datatable

 

 

 

 

 EXERICES

The file Templates.java sets up the thymeleaf template engine. The @Component annotation tells spring to manage this class; other classes that need templates can request it by declaring a field of the right class with @Autowired, as you can see in Controller.java.

@Component注释告诉spring管理这个类;其他需要模板的类可以通过使用@Autowired声明正确类的字段来请求它，正如您在Controller.java中看到的那样。

The main page is served up as before as a HTML file from the classpath in src/main/resources/web.

Have a look at the process when /units is requested.

@GetMapping("/units")
    public String unitsPage() {
        Database d = new DatabaseImpl();
        List<Unit> units = d.getUnits();
        Context cx = new Context();
        cx.setVariable("units", units);
        return templates.render("units.html", cx);
    }
  • First, the method unitsPage accesses the database and loads the list of units.
  • Next, it creates a Context, a thymeleaf object that lets you pass values to a template. Here we add one value with key units, containing the list of units.
  • Finally, we render the template with the context and return this. If a method in a spring controller returns a string, then the string is assumed to contain a HTML page and spring correctly sets the HTTP status code and headers.

首先，unitsPage方法访问数据库并加载单元列表。
接下来，它创建一个Context，一个thymeleaf对象，它允许您向模板传递值。这里我们添加了一个值units，包含了单位列表。
最后，我们使用上下文呈现模板并返回this。如果spring控制器中的一个方法返回一个字符串，则假定该字符串包含一个HTML页面，spring正确地设置了HTTP状态代码和头部。

The template itself is in src/main/resources/units.html. Anything with a th: prefix is rendered by thymeleaf:

  
<ul th:each="unit : ${units}">
    <li>
        <a th:href="'/unit/' + ${unit.code}" th:text="${unit.code}"></a>
        <span th:text="${unit.title}"></span>
    </li>
</ul>

The th:each attribute is the equivalent of a for loop in Java, in this case for (Unit unit : units) - in thymeleaf, unlike plain Java, you do not need to give the loop variable a type but you do need to use the ${...} syntax whenever you are accessing a variable from the context. The th:each attribute renders its own tag once (in this case <ul>) and then renders everything inside the tag once per pass through the loop, so you get one <li> item per unit.

th:each等价于Java中的for循环，在这个例子中for (Unit Unit: units) -在thymeleaf中，不像普通Java，你不需要给循环变量一个类型，但是你需要使用${…}语法，当你从上下文中访问一个变量时。每个属性渲染它自己的标记一次(在本例中是<ul>)，然后在每次循环中渲染标记内的所有内容一次，因此每个单元得到一个<li>项。

To create an attribute, you put th: in front of the attribute name, so the th:href creates the href attribute of a link (check the result in your browser). Thymeleaf attribute syntax is that you need to put single quotes around strings, + like in Java to stick strings together, and ${...} around variables.

要创建一个属性，可以将th:放在属性名前面，因此th:href将创建链接的href属性(请在浏览器中查看结果)。Thymeleaf属性语法是你需要在字符串周围加上单引号，+就像在Java中把字符串粘在一起，和${…}变量。

The syntax ${instance.attribute} loads an attribute from an instance of a Java class by calling its getter. In this case ${unit.code} ends up calling .getCode() on the unit instance rather than accessing the field directly.

语法${instance.attribute}通过调用getter从Java类的实例加载属性。在本例中为${单位。code}最终调用了单元实例的. getcode()，而不是直接访问字段。

The th:text attribute is special and creates the body of a tag. For example, the span tag here creates a <span> whose body (between the opening and closing tags) contains the unit's title. Thymeleaf, unlike some other templating systems, doesn't let you include variables everywhere - some template engines let you just write ${variable} anywhere in the HTML page, but thymeleaf only lets you do that in an attribute of a tag so if you simply want some text, you need to make a placeholder tag (span is a good choice here) and put the variable in its th:text attribute.

text属性是特殊的，它创建标记的主体。例如，这里的span标记创建了一个<span>，它的主体(在开始和结束标记之间)包含单元的标题。不像其他模板系统，Thymeleaf不允许你在任何地方包含变量——一些模板引擎允许你在HTML页面的任何地方写${variable}，但Thymeleaf只允许你在标签的属性中这样做，所以如果你只想要一些文本，您需要制作一个占位符标记(在这里span是一个不错的选择)，并将变量放入其th:text属性中。

If you click on a unit, you get to the details page for that unit (that currently doesn't have any more detail than the code and title). When you send a HTTP request for /unit/UNITCODE, for example /unit/COMS10012, this is handled by the unitDetailPage method.

 

Note that the @GetMapping contains a pattern /unit/{code} with a parameter to match all URLs of this form, and the parameter is passed to the method as a parameter that is annotated with @PathVariable to tell spring how to deal with it, namely to fill its value from the path of the HTTP request.

The method first finds the unit in the database and returns a 404 error page if there is no unit with that code. (In a real database, there would be a "find unit by code" method, you would not have to load all units just to find one of them.)

After this, we call thymeleaf on the unit.html template (this is the one without 's' in its name) to render the unit page.

 
 

 基本练习：重写单位列表页面，以表格而不是列表的形式显示单位。该表应为每个单元一行和三列：第一列应为单元代码，第二列应为单元标题，第三列应包含带有文本“详细信息”的链接，该链接将您带到详细信息页面那个单位。还要在表格中创建一个标题行，标题为“代码”、“标题”和“链接”。（这纯粹是一个 HTML 和模板练习，您不需要为此更改任何 Java 代码。）

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>List of Units</title>
    </head>
    <body>
        <h1>List of units</h1>
        <ul th:each="unit : ${units}">
            <li>
                <a th:href="'/unit/' + ${unit.code}" th:text="${unit.code}"></a>
                <span th:text="${unit.title}"></span>
            </li>
        </ul>
    </body>
</html>
复制代码

 答案：

复制代码
<table border="1">
    <thead>
    <th>code</th><th>title</th><th>link</th>
    </thead>
    <tbody th:each="unit : ${units}">
    <tr>
        <td th:text="${unit.code}"></td>
        <td  th:text="${unit.title}"></td>
        <td><a th:href="'/unit/' + ${unit.code}" th:text=detail></a></td>
    </tr>
    </tbody>
</table>
复制代码

 

posted @   君逸堂  阅读(39)  评论(0)  编辑  收藏  举报
相关博文：
· 怎么把thymeleaf加到maven里面？
· React
· Thymeleaf入门教程
· 30.Thymeleaf
· Thymeleaf 简介
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae