HTML5学习

最新推荐文章于 2024-08-19 16:56:14 发布

bruuuuuuuuno

最新推荐文章于 2024-08-19 16:56:14 发布

阅读量309

点赞数

分类专栏： # web前端的知识图谱可视化文章标签： html5 html

本文链接：https://blog.csdn.net/bruuuuuuuuno/article/details/105258506

版权

web前端的知识图谱可视化专栏收录该内容

3 篇文章 2 订阅

订阅专栏

简介

HTML称为超文本标记语言，是一种标识性的语言。HTML5是构建Web内容的一种语言描述方式。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

学习

标签速查宝典

这里推荐小甲鱼的网站：https://man.ilovefishc.com/html5/

案例

案例一（入门）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_blank">
    <meta name="keywords" content="html5,案例,web开发">
    <meta name="description" content="一个案例">
    <meta name="author" content="Alex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>HTML学习</title>
</head>
<body>
    <h1>学习使我快乐</h1>
    <h2>学习使我快乐</h2>
    <p>总所周知，b站是用来学习的：<a href="https://www.bilibili.com">bilibili</a></p>
    <img alt="学习快乐图" width="300px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585765619223&di=6ed5ae7309e44314317a267fcce564ec&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F546dc4336c7dcc5b47e6c76557c8afbf2f5bddf110638-B08wbu_fw658">
</body>
</html>

效果展示

在这里插入图片描述

涉及标签

!DOCTYPE html head body base meta title h1 p img a

案例二（列表和表格）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表、表格、表单</title>
</head>
<body>
    <h2>列表</h2>
    <dl>
        <dt>学习流程</dt>
        <dd>web前端开发的学习流程</dd>
        <ol type="I">
            <li>HTML5</li>
            <li>css3</li>
            <li>JavaScript</li>
        </ol>
    </dl>
    <h2>表格</h2>
    <table border="1">
        <caption style="font-size: 20px; color:rgb(185, 73, 21);">宝可梦</caption>
        <colgroup>
            <col style="background-color:cyan ;">
            <col style="background-color:blueviolet;">
        </colgroup>
        <tr>
            <th>姓名</th>
            <th>图片</th>
        </tr>
        <tr>
            <td>皮卡丘</td>
            <td><img src="http://zkres1.myzaker.com/201811/5beabb2f77ac6433f91de8ab_640.jpg" alt="皮卡丘的照片" width="120px"></td>
        </tr>
        <tr>
            <td>可达鸭</td>
            <td><img src="http://5b0988e595225.cdn.sohucs.com/images/20181114/76ba6479ea5b4cd79ea8eec0ecde84d3.jpeg" alt="可达鸭的照片" width="120px"></td>
        </tr>
        <tr>
            <td>杰尼龟</td>
            <td><img src="http://pic.rmb.bdstatic.com/b23f799d32a6cad093f7383f5d54336c.jpeg@s_2,w_272,h_272,q_80" alt="杰尼龟的照片" width="120px"></td>
        </tr>
        <tr>
            <td>妙蛙种子</td>
            <td><img src="http://img1.gamedog.cn/2015/10/18/327-15101Q245510.jpg" alt="妙蛙种子的照片" width="120px"></td>
        </tr>
    </table>
</body>
</html>

效果展示

在这里插入图片描述

涉及标签

dl dt dd ol ul li table caption colgroup col th th td

案例三（表单）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <h2>表单</h2>
    <form>
        <fieldset>
            <legend>基本信息</legend>
            姓名：<input autocomplete="on" autofocus type="text"><hr>
            性别：<input autocomplete="on" type="radio" name="性别" id="man"><label for="man">男</label>
            <input autocomplete="on" type="radio" name="性别" id="woman"><label for="woman">女</label><hr>
            出生日期：<input autocomplete="on" type="date"><hr>
            电话：<input autocomplete="on" type="tel"><hr>
            个人网站：<input autocomplete="on" type="url"><hr>
        </fieldset>
        <br>
        <fieldset>
            <legend>个人喜好</legend>
            最喜欢的颜色：<input autocomplete="on" type="color"><hr>
            幸运数字：<input autocomplete="on" type="number"><hr>
            喜欢的水果：<input type="checkbox" name="fruit" value="watermelon">西瓜
            <input type="checkbox" name="fruit" value="banana">香蕉
            <input type="checkbox" name="fruit" value="blueberry">蓝莓<hr>
            最喜欢的一句话：<input autocomplete="on" type="text" list="list">
            <datalist id="list">
                <option>Be honest rather clever.</option>
                <option>Be swift to hear, slow to speak.</option>
                <option>There is no such thing as a great talent without great will - power.</option>
                <option>For man is man and master of his fate.</option>
            </datalist>
        </fieldset>
        <br>
        <button type="submit"><img alt="提交" width="100px" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1817689246,3962475274&fm=15&gp=0.jpg"></button>
    </form>
</body>
</html>

效果展示

在这里插入图片描述

涉及标签

form fieldset legend input datalist option button

参考资料

https://man.ilovefishc.com/html5/

bruuuuuuuuno

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习

目录简介学习标签速查宝典案例基础案例代码：效果展示：涉及标签：参考资料简介HTML称为超文本标记语言，是一种标识性的语言。HTML5是构建Web内容的一种语言描述方式。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。学习标签速查宝典这里推荐小甲鱼的网站：https://man...
复制链接

扫一扫

专栏目录