一:使用ul,添加无序列表(unordered list)
使用ul-li
标签来完成。ul-li
是没有前后顺序的信息列表。li
是英文list item的缩写
<body>
<ul>
<li>完美生活</li>
<li>蓝莲花</li>
<li>一起摇摆</li>
</ul>
</body>
显示效果:
在webstorm中快速编写一个ul的格式
ul>li(然后按下Tab键)
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签
<ul>
<li></li>
</ul>
ul>li*3(然后按下Tab键)
含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签
<ul>
<li></li>
<li></li>
<li></li>
</ul>
二:使用ol,添加有序列表(ordered list)
<ol>
在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1开始
<body>
<ol>
<li>完美生活</li>
<li>蓝莲花</li>
<li>一起摇摆</li>
</ol>
</body>
显示效果:
三:div排版
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>
标签中,这个<div>
标签的作用就相当于一个容器。
<div style="color: aqua; background-color: chocolate">
<h3>这是三级标题</h3>
<p>这是一个段落</p>
</div>
显示效果:
四:给div命名,使逻辑更加清晰
为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>
提供唯一的名称,这个就像我们每个人都有一个身份证号。
<div id="header" style="color: aqua; background-color: chocolate">
<h3>这是三级标题</h3>
</div>
<div id="paragraph" style="height: 60px; background-color: firebrick">
<p>这是段落</p>
</div>
显示效果:
五:table标签,制作表格
创建表格的四个元素table、tbody、tr、th、td
<table>
…</table>
:整个表格以<table>
标记开始、</table>
标记结束。<tbody>
…</tbody>
:如果不加<thead><tbody><tfooter>
,table
表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)<tr>
…</tr>
:表格的一行,所以有几对tr
表格就有几行。<td>
…</td>
:表格的一个单元格,一行中包含几对<td>
…</td>
,说明一行中就有几列。<th>
…</th>
:表格的头部的一个单元格,表格表头。- 表格中列的个数,取决于一行中数据单元格的个数。
table
表格在没有添加css
样式之前,在浏览器中显示是没有表格线的- 表头,也就是
th
标签中的文本默认为粗体并且居中显示
<table>
<tbody>
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>2班</td>
<td>12岁</td>
</tr>
<tr>
<td>小李</td>
<td>1班</td>
<td>11岁</td>
</tr>
</tbody>
</table>
显示效果:
六:使用css样式为表格加入边框
<style>
table tr td,th{border: 1px solid #000}
</style>
<table>
<tbody>
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>2班</td>
<td>12岁</td>
</tr>
<tr>
<td>小李</td>
<td>1班</td>
<td>11岁</td>
</tr>
</tbody>
</table>
显示效果:
七:caption标签为表格添加标题和摘要
摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:<table summary="表格简介文本">
标题:用以描述表格内容,标题的显示位置:表格上方。语法:
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<table summary="班级信息表">
<caption>表格标题</caption>
<tbody>
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>2班</td>
<td>12岁</td>
</tr>
<tr>
<td>小李</td>
<td>1班</td>
<td>11岁</td>
</tr>
</tbody>
</table>
显示效果:
八:定义列表
给一数据添加列表语义,先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息·,语法信息:
<body>
<dl>
<dt>手机</dt>
<dd>iPhone</dd>
<dd>华为, OPPO, 三星</dd>
<dt>电脑</dt>
<dd>MAC, WiN</dd>
</dl>
</body>
dt是definition title的缩写, 用来定义列表中的标题
dd是definition description的缩写, 用来定义标题对应的描述