• 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

  • 相关阅读:
    解析网页源码方式
    vue踩坑--细节决定成败
    fallowing-travelvue
    学会不怕
    eslint代码规范检测
    三次握手+四次挥手
    小白的学习笔记
    es6数组
    css知识整理
    JavaScript之事件循环,宏任务与微任务
  • 原文地址:https://www.cnblogs.com/superdo/p/4737937.html
Copyright © 2020-2023  润新知