美文网首页
2018-03-26

2018-03-26

作者: 裴general | 来源:发表于2018-03-26 20:46 被阅读0次

    HTML5

    今天主要学习HTML5,了解前端知识。

    • HTML5:HyperText Markup Language,是超文本标记语言,是一种用于创建网页的标准标记语言
    • HTML5的解释器是浏览器,windows下主要用火狐和谷歌浏览器。写代码的时候建议使用submit text3记事本来书写,注意要安装一个element模块,方便以后代码的书写。
    • 今天主要学习了:文本,列表,图像,链接,表格,表单,音视频等
    • 书写时时用标签<>来完成

    排头

    <!DOCTYPE html>选择使用哪种html语言;<html lang="en">语言;<head>头部;<meta charset="UTF-8">编码格式;<title>Document</title>标题;<body>显示的代码全部写在body里

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    

    文本

    一共有6级标题,h1------h6

    <h1>hello,world!</h1>
        <h2>nihaoshijie</h2>
        <hr>
        <!--<p>段落标签 或者是段尾<br>-->
        <p><ins>床前</ins>明月光<sub>1</sub></p>
        <p>疑似地上霜<sup>2</sup></p>
        <p>举头望<del>明月</del></p>
        <p>低头思<strong><em>故乡</em></strong></p>
        <q>走的人多了,也就成了路</q>
        <h3>罗浩的个人爱好</h3>
    

    列表

    列表一共有3种列表,ul无序列表,ol有序列表,dl有序和有注释列表

    <ul>
            <li>阅读</li>
            <li>听歌</li>
            <li>音乐</li>
        </ul>
        <dl>
            <dt>
                <!-- 一般不会直接在里面更改标签-->
                <img src="./images/house.png" alt="房子" >
            </dt>
            <dt>听歌</dt>
            <dd>每天12点准时收听英雌岩区</dd>
            <dt>阅读</dt>
            <dd>每天晚上12点阅读金瓶梅</dd>
            <dd>每天晚上11点阅读英雄志</dd>
    

    图像

    <img src="./images/house.png" alt="房子" >
    

    链接

    页面链接,锚链接,功能性链接

    <a id="top"></a>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
        <a href="http://www.easou.com">搜一下</a>
        <a href="index.html">我的首页</a>
        <a href="#top">回顶部</a>
        <a href="mailto:jackfrued@126.com">联系站长</a>
    

    表格

    表格里可以进行复杂的操作:比如合并同类项,合并单元格,居中对齐等等

        <table border="1">
            <caption>学生成绩表</caption>
            <thead>
            <tbody>
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>python</th>
                <th>分数</th>
            </tr>
            <tr>
                <td rowspan="2">1801</td>
                <td>张三</td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>3</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1802</td>
                <td>王五</td>
                <td>4</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1803</td>
                <td>邹六</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </thead>
        </tbody>
        </table>
    

    表单

    主要是对input,form等的应用

    <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
        <legend>必填信息</legend>
            <!--value是默认值,placeholder相当于input -->
        <p>
            <!--单选框 -->
            <input type="text" name="username" placeholder="请输入您的用户名" required"">
        </p>
        <p>
            <input type="password" name="password" placeholder="请输入您的密码" required>
        </p>
            <input type="radio" name="gender" checked>男
            <input type="radio" name="gender">女
        <p>
            <!--复选框 -->
            <input type="checkbox" name="fave" checked>阅读
            <input type="checkbox" name="fave">唱歌
            <input type="checkbox" name="fave">旅游
            <input type="checkbox" name="fave">游玩
            <input type="checkbox" name="fave" checked>游戏
        </p>
        <p>
            <input type="date" name="birthday">
        </p>
        <p>
            <input type="email" name="email" placeholder="请输入您的邮箱">
        </p>
        <p>
            <select name="provr" id="">
                <option value="北京">北京</option>
                <option value="天津">天津</option>
                <option value="上海">上海</option>
                <option value="重庆">重庆</option>
                <!-- selected 默认要选的值, select下拉-->
                <option value="四川" selected="四川">四川</option>
            </select>
        </p>
        <p>
            <!--文本驱 -->
            <textarea rows = "5" cols = "30" name = "intro"></textarea>
        </p>
        <p>
            <input type="file" name="file"> <!--上传照片 -->
        </p>
        </fieldset>
        <legend>可选信息</legend>
        <p>
            <!--submit 填写  reset 重置 -->
            <input type="submit" value="立即注册">
            <input type="reset" value="重新填写">
        </p>
    

    音视频

    <audio controls autoplay>
            <source src="./resourses/bgmusic.mp3">
        </audio>
        <video controls width="800">
            <source src="./resourses/XXX.mp4">
        </video>
    

    相关文章

      网友评论

          本文标题:2018-03-26

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