2018-03-26

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容