前端入门（第二天）

标签之图片

使用<img>标签

<img src="*****"  alt="*****" width="***px" height="****px" title="****">

src为图片的路径（图片路径如果与网页代码在同一个路径 直接输入图片名称及地址）

alt是用文字替代图片（当src出现问题不能显示图片时，会出现碎掉的图片及alt所输入的文字）

width是改变图片的长度（当高度height为默认时 图片的高度会自适应）

height是改变图片的高度（当长度width为默认时 图片的长度会自适应）

title是鼠标悬停在图片上会显示的文字

图片的路径详解

绝对路径:是电脑的盘符存储与访问的具体地址

例如:   E:\chenjiale\1.jpg

相对路径:两者的相对关系，两者在同一路径下可以直接访问

子级关系:/

父级关系: ../

同级关系: ./

网络路径:具体的网址https://****

这三种路径都是放在src

例如:<img src="E:\chenjiale\1.jpg">

标签之超链接文本

<a></a>为超链接文本

中间可以加文字，图片等 

<a href="***">href为超链接到的地址

在默认状态下，未访问过的超链接文本字体显示蓝色的，访问过的超链接文本字体显示紫色点击中的超链接文本字体显示红色

超链接的表现:鼠标移动到超链接文本鼠标会变成一个小手

标签之文本（文本都是双标签）

<em>定义着重文字

<b>定义粗体文本

<i>定义斜体文本

<strong>定义加重语气

<del>定义删除字

<span>承载一个文本信息

列表标签之有序列表

<ol  type="***">

    <li>****</li>

    <li>****</li>

</ol>

<ol>是有序列表的主体

<li>是有序列表的级数内容

type是有序列表的级数

效果: 1.苹果

         2.香蕉

         3.火龙果

type的默认级数是123（默认就是不写type）

type有a，A，i（小写罗马数），I（大写罗马数）

有序列表可以嵌套

例如

<ol  type="***">

    <li>

        ****

        <ol>

            <li>****</li>

            <li>****</li>

        </ol>

    </li>

    <li>****</li>

</ol>

列表标签之无序列表（使用频率比有序列表高）

例如:

        •苹果

        •香蕉

        •火龙果

<ul type="*****">

    <li>****</li>

    <li>****</li>

</ul>

type是改变圆点的类型

disc是实心圆（也是默认 可以不写）

circle是空心圆

square是小方块

none是不显示

快速生成ul+li的布局:ul>li*3（3是li的数量）

标签之表格

<table></table> 是表格的必要包装（可以理解为格式）

<tr></tr>是行

<td></td>是单元格（列）

格式：

<table>

        <tr>

                <td>

                </td>

        </tr>

</table>

border 设置表格边框

width 设置单元格长度

height 设置单元格宽度

代码为

<table border=“***” width=“****” height=“********”>

        <tr>

                <td>

                </td>

        </tr>

</table>