百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

HTML5入门

myzbx 2024-12-11 15:59 22 浏览

什么是HTML5

官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等 Web 应用的功能。

广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合

HTML 5发展时间表

由上面图可知：现在的HTML5还不是一个最终统一的版本，所以说HTML5用在手机端的开发。

目前支持HTML5的浏览器

不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准。（现在处在一个推广阶段），但是大部分是一样的。

HTML5的特点

更简单

标签语义化

语法更宽松

多设备跨平台

自适应网页设计

从头说起——文档的声明

Xhtml1.0的页面架构

Html5的页面架构

HTML5标签的语义化

在以前的html中，盒子用div或span。

在html5中，标签的最大变化是标签都有了语义，以前的div和span都没有语义，仅仅表示一个盒子。

<header> 头标签

<nav> 导航标签

<aside> 侧边栏标签

<article> 文章标签

<footer> 页脚

<section> 章节，页眉，栏目

HTML5新增的表单三个属性

1、required：必填属性

2、placeholder：默认显示内容

3、autofocus：自动获取焦点

Html5中新增input标记的type属性

属性描述
email邮件
date日期
url网址格式
number数字
range范围
color颜色

完整代码

<form>

邮件：<input type="email" name="email"><br>

日期：<input type="date" name="mydate"><br>

网址：<input type="url"><br>

手机号：<input type="number"><br>

亮度：<input type="range" min="0" max="255"><br>

颜色：<input type="color"><br>

地址：

<select>

<optgroup label="北京">

<option>西城区</option>

<option>东城区</option>

</optgroup>

<optgroup label="天津">

<option>河西区</option>

<option>河东区</option>

</optgroup>

</select><br>

搜索车型：<input type="text" list="car">

<datalist id="car">

<option>奥迪</option>

<option>奥拓</option>

<option>大众</option>

</datalist>

<input type="submit" value="提交">

</form>

Range调背景色

代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

//当页面准备完毕的时候

$(document).ready(function(e) {

$('input').change(function(e) {

var red=$('#red').val(); //得到红色的值

var green=$('#green').val(); //得到绿色的值

var blue=$('#blue').val(); //得到蓝色的值

var value=$(this).val(); //当前修改的值

$(this).next().html(value); //将值付给当前修改元素后面的span

$('body').css('background-color','rgb('+red+','+green+','+blue+')');

});

});

</script>

</head>

<body>

红色：<input type="range" id="red" min="0" max="255" value="255"><span>255</span><br>

绿色：<input type="range" id="green" min="0" max="255" value="255"><span>255</span><br>

蓝色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>

</body>

</html>

音频播放

第一种写法

如果声音的格式html5不支持，就显示标记之间的提示信息

第二种写法：

视频播放

使用video标记来插入视频 autoplay表示自动播放，controls表示显示控制面板。

360音乐导航

完整代码如下:

<style type="text/css">

#nav{

list-style-type:none; /*去掉无序列表前面的点*/

margin:50px auto 0px; /*上边界50px,左右居中，下边界为0*/

width:960px; /*整个导航的宽度*/

height:38px;

color:#333;

font-size:14px;

padding:0px; /*填充清0*/

overflow:hidden; /*超出尺寸的部分不显示*/

}

#nav li{

width:105px;

height:36px;

float:left; /*所有的li从左到右排列*/

text-align:center; /*文字居中对齐*/

line-height:38px; /*设置行高，目的是让文字垂直居中*/

border-top:#C9CBCE solid 1px;

border-left:#C9CBCE solid 1px;

border-bottom:#C9CBCE solid 1px;

cursor:pointer; /*光标移动到li上变成手形*/

}

#nav li:last-child{ /*#nav下的最后一个li*/

border-right:#C9CBCE solid 1px;

}

#nav .liclick{

border-top:#54B82A solid 2px;

border-bottom:none;

}

#nav span{

width:100%;

height:38px;

display:block; /*只有块显示标记才能设置宽度和高度*/

position:relative; /*相对定位，目的为了span可以移动*/

z-index:-1; /*设置span上下层的顺序，让它在文字的下面*/

}

</style>

<script src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {

//点击li

$('#nav li').click(function(e) {

$('.liclick').removeClass('liclick');

$(this).addClass('liclick');

});

//每个li下面添加一个底色

var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];

$('#nav li').append('<span>');

$('#nav span').each(function(index, element) {

$(this).css('background-color',color[index]);

});

//移动到li上的时候颜色色块升起

$('#nav li').hover(function(){

$(this).children('span').animate({'top':-38},200);

//获得当前li的索引编号

var index=$(this).index();

$('audio').get(index).play(); //播放第index个音乐

},function(){

$(this).children('span').animate({'top':0},200);

});

});

</script>

</head>

<body>

<ul id="nav">

<li>我的主页</li>

<li>新闻头条</li>

<li>电 视 剧</li>

<li>最新电影</li>

<li>小 游 戏</li>

<li>小说大全</li>

<li>旅游度假</li>

<li>今日团购</li>

<li>品牌特卖</li>

</ul>

<audio src="360music/m1.mp3"></audio>

<audio src="360music/m2.mp3"></audio>

<audio src="360music/m3.mp3"></audio>

<audio src="360music/m4.mp3"></audio>

<audio src="360music/m5.mp3"></audio>

<audio src="360music/m6.mp3"></audio>

<audio src="360music/m7.mp3"></audio>

<audio src="360music/m8.mp3"></audio>

<audio src="360music/m9.mp3"></audio>

</body>

相关例题：http://pan.baidu.com/s/1hsDGA8k 密码：55ic

相关推荐

Django零基础速成指南:快速打造带用户系统的博客平台

#python##服务器##API##编程##学习#不是所有教程都值得你花时间！这篇实战指南将用5分钟带你解锁Django核心技能，手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点

这款Bootstrap半越狱工具终于更新，离上一次更新已相隔很久，现在推出1.2.9版本，主要为内置两点功能进行更新，也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的，建议你更新。注意！...

iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具

本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的，想体验半越狱的果粉，请继续往下看。--知识点科普--Bootstrap...

SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统

今日推荐：SpringBoot整合工作流引擎Acticiti的源码推荐理由：1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

SpringCloud自定义Bootstrap配置指南

在SpringCloud中自定义Bootstrap配置需要以下步骤，以确保在应用启动的早期阶段加载自定义配置：1.添加依赖（针对新版本SpringCloud）从SpringCloud2020...

Python使用Dash开发网页应用(三)（python网页开发教程）

PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容，例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用，很大的一个原因是不熟悉...

Oxygen XML Editor 27.1 中的新功能

OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中，AIPositronAssistant得到了增强，包括用于...

【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力

一、结论写在前面论文提出了Mini-Gemini，一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围，发掘VLM的潜在能力。其核心是补...

谐云课堂 | 一文详解分布式改造理论与实战

01微服务与分布式什么是分布式？首先，我们对上图提到的部分关键词进行讲解。单体，是指一个进程完成全部的后端处理；水平拆分，是同一个后端多环境部署，他们都处理相同的内容，使用反向代理来均衡负载，这种也叫...

基于Abaqus的手动挡换挡机构可靠性仿真

手动挡，也称手动变速器，英文全称为Manualtransmission，简称MT，即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置，改变传动比，从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

【pytorch】目标检测:彻底搞懂YOLOv5详解

YOLOv5是GlennJocher等人研发，它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型，其参数量依次上升，当然了其效果也是越来越好。从2020...

超实用!50个非常实用的PS快捷键命令大全分享

今天，给大家介绍50个非常实用的快捷键命令大全，大家伙都是设计师，关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键：正常(Shift+Option+N)，正片叠底(Shif...

Pohtoshop中深藏不露的小技巧（科目一考试技巧记忆口诀看完必过）

邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧，可以帮助到大家在设计时减少不必要的麻烦，提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美，可以...

Ganglia监控安装总结（监控安装工作总结）

一、ganglia简介：Ganglia是一个跨平台可扩展的，高性能计算系统下的分布式监控系统，如集群和网格。它是基于分层设计，它使用广泛的技术，如XML数据代表，便携数据传输，RRDtool用于数据...

谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能

AdobeXD的美化栏具有将设计视图美化的功能，它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...

一周热门
最近发表
标签列表