jquery > jquery教程 > jquery教程 > HTML5前端内容

HTML5前端内容

551

作者：管理员; 发布时间：2020/5/22 10:17:42; 评论数：0
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=1711

HTML技术梳理

HTML 简介

什么是HTML？

HTML 标签

认识一下简单的HTML 文档

HTML 基础标签

HTML 元素

HTML 属性

常用标签大全

认识 XHTML

HTML5 新玩法

IE 问题

语义化

新的表单控件

媒体

Canvas

新的 API

HTML 简介

什么是HTML？

HTML 是用来描述页面的语言

HTML 指的是超文本标记语言——(是一套标记标签)

HTML 不是一种编程语言而是一种标记语言

HTML 使用标记标签来描述页面

HTML 标签

HTML 标记标签被称为 HTML 标签

HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如和

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

认识一下简单的HTML 文档

<!DOCTYPE html>

<html>

<title>Document</title>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>

</html>

HTML 基础标签

HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签到结束标签的所有代码。

开始标签元素内容结束标签

< p >这是一个段落< /p >

< a href="#" >这是一个超链接< /a >

< br / >

HTML 属性

属性为 HTML 元素提供附加信息。

属性示例 1 ：

HTML 链接由< a >标签定义，链接的地址在 href 属性中指定：

// href="www.baidu.com"为属性

属性示例 2 ：

HTML 标题由< h1 >标签定义，使得标题在页面居中

<h1 align="center">居中排列标题</h1>

属性示例 3 ：

HTML 标题由< body >标签定义，页面的背景颜色

<body bgcolor="blue">页面的颜色为蓝色</body>

适合于绝大多数的HTML元素的属性：

属性值描述

classclassname规定元素的类名

id定义一个id规定元素的唯一 id

stylecss代码规定元素的行内样式

title值规定元素的额外信息

常用标签大全

1. HTML 标题

标题是通过 < h1 > - < h6 > 等标签进行定义的。

< h1 > 定义最大的标题

< h6 > 定义最小的标题。

2. HTML 段落

段落是通过 < p > 标签定义的。

// 段落独占一行是块级元素

<p>这是一个段落，可以写好多内容</p>

3. HTML 格式化

定义很多供格式化输出的元素，比如粗体和斜体字。

// 缩写和首字母缩写鼠标移至缩略词语上时展示完整语句

双标签描述字体效果描述

< b >定义粗体文本

< strong >定义加重语气效果和加粗差不多

< big >定义大号字比一般的大一些

< small >定义小号字比一般的小一些

< i >定义斜体字

< em >定义着重文字倾斜一点没有 i 的斜度

< sub >定义下标字字体大小一半位置在下方

< sup >定义上标字字体大小一半位置在上方

< ins >定义插入字字体有下划线

< del >定义删除字字体中间有删除线

< pre >定义预格式文本标签内写的代码，只会显示纯文本

< abbr >定义缩写代码块有解释

< dfn >或< acronym >定义首字母缩写代码块有解释

< address >定义地址标签内部专门写地址内容

< bdo >定义文字方向标签内容，编译后会倒着显示

< q >定义短的引用引用其他网址的内容

< blockquote >定义长的引用有一属性值 cite=‘网址’

< cite >定义著作的标题以斜体显示元素内容

4. HTML CSS

如何使用样式

在HTML文档中会使用CSS代码

外部样式表

<head>

</head>

内部样式表

<head>

<style>

p {margin-left: 20px}

</style>

</head>

行内样式

这是一个段落

</p>

HTML 链接

点击链接可以从一张页面跳转到另一张页面

链接语法：

// href 属性描述了链接的目标

target属性：

// target 属性设置为 "_blank", 链接将在新窗口打开

命名锚的语法：

// 点击链接可以跳转显示div id=3的内容

HTML 图片

插入图片和 src属性：

// url 指存储图像的位置

Alt属性：

// alt浏览器无法载入图像时，Alt属性显示字体

7. 表格

如何在HTML创建表格

标签描述

< table >定义表格

< thead > < tbody > < tfoot >划分表格区域

< th >定义表格的表头

< tr >定义表格的行

< td >定义表格单元

< caption >定义表格标题

< colgroup >定义表格列的组

< col >定义用于表格列的属性

colspan=“2”单元格跨两列合并

rowspan=“2”单元格跨两行合并

cellspacing=”1“单元格和单元格之间的距离

cellpadding=”2“单元格内容和单元格边框之间的距离

border-collapse: collapse单元格边框重叠的部分去除

// 上述示例

var foo = 'bar';

8. HTML 列表

HTML 支持有序、无序和定义列表

无序列表

// 每列前面有小黑圈

<ul>

</ul>

有序列表

// 每列前面为数字 1 2 3

<ol>

</ol>

定义列表

<dl>

<dd>它是红色的</dd>

<dd>它是黄色的</dd>

</dl>

9. HTML 块

块级元素在浏览器显示时，通常会以新行来开始（和结束）

例子：< h1 >, < p >, < ul >, < table >

内联元素在显示时通常不会以新行开始

实例: < b >, < td >, < a >, < img >

HTML < div > 块级元素

HTML < span > 内联元素

10. HTML 表单

HTML 表单用于搜集不同类型的用户输入

双标签/ type值描述属性

< from >表单域

< input >创建表单type=” “

submit提交

reset重置

radio单选框

checkbox多选框

button

text文本框

< select >定义下拉表单

< option >下拉表单中的选项

< textarea >文本域

11. Iframe 内联框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

iframe语法：

// frameborder 属性用于定义iframe表示是否显示边框

<iframe

src="demo_iframe.htm"

width="200"

height="200"

frameborder="0"></iframe>

11. HTML 字符实体

在 HTML 中不能使用小于号（<）和大于号（>）等，这是因为浏览器会误认为它们是标签。

用实体字符来代替各种符号

显示结果描述实体名称

空格 ;

<小于号< ;

>大于号> ;

&和号& ;

"引号" ;

’单引号&apos ; (IE不支持)

￥人民币¥ ;

?版权© ;

?注册商标® ;

?商标&trade ;

×乘号× ;

÷除号÷ ;

HTML 换行

< br />使标签后的元素另起一行显示

// 显示在页面上会是三行内容

<p>我是一行显示<br />我是二行显示<br />我是三行显示</p>

HTML 水平线

< hr />元素可用于分隔内容

// 页面显示水平的一条横线是个单标签

<hr />

HTML 注释

用来解释某块代码的作用注释内容不被显示

条件注释

// 条件注释定义只有 IE中执行的 HTML 标签

<!--[if IE 8]>

.... some HTML here ....

<![endif]-->

// 如果 ie 8 注释不起作用不然注释起作用

认识 XHTML

什么是 XHTML？

XHTML 指的是可扩展超文本标记语言

XHTML 是更严格更纯净的 HTML 版本

XHTML 是以 XML 应用的方式定义的 HTML

XHTML 得到所有主流浏览器的支持

1. XHTML - 元素

语法规则

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

XHTML 元素必须小写

XHTML 文档必须有一个根元素

元素必须正确嵌套

// 正确嵌套方式

<b><i>标签与标签相互嵌套</i></b>

元素必须始终关闭

// 双标签必须成对出现

<h1>这是一个一级标题</h1>

<p>这是一个段落</p>

单标签也必须关闭

// 单标签后面的斜杠别忘了

换行标签 <br />

水平分割线<hr />

插入一张图片<img src="happy.gif" alt="Happy face" />

元素必须小写

// 错误的

<BODY>

<p>这是一个段落</p>

</BODY>

// 这是正确的的

<body>

<p>这是一个段落</p>

</body>

2. XHTML - 属性

属性 - 语法规则

属性必须使用小写

属性值必须用引号包围

属性最小化也是禁止的

XHTML 属性必须使用小写

//这是错误的：

// 这是正确的：

XHTML 属性值必须用引号包围

// 这是错误的：

// 这是正确的：

禁止属性简写

// 这是错误的：

// 这是正确的：

HTML5 新玩法

IE 问题

Internet Explorer 8 以及更早的版本，不兼容html5语法

<!DOCTYPE html>

<head>

<title>Document</title>

// IE9 的早期版本会读取它（并理解它）

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

语义化

HTML5 提供的新元素可以构建更好的文档结构

标签描述

< header >头部标签

< nav >导航栏标签

< article >内容标签

< section >块级标签

< aside >侧边栏标签

< footer >尾部标签

< bdi >定义与其他文本不同的文本方向

< details >定义用户可查看或隐藏的额外细节

< dialog >定义对话框或窗口

< figure >定义自包含内容，比如图示、图表、照片、代码清单等等

< main >定义文档的主内容

< mark >定义重要或强调的内容

< menuitem >定义用户能够从弹出菜单调用的命令/菜单项目

< meter >定义已知范围（尺度）内的标量测量

< progress >定义任务进度

< section >定义文档中的节

< summary >定义 < details> 元素的可见标题

< time >定义日期/时间

< wbr >定义可能的折行（line-break）

新的表单控件

type表单值描述

email限制用户输入必须为Email类型

url限制用户必须为URL类型

date限制用户输入必须为日期类型

time限制用户输入必须为事件类型

month限制用户必须为月类型

week限制用户输入必须为周类型

number限制用户输入必须为数字

tel手机号码

search搜索框

color生成颜色选择表单

表单属性

属性名称值描述

requiredrequired表单拥有该属性表示其内容不能为空，必填

placeholder提示文本表单的提示信息，存在默认值将不显示

autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单

autocompleteoff / on显示出在字段中填写的选项默认已经打开，如autocomplete=“on” 关闭autocomplete=“off” 需要放在表单内同时加上name属性同时成功提交

multiplemultiple可以多选文件提交

媒体

音频 audio

三种音频格式 : Ogg vorbis / Mp3 / Wav

属性值描述

autoplayautoplay如果出现该属性则音频在就绪后马上播放

controlscontrols如果出现该属性，则像用户显示控件，比如按钮播放

looploop如果出现该属性，则每当音频结束时重新开始播放

srcurl要播放的音频的URL

语法：

// 单个文件语法

// 多个播放设置

</audio>

视频 video

三种视频格式 : Ogg / MPEG4 / WebM

属性值描述

autoplayautoplay视频就绪自动播放

controlscontrols向用户显示控件播放

widthpixels（像素）设置播放器宽度

heightpixels（像素）设置播放器高度

looploop播放完是否继续播放该视频，循环播放

preloadproload / auto(预先加载视频) ./ none（不应加载视频）规定是否预加载视频（如果有了autoplay就忽略该属性）

srcurl视频url地址

posterimgurl加载等待的画面图片

mutedmuted静音播放

语法：

// 单个语法

// 多个播放设置

</video>

如果您觉得本文的内容对您的学习有所帮助：

关键字：HTML5

相关文章：

HTML5前端内容

文章分类 / Classification

文章分类 `/ Classification`