前端路线--H5篇（day01）

喝西瓜汁的兔叽Yan

已于 2022-03-07 11:10:41 修改

阅读量143

点赞数

分类专栏：前端文章标签： javascript 前端 css3

于 2022-03-05 08:35:32 首次发布

本文链接：https://blog.csdn.net/Yan9_9/article/details/123289302

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

H5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			main{
				height: 600px;
				border: solid 1px red;
			}
		</style>
	</head>
	<body>
		<!-- H5新标签 -->
		<header>头</header>
		<main>主体
			<meter max="20" value="1">进度条</meter>
			<progress max="20" value="1"></progress>


		</main>
		<footer>底部</footer>
		<nav>导航</nav>
		<aside>侧导航</aside>

		<!-- 组合标签 -->
		<figure>图片
			<figcaption>图片标题</figcaption>
		</figure>
		
		
	</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>基本信息</legend>
            邮箱：<input type="email" name="" id=""><br>
            电话：<input type="tel" name="" id=""><br>
            网址：<input type="url" name="" id=""><br>
            数量:<input type="number" name="" id=""><br>
            搜索:<input type="search" name="" id=""><br>
            滑块:<input type="range" name="" id=""><br>
            时分秒：<input type="time" name="" id=""><br>
            日期框:<input type="date" name="" id=""><br>
            全部的日期：<input type="datetime-local" name="" id=""><br>
            月:<input type="month" name="" id=""><br>
            星期:<input type="week" name="" id=""><br>

            <!-- 下拉框 -->
            <!-- 需要id和list保持一致，如果value和文字不一样，下拉框会出现多个值 -->
            <input list="city">
            <datalist id="city">
                <option value="上海">上海</option>
                <option value="2">北京</option>
                <option value="郑州">郑州</option>
            </datalist>

            <!-- 新属性：
                placeholder:提示
                required:必填写
                pattern:匹配正则
                autofocus:加载完成时自动获得焦点
                tabindex:指定获取焦点的顺序
                accesskey='u'  默认alt+* 设置快捷键
                data-*=''    手动添加属性
            -->

            <!-- 多文件上传  以正文上传-->
            <input type="file" multiple>
        </fieldset>
    </form>
</body>
</html>

多媒体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 插入音频 -->
    <audio src=""></audio>
    <!-- 属性:
        src  路径
        controls  控制
        autoplay  自动播放
        loop    循环播放
    -->


    <!-- 插入视频 -->
    <video src=""></video>
    
    <video controls>
        <source src="">
    </video>

</body>
</html>

字体图标库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 字体图标
        1.去阿里/bootstrap字体图标库
        2.选中想要的图片，加入购物车，下载代码
        3.把生成的代码复制在style中，可以修改路径，引用哪个就把相对应的字体代码放标签里
        4.放大不失真，可以像字体一样调大小
    -->
</body>
</html>

喝西瓜汁的兔叽Yan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端路线--H5篇（day01）

H5<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> main{ height: 600px; border: solid 1px red; } </style> </head> <body> <!-- H5新标签 --&gt
复制链接

扫一扫