一.什么是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下（通常操作关于文件、工程）
代码语言：javascript复制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基本骨架
代码语言：javascript复制<!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).字体样式标签
代码语言：javascript复制加粗：<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%
代码语言：javascript复制<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当图片未能正常显示时，用于给用户的提示信息
比如下面的，图片,文本,超链接的显示并对齐：
代码语言：javascript复制<!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.锚点定位
代码语言：javascript复制 <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定义有换行的文本：
代码语言：javascript复制<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).无序列表
代码语言：javascript复制<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ul><li>的属性type 拥有的选项
- disc 默认实心圆
- circle 空心圆
- square 小方块
- none 不显示
比如下面是一个超链接水平导航栏：
代码语言：javascript复制<!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"> 学习中心 </a></li>
<li><a href="https://www.itbaizhan.cn/live.html"> 直播课 </a></li>
<li><a href="https://www.itbaizhan.cn/vips"> 价格 </a></li>
<li><a href="https://www.itbaizhan.cn/teacher/"> 师资 </a></li>
<li><a href="https://www.itbaizhan.cn/trainings"> 实操 </a></li>
<li><a href="https://www.itbaizhan.cn/questions"> 问答 </a></li>
<li><a href="https://www.itbaizhan.cn/about/question"> 常见问题 </a></li>
<li><a href="https://www.itbaizhan.cn/about/example"> 百战故事 </a></li>
<li><a href="https://www.itbaizhan.cn/course/update"> 课程更新 </a></li>
<li><a href="https://www.itbaizhan.cn/abouts"> 关于我们 </a></li>
</ul>
</div>
</body>
</html>
(2).有序列表
代码语言：javascript复制<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…）
自定义列表
代码语言：javascript复制<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列表格代码示列：
代码语言：javascript复制<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列表格
代码语言：javascript复制<!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"/>
文件
代码语言：javascript复制<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.文本框和密码
文本框
代码语言：javascript复制<input type="text" />属性：
- name:定义控件名称
- value：指定控件初始值
密码框
代码语言：javascript复制<input type="password" />属性：
- name:定义控件名称
- value：指定控件初始值
17.单选按钮和复选框
(1).单选按钮
代码语言：javascript复制<input type="radio" />属性：
- name:定义控件名称
- value：指定控件初始值
- checked：设置控件初始状态是否被选中
(2).复选框
代码语言：javascript复制<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.表单域
表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
代码语言：javascript复制 <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）
代码语言：javascript复制<!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)
代码语言：javascript复制<!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>
