2019.6.22 Web全栈开发学习笔记（五）

SkywalkerHD

已于 2023-06-29 10:03:50 修改

阅读量244

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： HTML HTML5 前端 CSS CSS3

于 2019-07-24 11:58:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44363959/article/details/97108463

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了HTML5和CSS3的新特性及其应用。包括HTML5语义化标签如<header>、<nav>、<section>等，新增的<figure>、<time>等标签，内嵌媒体内容的方法以及表单验证的新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day 5

第五天我们进入了HTML5和CSS3的学习，作为下一代标准，H5和C3加入了很多新的功能以及标签。以下是今天所学的内容。

课程内容

一、HTML语义化元素

< header>
< header>元素描述了文档的头部区域，主要用于定义内容的介绍展示区域。
< nav>
< nav> 标签定义导航链接的部分，用于定义页面的导航链接部分区域。
< section>
< section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
< article>
< article> 标签定义独立的内容。.
< aside>
< aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。内容应与主区域的内容相关。
< footer>
< footer> 元素描述了文档的底部区域，应该包含它的包含元素，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

二、H5中的新标签

< figure>
< figure>标签规定独立的流内容（图像、图表、照片、代码等等）。内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
< figcaption>
< figcaption> 标签定义 < figure> 元素的标题，元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
< mark>
部分文本高亮显示
< time>
时间标签
< address>
“Example .com” 的联系信息
< menu>
菜单标签
< progress>
表示一个进度条

项目的下载进度是：
<progress value="20" max="100"> </progress>

< meter>
表示一个度量

<p>11月份个人工作完成进度：</p>
<p>付强：
  <meter value="9" optimum="100"         high="90" low="10" max="100" min="0"> </meter>
  <span> 9% </span>
  </p>
<p>张红：
  <meter value="60" optimum="100"         high="90" low="10" max="100" min="0"> </meter>
  <span> 60% </span>
</p>
<p>王林：
  <meter value="91" optimum="100"         high="90" low="10" max="100" min="0"> </meter>
  <span> 91% </span>
</p>

三、H5中的视频和音频

视频

< video  controls="controls"  width="300“ >
	<source src="move.ogg" type="video/ogg" >
	<source src="move.mp4" type="video/mp4" >
	您的浏览器暂不支持video标签。播放视频 
</ video >

H5目前支持的视频格式：ogg ， webm ， mp4
视频属性：
controls 控件
width 宽
height 高
autoplay自动播放
poster 加载等待画面图片
src 视频路径
loop 是否循环

音频

< audio controls="controls"  >
	<source src="happy.MP3" >
	<source src="happy.ogg" >
	您的浏览器暂不支持audio标签。播放音频 
</ audio>

H5目前支持的音频格式：ogg ， wav ， mp3
音频属性：
controls 控件
autoplay自动播放
src 音频路径
loop 是否循环
preload 是否在页面加载后提前加载音频（视频）

四、表单验证

用于验证用户在填写表单时，格式、长度等是否符合规范。

< form action=”提交目标地址”　id=”name” method=”get/post” novalidate>< /form>
邮箱：< input type="email" form=”name”/>    
网址：< input type="url"/> 
日期：< input type="date"/> 
时间：< input type="time"/>
月：< input type="month"/>
周： < input type="week"/>
年龄： < input type="number"/>
比例：< input type="range"/>
查找： < input type="search" results="n"/>
字体颜色： < input type="color"/>

一些属性：
novalidate 　表示禁止浏览器自动验证
required　　必填项
autocomplete　　自动填充功能　（注意添加name值）
autofocus　　　自动聚焦
Pattern 　正则表达式