1. Verwenden Sie ul, um eine Liste mit Nachrichteninformationen hinzuzufügen
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 9 10 </body> 11 </html>
Beim Surfen im Internet werden Sie feststellen, dass es viele Informationslisten gibt im Web, z. B. eine Nachrichtenliste und eine Bilderliste, wie unten gezeigt.
News-Liste
Bilderliste
Diese Listen können mit dem ul-li erstellt werden Markieren Sie „Fertig“. ul-li ist eine Liste von Informationen in keiner Reihenfolge.
Syntax:
<ul> <li>信息</li> <li>信息</li> ...... </ul>
Beispiel:
<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>
Der auf der Webseite angezeigte Standardstil von ul-li ist im Allgemeinen: Vor jedem li ist ein Kreis Klicken Sie wie unten gezeigt auf:
Geben Sie zum Ausprobieren
li steht auf Englisch für List, ol steht auf Englisch für geordnete Liste und ul steht auf Englisch für ungeordnete Liste)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> p标签</title> 6 </head> 7 <body> 8 9 10 </body> 11 </html>
Was ist zu tun, wenn Sie die Bestellung in der Informationsliste der Webseite anzeigen möchten? Die Rangliste der Buchbestseller auf Dangdang.com ist beispielsweise in der Abbildung unten dargestellt
Bei dieser Art der Informationsanzeige kann das Tag
Grammatik:
<ol> <li>信息</li> <li>信息</li> ...... </ol>
Beispiel:
Das Folgende ist ein beliebtes Kurs-Download-Ranking:
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
Probieren wir es aus, geben Sie
<ol> <li>我的第一个列表信息。</li> <li>我的第一个列表信息。</li> </ol>
in Zeile 8 im Editor ein. Vergessen Sie nicht die Syntax des < ol>-Tag
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
三、认识p在排版中的作用1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>p标签</title> 6 </head> 7 <body> 8 <h2>热门课程排行榜</h2> 9 <ol> 10 <li>前端开发面试心法 </li> 11 <li>零基础学习html</li> 12 <li>javascript全攻略</li> 13 </ol> 14 <h2>最新课程排行</h2> 15 <ol> 16 <li>版本管理工具介绍—Git篇 </li> 17 <li>Canvas绘图详解</li> 18 <li>QQ5.0侧滑菜单</li> 19 </ol> 20 </body> 21 </html>
Während des Webseitenerstellungsprozesses können Sie einige unabhängige logische Teile unterteilen und in ein
-Tag einfügen .
Syntax:
…
Bestimmen Sie den logischen Teil:
Was ist der logische Teil? Es handelt sich um eine Reihe miteinander verbundener Elemente auf der Seite. Beispielsweise ist ein unabhängiger Spaltenabschnitt auf einer Webseite ein typischer logischer Teil.
Wie in der Abbildung unten gezeigt: Der in der Abbildung mit einem roten Rand markierte Teil ist ein logischer Teil und das
-Tag kann als Container verwendet werden.
Probieren Sie es aus: Verwenden Sie den p-Tag, um die Webseite in unabhängige Abschnitte zu unterteilen.
Verwenden Sie den p-Tag im Editor, um unabhängige logische Teile zu unterteilen. (Es gibt viele Antworten, mal sehen, wer am prägnantesten ist)
Vergessen Sie nicht die Syntax des
-Tags:
Referenzcode: (Nur einer davon)
<p>
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</p>
<p>
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</p>
一个html页面可以看成一个家，而一个p你们可以看成家的每个小房间，房间有了当然没什么效果，
但是一个家必须分成一个个小房间才能多姿多彩，但每个房间里怎么装饰就得你们自己放东西，当然装饰就得交给css了，
后面讲到<p class>大家就懂了。p标签就是一个框，将里面的东西框起来，然后通过css来使这个框按照所需要的样式显示出来。
<p>就是分类，把一类东西放在一块，另一类东西放另一块。这样一目了然，就是<p>实现的。p(pISION) unterteilt die Webseite, wie der Name schon sagt, in Blöcke. p und span können als Container oder Box (Box-Modell).
entspricht der Platzierung vieler Container auf dem Browserbildschirm. Um komfortabel auszusehen, muss jeder Container ordentlich und ordentlich angeordnet sein. Das p-Positionierungsproblem verwendet CSSs Position und Floating Probleme bei der Verwendung von CSS float und der Verwendung des Box-Modell-Layouts
Darüber hinaus müssen Sie nach dem Platzieren des Containers Inhalte wie Listen, Text und Bilder platzieren Es ist, als würde man Gemüse in einen Tellerbehälter geben. Natürlich sehen mehr Gerichte besser aus.
Wir müssen alles in unser Studium integrieren und lernen, ein großartiges Web-Frontend zu sein.
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>p标签</title> 6 </head> 7 <body> 8 <p> 9 <h2>热门课程排行榜</h2> 10 <ol> 11 <li>前端开发面试心法 </li> 12 <li>零基础学习html</li> 13 <li>javascript全攻略</li> 14 </ol> 15 </p> 16 <p> 17 <h2>web前端开发导学课程</h2> 18 <ul> 19 <li>网页专业名词大扫盲 </li> 20 <li>网站职位定位指南</li> 21 <li>为您解密Yahoo网站制作流程</li> 22 </ul> 23 </p> 24 </body> 25 </html>
Wir haben einige Tags in
eingefügt, um einen unabhängigen logischen Teil zu erstellen. Um die Logik klarer zu machen, können wir einen Namen für diesen unabhängigen logischen Teil festlegen,
用id属性来为
提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。
语法：
…
来试试给网页的独立的版块添加“标记”
1、在编辑器中的第8行修改
代码为
。
2、在编辑器中的第16行修改
代码为
。
别忘了标记版块名称的语法：
…
p相当于划分成一个个房间，id就是房间号了
p的ID号是为了使用CSS的ID选择器，应用CSS样式，否则毫无意义。
有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：
创建表格的四个元素：
table、tbody、tr、th、td
1、
2、
…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。3、
4、
5、
6、表格中列的个数，取决于一行中数据单元格的个数。
上述代码在浏览器中显示的默认的样式为：
总结：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
来试试为数学成绩表添加一行内容
在右部编辑器中的第25-29行输入下列代码：
25.
26.
27.
28.
29.
结果图：
1、表格的行标签的语法：
2、一行中的单元格语法：
<tr> <td>…</td> <td>…</td> … </tr>
tbody 防止那种因网速慢加载一点显示一点的情况，
如果把网页比作一个女士
加载样式的过程是化妆过程
那么tbody就相当于屏蔽了化妆的过程直到
女士化好妆在真正出来见人
tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。
table 创建表格
tbody全显示出来
th表头
tr每一行
td每一个单元格
| 表格的一个单元格，有几个 | 就有几列。 | 表格表头标签。 |
|---|
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
