HTML5
<div class="cnblogs_code"><pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
your content here
</body>
</html></pre>
</div>
<p><span><span><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427015009758-854436195.png"></span></span></p>
<p> </p>
<ul>
<li><strong><!DOCTYPE html></strong> 声明为 HTML5 文档</li>
<li><strong><html></strong> 元素是 HTML 页面的根元素</li>
<li><strong><head></strong> 元素包含了文档的元（meta）数据，如 <span class="marked"><meta charset="utf-8"> 定义网页编码格式为 <strong>utf-8</strong>。（http中是content-type）</span></li>
<li><strong><title></strong> 元素描述了文档的标题</li>
<li><strong><body></strong> 元素包含了可见的页面内容</li>
<li><strong><h1></strong> 元素定义一个大标题</li>
<li><strong><p></strong> 元素定义一个段落</li>
</ul>
<p> <img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427020709253-1631435162.png"></p>
<h2><span><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427022155987-1773563051.png"></span></h2>
<h2><span><span style="font-size: 15px"><em>强调作用，斜体</span></span></h2>
<p> </p>
<h2>Semantic Tags </h2>
<p>A semantic element clearly describes its <strong>meaning</strong> to both the browser and the developer.</p>
<p>Examples of non-semantic elements: <code class="w3-codespan"><div></code> and <code class="w3-codespan"><span></code> - Tells nothing about its content.</p>
<p>Examples of semantic elements: <code class="w3-codespan"><form></code>, <code class="w3-codespan"><table></code>, and <code class="w3-codespan"><article></code> - Clearly defines its content.</p>
<h2><span><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427022628232-926094350.png"></span></h2>
<p> </p>
<p> <img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427022804840-18999293.png"></p>
<p> </p>
<p> </p>
<p> </p>
<ul>
<li><code><header></code>：页眉通常包括网站标志、主导航、全站链接以及搜索框。</li>
</ul>
<ul>
<li><code><nav></code>：标记导航，仅对文档中重要的链接群使用。</li>
</ul>
<ul>
<li><code><section></code>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</li>
</ul>
<ul>
<li><code><aside></code>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。</li>
</ul>
<ul>
<li><code><figure></code>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）</li>
</ul>
<ul>
<li><code><footer></code>：页脚，只有当父级是body时，才是整个页面的页脚。</li>
</ul>
<h2><code class="w3-codespan">Placeholder Tags</code></h2>
<p> </p>
<p><section>: to structure your content</p>
<p><span>:generic inline tag</p>
<p><div>:generic block tag</p>
<h2><span>Attributes</span></h2>
<p><span><p id="today">28 September</p></span></p>
<p><p class="info">Lecture 2</p></p>
<p> </p>
<h1>HTML ELEMENTS</h1>
<h2>links</h2>
<p><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427031227079-1703564166.png"></p>
<p> </p>
<h1>Forms</h1>
<p><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427031721391-2058911466.png">三个"name"要一致</p>
<p> </p>
<h2>Form-Validation</h2>
<p><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427132020666-846790036.png"></p>
<h2>Form-Input types</h2>
<p><strong>button </strong><strong>checkbox 复选框 </strong> <strong>date </strong> <strong>email </strong><strong>month </strong></p>
<p><strong>password </strong><strong>radio 单选 </strong></p>
<p><strong>submit 提交 </strong> <strong>time </strong> <strong><textarea> 文本区</strong></p>
<p>color tel text url week range reset search datetime-local file hidden image number</p>
<h2>Form-Autocomplete</h2>
<p>autocomplete 属性规定表单是否应该启用自动完成功能。</p>
<p>自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。</p>
<p class="note">注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。</p>
<p class="note"><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427134036973-1510874309.png"></p>
<h2>Form-Select</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">select </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="animal"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="dog"</span><span style="color: rgba(0, 0, 255, 1)">></span>Dog<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">option</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="cat"</span><span style="color: rgba(0, 0, 255, 1)">>Cat</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">option</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">select</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<h1>Table </h1>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">thead</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>Name<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th></span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>ID<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></tr></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">thead</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tbody</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>Amy<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>100<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tbody</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h2><img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427151719474-919341053.png"></h2>
<p> </p>
<p> </p>
<h2>Datatable</h2>
<p> <img src="https://img2022.cnblogs.com/blog/2759973/202204/2759973-20220427141530540-2012164670.png"></p>
<p> </p>
<p> </p>
<p> </p>
<h1> EXERICES</h1>
<p>The file <strong><code class="hljs">Templates.java</code></strong> sets up the thymeleaf template engine. The <strong><code class="hljs">@Component</code></strong> annotation tells spring to manage this class; other classes that need templates can request it by declaring a field of the right class with <strong><code class="hljs">@Autowired</code></strong>, as you can see in <strong><code class="hljs">Controller.java</code></strong>.</p>
<p>@Component注释告诉spring管理这个类;其他需要模板的类可以通过使用@Autowired声明正确类的字段来请求它，正如您在Controller.java中看到的那样。</p>
<div>
<p>The main page is served up as before as a HTML file from the classpath in <code class="hljs">src/main/resources/web</code>.</p>
<p>Have a look at the process when <code class="hljs">/units</code> is requested.</p>
<div class="cnblogs_code">
<pre>@GetMapping("/units"<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">public</span><span style="color: rgba(0, 0, 0, 1)"> String unitsPage() {
Database d </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> DatabaseImpl();
List</span><Unit> units =<span style="color: rgba(0, 0, 0, 1)"> d.getUnits();
Context cx </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Context();
cx.setVariable(</span>"units"<span style="color: rgba(0, 0, 0, 1)">, units);
</span><span style="color: rgba(0, 0, 255, 1)">return</span> templates.render("units.html"<span style="color: rgba(0, 0, 0, 1)">, cx);
}</span></pre>
</div>
<ul>
<li>First, the method <code class="hljs">unitsPage</code> accesses the database and loads the list of units.</li>
<li>Next, it creates a <code class="hljs">Context</code>, a thymeleaf object that lets you pass values to a template. Here we add one value with key <code class="hljs">units</code>, containing the list of units.</li>
<li>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.</li>
</ul>
<p>首先，unitsPage方法访问数据库并加载单元列表。<br>接下来，它创建一个Context，一个thymeleaf对象，它允许您向模板传递值。这里我们添加了一个值units，包含了单位列表。<br>最后，我们使用上下文呈现模板并返回this。如果spring控制器中的一个方法返回一个字符串，则假定该字符串包含一个HTML页面，spring正确地设置了HTTP状态代码和头部。</p>
<p>The template itself is in <code class="hljs">src/main/resources/units.html</code>. Anything with a <code class="hljs">th:</code> prefix is rendered by thymeleaf:</p>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">ul </span><span style="color: rgba(255, 0, 0, 1)">th:each</span><span style="color: rgba(0, 0, 255, 1)">="unit : ${units}"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">a </span><span style="color: rgba(255, 0, 0, 1)">th:href</span><span style="color: rgba(0, 0, 255, 1)">="'/unit/' + ${unit.code}"</span><span style="color: rgba(255, 0, 0, 1)"> th:text</span><span style="color: rgba(0, 0, 255, 1)">="${unit.code}"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">th:text</span><span style="color: rgba(0, 0, 255, 1)">="${unit.title}"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>The <code class="hljs">th:each</code> attribute is the equivalent of a for loop in Java, in this case <code class="hljs">for (Unit unit : units)</code> - in thymeleaf, unlike plain Java, you do not need to give the loop variable a type but you do need to use the <code class="hljs">${...}</code> syntax whenever you are accessing a variable from the context. The <code class="hljs">th:each</code> attribute renders its own tag once (in this case <code class="hljs"><ul></code>) and then renders everything inside the tag once per pass through the loop, so you get one <code class="hljs"><li></code> item per unit.</p>
<p>th:each等价于Java中的for循环，在这个例子中for (Unit Unit: units) -在thymeleaf中，不像普通Java，你不需要给循环变量一个类型，但是你需要使用${…}语法，当你从上下文中访问一个变量时。每个属性渲染它自己的标记一次(在本例中是<ul>)，然后在每次循环中渲染标记内的所有内容一次，因此每个单元得到一个<li>项。</p>
<p>To create an attribute, you put <code class="hljs">th:</code> in front of the attribute name, so the <code class="hljs">th:href</code> creates the <code class="hljs">href</code> attribute of a link (check the result in your browser). Thymeleaf attribute syntax is that you need to put single quotes around strings, <code class="hljs">+</code> like in Java to stick strings together, and <code class="hljs">${...}</code> around variables.</p>
<p>要创建一个属性，可以将th:放在属性名前面，因此th:href将创建链接的href属性(请在浏览器中查看结果)。Thymeleaf属性语法是你需要在字符串周围加上单引号，+就像在Java中把字符串粘在一起，和${…}变量。</p>
<p>The syntax <code class="hljs">${instance.attribute}</code> loads an attribute from an instance of a Java class by calling its getter. In this case <code class="hljs">${unit.code}</code> ends up calling <code class="hljs">.getCode()</code> on the unit instance rather than accessing the field directly.</p>
<p>语法${instance.attribute}通过调用getter从Java类的实例加载属性。在本例中为${单位。code}最终调用了单元实例的. getcode()，而不是直接访问字段。</p>
<p>The <code class="hljs">th:text</code> attribute is special and creates the body of a tag. For example, the span tag here creates a <code class="hljs"><span></code> 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 <code class="hljs">${variable}</code> 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 (<code class="hljs">span</code> is a good choice here) and put the variable in its <code class="hljs">th:text</code> attribute.</p>
<p>text属性是特殊的，它创建标记的主体。例如，这里的span标记创建了一个<span>，它的主体(在开始和结束标记之间)包含单元的标题。不像其他模板系统，Thymeleaf不允许你在任何地方包含变量——一些模板引擎允许你在HTML页面的任何地方写${variable}，但Thymeleaf只允许你在标签的属性中这样做，所以如果你只想要一些文本，您需要制作一个占位符标记(在这里span是一个不错的选择)，并将变量放入其th:text属性中。</p>
<p>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 <code class="hljs">/unit/UNITCODE</code>, for example <code class="hljs">/unit/COMS10012</code>, this is handled by the <code class="hljs">unitDetailPage</code> method.</p>
<p> </p>
<p>Note that the <code class="hljs">@GetMapping</code> contains a pattern <code class="hljs">/unit/{code}</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 <code class="hljs">@PathVariable</code> to tell spring how to deal with it, namely to fill its value from the path of the HTTP request.</p>
<p>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.)</p>
<p>After this, we call thymeleaf on the <code class="hljs">unit.html</code> template (this is the one without 's' in its name) to render the unit page.</p>
</div>
<div class="buttons"> </div>
</div>
<p><span><span> <strong><span>基本练习：</span></strong><span><span>重写单位列表页面，以表格而不是列表的形式显示单位。</span><span>该表应为每个单元一行和三列：第一列应为单元代码，第二列应为单元标题，第三列应包含带有文本“详细信息”的链接，该链接将您带到详细信息页面那个单位。</span><span>还要在表格中创建一个标题行，标题为“代码”、“标题”和“链接”。</span><span>（这纯粹是一个 HTML 和模板练习，您不需要为此更改任何 Java 代码。）</span></span></span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html </span><span style="color: rgba(255, 0, 0, 1)">lang</span><span style="color: rgba(0, 0, 255, 1)">="en"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>List of Units<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>List of units<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">ul </span><span style="color: rgba(255, 0, 0, 1)">th:each</span><span style="color: rgba(0, 0, 255, 1)">="unit : ${units}"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">a </span><span style="color: rgba(255, 0, 0, 1)">th:href</span><span style="color: rgba(0, 0, 255, 1)">="'/unit/' + ${unit.code}"</span><span style="color: rgba(255, 0, 0, 1)"> th:text</span><span style="color: rgba(0, 0, 255, 1)">="${unit.code}"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">span </span><span style="color: rgba(255, 0, 0, 1)">th:text</span><span style="color: rgba(0, 0, 255, 1)">="${unit.title}"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">span</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> 答案：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">border</span><span style="color: rgba(0, 0, 255, 1)">="1"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">thead</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>code<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>title<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>link<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">thead</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tbody </span><span style="color: rgba(255, 0, 0, 1)">th:each</span><span style="color: rgba(0, 0, 255, 1)">="unit : ${units}"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td </span><span style="color: rgba(255, 0, 0, 1)">th:text</span><span style="color: rgba(0, 0, 255, 1)">="${unit.code}"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(255, 0, 0, 1)">th:text</span><span style="color: rgba(0, 0, 255, 1)">="${unit.title}"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">a </span><span style="color: rgba(255, 0, 0, 1)">th:href</span><span style="color: rgba(0, 0, 255, 1)">="'/unit/' + ${unit.code}"</span><span style="color: rgba(255, 0, 0, 1)"> th:text</span><span style="color: rgba(0, 0, 255, 1)">=detail</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tbody</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/changethewld/p/16199862.html
頁:
[1]