【web前端阶段一】HTML巩固学习（持续更新）

天天Lotay

发布于 2022-12-01 08:24:07

4.5K0

发布于 2022-12-01 08:24:07

文章被收录于专栏：嵌入式音视频

一.什么是web前端

web前端就是提供数据交互的平台。具体有:html,css,js三个部分。

如果把前端比做写的一封信：

html（“描述”）就是写信用的笔；
css（为“描述”添加样式）就是写信用的墨水和信纸；
js（为“描述”添加行为）就是这封信所具有的功能，比如“给女孩表白”的功能。

1.交互思想如何让用户看到数据（how to see）

接上面的把前端当做一封信的假设

<!DOCTYPE html >就是一张信封上的邮票
<html>就是信封 – <head>就是信封上的收信人，寄信人，即信封上的内容 ---- <title>就是标题 ---- <meta charset=“UTF-8”> – <body>就是信封内的内容

2.交互思想如何让用户更舒服的看到数据（how to comfortable）

在<head>中加入<style> 添加css样式，如：对齐，大小，高度，宽度，颜色，布局，圆角

3.交互思想如何让用户称为数据的主人（how to be lord）

<body>中加<script> 添加js实现交互，将数据传递给用户，用户又将操作的信息传递给网站

二.HTML

(1).什么是web前端

可视化数据
美观的UI
可操作，具有交互功能
易于用户理解，通俗易懂

(2).怎么学好web前端

是否感兴趣：你是喜欢直观表达出来（适合前端），还是喜欢抽象的表达（逻辑方面，适合编程之类）
是否可以长期坚持做一件事情（解决问题的能力）
乐观向上的生活态度（对用户负责）
设身处地的考虑用户的使用（同理心）
勇于探索，旺盛好奇心（保持学习）

1.webstorm的使用

菜单栏常用FILE下（通常操作关于文件、工程）

New Project创建工程
New  会弹出一个列表供选择要创建的类型
Open  打开一个项目
Save As  将当前页面另存为
Reopen Project  近几次打开的项目列表
Close Project  点击后回到欢迎页面上
Rename Project  它修改的不是当前项目的文件夹名，而是文件夹目录下.idea的以iml结尾的文件，这个是项目的名字。rename后观察iml文件名的变化。
settings  常用设置
Exit   退出Webstorm

---

(1).webstorm常用配置

如何更改主题（字体&配色） file->setting->editor->colors&fonts->scheme选择你的主题（darcula）
如何让webstorm启动的时候不打开工程文件 file->settings->Appearance&Behavior->System settings 去掉reopen last project on startup（在启动的时候总是打开最后的工程）
如何完美显示中文 file->settings->appearance中勾选override default fonts by(not recommended)，设置name:NsimSum,Size:12 (appearance外观选项，选中“重写默认字体”，设置名字为NsimSum，它是windows下的宋体字，字号12)。这里设置的是整个IDE显示的文字，包括菜单列表的字。你可以试着把它改成英文，那样再在菜单项中看，中文有的会不正常显示，变成小方块了。
如何显示行号在代码显示区的左边右击选择“show line number”。
如何代码自动换行 file-settings-editor->general-> “use soft wraps in editor” 打上钩，代码就自动换行了。

(2).webstorm快捷键

TAB 自动补全
复制当前行 ctrl+d
删除当前行 Ctrl+y
注释当前行|取消注释 ctrl+/
注释多行|取消注释 ctrl+shift+/
撤销 ctrl+z
同时编辑 alt
新建多个 ∗
包含关系 >

2.html简介

(1).HTML是什么

超文本标记语言（HyperText Mark-up Language ）
用来设计网页的标记语言
用该语言编写的文件，以 .html或 .htm为后缀
由浏览器解释执行
不区分大小写，建议小写

(2).HTML标签标签

HTML用于描述功能的符号成为“标签”
标签都封装在一对尖括号“<…>”之中,如<html>就是一个标签
封闭类型标记（也叫双标记），必须成对出现,如<p></p>
非封闭类型标记，也叫作空标记，或者单标记，如<br/>

(3).HTML 元素

指的是从开始标签（start tag）到结束标签（end tag）的所有代码

某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性

(4).HTML属性与值

属性是用来修饰元素的 – 属性必须位于开始标签里 – 一个元素的属性可能不止一个，多个属性之间用空格隔开 – 多个属性之间不区分先后顺序
每个属性都有值 – 属性和属性的值之间用等号链接 – 属性的值包含在引号当中 – 属性总是以名称/值对的形式出现

(5).注释

为代码添加适当的注释是一种良好的编程习惯
注释标签不支持任何属性
语法：
“<！–"和“–>"之间的任何内容都不会显示在浏览器中
注释不可以嵌套在其他注释中

3.htm基本骨架

<!DOCTYPE html><！--文档类型声明-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title><！--文档标题，一个网页只能有一个标题-->
</head>
<body>

</body>
</html>

<head lang="en">

lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，还有常见的值是zh-CN，代表了中文。（这样写让搜索引擎知道你的这个站点是中文还是英文网站）

<meta charset="UTF-8">

meta标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式 GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准,GBK编码专门用来解决中文编码的,是双字节的。UTF－8 编码是用以解决国际上字符的一种多字节编码。

(1).什么是DTD文档模型，为什么写在HTML当中？

DTD文档模型也称DOCTYPE文档声明，它是Document Type Definition（文档类型定义）的英文缩写，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。注：它不是HTML标签。 DTD文档模型=DOCTYPE=DOCTYPE文档声明

(2).html和xhtml的区别

XHTML是HTML向XML的一个过渡语言，在最初W3C组织希望把HTML变成更为严谨的标记语言（如XML），但HTML的已经应用的太为广泛，全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨，基本标签都还是沿用了HTML，但废除了“表现层”的标签，同时要求标签的严格嵌套，标签结束等等。

4.基本结构中的属性

<html>定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

<html>
<head>
	<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
</body>
</html>

标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>。

<title>：

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。
title写和你网页相关的关键词有利于SEO优化

<html>
<head>
	<title>我会显示在收藏栏里</title>
</head>
    <body>...</body>
</html>

**<meta>**可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。常见的meta有:

Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="Lotay,csdn,前端,html">

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

<meta name="description" content="Lotay,csdn,前端,html">

author作者标注网页的作者

<meta name="author" content="root,root@xxxx.com">

5.基本元素

标签	作用
<p></p>	段落标签
<hn></hn>	段落标签（n为1-6）
<br/>	换行标签
<hr/>	水平线标签
<span></span>	无语义标签

(1).字体样式标签

加粗：<strong>…</strong>或者<b>…</b>
斜体：<em>…</em>或者<i>…</i> 
中划线：<s>…</s>或者<del></del>

标签	描述
<b></b>	粗体
<u></u>	下划线
<i></i>	斜体
<strong></strong>	加重语气
<em></em>	着重
<del></del>	删除
<small></small>	`小号
<sup></sup>	上标
<sub></sub>	下标
<ins></ins>	插入

(2).特殊符号

特殊符号	字符实体
空格
大于符号（>）	>
小于符号(<)	<
引号（"）	"
版权符号@	©

<hr>：

在 HTML 页面中创建一条水平线。可以在视觉上将文档分隔成各个部分。

属性：

align：水平对齐方式，默认居中
width：水平线的长度，可取像素（px）和百分比（%）
size：水平线的高度
color：颜色

示例——使水平线在页面中间显示，它的宽度为页面的50%

<hr align="center" width="50%" />

<pre></pre>： 被包围在 pre 元素中的文本通常会保留空格和换行符示例——用pre定义有换行的文本

<body>：
	<pre>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
	</pre>
</body>

6.图片标签

使用元素将图像添加到页面
空标记
必须属性：src（存储图像的位置）
常用属性：width，height，alt，title

<img src="URL" width="300" alt=”替换文本属性”/>

title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的 alt当图片未能正常显示时，用于给用户的提示信息

比如下面的，图片,文本,超链接的显示并对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work2</title>
    <style>
        p{
            text-align:center;
            font-size: 50px;
            color: aliceblue;
        }
        .a1{
            color: antiquewhite;
            font-size: 30px;
        }

    </style>
</head>
<body bgcolor="#4fa286">
<div align="middle">
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=546572147,4046548459&fm=26&gp=0.jpg"
         width="40%" alt="无法找到图片"  >
</div>
<p class="p1">今天用Forest在尚学堂坚持学习了5个小时，我真棒！</p>
<div align="middle"><a href="https://www.forestapp.cc/" class="a1" >你好呀，我是Forest的官网</a></div>

</body>
</html>

7.相对路径和绝对路径

8.超链接

1.使用<a></a>元素创建一个超链接 2.语法：

<a href=""  target=""  title=””>文本</a>

href属性：链接URL target属性：目标，可取值_blank,_self等 name属性：锚点名称 title属性：定义了鼠标经过时的提示文字

9.锚点定位

  <a href="#锚点名">目录</a>
                1.id="锚点名"
                2.<a  name="锚点名"></a>

10.文本格式化标签

<hr>: 1. align 水平对齐方式属性值：left center right 2. width 水平线的宽度 3. size 水平线的高度 4. color 颜色

<pre></pre> 预文本标签被包围在 pre 元素中的文本通常会保留空格和换行符

如下，用pre定义有换行的文本：

<body>
	<pre>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
	</pre>
</body>

11.块级元素和行内元素

块级元素独占一行，行内元素在同一行显示
块级元素默认宽度为100%，行内元素由内容撑开
块级元素可以设置宽高，行内元素不可以设置宽高
块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用
块级元素默认的display为block，行内元素的display为inline
块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本
常见的块级元素有h1-h6，p，div等，行内元素有a，em，b，i，u等

12.列表

列表标签

1.在 html 页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用 2.列表分为两类：一是无序列表，一是有序列表

标签	描述
<ul>	定义无序列表
<ol>	定义有序列表
<dl>	自定义列表
<li>	列表项目的标记

无序列表和有序列表

(1).无序列表

<ul>    
    <li>第一项</li>           
    <li>第二项</li>
    <li>第三项</li>
</ul>

<ul><li>的属性type 拥有的选项

disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

比如下面是一个超链接水平导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 10px;
            overflow: hidden;
            background-color:#74b8fc;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color:blue;
        }
    </style>

</head>
<body>
<div>
    <ul>
        <li><a href="https://www.itbaizhan.cn/dashboard.html">&nbsp;&nbsp;学习中心&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/live.html">&nbsp;&nbsp;直播课&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/vips">&nbsp;&nbsp;价格&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/teacher/">&nbsp;&nbsp;师资&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/trainings">&nbsp;&nbsp;实操&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/questions">&nbsp;&nbsp;问答&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/about/question">&nbsp;&nbsp;常见问题&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/about/example">&nbsp;&nbsp;百战故事&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/course/update">&nbsp;&nbsp;课程更新&nbsp;&nbsp;</a></li>
        <li><a href="https://www.itbaizhan.cn/abouts">&nbsp;&nbsp;关于我们&nbsp;&nbsp;</a></li>
    </ul>
</div>
</body>
</html>

(2).有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<ol><li>的属性type 拥有的选项

1 表示列表项目用数字标号（1,2,3…）
a 表示列表项目用小写字母标号（a,b,c…）
A 表示列表项目用大写字母标号（A,B,C…）
i 表示列表项目用小写罗马数字标号（i,ii,iii…）
I 表示列表项目用大写罗马数字标号（I,II,III…）

自定义列表

<dl>
    <dt>第1项</dt>
    <dd>注释1</dd>
    <dt>第2项</dt>
    <dd>注释2</dd>
    <dt>第3项</dt>
    <dd>注释3</dd>
</dl>

定义列表默认为两个层次，第一层为列表项标签<DT>，第二层为注释项标签<DD>

13.表格

(1).表格基本结构

标签	作用
< table>	表格
<tr>	行，只能包含<td>或<th>元素定义单元格
<td>	单元格
<caption>	表格标题
<th>	表格页眉的单元格
<thead>	表格头
<tbody>	表格的主体
<tfoot>	表格脚

如下，2行2列表格代码示列：

<body>
<table border="1" width="300">
    <caption>表格标题</caption>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>
</body>

(2).表格常用属性

属性	描述	说明
width	表格的宽度
height	表格的高度
align	表格在页面的水平摆放位置
background	表格的背景图片
bgcolor	表格的背景颜色
border	表格边框的宽度（以像素为单位）	表格默认没有边框
bordercolor	表格边框颜色	当border> = 1时起作用
cellspacing	单元格之间的间距
cellpadding	单元格内容与单元格边界之间的空白距离大小

(3).表格行和列常用属性

表格行的常用属性

表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>

属性	描述
height	行高
align	行内容的水平对齐
valign	行内容的垂直对齐
bgcolor	行的背景颜色

表格列的常用属性

一个表格有几列组成就要有几个列标签<td>

属性	描述
width/height	单元格的宽和高
align	设置水平对齐方式，可取值left，center，right
valign	设置垂直对齐方式，可取值top，middle，bottom
bgcolor	单元格的背景颜色
colspan	设置单元格跨列
rowspan	设置单元格跨行

(4).合并单元格

属性	描述
colspan	跨列合并
rowspan	跨行合并

需要注意：

如果合并行（rowspan），需在相应的位置减一个
如果合并列（colspan ），需在相应的位置减一个

如下，合并一个2行2列表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并单元格</title>
</head>
<body>
<table border="1px" width="300px" height="300px" align="center">
    <tr>
        <td bgcolor="#ffc1cb"></td>
        <td rowspan="2" bgcolor="#0000ff"></td>
    </tr>
    <tr>
        <td bgcolor="#8b2ae3"></td>
    </tr>
</table>
</body>
</html>

—

14.Iframe框架

Iframe（Inner Frame）内联框架 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 iframe是属于内联框架，它是body的子级，和body是父子关系。 iframe作为一个普通元素放在body里

属性

width 可设置内联框架的宽
height 可设置内联框架的高
name 设置框架名称
src 设置页面的路径
scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）
frameborder规定是否显示框架周围的边框（1默认有边框,0）

15.表单作用

表单在网页中主要负责数据采集功能，它用标签定义。用户输入的信息都要包含在form标签中，点击提交后，和里面包含的数据将被提交到服务器或者电子邮件里。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。

(1).post和get区别：

数据提交方式，get提交的数据在浏览器的url可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据
get最多提交1K数据，post理论上没有限制
get提交的数据在浏览器历史记录中，安全性不好

单行文本框<input type="text" >默认值是type=“text”
密码框<input type="password"/>
单选按钮<input type="radio" name=””/>
复选框<input type="checkbox"/>
隐藏域<input type="hidden"/>
文件上传<input type="file"/>
下拉框<select>标签 — <select><option value="1">北京</option></select>
多行文本<textarea></textarea>
提交按钮<input type="submit"/>
普通按钮<input type="button"/>
重置按钮<input type="reset"/>

文件

<input type="file"/>

属性：

name:定义控件名称

使用file类型的input时要注意以下几点

form表单的method属性值要为post
form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。默认地，表单数据会编码为 “application/x-www-form-urlencoded”，不能用于文件上传

 <form action="" method="post" enctype="multipart/form-data">
	<input type="file" name="file1"/>
 </form>

16.文本框和密码

文本框

<input type="text" />

属性：

name:定义控件名称
value：指定控件初始值

密码框

<input type="password" />

属性：

name:定义控件名称
value：指定控件初始值

17.单选按钮和复选框

(1).单选按钮

<input type="radio" />

属性：

name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中

(2).复选框

<input type="checkbox"  />

属性：

name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中

18.按钮组

19.下拉列表

select属性：

name:此列表框的名字
multiple：多选，不用赋值
size :规定下拉列表中可见选项的数目(显示几行)
disabled:规定禁用该下拉列表

option属性：

selected ：用来指定默认的选项
value：用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value 属性来获得该区域选中的数据项的

20.多行文本和 lable标签

多行文本框

<textarea></textarea>

属性：

cols ：这文字区块的宽度
rows ：这文字区块的行数，即其高度

<textarea name="" id="" cols="30" rows="10"></textarea>

21.表单域

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

表单标签的格式:

  <form action＝"url" method=get|post name="myform" ></form>

name：表单提交时的名称
action：提交到的地址
method：提交方式，默认为get

一个完整的表单包含三个基本组成部分： 表单标签、表单域、表单按钮。

(1).表单标签

是指<form>标签本身，它是一个包含表单元素的区域，使用定义

(2).表单域

是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）

(3).表单按钮

用来提交<form>表单中的所有信息到服务器

*表单域和表单按钮都属于表单元素。

三.HTML5

1.html5新增类型

电子邮件类型

功能描述：输入E-mail地址的文本框语法：<input type="email"/> 注意：输入的内容中必须包含"@"，"@"后面必须具有内容

搜索类型

功能描述：输入搜索关键字的文本框语法：<input type="search"/>

URL类型

功能描述：输入WEB站点的文本框语法：<input type="url"/> 注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型

功能描述：预定义的颜色拾取控件语法：<input type="color"/>

数字类型

功能描述：只能接受数字语法：属性：min：当前域能接受的最小值 max：当前域能接受的最大值 step：决定了域所接受值递增或递减的步长，默认为1

日期类型

功能描述：创建一个日期输入域语法：<input type="date" />

周类型

功能描述：与date类型相似，但只能选择周语法：<input type="week" />

月份类型

功能描述：与date类型相似，但只能选择月份语法：<input type="month" />

2.html5新增属性：div标签和span标签

placeholder 作用：默认提示语法：<input type="text" placeholder="请输入用户名"/>

multiple 作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用语法：<input type="email" multiple/>

autofocus 作用：自动获取焦点语法：<input type="text" autofocus/>

required 作用：防止域为空提交表单时语法：<input type="text" required/>

minlength和 maxlength 作用：定制元素允许的最小字符数和最大字符数语法：<input type="text" minlength="6" maxlength="18"/>

min和max 作用：定制元素允许的最小数字和最大数字语法：<input type="number" min=”0” max=”100”/>

3.html5新增结构标签

常见的html5新增语义化标签

header 页面头部
footer 页脚
article 定义页面独立的内容区域
aside 定义页面的侧边栏内容
details 文档某个部分的细节
summary 是details中的标题
figure 规定独立的流内容
figcaption 是figure的标题
mark 标记
nav 导航链接
meter 用来表示范围已知且可度量的内容。
ruby 加注释

HTML5新增的结构标签

<header>...</header> 头部

<nav>...</nav> 导航

<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分

<aside>...</aside> 侧边栏

<footer>...</footer>页脚

<article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

4.datalist标签

<details> 标签用于描述文档或文档某个部分的细节 IE不支持 <details> 标签

<details>
	<summary>details中的标题</summary>
	<p>详细的内容</p>
</details>

5.视频和音频

视频

<video> </video>标签 <video> 标签定义视频，比如电影片段或其他视频流

<video src="movie.mp4" controls>
	您的浏览器不支持 video 标签。
</video>

支持的3种格式：

mp4
ogg 移动端
webM 高清

音频

<audio></audio>标签 <audio> 标签定义声音，比如音乐或其他音频流

<audio src="someaudio.mp3">
		您的浏览器不支持 audio 标签。
</audio>

6.embed标签

<embed/>标签 <embed> 标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音 <embed> 标签必须有 src 属性

<embed src="helloworld.mp4" />

7.canvas标签

<canvas> </canvas> 标签 canvas只是个容器，你可以通过控制坐标在canvas上绘制图形。一般canvas配合js使用能实现非常复杂的动画效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>画布</title>
    <style  type="text/css">
        canvas{
          background-color: gray;
        }
    </style>
</head>
<body>
    <!--
    canvas标签：
        1.canvas必须配合js在网页上绘制图像
        2.画布是一个矩形区域，我们可以控制其每一个像素
        3.canvas拥有多种绘制路径、矩形、圆形...

      颜色的表示方式：
        1.直接用颜色名称:"red"  "green"
        2.十六进制颜色值："#eeeeff"
        3.rgb(1-255,1-255,1-255)
      属性：
         fillStyle 填充绘画的颜色、渐变或模式
         strokeStyle  用于笔触的颜色、渐变或模式
         shadowColor  用于阴影颜色
         shadowOffsetX 水平距离偏移量
         shadowOffsetY  垂直距离偏移量
         shadowBlur    模糊级别
     方法：
      getContext():返回一个对象，这个方法封装了很多的绘图方法和属性。
            但是现在只能提供2d的绘画环境。
     rect():创建矩形。
    fillRect():绘制填充的矩形
    createLinearGradient()：创建线性渐变
    addColorStop():  渐变对象中颜色和停止位置

    -->
    <canvas id="mycanvas" width="400px"  height="400px">
        您的浏览器版本太低
    </canvas>
    <script type="text/javascript">
    //js代码块
    var canvas=document.getElementById("mycanvas");
    var obj=canvas.getContext("2d");

    // var colorobj= obj.createLinearGradient(0,0,100,0);
    var colorobj=obj.createRadialGradient(50,50,10,50,50,50);
    colorobj.addColorStop(0,"red");
    colorobj.addColorStop(0.5,"blue");
    colorobj.addColorStop(1,"green");
    //obj.rect(0,0,100,100);
    obj.shadowColor="rgb(11,25,9)";
    obj.shadowOffsetX=3;
    obj.shadowOffsetY=3;
    obj.shadowBlur=5;

     obj.fillStyle=colorobj;
    obj.strokeStyle="green";
     obj.fillRect(0,0,100,100);
      obj.strokeRect(100,100,100,100);
    </script>
</body>
</html>

四.个人小练

1.div布局（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局练习2</title>
    <style>
        .c1{
            background: #a8c8df;
            height: 150px;
            line-height: 75px;
        }
        .c2{
            background: #e6e8f4;
            height: 50px;
            line-height: 25px;
        }
        p {
            text-align:center;
            font-size: 30px;
        }
        .c3{
            background:#1c56a0;
            height: 300px;
            clear: both;
            line-height: 150px;
        }
        .left,.zhong,.right{
            width: 33.333%;
            height: 400px;
            float: left;
            line-height: 400px;
            text-align: center;
        }
        .left{
            background: #a8bdda;
        }
        .zhong{
            background: #b5d6e5;
        }
        .right{
            background: #276da8;
        }
    </style>
</head>
<body>
<!------------------------------>
<div class="c1">
    <p >头部</p>
</div>
<!------------------------------>
<div class="c2" >
    <p>导航</p>
</div>
<!------------------------------>
<div class="left">
    <p>左边</p>
</div>

<div class="zhong">
    <p>中间</p>
</div>

<div class="right">
    <p>右边</p>
</div>
<!------------------------------>
<div class="c3">
    <p>足部</p>
</div>
<!------------------------------>
</body>
</html>

2.div布局 (2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局练习3</title>
    <style>
        .c1{ background: #a8c8df;
            height: 400px;
            line-height: 200px;}
        .c2{ background: #e6e8f4;
            height: 200px;
            line-height: 100px;}
        .c3,.c4{height: 200px;
            line-height: 100px;
            width: 50%;
            float: left;
            text-align: center;}
        .c3{ background:#1c56a0;}
        .c4{ background: #a8bdda;}
        p{text-align:center;
            font-size: 30px;}
        .t1,.t2{width: 50%;
            float: left;}
    </style>
</head>
<body>
<div class="t1">
    <div class="c1"><p>左</p></div>
</div>
<div class="t2">
    <div class="c2"><p>上</p></div>
    <div class="c3"><p>左下</p></div>
    <div class="c4"><p>右下</p></div>
</div>
</body>
</html>