HTML5

最新推荐文章于 2024-05-11 14:58:05 发布
最新推荐文章于 2024-05-11 14:58:05 发布
阅读量704 收藏 3
点赞数 2
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suxiaomowang/article/details/119699838
版权

1.HTML语言

无论是html5还是html4...他们都是html语言

HTML5就是html这种网页标记语言的一个版本

HTML5网页标记语HTML5新增的标记和属性
        1.用于绘画的 canvas 元素
        2.用于媒介回放的 video 和 audio 元素
        3.对本地离线存储的更好的支持
        4.新的特殊内容元素，比如 article、footer、header、nav、section
        5.新的表单控件，比如 calendar、date、time、email、url、search

1.1HTML5 语义元素

HTML5 提供了新的语义元素来明确一个网页的不同部分 

HTML5 语义元素--语义元素 = 有意义的元素
当我们看到元素的名称之后，就能知道这个html元素的作用

语义元素：header    nav    section    article   aside     figcaption    figure   footer

例如：我们设置一个表头 

header 元素描述了网页内容的顶部区域

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="head" style="background-color: aquamarine;width: 100px;height: 50px;"> 
        </div><br />
		<header style="background-color: aquamarine;width: 100px;height: 50px;">
        </header>
	</body>
</html>

 可以看到俩个元素完成的效果完全相同，我们可以简单的认为HTML5语义元素<header></header>代替<div id="head"></div> 

由此可以说明 语义元素 就是一个带有名称的 div容器

nav 标签定义导航链接的部分 

footer 元素描述了文档的底部区域 

<div id="head" style="background-color: royalblue;width: 100%;height: 50px;"> 
</div><br />
<nav style="background-color: royalblue;width: 100%;height: 50px;">
</nav><br>
<footer style="background-color: royalblue;width: 100%;height: 50px;">
</footer>

我们可以看出nav，footer元素也是可以代替div的。

那么header，nav和footer都是一样可以代替div，为什么会有多个语义元素？

 可以看到所有的语义元素都有自己所负责的地方。

 大家可以看到其中 article 元素和 section 元素是嵌套关系。

article 标签定义独立的区域内容。

section 标签定义文档中的节（section、区段）

<article>
	    <h3>文章标题</h3>
			<section>
				<h4>第一节</h4>
				<p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
			</section>
			<section>
				<h4>第二节</h4>
				<p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
			</section>
			<section>
				<h4>第三节</h4>
				<p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
			</section>
</article>

 效果如下： 

 aside 标签定义页面主区域内容之外的内容（比如侧边栏）

<ul>
    <aside>
			<span>这是菜单</span> 
	</aside>
	<aside>
			<span>这是菜单</span> 
	</aside>
	<aside>
			<span>这是菜单</span> 
	</aside>
</ul>

 

                     aside是主区域内容之外的内容

figure 标签规定独立的流内容（图像、图表、照片、代码等等)
figcaption 标签定义figure元素的标题

<figure>
	 	<figcaption>我的相册</figcaption>
	 	<img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/>
	 	<img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/>
	 	<img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/>
</figure>

         以上这些语义元素都是块级元素 

 1.2HTML新增的元素

 details 用于描述文档或文档某个部分的细节
 summary 设置details元素的标题

<details open="open">
	 	<summary>我是details元素的标题</summary>
	 	<p>内容</p>
</details>

 目前，只有 Chrome 和 Safari 6 支持 details 标签。

 details 标签规定了用户可见的或者隐藏的需求的补充细节 

dialog 元素定义对话框，比如提示框 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function testdialog(){
			var open=document.getElementById("dialog1").open;
最低0.47元/天 解锁文章
Suxiaomowang
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5七天速成手册
12-21
html5七天速成手册
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
HTML 表单控件
好好学习
08-16 2560
表单标签 表单：用于采集用户输入的数据的，用于和服务器进行交互 form:用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围 属性：action：指定提交数据的URL method：指定提交方式 get/post 表单项中的数据要想被提交：必须指定其name属性 <form action="#" method="get"> 用户名：<input name="username"><br> 密码：<input name="password"&g
前端基础：html5表单元素包括的基本控件
qq_59463944的博客
09-27 840
前端基础：html5表单元素包括的基本控件 未询问原创转载，相关https://m.php.cn/article/486052.html https://m.php.cn/article/486052.html
HTML5为网页开发者提供了许多新的和增强的表单控件
最新发布
勤修方可得道成仙
05-11 307
H5，即HTML5，为网页开发者提供了许多新的和增强的表单控件，这些控件不仅提高了用户体验，还增强了表单的交互性和功能性。这些新的表单控件不仅提高了表单的可用性和用户体验，还使得开发者能够更轻松地创建出功能丰富、交互性强的网页应用。
HTML5-新增表单控件
AIMing_byte的博客
12-28 523
如果要把datalist控件提供的下拉列表绑定到某个文本框中，则必须将文本框的 list 属性的值设定为该datalist控件的 id。for 属性描述了计算中使用的控件与计算结果之间的关系。for属性的值规定一个或多个控件的 Id列表，要求以空格分隔。datalist控件要与option控件配合使用，每个option控件都必须设置其 value 属性的值。概念：output控件用于定义表单元素的输出结果或计算结果，比如计算或脚本输出。概念：datalist控件为文本框提供一个预定义的下拉列表。
HTML5作业(一)-----电子日历
无边热爱，来日方长
11-07 561
HTML5作业(1)-----电子日历
HTML5新特性
qq_43682422的博客
10-21 1407
HTML5新特性
html5手机版问卷
12-15
HTML5手机版问卷是一种基于Web技术实现的移动端调查工具，它利用HTML5的先进特性，为用户提供了一种在手机或平板电脑上填写问卷的便捷方式。本压缩包包含了一个基本的HTML5问卷模板，该模板设计简洁，易于理解和修改...
30个html5手机网站源码
02-28
HTML5手机网站源码是现代网页开发的重要组成部分，尤其对于初学者来说，这些源码提供了宝贵的实践和学习机会。在本篇文章中，我们将深入探讨HTML5在手机网站开发中的应用，以及通过分析30个不同的手机网站源码，你...
HTML5调用本地摄像头拍照
11-18
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中一项便是能够调用本地摄像头进行拍照。这一功能极大地丰富了网页应用的交互性，让用户无需离开页面就能获取和上传图片，常见于在线聊天、虚拟试衣间、证件...
HTML5 日历控件
02-02
HTML5的日历控件，目前运用在利用HTML5开发的IOS和Android系统中，可扩展性好；控件支持各种日期事件，界面优
HTML5-表单新功能 1.新增控件类型
elsyy良师益友的博客
11-10 1834
email输入类型   此类型要求输入格式正确的Email地址，否则浏览器是不允许提交的，并会有一个错误信息提示，此类型在opea中必须指定name值，否则无效。 URL输入类型   上面代码展示的文本域要求输入格式正确的URL地址，开始处添加http：// 日期时间相关输入类型       number输
用HTML5自制视频控件
maid_04的博客
12-17 2922
这两天学习了HTML5的视频音频，今天刚好完成了自制的视频控件。但是其中有一个小bug，音量只有最大和静音，，，，不过可以凑合看的，然后我今天晚上再试试写音量那块。。。 HTML部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link type="te
html5新增的表单控件
qq_45378970的博客
10-06 767
表单控件 表单新增的控件 表单中新增的控件(type属性) email: 提交表单时检测值是否是一个电子邮件格式 url: 提交表单时检测值是否是一个url格式 date: 年-月-日格式的控件 time: 时:分格式的控件 datetime: 年-月-日 时:分 格式的控件（UTC时间） datetime-local: 年-月-日 时:分 格式的控件（本地时间） month: 年-月格式的控件 week: 年-周数格式的控件 number: 数字输入框 <input type="
HTML表单及表单控件
eggplant_的博客
09-21 8594
1、form元素 action 表示当确认时将表单提交到一个地址（可以使确认地址或者相对地址） method 提交表单时的请求类型 （get或者post类型） get方式的请求 一般默认为它，比较小一般不超过2k。（不在浏览器中不受限制） post方式的请求 设置method=post 请求参数大小一般不受限制 name 表单的唯一名称 建议与属性一致 target URL 打开方式 ...
HTML5新控件 - 日期和时间选择输入
热门推荐
milijiangjun的博客
09-28 5万+
版权声明：本文为博主原创文章，未经博主允许不得转载。 HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历，供用户选择。 注意：目前只有Chrome和Opera提供下拉式日历支持，其它浏览器仍是一个普通文本框。 1，日期控件 - date type="date" value="2015-09-24"/>1 2，时间控件
HTML5表单新特征简介与举例
scoliver的专栏
03-09 868
原文地址：http://hi.baidu.com/luoruilqj/blog/item/f94a5b150ffb0543f3de320d.html 一、前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征、窍门和技术” 一文中就有所介绍（在第十一项），不过，有些遗憾的是，此部分的介绍是以视频形式展示的，其实，是视频还好啦，关键是TouTuBe视频，需要越狱
Jquery自定义扩展方法（二）--HTML日历控件
weixin_30540691的博客
02-01 170
一、概述 　　研究了上节的Jquery自定义扩展方法，自己一直想做用jquery写一个小的插件，工作中也用到了用JQuery的日历插件，自己琢磨着去造个轮子--HTML5手机网页日历控件，废话不多说，先看看效果图吧 效果图很简单，代码封装在JQuery中，网页端只需要要调用即可； 二、Jquery自定义实体对象 　　Jquery可以自定义函数function，有没有可以定义实体对象，里...
HTML5入门权威指南
"The Definitive Guide to HTML5" 是一本详细介绍HTML5的指南，由Apress出版。这本书旨在帮助读者从基础开始理解并掌握HTML5的相关技术，包括HTML元素、CSS3和JavaScript。书中的内容涵盖了HTML5的上下文、准备阶段...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值