文章目录
什么是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 |