W e ♥ S D
0 1

html5学习之路_001

安装环境

安装intellij idea作为开发环境

打开环境

新建一个html文件，打开之后出现代码框架，再次基础上继续编码即可，例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

</head>
<body>
    
</body>
</html>

这次我们说说链接跟表格的制作。

链接

框架代码分为头和身，头为：<head></head>，身为 <body></body>。在<head></head>中有<title></title>，这个代表标题，在其中写的内容会出现在网页标题上 

<title>html5:链接 </title>

出现在网页标题上的内容就是“html5:链接”。如图1

图1

链接写在body里面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="mystile.css">
    <title>html5:链接 </title>

</head>
<body>
    <a href="http://baidu.com">百度一下</a>

</body>
</html>

代码中，<a></a>代表链接，在其中间输入的“百度一下”是运行后在页面看到的字符，而“href="http://baidu.com”是点击字符所切换到的页面。如上说述，点击“百度一下”就会切换到百度搜索页面，运行按钮在右上角，任意点击一款浏览器。如图2：

图2

表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1">
        <tr>
            <td>表格1</td>
            <td>表格2</td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>西瓜</li>
                </ul>
            </td>
            <td>
                <ol>
                    <li>西红柿</li>
                    <li>蘑菇</li>
                    <li>冬瓜</li>
                </ol>
            </td>
        </tr>
    </table>
</body>
</html>
table代表表格，参数border代表表框厚度。<tr></tr>代表行，<td></td>代表列，<ul></ul>代表无序排列，<ol></ol>代表有序排列，运行之后如图：

可在table中插入参数，cellpadding：单元格间距； bgcolor：单元格背景颜色；background：单元格内的图片


本站文章为 宝宝巴士 SD.Team 原创，转载务必在明显处注明：（作者官方网站： 宝宝巴士 ) 

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4737937.html

posted @ 2015-08-17 22:06  SD.Team  阅读(233)  评论(0)  编辑  收藏  举报