(2020-10-20)一起学习H5

it2023-06-12  76

 H5的定义方式

告诉浏览器 当前文档 按照 H5的文档规范进行解析和展示。

<!DOCTYPE html>

认识 HTML5

前面我们学习的html 是什么? Html4.0

网页开发:   html 结构 4.0

Css ->样式   2.0

Js  行为 用户交互。

HTML5    是html4.0 升级版。

结构 Html5 、样式 css3 、行为: API 都有所增强。

HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本,更重要的是它制定了Web 应用开发的一系列标准,成为第一个将Web 做为应用开发平台的HTML 语言。

HTML5 定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas 我们可开发网页版游戏。

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

H5 范称:HTML + CSS3 + JS

语法规范:HTML5 在语法规范上也做了比较大的调整,去除了许多冗余的内容,书写规则更加简洁、清晰。

特点:更简洁;更宽松。

语义标签

语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表

<h1> ~ <h6>表示一系列标题等,在此基础上HTML5 增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML 页面内容。

传统的做法我们或许通过增加类名如class="header"、class="footer", 使HTML 页面具有语义性,但是不具有通用性。

<header></header>、<footer></footer>等,这样就可以使其具有通用性。 此章节学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。

传统网页布局: <!-- 头部 --> <div class="header"> <ul class="nav"></ul> </div> <!-- 主体部分 --> <div class="main"> <!-- 文章 --> <div class="article"></div> <!-- 侧边栏 --> <div class="aside"></div> </div> <!-- 底部 --> <div class="footer"></div> H5 经典网页布局: <!-- 头部--> <head> <ul class="nav"></ul> </header> <!-- 主体部分 --> <div class="main"> <!-- 文章 --> <article></article> <!-- 侧边栏 --> <aside></aside> </div> <!-- 底部 --> <footer></footer>

常用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 与 ul > li 做个比较

<mark> 表示标记 (带用“UI”,不怎么用)

<progress> 表示进度 (带用“UI”,不怎么用)

<time> 表示日期

最新回复(0)