续上：HTML的讲解：
第十三节：HTML5介绍
13.1发展历史图
1超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
[if !supportLists]1. [endif]HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
[if !supportLists]2. [endif]HTML 3.2——1997年1月14日，W3C推荐标准
[if !supportLists]3. [endif]HTML 4.0——1997年12月18日，W3C推荐标准
[if !supportLists]4. [endif]HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
[if !supportLists]5. [endif]HTML 5——2014年10月28日，W3C推荐标准[4]
第十四节：H5 中增强表单标签
标签：
<form>
<!--邮箱-->
邮箱: <input type="email" />
<!--数字-->
年龄: <input type="number" />
<!--滑动器-->
滑动器: <input type="range" />
<!--搜索框-->
搜索: <input type="search" />
<!--日期的框-->
日期: <input type="date" />
<!--日期的框-->
日期: <input type="week" />
<!--日期的框-->
日期: <input type="month" />
<!--颜色-->
颜色: <input type="color" />
<!--网址-->
网址: <input type="url" />
</form>
H5中表单增强的属性
placeholder
autofocus:自动的获得焦点
max：最大值
min：最小值
minlength:最小长度
maxlength:最大长度
第十五节：HTML5 中新增结构标签
在之前的HTML页面中，大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候，它只能猜测 你的某个Div内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解 决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。
上图中我们非常清晰的看到了，一个普通的页面，会有头部，导航，文章内容，还有附着的右边栏，还有底部等模块，而我们是通过class进行区分，并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范，搜索引擎只能去猜测某部分的功能，另外就是此页 面程序交给视力障碍人士来阅读的话，文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况：
<!--头部模块-->
<header></header>
<!--中间提示-->
<nav></nav>
<!--中间的展现-->
<div class="center">
<div class="login">
</div>
</div>
<!--底部模块-->
<footer></footer>
第十六节：HTML5中音频视频标签
<!--引入音频的标签-->
<audio src="img/1.mp3" controls="controls">
改网页不支持媒体标签
</audio>
<audio>
<source src="img/1.mp3"></source>
<source src="img/1.ogg"></source>
改网页不支持媒体标签
</audio>
<!--引入视频的标签-->
<video src="img/movie.mp4" controls="controls"
width="300px" height="300px"></video>
<video>
<source src="img/movie.mp4"></source>
<source src="img/movie.ogg"></source>
<source src="img/movie.webm"></source>
改网页不支持媒体标签
</video>
<!--多媒体标签 --> （打开网页自动播放）
<embed src="img/1.mp3"></embed>
<embed src="img/movie.mp4" width="500px"
height="500px">
</embed>
CSS 入门
第一节：css介绍
1、为什么学习 CSS（CSS 的作用）
【1】HTML虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观。
【2】HTML进行网页的书写重复的代码比较多，后期的维护性不好。
2、什么是 CSS（CSS 的概念）
英文全称：Cascading Style Sheets 层叠样式表（级联样式表）
是一种对web文档添加样式的简单机制，属于表现层的布局语言。
第二节：引入CSS样式
1.行内式 style=“key:value;”style="font-size:30px;color: yellow;"
2、内嵌样式 这个style标签写建议写到head里面，因为这个中的内容需要展现到用户面前的
<style>
/*选择器 */
span{
/*字体的大小*/
font-size: 30px;
/*字体的颜色*/
color: red;
/*字体的样式*/
font-family: 宋体; <style>
/*选择器 */
span{
/*字体的大小*/
font-size: 30px;
/*字体的颜色*/
color: red;
/*字体的样式*/
font-family: 宋体;
}
</style>
这个 (.css)文件是在外部定义好的文件直接建立csss文件就可以了
3、链接式 rel:当前的文档和引入的文档的关系
href:是指引入文档的关系
<link rel="stylesheet" href="css/css.css"/>
CSS 中三种引入方式遵循的就近原则 ：
不相同的样式会进行样式的叠加，相同的样式会采用就近的原则。样式跟随距离自己近的风格
第三节：CSS选择器
常用选择器1:
标签选择器
p{
color: red;
}
id选择器
id:(唯一性)
id命名：数字、字母、下划线、中划线（-），不能用数字开头
#p_1{
font-size: 30px;
color: yellowgreen;
}
class选择器
.p_2{
font-weight: bold;
color: yellow; }
三种选择器的优先级：
id选择器>class选择器>标签选择器
常用选择器2:
后代选择器 只要包含该标签对象即可
div span{
font-size: 27px;
font-family: 宋体;
color: red;
}
子选择器 直系子标签
div>span{
color: red;
}
兄弟选择器 只会改变下面相邻的元素对象
#p_1+p{
color: green;
}
子选择器和后代选择器的区别
子选择器只会修饰与显示标签相同的所有父标签衍生的子标签，后代标签修饰与显示标签相同的父标签衍生的所有标签。
兄弟选择器 只会改变下面相邻的元素对象
#p_1+p{
color: green;
}
兄弟选择器 后面所有的兄弟对象都会改变
#p_1~p{ color: red; font-size: 30px;}
伪类选择器 :鼠标选择所指的地方为设置的样式
a:hover{
color: red;
}
第五节：CSS常用属性1
字体：(1)字体的颜色:color (2) 字体的大小:font-size (3) 字体的加粗：font-weight（4）字体的风格：ont-family（5）字体倾斜font-style
文本（text） (1) 下划线展示text-decoration: underline(2) 去除下划线text-decoration: none; (3)文本居中text-align: center;
边框border(1)颜色border-color（2）宽度border-width （3）风格border-style
（1）行高 line-height（2）设置背景图片： background-image:（3）设置背景图片不重复background-repeat: no-repeat;（4）调整背景图片的位置 background-position: center;（5）background-size: 宽 高；（6）*背景颜色background-color: rgba(255,0,0,.5);red #f0000 rgb(255,0,0) rgba(255,0,0,.5){包含透明度}
行内元素：（多个标签位于同一行）
span font 小标签 img a 等
块元素：（标签可以自动换行的元素是块元素）
div h1-h6 ul p 等
调整透明度的属性opacity: 透明度（0-1）;
超出隐藏 hidden
