您的位置:首页 > 编程语言 > Java开发

java第二十一天(html)

2019-05-31 07:02 2855 查看

案例一:网站信息显示页面
1.什么是HTML?(Hyper Text Markup Language:超文本标记语言)
    超文本:功能比普通文本更加强大
    标记语言:使用一组标签对内容进行描述的一门语言(它不是编程语言)
    
2.为什么要学习HTML?
    

3.语法和规范?
    HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
    HTML文件分为头部分(<head></head>)和体部分(<body></body>)
    HTML标签都是由开始标签和结束标签组成。(<hr />)
    HTML标签不区分大小写,建议使用小写。

4.HTML相关标签学习
    标题标签<hn />
    水平线标签 <hr />
    段落标签<p></p>
    字体标签<font></font>
        属性:size:指定内容的大小
              color:指定内容的颜色
              face:指定内容的字体
    加粗:<b></b>
    斜体:<i></i>
    下划线:<u></u>
        

5.步骤分析:
    ①创建一个html文件
    ②创建一个标题标签显示公司简介
    ③创建一条水平线标签
    ④创建四个段落标签

案例二:网站图片显示页面
1.图片标签
    <img />
    属性:
        src:指的是图片显示的路径(位置)
            绝对路径:E:\Users\ThinkPad\Desktop\0703JavaEE就业班\WEB01_HTML\资料\WEB01\image
            相对路径:
                ①同一级:直接写文件名称或者./文件名称
                ②上一级:../文件名称
                ③下一级:写上目录名称/文件名称
        width:指定图片的宽度,取值可以是像素值,也可以是百分比
        height:指定图片的高度,取值可以是像素值,也可以是百分比
        alt:当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)
            
            
案例三:网站友情链接显示页面
    1.列表标签
        有序列表:
            <ol type="I" start="" reversed="reversed">
                <li></li>
            </ol>
        无序列表:
            <ul type="">
                <li></li>
            </ul>
        
    2.超链接标签
        <a href="" target=""></a>
        href:指定跳转的位置
        target:指定跳转页面显示的位置(取值:_self 、_blank)

案例四:网站首页显示页面
    1.表格标签
                <table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                </table>
    2.跨行跨列操作
        跨行:rowspan
        跨列:colspan
        
        
案例五:网站后台系统页面
    框架集标签:
        <frameset rows="" cols="">
            <frame src=""/>
            <frame name=""/>
        </frameset>

综合示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <!--网站名为情侣空间雏形-->
        <title>情侣空间雏形</title>
    </head>
    <!--页面展示为三个板块,先分上下两个框架
        注意框架标签不能在body内部-->
    <frameset rows="20%,*">
        <!--上面部分插入图片-->
        <frame src="top.html">
        <!--下面部分再分成左右两个框架-->
        <frameset cols="20%,*">
            <!--左边作为目录,可以跳转链接到右边展示-->
            <frame src="left.html">
            <!--右边命名为目录链接跳转界面-->
            <frame name="rigth">
        </frameset>
    </frameset>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>top</title>
    </head>
    <body>
        <img src="u=1934213672,3615825740&fm=26&gp=0.jpg" width="10%" height="10%">
        <font face="楷体" color="darkgray" size="4">爱你,从和你在一起的每一天起!</font>
    </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--序列标签-->
                <ul type="disc">
                    <li><h4>目录</h4></li>
                    <li>
                        <!--超链接标签-->
                        <a href="Myphoto.html" target="rigth">
                        <font color="black" face="微软雅黑" size="3">我的自拍</font>
                        <a><br/><br/>
                    </li>
                    <li>
                        <a href="Yourphoto.html" target="rigth">
                            <font color="black" face="微软雅黑" size="3">我拍你</font>
                            <a><br/><br/>
                    </li>
                    <li>
                        <a href="Ourphoto.html" target="rigth">
                            <font color="black" face="微软雅黑" size="3">我们的故事</font>
                        <a>
                    </li>
                </ul>
    </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Myphoto</title>
    </head>
    <body>
        <h4>我的自拍</h4>
        <table border="0px" bgcolor="blanchedalmond" width="1040px" height="520px" align="center" cellspacing="0px" cellpadding="0px">
            <tr width="1040px" height="260px">
                <td rowspan="2" width="173px" height="520px"><img src="i1.jpg" width="100%" height="100%"></td>
                <td colspan="3"width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
            </tr>
            <tr width="1040px" height="260px">
                <td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
                <td colpan="2" width="346px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="i1.jpg" width="100%" height="100%"></td>
            </tr>
        </table>
    </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Yourphoto</title>
    </head>
    <body>
        <h4>我拍你</h4>
        <table border="0px" bgcolor="blanchedalmond" width="1040px" height="520px" align="center" cellspacing="0px" cellpadding="0px">
            <tr width="1040px" height="260px">
                <td rowspan="2" width="173px" height="520px"><img src="y2.jpg" width="100%" height="100%"></td>
                <td colspan="3"width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
            </tr>
            <tr width="1040px" height="260px">
                <td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
                <td colpan="2" width="346px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
                <td width="173px" height="260px"><img src="y1.jpg" width="100%" height="100%"></td>
            </tr>
    </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ourphoto</title>
    </head>
    <body>
        <h4>我们的故事</h4>
        <table border="0px" bgcolor="darksalmon" width="1040px" height="800px" align="center" cellspacing="0px" cellpadding="0px">
            <tr>
                <td>
                    <table> 
                        <tr>
                            <td colspan="4" align="center"><font face="楷体" size="4">这个世界上总有那么一个人,是你的念想,是你的温暖。就算她不远不近,只要想到她,就永远会觉得安定,觉得踏实,觉得心里有底。甚至连周围的空气,都变得笃定。</font></td>
                        </tr>
                        <tr>
                            <td width="260px" height="300px" align="center"><img src="w1.jpg"width="100%" height="100%"></td>
                            <td width="260px" height="300px" align="center"><img src="w1.jpg" width="100%" height="100%"></td>
                            <td width="260px" height="300px" align="center"><img src="w2.jpg" width="100%" height="100%"></td>
                            <td width="260px" height="300px" align="center"><img src="w2.jpg" width="100%" height="100%"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            
            <tr>
                <td>
                    <table>
                        <tr>
                            <td colspan="4" align="center"><font face="楷体" size="4">我一生中最幸运的两件事:一件是时间终于将我对你的爱消耗殆尽;一件是很久很久以前有一天,我遇见你。</font></td>
                        </tr>
                        <tr>
                            <td width="260px" height="300px" align="center"><img src="w3.jpg"width="100%" height="100%"></td>
                            <td width="260px" height="300px" align="center"><img src="w3.jpg" width="100%" height="100%"></td>
                            <td width="260px" height="300px" align="center"><img src="w4.jpg" width="100%" height="100%"></td>
                            <td width="260px" height="300px" align="center"><img src="w4.jpg" width="100%" height="100%"></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

 

(adsbygoogle = window.adsbygoogle || []).push({});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Java black