day-24-HTML

01.页面字段编写

1.

02.图片标签

img image

属性：
    src: 图片路径
    width： 图片显示的宽度
    height： 图片显示的高度 通常只用 width 或者只用 height，图片会等比例缩放。如果两个属性都用了，图片可能会变形
    title：鼠标悬浮提示
    alt：当图片加载不出来的时候，显示的文字提示信息

<img src="../img/mm.jpg" width="800px" title="这是个妹纸" alt="足球宝贝"/>

03.列表标签和友情连接

1.列表标签

ul：无序列表
    属性：
        type：设置列表项前边的标记类型
            circle：空心小圆圈
            disc：默认值 实心小圆点
            square：小方块

ol：有序列表
    属性：
        type：列表项前边的序号类型
            1/a/A/i/I

上面两个标签，必须和其子标签 li 配合
li 列表项标签 

    <ul type="square">
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>博学谷</li>
        <li>酷丁鱼</li>
    </ul>

    <ol type="i">
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>博学谷</li>
        <li>酷丁鱼</li>
    </ol>

2.超链接标签 a

属性：
    href: 页面的路径
    target：新页面在哪里显示
            _self: 默认值，在当前窗口显示新页面
            _blank 在新窗口显示新页面

    <a href="http://www.itheima.com" target="_blank">黑马程序员</a>

./ 表示当前目录 ./可以省略
../ 表示上级目录

04.表格标签

table 
    属性：
        border：0/1 表示是否有边框线
        width ： 表格的宽度
        align ： 表格的水平位置
        bgcolor ： 表格的背景颜色
        cellspacing ： 多个单元格之间的间隔
        cellpadding ： 单元格边框线和内容之间的距离

tr （代表一行表 无内容）
    属性：
        align：当前行的内容 水平位置

td （基本用于表内容）
    属性：
        align：单元格内容的水平位置 
        rowspan：跨行合并 （合并列）
        colspan：跨列合并     （合并行）

th （基本用于表头）
    属性：
        和 td 用法一样，只是自带格式，加粗并且居中

caption： 表格的标题

table>tr*3>td*3  + Tab  创建三行三列的表 快捷方法！

05.框架标签

可以理解为是用来切分页面的：把一个页面切分成多块，每一块都可以再嵌套一个页面。

注意：切分谁，就需要用frameset替换掉这个标签

frameset：
    属性：
        rows：切分成多行。值：rows=“120，*”，有两个值就表示分成了上下两行；

        cols：切分成多列。用法和rows一样；

frame：
    属性：
        src：嵌套的页面路径
        noresize： 固定值 noresize  表示frame 不可拖动更改大小


<frameset rows="120,*">

    <frame src="top.html" name="topFrame" noresize="noresize" />

    <frameset cols="200,*">

        <frame src="left.html" name="leftFrame" noresize="noresize"/>
        <frame src="right.html" name="rightFrame" noresize="noresize"/>

    </frameset>
</frameset>