03---HTML+CSS---列表、表格及iframe框架

8 篇文章 0 订阅
一、列表
1、无序列表
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

网页显示:

  • Coffee
  • Milk

相对于有序列表,用的比较多。

2、有序列表
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

网页显示:

  1. Coffee
  2. 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>

网页显示:

HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2
row 3, cell 1row 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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值