HTML5一些心得

最新推荐文章于 2022-07-26 20:15:27 发布

270年前

最新推荐文章于 2022-07-26 20:15:27 发布

阅读量179

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_49344258/article/details/108802138

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、H5新增得语义化标签

1.什么是语义化？

即标签有了自己得含义，我们通过标签就能判断内容。

2.语言话标签有什么好处？

使得HTML页面结构更加明了清晰，且可读性增加，又便于团队的维护和开发。而且，更加有利于搜索引擎或者辅助设备理解 HTML页面的内容，这样搜索引擎可根据标签语言确定上下文、权重的关系。

二、H5常用的一些语义化标签

<header>：定义页面或内容的头部区域;

<nav>：定义页面导航;

<main>表示页面的主体内容（一个页面只能使用一次）

<time>：定义日期和时间

<main>表示页面的主体内容（一个页面只能使用一次）

<section>用于对网站和页面内容分块，划分单独的模块区域

<article>独立的文章展示

<aside>页面中的附属侧边信息

<mark>元素突出显示以表示引用的内容，或者突出显示与用户当前活动相关的内容，他不同于en或strong元素

<progress>元素用于定义一个进度条，有max（完成值）和value（进度条当前值）两个属性。

等等

三、H5的一些新增的属性值

1.<video>表示一段视频并提供播放的用户界面,属性值为：

.src:资源路径 .contorls:如果出现该属性，则向用户显示控件

.autoplay如果出现该属性，则视频在就绪后立刻播放

.loop：重复播放属性 .muted:静音属性 .poster规定视频正在下载时显示的图像，直到用户点击播放按钮

2.<hidden>

<hidden>属性是布尔属性。如果设置该属性，它规定元素仍未或不再相关。浏览器不应显示已规定 hidden 属性的元hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性使此元素可见。

四、标签

HTML5 新的 Input 类型:HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

<input>标签的常用属性：email ,url,number,range,Date pickers (date, month, week, time, datetime, datetime- local),search,color等等

五、HTML5新的元素

1.新的表单元素

datalist
keygen
output

2.新的form属性

autocomplete
novalidate

3.新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

案例：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input{
				width: 90%;
			}
			
			
		</style>
	</head>
	<body>
		<fieldset style="width: 400px; margin: auto;">
			<legend>学生档案</legend>
			姓名：<br>
			<div class="cc">
			<input type="text" placeholder="请输入你的姓名" /><br>
			手机号码：<br>
			<input type="tel" placeholder="1" /><br>
			邮箱地址：<br>
			<input type="email" placeholder="1"/><br>
			所属学校：<br>
			<input type="text" placeholder="1"/><br>
			入学成绩：<br>
			<input type="number" placeholder="0" /><br>
			基础水平：<br>
			<!--<input type="range"  placeholder="10" /><br>-->
			<meter style="width: 380px;height: 35px;" value="0.5"></meter><br>
			入学日期：<br>
			<input type="datatime" value="2020-02-03" placeholder="" /><br>
			毕业时间：<br>
			<input type="date"  /><br>
			课程进度：<br>
			<input type="range"  /><br>
			<input type="button" value="保存" style="width: 100%; background-color: green; color: white;" />
			
			</cc>
			
		</fieldset>
		<audio autoplay="autoplay">
			<source src="video/F:\无损音乐\新建文件夹/"></source>
		</audio>
	</body>
</html>

270年前

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5一些心得

一、H5新增得语义化标签1.什么是语义化？即标签有了自己得含义，我们通过标签就能判断内容。2.语言话标签有什么好处？使得HTML页面结构更加明了清晰，且可读性增加，又便于团队的维护和开发。而且，更加有利于搜索引擎或者辅助设备理解 HTML页面的内容，这样搜索引擎可根据标签语言确定上下文、权重的关系。二、H5常用的一些语义化标签<header>：定义页面或内容的头部区域;<nav>：定义页面导航;<main>...
复制链接

扫一扫