前端视频2-第二部分

作者: _Jeff_ | 来源:发表于2017-09-24 19:15 被阅读15次

    图片和图像映像技术

    第四个视频开始是回顾上节课的内容:链接

    <a href="mailto:邮箱地址">发邮件</a>   这是向别人发送文件。
    
    <a href="文件路径 url">下载</a>   这是下载文件,网页文件可以直接打开。
     
    其它标签
    link: 主要用来链接css文件
    base:用于当前网页所有的a链接目标打开窗口。
    <base tareget="_blank" />  目标网页在新窗口打开。
    <base tareget="_self" />    目标网页在当前窗口打开。
    

    图片标签

    <img src=”图片文件的路径url”  alt=”图片的描述信息”  width=”100”  height=”50” border=”1” 
     align=”left || center  || right” />
    设置图片的宽和高。border是图片边框粗细的属性,单位都是px。
    align 是用来是图片位置居左/中/右。
    

    图像映射技术

    图像映射意思就是在一张图片的不同位置产生多个不同的链接。
    图像映射技术需要一张图片,需要"map"标签,划分出多个区域链接,有三种形状。

    形式:<area shape="设定形状" coords="坐标尺寸之类" href="设定该区域的链接 " >
    矩形:<area shape="rect" coords="矩形的左上角坐标和右下角坐标" href="01图片标记.html" >
    圆形:<area shape="circle" coords="圆心的坐标和半径" href="01图片标记.html" >
    多边形:<area shape="poly" coords="连续的点的坐标" href="01图片标记.html" >
    

    坐标的截取:以“左上角”为原点,向右为x正方向,向下为y正方向。

    多媒体介绍,表格初步

    这里的多媒体不是狭义的多媒体,主要是播放声音和视频,而html4没有这个功能,这些声音和视频都是flash来播放的。浏览器就需要一个插件来播放这些声音和视频。HTML使用一个 object标签来承载。有的插件和浏览器不兼容,只有flash和各种浏览器比较兼容。

    html引入mp3声音

    <objekt classid=”clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95” width=”300” height=”300”>
    <param name=”filename” value=”abc.mp3”/>
    <param name=”autostart” value=”false”/>
    <embed autostart=”false” src=”abc.mp3” width=”232” height=”232”></embed>
    </obbject>
    

    html引入flash,只需要用媒体标签,跟插入视频差不多

    表格初步各种标签功能

    表格作用是将一定区域内划分为行列对其的若干个“格子”。

    表格使用如下3个标签搭配以形成完整的表格基本表现:
    <table>
        <tr>
            <td>这个td中才是放置具体“内容部分”的区域</td>
        </tr>
    </table>
    table:用于“声明”一个表格
    tr:用于设定一个表格中的“一行”,多行就使用多个tr配对。
    td:用于设定一个行中的“一列”(单元格),多个列就使用多个td。
    —— 一个表格可以有多行,一个行可以有多列。
    表格中的单元格可以进行“合并”操作,是通过td上的两个属性来实现。
    table常用属性:
        width:设定表格的宽度
        height:设定表格的高度
        border:设定表格的边框线,其实会应用整个表格的所有“边框线”(每个单元格)
        cellpadding: 设定单元格中的内容与单元格的边框线之间的“间距”,单位是px
        cellspacing: 设定相邻的两个元格的边框线之间的“间距”,单位是px
        bgcolor=”yellow”  设定表格的总体上的背景颜色
        background=”图片地址url”: 设定表格的总体上的背景图
        align=”left // center // right”: 设定表格总体上的定位方式。
        bordercolor:设定边框线的颜色
    td常用属性:
        width:设定单元格的宽度
        height:设定单元格的高度
    bgcolor=”yellow”  设定单元格的背景颜色
        background=”图片地址url”: 设定单元格的背景图
        align=”left // center // right”: 设定单元格中的内容的水平对齐方式
        valign=”top // middle // bottom”: 设定单元格中的内容的垂直对齐方式
        colspan=”5”:  表示该单元格会水平向右边合并5个“原始单元格”,其本身相当于“跨”5个列。
        rowspan=”3”:  表示该单元格会垂直向下边合并3个“原始单元格”,其本身相当于“跨”3个行。
    

    表格深入与案例,字符实体

    td用于设定一个普通单元格
    th用于设定一个“标题单元格”:其中的文字会自动粗体并居中——凡是可以用td,就可以用th
    一个表格还可以设定一个“标题”:在table 中使用caption标签,其中可是设定标题文字
    实际上,作为表格“table”,其内部的所有行还可以进一步进行“表格区域划分”,通常有3种形式的表格区域:
    thead:代表表格的“头部”区域,其中可以放置tr(及其下属)标签。
    tbody:代表表格的“中部”区域(主体区域),同样可以放tr——所有没有明确使用分区标签归到某个区域的tr标签,都自动隶属于tbody分区。——也就是说,tbody有可能自动出现。
    tfoot:代表表格的“尾部”区域,同样可以放tr。

    表格标签关系总结:

    特殊字符

    在html中,如果出现了<> ,浏览器会自动认为这是一个标签,不会显示出你想要的内容。这些特殊字符如下。

    经过四天看完了day2的内容,里面介绍了关于HTML的一些基础知识,了解了链接的连接,图片的插入,表格的使用,还有特殊字符。总而言之,这交给了我们各种html的标签意思。 让我们可以看懂一个html的简单编写。

    相关文章

      网友评论

        本文标题:前端视频2-第二部分

        本文链接:https://www.haomeiwen.com/subject/ibifextx.html