HTML+CSS概述

 结构：HTML——用于描述页面的结构

 HTML（Hypertext Markup Language）超文本标记语言 ,在纯文本编辑器中编辑的东西就是纯文本（纯文本编辑器中编辑只能编辑文本，不能编辑图片，比如WebStrom、记事本等等）

表现：CSS——用于控制页面中的元素样式

行为：JavaScript——用于响应用户操作

HTML简述

1.标签：

• 成对出现的标签

  <h1>你好呀</h1>
  <p>像这样两边都有一样的字符就叫成对标签</p>
  
  <img herf="这里是放的连接"/>
  <input/>
  
  //像上面这样的后面两行就是只有一个<>并且字符并不是成对出现的就叫做自结束标签

• 自结束的标签

2.注释：帮助程序员理解代码，而不在前端显示

• 单行注释  //

eg：//这就是单行注释

• 多行注释 /* */

eg:/*这就是多行注释*/

注意多行注释不能嵌套使用

3.进制：（学计算的必学的内容，我就不详细讲了）

4.字符编码：所有数据在计算机中都是以二进制的形式进行存储的

• 丫丫在路上——>10111101（数据转化为进制为编码）
• 10111101——>丫丫在路上（进制转化为数据为解码）

5.字符集：编码和解码所对照的规则就称为字符集（在我们开发过程中一般是使用UTF-8：万国码，包含很多国家的编码规则）

6.乱码：编码和解码采用的不是同一个字符集

7.实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格，如下图所示

 

 很明显的可以看出，即使我们在文本编辑器中，无论打多少个空格，最终浏览器显示的也是一个空格

同样有时候，在HTML中存在一些我们不能直接书写的特殊符号，eg:多个连续的空格，字母两侧的大于和小于号，那么如果我们在网页中需要这些特殊的符号的话我们应该怎么办呢？

其实我们可以运用实体语法来解决这一问题，如下：

空格：&nbsp

大于号：&gt

小于号：&lt

让我们来看一下列子吧：

上述给的三个实体语法万万不够，别急，看看下面的

8. meta

注意charset：用于指定字符集

        keyword:网页关键字的模糊查询

        description：网页的描述

        http-equiv：点击网页网页跳转到其他页面

 9.块元素和行内元素

块元素：在网页中一般他用过块元素对页面进行布局

行内元素：主要用来包裹文字

一般情况：

    块元素中什么都能放，而行内元素中不放块元素（P标签特殊，p标签中不能放任何的块元素）

游览器在解析网页时，会自动对不符合规范的内容进行修正

    比如：标签写在了根元素的外部

          p元素中嵌套了块元素

          根元素中出现了除head和body以为的子元素

10.链接：跳转到指定位置<a href="一个网址"></a>

        当这个网址的不是自己电脑内部磁盘的路径时，我们称之为绝对路径

        当这个网址的是自己电脑内部磁盘的路径时，我们称之为相对路径

        当我们需要跳转到服务器的内部页面时，我们一般使用相对路径，相对路径的开头使用.或..开头或者./或../

        ./表示当前文件所在的目录

        ../表示前文件所在目录的上一级

链接中的target属性：

<a href="一个网址" target="_self">点击这个链接后，并在当前页面跳转到当前页面</a>

<a href="一个网址" target="_blank">点击这个链接后，并跳转到一个新页面</a>

链接中的其他功能

<a href="#">点击这个链接后，回到顶部</a>

<a href="#Index-footer">点击这个链接后，跳转到属性Id名为index-footer的标签处</a>

<a href="#" id="index-footer">点击这个链接后，回到顶部</a>

11.图片链接：<img src="这是一个图片链接" alt="这里用于描述图片，搜索引擎根据这个属性的内容来识别图片，如果不写alt属性则不会被搜索引擎所识别"  width="500">

图片的宽度或高度（单位PX）只修改了一个，另一个属性也会跟着比例修改。

但一般在PC端，建议我们做的图片是多大，就做多大，不要修改；移动端例外。

12.图片的格式：

jpg/jpge:支持的颜色比较多，不支持动图,不支持透明效果——显示照片

gif：支持的颜色比较少，支持动图，支持简单透明——颜色单一的图片，动图

png:支持颜色丰富，不支持动图，支持复杂透明——颜色复杂，复杂透明图片（为网页而生）

webp:是谷歌新推出专门用来表示网页中图片格式，具备其他所有图片格式的优点，并且文件还非常小（但它有一个致命的缺点，就是在一些老一点的游览器就会出现兼容的问题）

base64:将图片使用base64进行编码，这样我们可以直接将我们的图片转换为字符的形式来引入——一般是图片和网页需要一起加载的图片才这样使用（使用比较少）

效果一样用小的，效果不一样，用效果好的

13.内联框架：用于向当前页面中引入一个其他页面

<iframe src="你要引用页面的网址" width="500" height="500" frameborder="0"></iframe>

frameborder:设置边框

14.音视频播放

<audio src="指定引用音频文件的路径" controls autoplay loop></audio>

<video src="指定引用音频文件的路径"></video >

除了通过src还可以通过source来指定文件,source这个方法可以放很多资源，直到游览器支持

<audio  controls >

        <source src="指定引用音频文件的路径"></video >

        <embed src="指定引用音频文件的路径"></embed >

</audio>

controls:想让用户播放就添加这一个属性，不想就不写

loop:是否循环播放

autoplay:主要用来控制页面打开时自动播放（但是目前大多数游览器都不支持音乐自动播放）

 

CSS概述

1.选择器

     A.属性选择器：eg:   a[href="xxx"]——匹配A标签里面所有href=xxx的元素

    先将属性用空格风格再去匹配

    模糊匹配：^开头$结尾*任意位置

    B.伪类选择器：

    ：link为点击访问时的样式

    ：visited:单击访问后样式

    :hover

    :active鼠标单击未释放的

    :focus获取焦点元素

    ：nth-child   even偶数。odd奇数

    C.伪元素选择器：

    first-line:匹配元素的第一行

    first-letter:匹配元素的第一个字母

    before:在元素之前插入生成的内容

    after:在元素之后插入元素的内容

   !!! 选择器优先级:选择范围越大就越小

    important>内嵌>ID>类>伪类|属性>标签|伪对象>继承>通配符

2.文本

    h的偏移量，v的模糊值，模糊距离，阴影颜色

    text-shadow: 5px 5px 20px;

    word-wrap实现长单词和URL地址的自动换行

    normal：只在允许的断字点换行（默认）

    break-ward:在长单词或url地址内部进行换行

    text-overflow文本溢出包含元素时发生的事情

    clip:溢出文本不显示.....

    ellipsis:显示...这样的省略号

    自定义字体

    @font-face{

        font-family:必需，规定字体名称

        src:必需，定义字体文件的url

        font-weight:可选，定义字体粗细，默认为normal

        font-style:可选，定义字体样式，默认为normal

    }

3.边框

    border-radius创建圆角：

    1.创建圆形：a.元素的宽和搞必须相同

                        b.圆角的半径未元素宽的一半，或者直接设置为50%

    2.创建半圆：上半圆，宽度为高度的两倍

    border-imgage边界图片：

    border-imgage：source（绘制边框图像的位置） slice(给图片裁剪比例，分为顶边) width（图像边界的宽度）

                   outset（指定边框外部绘制border-image-area的量） repeat|initial|inherit（stretch拉伸，round铺满）;

     box-shadow:inset（阴影盒子内阴影的类型） x-offset y-offset blur-radius(模糊程度) color

<!-- 背景 -->

    backgroud-size:contain|cover|percentage|length

    background-origin/clip（裁剪）:padding-box（内边距）|border-box（边框盒）|content-box(背景图片相对于内容框来定位)

4.渐变

    线性渐变

    linear-gradient(position,color1,color2)

    eg:linear-gradient(to right,color1,color2)

    径向渐变

    radial-gradient(center,shape,size,start-color,...，last-color)

    eg: radial-gradient(circle,size,start-color 5%,...，last-color 5%)形状为圆形的，并且颜色分布不均匀的渐变

   

    重复渐变

    background-image:repeating-radial/linear-gradient(center,shape,size,start-color,...，last-color)

5.

<!-- Flex布局|弹性盒模型 -->

    1.灵活调整布局

    2.调整页面布局方向，让盒子里面的元素排在同一行

    3.盒子里面元素高度相同

    ！！！：用上flex布局之后:

    a.浮动失效

    b.所有行内子元素变成块级元素

    主轴：行 main axis

    交叉轴：列 cross axis

    start end

    关于flex的属性

    容器上的（父）：

        flex-direction(方向):row|colunm|row-reverse  

        flex-wrap（换行）:nowrap|wrap|wrap-reverse  

        对齐方式（主轴对齐)：justify-content

        align-items(侧轴对齐）:baseline(以第一个文本为基本对齐)

        align-content(多轴对齐):

        flex-flow:flex-direction,flex-wrap

    项目上的（子）：

        order:定义项目排列顺序，数值越小，就越靠前——order:1|2....

        flex-grow:分配主轴上的剩余空间，伸缩放大默认值为1，表示宽度占父级剩余宽度的1份，可以理解为，如果父亲有十元钱，你一定会有1元，父亲有100元，自己就一定会有10元

        flex-shrink:伸缩缩小默认值为1，即如果空间不足，该项目缩小（负值无效）

        flex-basis:在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本来的大小。——有点类似于固定一个行内元素的宽度

        flex:flex-grow|flex-shrink| flex-basis

        align-self:允许单个项目与其他项目有不同的对齐方式，默认值为auto,表示继承父属性的align-items，如果没有父属性，就为stretch