文章目录
01 Ready?
1-1 HTML5是啥啊
HTML5 的设计目的是为了在移动设备上支持多媒体。
HTML5 还引进了新的功能，可以真正改变用户与文档的交互方式。
- 新变化：
- 标签变化： DTD ， 新增的标签， 删除的标签， 重定义标签
- 页面布局：新的页面布局， 区别和意义
- 属性变化：Input， 表单属性， 链接属性， 其他属性
Q1: HTML5为什么不引入DTD
Q2: DTD 是啥？
DTD：规定的规则，HTML是W3C使用XML定义html标签规范
HTML5不基于SGML，所以不需要引用DTD
快捷键 ! + Ctrl + E：基本框架
新增标签：
1. 结构标签：
块状元素：有意义的div
| 标签 | 作用 |
|---|---|
<article> |
标记一篇文章 |
<header> |
定义一个页面或 |
<nav> |
导航栏 |
<section> |
定义一个区域 |
<aside> |
侧边栏 |
<hgroup> |
标题管理 |
<figure> |
定义一组多媒体（图片，视频）内容 |
<figcaption> |
figure标题 |
<footer> |
定义一个页面 |
<dialog> |
标记一个对话框（会话框） |
- header / section / aside / article / footer 最好不用嵌套
- header / section / footer 级别最高 > aside / article / figure / hgroup / nav > div / figcaption
2. 多媒体标签
标签意义：意味着富媒体的发展 以及 支持不使用插件情况下即可操作媒体文件
三类：
| 标签 | 作用 |
|---|---|
<video> |
视频 |
<audio> |
音频 |
<source> |
媒体资源 |
<canvas> |
定义图片（JS炫酷） |
<embed> |
定义外部的可交互的内容或插件，如flash |
3. Web应用标签
- 状态标签
实时状态显示：天气、其他
任务过程：加载
- 列表标签
| 标签 | 作用 |
|---|---|
<datalist> |
为input标记定义一个下拉列表，配合option，比select人性化 |
<details> |
标记定义一个元素的详细内容，配合summary，隐藏内容 |
4. 其他标签
- 注释标签
| 标签 | 作用 |
|---|---|
<ruby> |
定义注释或音标 |
<rt> |
标记定义对ruby的注释内容文本（拼音：读音，音标） |
<rp> |
只对不兼容的显示，不要放在rt内 |
| 标签 | 作用 |
|---|---|
<mark> |
强调：黄色 |
<output> |
配合JS函数输出 |
删除标签：
分层：HTML结构层， CSS表现层
向下兼容，实际也可以使用这些标签
-
纯表现的标签
Basefont、big、center、font、 s 、strike、tt、u -
可用性产生负面影响的元素：用iframe完成，网页中的网页
frame、frameset、noframes -
产生混淆的元素
acronym、applet、isindex、dir
重定义标签
| 标签 | 新含义 |
|---|---|
<b> |
内联文本，通常是粗体，没有强调的意义 |
<i> |
内联文本，通常是斜体，没有强调的意义 |
<dd> |
可以同details与figure一同使用，定义包含文本，dialog也可用 |
<dt> |
可以同details与figure一同使用，汇总细节，dialog也可用 |
<hr> |
不仅是水平线，还表示主题结束，分割线 |
<menu> |
重新定义用户界面的菜单，配合command或者menuitem使用 |
<small> |
小字体，例如注释或者法律条款 |
<strong> |
表示重要性而不是强调符号 |
其他标签属性
- 链接属性：
size：根据不同的分辨率，引入不同的size
<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
target：
<!--将所有链接改为新页面打开blank-->
<base href="url" target="_blank"> //默认_self
media=""：归类链接指向的对象，handheld 手持设备，tv 电视
hreflang=“zh”：语言设置：中文
rel=“external”：设置超链接的引用：外部引用（插入外链）
<link rel="stylesheet" href="CSS文件的URL" type="text/css">
- script标签属性：
defer: 加载完脚本不执行，页面渲染完再执行，只兼任IE浏览器
async：加载完脚本立即执行，双线程（同时加载），所有浏览器都兼容
<script defer="defer" src="URL"> </script>
<script async="async" src="URL"> </script>
- ol有序列表：
start：起始值（序号）
reversed：倒叙排列
<ol start="5" reversed="reversed">
<li>1</li>
<li>2</li>
</ol>
- html：
manifest=“cache.manifest” ：定义页面离线应用文件
<html manifest="index.manifest">
<!--将index.html\index.css\index.js离线到本地，断网也可访问-->
style:
scoped：内嵌CSS (最好分离出表现层)
1-2 通用的 HTML5 页面结构
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>标题 1</h1>
<h3>标题 3</h3>
</header>
<!-- <nav> 标签定义导航链接的部分 -->
<nav</
最低0.47元/天 解锁文章
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
