平凡前端之路_01.HTML与 HTML5

什么是HTML?

HTML 语言用于描述网页。


HTML 是指超文本标记语言: Hyper Text Markup Language
HTML 不是一种编程语言,而是一种标记语言
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML 文档也叫做 web 页面

HTML发展

2014年,HTML 5标准最终面世。


HTML 2.0——1995年11月,RFC 1866发布
HTML 3.2——1997年1月14日,W3C发布推荐标准
HTML 4.0——1997年12月18日,W3C发布推荐标准
HTML 4.01——1999年12月24日,W3C发布推荐标准
HTML 5——2014年10月28日,W3C发布推荐标准

HTML结构

只有 <body> 标签中的内容会显示在浏览器中。


HTML的结构一般包括 <head>标签和 <body>标签, <head>和 <body>这2个标记符分别表示网页的头部和正文。

1.<head>头部中可包含页面的标题、关键词、描述说明等内容。

头部本身不作为内容来显示,但影响网页显示的效果。

在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种 meta 元数据信息。

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件

2. <title> 标签定义了文档的标题

浏览器会以特殊的方式来使用标题,并且通常放置在浏览器窗口的标题栏或状态栏上。

当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

3. <link> 标签定义了文档与外部资源之间的关系

<link> 标签通常用于链接到样式表。

4. <meta>标签通常用于提供有关页面的元信息。

<meta>指定网页的描述(description),关键词(keywords),文件的最后修改时间(revised),作者(author),和其他元数据。

5. <body>标签定义文档的主体

<body> 标签包含文档的所有展示内容。,有且只有一个。

HTML标签

HTML 标签通常是成对出现的。


HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词,比如 <html>。
HTML 标签通常是成对出现的,比如 <b>和 </b>。
标签对中的第一个标签是开始标签,第二个标签是结束标签。
开始和结束标签也被称为开放标签和闭合标签。
某些 HTML 元素具有空内容(empty content),在开始标签中进行关闭(以开始标签的结束而结束)。

HTML元素

一个 HTML元素包含了开始标签与结束标签。


1. 块级元素和内联元素

块级元素内联元素
所有块级元素占用全部宽度,不能和其他元素共享一行所有内联元素只占用必要的宽度,默认和其他元素在同一行
可以根据盒模型特性设置宽高内外间距,如果不设置宽度,则默认填充父级元素的宽度不遵循盒模型特性设置,宽高只和内容有关
内部可以继续容纳其他元素。包括:div、dl、h系列、hr、ul、li、ol、table、p等内部只可以继续容纳其他内联元素
常见的块级元素 :div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl常见的行内元素:span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code

2. 既是内联元素又是块级元素

既希望元素具有宽度高度特性,又具有同行特性。
每一行所有的inline-block元素会共同形成一个line box。
line box的高度由里面最高的元素决定,不会与下一行的列表元素发生错位。

什么是 HTML5?

HTML5 是下一代 HTML 标准。


HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 受包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等主流浏览器的支持。

关于文档类型声明及DTD

<!DOCTYPE>是标准通用标记语言的文档类型声明,有助于在浏览器中正确地显示网页。

HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML)。


HTML5声明HTML 4.01声明
< ! DOCTYPE html ><! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

HTML5结构标签

标签描述
<header>标记定义一个页面的页眉信息。
<nav>定义导航链接的部分。
<section>定义文档中的节(section、区段)。
<aside>定义页面的侧边栏内容。
<article>定义页面独立的内容区域。
<hgroup>标记定义文件中一个区块的相关信息
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义 <figure> 元素的标题。
<dialog>定义对话框,比如提示框。
<footer>定义 section 或 document 的页脚。

HTML5的Canvas

canvas 画布,帆布。是在 HTML5 页面中用于展示绘图效果的图形容器。
拥有多种绘制路径、矩形、圆形、字符以及添加图像、保存图像的方法。(通过脚本绘制图像,通常是 JavaScript。)
可以用于绘制图表、制作简单的以及不那么简单的动画。
支持变形转换,支持操作旋转、扭曲、缩放和移动。
甚至可以制作游戏。

HTML5音频多视频媒体

视频

兼容性
safari支持mp4、不支持webm和ogv。
ie8(包含)以下都不支持 video 标签。
ie9 支持 video 标签(但只支持 mp4 )。

<video>
属性描述
src设置或返回视频的多媒体资源的值。
autoplay设置或返回是否在就绪(加载完成)后随即播放视频。
controls设置或返回视频是否应该显示控件(比如播放/暂停等)。
loop设置或返回视频是否应在结束时再次播放。
width设置或返回视频的 高度属性的值。
height设置或返回视频的 宽度属性的值。
poster设置或返回视频的 海报封面属性的值。
muted设置或返回是否关闭声音。

音频

兼容性
safari支持mp3和wav、不支持ogg。
JS中new Audia() 等同于 html 上加一个 标签。
chrome和opera不能自动播放,需要一个页面元素上的交互才可以。
width / height 属性没有作用,必须使用 style 标签里面的样式去控制它。

<video>
属性描述
src设置或返回音频的多媒体资源的值。
autoplay设置或返回是否在就绪(加载完成)后随即播放音频。
controls设置或返回音频是否应该显示控件(比如播放/暂停等)。
loop设置或返回音频是否应在结束时再次播放。
width设置或返回音频的 高度属性的值。
height设置或返回音频的 宽度属性的值。

HTML5重定义标签

标签描述
<b>代表内联文本,通常是粗体,没有传递表示重要的意思
<i>代表内联文本,通常是斜体,没有传递表示重要的意思
<dd>可以同details与figure一同使用,定义包含文本,dialog也可用
<dt>可以同details与figure一同使用,汇总细节,dialog也可用
<hr>表示主题结束,而不是水平线,虽然显示相同
<small>表示小字体,例如打印注释或者法律条款
<strong>表示重要性而不是强调符号

HTML5其他标签

标签描述
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<canvas>代表位图区域,画布。
<details>用于描述文档或文档某个部分的细节。
<summary>标签包含 details 元素的标题。
<svg>定义一个嵌入式矢量图。
<wbr>规定在文本中的何处适合添加换行符。

HTML5表单属性

属性描述
autocomplete自动完成,适用于<form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range, color。
autofocus自动地获得焦点,适用于所有 <input> 标签的类型
multiple可选择多个值,适用于<input>中type为email和file
placeholder默认占位符,适用于<input>中type为:text, search, url, telephone, email, password
required规定不能为空,适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file

HTML5新增属性

属性描述
contenteditable规定是否可编辑元素的内容。
contextmenu指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
draggable指定某个元素是否可以拖动
dropzone指定是否将数据复制,移动,或链接,或删除
hidden规定对元素进行隐藏。

HTML 知识题


题目答案
HTML5 的正确 doctype 是?<!DOCTYPE html>
在 HTML5 中,onblur 和 onfocus 是:事件属性
在 HTML5 中,哪个方法用于获得用户的当前位置?getCurrentPosition()
HTML5 全局属性,“contenteditable” 用于定元素内容是否是可编辑的。
在 HTML5 中,contextmenu 和 spellcheck 是:HTML 属性
由 SVG 定义的图形是什么格式的?XML
HTML5 内建对象用于在画布上绘制:getContext
在 HTML5 中,head与header哪个不是在页面中显示的?head
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值