一、列表
1、无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
网页显示:
- Coffee
- Milk
相对于有序列表,用的比较多。
2、有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
网页显示:
- Coffee
- Milk
3、定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
网页显示:
Coffee
Black hot drink
Milk
White cold drink
一般用在网页底部。
补充:
嵌套时,注意缩进,结构清晰。
缩进:tab
回缩:shift+tab
复制:ctrl+shift+d
列表嵌套时,裸露在外面的东西可以用个a标签。不想跳转的时候可以用href=” “,里面写一个#,相当于刷新页面;里面写三个#,相当于什么也没干;写javascript:void(0),鼠标放在a标签上时,浏览器下方会有显示javascript:void(0)。
二、表格
表格标签:
中文解释 | 标签 |
---|---|
定义表格 | table |
表格标题 | caption |
表格的表头 | th |
表格的行 | tr |
表格的列 | td |
表格的头 | thead |
身体 | tbody |
腿 | tfoot(很早以前网页用表格写,浏览器会帮你自动补齐) |
<table border="1" style="border-collapse:collapse;">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>
网页显示:
Heading | Another Heading |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
row 3, cell 1 | row 3, cell 2 |
三对tr 有三行,border=“1”为了让表格的线显示。style=”border-collapse:collapse;为了让边框的线合起来。colspan:列合并。rowspan:行合并。
三、 iframe框架
<iframe frameborder="1" src="http://www.baidu.com" scrolling="auto"></iframe>
可以引入别的页面。scroling是滚动条。
网页理论上可以无限延长(body本身没有高度,可以无限延长),由内容撑开。宽度是确定,所以iframe可以继承body的宽度。除非给定html一个高度,否则不能继承高度。
四、块级元素 及 行内元素(内联元素)
块级 | 行内 |
---|---|
独占一行 | 不会自动换行 |
会根据父级的大小适应宽高 | 给宽高无效 |
<h1~6>、<p>、<div>、<pre>、<ul> <li>、<ol> <li> 等 | <img>、 <a>、<b>、<strong>、<i>、<em> 等 |