2019-07-12

续上：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 中增强表单标签

标签：

邮箱:

年龄:

滑动器:

搜索:

日期:

日期:

日期:

颜色:

网址:

H5中表单增强的属性

placeholder

autofocus:自动的获得焦点

max：最大值

  min：最小值

minlength:最小长度

maxlength:最大长度

第十五节：HTML5 中新增结构标签

在之前的HTML页面中，大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候，它只能猜测 你的某个Div内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解 决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

上图中我们非常清晰的看到了，一个普通的页面，会有头部，导航，文章内容，还有附着的右边栏，还有底部等模块，而我们是通过class进行区分，并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范，搜索引擎只能去猜测某部分的功能，另外就是此页 面程序交给视力障碍人士来阅读的话，文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况：

 

第十六节：HTML5中音频视频标签

改网页不支持媒体标签

改网页不支持媒体标签

   

width="300px" height="300px">

   

     

     

      改网页不支持媒体标签

（打开网页自动播放）

height="500px">

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里面，因为这个中的内容需要展现到用户面前的

  这个  (.css)文件是在外部定义好的文件直接建立csss文件就可以了

3、链接式 rel:当前的文档和引入的文档的关系

href:是指引入文档的关系

   

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