前端基础汇总(第一周)

标题/注释/属性/声明/字符集/标签/实体：

代码：
   <!-- 设计一个网页首先声明编写网页的标准例如：HTML5，否则浏览器解析的时候可能进入怪异模式，导致浏览器无法正常显示网页 -->
<!DOCTYPE html>
<!-- html标签在一个网页中有且只有，网页的内容放在html标签里 -->
<html lang="en">
<head>
<!-- head标签里的内容不会在网页上显示，只有在源代码可以看到 -->
<!-- meta是一个自结束标签，meta标签设计网页的元数据：字符集(编码)，关键字，简介 -->
<!-- meta告诉浏览器网页采用的编码字符集是utf-8 -->
<meta charset="UTF-8">
<!-- 搜索引擎检索title标签里的内容，title标签里的内容会显示在网页的标题栏上 -->
<title>Document</title>
</head>
<!-- body标签：放置网页的主体内容 -->
<body>
<center>
<!-- h1~h6是标题标签 -->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<!-- hr标签：水平线 br标签：换行 html中字符之间即使出现多个空格，浏览器解析的时候只会出现一个-->
<hr>
<br/>
<!-- p是段落标签，段落标签独占一行 -->
<p>我是一个段落标签</p>
<!-- font标签可以设置字体的颜色，尺寸大小等，font是内联元素 -->
<p>我是一个<font color="red">font标签</font>段落标签</p>
<!-- b标签：加粗 -->
<p><<b>b标签</b>我是一个段落标签</p>
<!-- 对于： < > 空格 等这些特殊字符不能直接使用，这时用实体(转义字符)来代替，浏览器会将实体转化成对应的字符 -->
<p>大于号：&gt</p>
<p>小于号：&lt</p>
<p>空格：&nbsp&nbsp&nbsp&nbsp</p>
<p>版本：&copy</p>
<!-- img标签：在网页添加图片，src表示路径(可以是本地的相对路径也可以是绝对路径，或者是网页上的图片路径) alt是对img内容的描述，搜索引擎检索的时候会访问alt的属性，如果没有alt搜索引擎不会收录img width控制宽度 height控制高度 当只有一个weight属性或者只有一个height属性是会默认等比放缩，当两个属性都有时，就按指定好宽高缩放 一般开发中除自适应的页面，不会设置weigh和height属性-->
<!-- src属性配置的是图片的的路径目前我们用的路径一般都是相对路径，性对路径就是从当前文件位置描述目标图片所在的位置 相对路径中返回上级目录用../ -->
<!-- 图片格式：
    JPEG(jpg)图片支持的颜色比较多，可以压缩，但是不支持透明
            一般用来保存照片等颜色丰富的图片
    GIF支持的颜色少，只支持简单的透明，支持动态图
        颜色单一或者动态图可以使用GIF
    PNG支持颜色多，支持复杂透明
        可以用来显示颜色复杂的透明图片 -->
<img src="http://t2.hddhhn.com/uploads/tu/20150420/53060-8k8ubMw.jpg" alt="美女图片" width="500px" height="400px">
</center>
</body>
</html>

效果：

image.png

meta和HTML规范（遗漏）

  代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 1.html中不区分大小写，一般用小写
     2.html注释不能嵌套
     3.html标签必须完整，成对出现或者自结束标签
     4.html标签可以嵌套但不能交叉嵌套
     5.html标签中属性必须有值，并且值要有引号 -->
<meta charset="UTF-8">
<!-- 搜索引擎检索页面的同时会枪击关键词和描述，但这两个值不会影响页面在搜索引擎中的排名浏览器尽最大的努力正确地解析页面，你所有的不符合语法规范的内容浏览器都会为你自动修正，但是有些情况会修正错误 -->
<meta name="keywords" content="关键词信息"/>
<meta name="desciption" content="要描述的信息">
<!-- meta用来做请求的重定向，http-equiv="refresh" content="秒数，url=目标路径" -->
<meta http-equiv="refresh" content="5,url=http://www.baidu.com">
<title>Document</title>
</head>
<body>
    <P>5秒后跳转百度</P>

</body>
</html>

效果：

image.png

内联框架/超链接

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 使用内联框架可以引入外部页面，可以用iframe创建内联框架
iframe属性：
    src:指向外面的路径，可以是相对路径也可以是绝对路径，也可以是外部的网站地址
    width:宽度
    height:高度
    name:可以为内联框架指定一个属性
    在现实中不推荐使用内联框架，它的内容不会被搜索引擎检索 -->
<iframe src="标签.html" name="tom"></iframe>
<iframe src="https://www.duba.com/?f=liebao" name="tom" width="500px" height="500px"></iframe>
<!-- 超链接可以让我们从一个页面跳转到目标页面 
    href：指向目标地址例如：http://www.baidu.com,可以是相对路径也可以是完整路径，
    target：用来指定打开链接的位置  _self:当前窗口打开（默认） _blank:在新的窗口打开  -->
<a href="https://www.baidu.com" target="_blank">超链接1</a>
<a href="https://www.baidu.com" target="">超链接2</a>

</body>
</html>

效果：

image.png

CSS及语法

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 将CSS样式编写到head中的style标签里，称为内部样式表 -->
<style type="text/css">
/*CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中
CSS的语法：选择器 声明块
选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
声明块：声明块紧跟在选择器的后边，使用一对{}括起来
       声明块中实际上就是一组一组的名值对结构
       这一组一组的名值对我们称为声明
       在一个声明块中可以写多个声明，多个声明之间使用;隔开
       声明的样式名和样式值之间使用:来连接*/
/*将样式表编写的style标签中，然后通过CSS选择器选中指定元素,
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用,
将样式表编写到style标签中，也可以使表现和结构进一步分离，
它也是我们推荐的使用方式*/
    p{
        color: red;
    }       
</style>
<!--可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中
    这样外部文件中的CSS样式表将会应用到当前页面中
    将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
    最大限度地使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入
    可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验
    所以在开发中我们最推荐使用的方式就是外部的CSS文件 -->
<!-- <link rel="stylesheet" type="text/css" href="指向CSS的地址（css的样式表所在的位置）"> -->
</head>
<body>
<p>抓紧时间学习</p>
<!-- 可以将CSS样式编写到元素的style属性当中，这种样式称为内联样式
    内联样式只对当前的元素中的内容起作用，内联样式不方便复用
    内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用的 -->
<p style="color: red;font-size: 30px;">赶紧整理笔记</p>
</body>
</html>

效果：

image.png

块和内联

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 块元素和内联元素
块元素
    所谓的块元素就是会独占一行的元素
    无论它的内容有多少，它都会独占一整行
    常见的块元素：div p h1 h2 h3……
    div这个标签没有任何语义，就是一个纯粹的块元素
    并且不会为它里边的元素设置任何的默认样式
    div元素主要用来对页面进行布局的
内联元素（行内元素）
    所谓的行内元素指的是只占自身大小的元素，不会占用一行
    常见的内联元素：span a img iframe
    span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
    一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
    a元素可以包含任意元素，除了他本身
    p元素不可以包含任何其它的块元素 -->
</head>
<p><div>div是无语义的块</div>p标签是块元素</p>
<a href="#">
    <div style="background-color: red; font-size: 100px;">
        <span>我是span</span>
    </div>
</a>
<div></div>
<body>

</body>
</html>

效果：

image.png

普通选择器

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*元素选择器
    作用：通过元素选择器可以选择页面中的所有指定元素
    语法：标签名{}
*/
/*  p{
        color: red;
        background-color: green;
    }*/
    /*h1{
        color: red;
        background-color: green;
    }*/
    /*id选择器
        作用：通过元素的id属性值选中唯一的一个元素
        语法：#id属性值{}
    */
    /*#a{
        color: red;
        background-color: green;
    }*/
    /*类选择器
        作用：通过元素的class属性值选中一组元素
        语法：.class属性值{}
    */
    /*.b{
        color: red;
        background-color: green;
    }*/
    /*通配选择器
        作用：可以用来选中页面中的所有的元素
        语法：*{}
    */
    /**{
        color: red;
        background-color: green;
    }*/
    /*选择器分组（并集选择器）
        作用：通过选择器分组可以同时选中多个选择器对应的元素
        语法：选择器1,选择器2,选择器N{}*/
    /*h1,p,.b,#a{
                color: red;
                background-color: green;
    }*/
    /*复合选择器（交集选择器）
        作用：可以选中同时满足多个选择器的元素
        语法：选择器1选择器2选择器N{}
        对于id选择器来说，不建议使用复合选择器
        */
    div.b{
            color: red;
                background-color: green;
    }
</style>
</head>
<body>
<h1>一级标题</h1>
<p>一个段落</p>
<div class="b">我是b类</div>
<div id="a">我的id是a</div>
</body>
</html>

效果：

image.png

子元素后代元素选择器

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    /*子元素选择器
    作用：选中指定父元素的指定子元素
    语法：父元素 > 子元素
    IE6及以下的浏览器不支持子元素选择器*/
    div#a > span{
        color: red;
        background-color: green;
    }
    /*后代元素选择器
    作用：选中指定元素的指定后代元素
    语法：祖先元素 后代元素{}*/
    div#a p span{
        color: red;
        background-color: green;
    }
    div span{
        color: blue;
        background-color: orange;
    }
    /*元素之间的关系
    父元素：直接包含子元素的元素
    子元素：直接被父元素包含的元素
    祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
    后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
    兄弟元素：拥有相同父元素的元素叫做兄弟元素*/
</style>
</head>
<body>
<div id="a">
    <span>我是span1号</span>
    <p><span>我是span2号</span></p>
</div>
<div>
    <span>我是span3号</span>
</div>
</body>
</html>

效果：

image.png

伪类选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*伪类专门用来表示元素的一种特殊的状态
  比如：访问过的超链接、普通的超链接、获取焦点的文本框
  当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类*/
    /*为没访问过的链接设置一个颜色为绿色 
    link表示普通的链接没访问过的链接）*/
    a:link{
        color: red;
        font-size: 50px;
    }
    /*为访问过的链接设置一个颜色为红色
    visited 表示访问过的链接
    浏览器是通过历史记录来判断一个链接是否访问过
    由于涉及到用户的隐私问题，所以使用:visited伪类只能设置字体的颜色*/
    a:visited{
        color: green;
    }
    /*hover 表示鼠标移入的状态*/
    a:hover{
        color: blue;
    }
    /*active    表示超链接被点击的状态*/
    a:active{
        color: yellow;
    }
    /*为p标签中选中的内容使用样式可以使用::selection伪类
    注意：这个伪类在火狐中需要采用另一种方式编写*/
    /*兼容大部分浏览器的*/
    p::selection{
        color: blue;
        background-color: yellow;
    }
    /*兼容火狐的*/   
    p:-moz-selection{
        color: blue;
        background-color: yellow;
    }
    /*文本框获取焦点以后，修改背景颜色为黄色*/
    input:focus{
        background-color: yellow;
    }
</style>
</head>
<body>
<a href="http://www.baidu123.com">第一个链接</a><br>
<a href="http://www.baidu.com">第二个链接</a><br>
<p>一个小段落</p>
<input type="text" name="_blank">
</body>
</html>

效果：

image.png

伪元素

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*使用伪元素来表示元素中的一些特殊的位置*/
    /*为p中第一个字符来设置一个特殊的样式*/
    p:first-letter{
        color: red;
    }
    /*为p中的第一行设置一个特殊的样式*/
    p:first-line{
        color: blue;
    }
    /*:before表示元素最前边的部分
    一般它都需要结合content这个样式一起使用
    通过content可以向before或after的位置添加一些内容
    :after表示元素最后边的部分*/
    p:before{
        content: "前端太简单";
        color: yellow;
    }
    p:after{
        content: "我爱北京天安门";
        color: green;
    }
</style>
</head>
<body>
<p>      哭泣的课堂

文/宋昱慧

北方的五月雨还带着满满的寒意，带着满满寒意的五月雨在窗外哗哗地下个不停，像瀑布一样紧紧地贴着玻璃窗，形成一道厚厚的雨幕，严严实实地遮住了甄婉梅的视线，让她看不透雨幕后浓浓的黑暗。很响的雨声像淘气的孩子在安静的室内肆意地奔腾跳跃，毫不顾忌地冲撞着甄婉梅的耳骨和心脏，让他八岁的儿子欧阳玉麟均匀的呼吸声变得非常地微弱，甚至是若有若无。甄婉梅急忙拉上厚厚的落地窗帘，试图把暴雨声隔在玻璃窗之外。



移民！甄婉梅断然下定决心——移民！要抛下她苦心经营了十五年之久的事业，抛下跟她共同打拼，唯她马首是瞻的下属和员工确实是件非常不情愿的事情。但是，这跟儿子的未来和教育相比又变得相对次要，她不能让自己的孩子再被这样的教育和教师毁了终身，误了终身。她对中国的教育失去了信心，她不敢再冒风险，她不能，她绝对不能…….

八个月后，甄婉梅带着儿子和全部积蓄移民到加拿大。
</p>

</body>
</html>

效果：

image.png

属性选择器

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
    /*
    为所有具有title属性的p元素，设置一个背景颜色为黄色
    属性选择器
    作用：可以根据元素中的属性或属性值来选取指定元素
    语法：
        [属性名] 选取含有指定属性的元素
        [属性名="属性值"] 选取含有指定属性值的元素
        [属性名^="属性值"] 选取属性值以指定内容开头的元素
        [属性名$="属性值"] 选取属性值以指定内容结尾的元素
        [属性名*="属性值"] 选取属性值包含指定内容的元素
        */
    /*p[title]{
        background-color: yellow;
    }*/
    
    /*为title属性值是hello的元素设置一个背景颜色为黄色*/
    p[title="hello"]{
        background-color: yellow;
    }
    
    /*为title属性值以ab开头的元素设置一个背景颜色为黄色*/
    p[title^="ab"]{
        background-color: yellow;
    }
    
    /*为title属性值以c结尾的元素设置一个背景颜色*/
    p[title$="c"]{
        background-color: yellow;
    }
    
    /*为title属性值包含c的元素设置一个背景颜色*/
    p[title*="c"]{
        background-color: yellow;
    }
</style>
</head>
<body>
<!-- 
    title属性，这个属性可以给任何标签指定
    当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
 -->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="abbc">我是一个段落</p>
<p title="abccd">我是一个段落</p>
<p title="abc">我是一个段落</p>
</body>
</html>

效果：

image.png

子元素选择器扩展

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
    /*
    为第一个p标签设置一个背景颜色为黄色
    :first-child 可以选中第一个子元素
    :last-child 可以选中最后一个子元素
    :nth-child 可以选中任意位置的子元素
    该选择器后边可以指定一个参数，指定要选中第几个子元素
    even 表示偶数位置的子元素
    odd 表示奇数位置的子元素
    */
    /*p:first-child{
        background-color: yellow;
    }
    p:last-child{
        background-color: yellow;
    }
    p:nth-child(even){
        background-color: yellow;
    }
    */
    /*
    :first-of-type
    :last-of-type
    :nth-of-type
    和child类似，只不过child是在所有的子元素中找
    而type是在当前类型的子元素中找
    */
    
    /*p:first-of-type{
        background-color: yellow;
    }*/

    p:last-of-type{
        background-color: yellow;
    }
</style>
</head>
<body>
<span>我是span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是span</span>
<div>
    <p>我是一个p标签</p>
</div> -->
</body>
</html>

效果：

image.png

兄弟元素选择器扩展

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
    /*
    为span后的一个p元素设置一个背景颜色为黄色
    后一个兄弟元素选择器
    作用：可以选中一个元素后紧挨着的指定的兄弟元素
    语法：前一个 + 后一个
    span + p{
        background-color: yellow;
    }
    */
    /*
    选中后边的所有兄弟元素
    语法：前一个 ~ 后边所有
    */
    span ~ p{
        background-color: yellow;
    }
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>

效果：

image.png

否定伪类

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
    /*
    为span后的一个p元素设置一个背景颜色为黄色
    后一个兄弟元素选择器
    作用：可以选中一个元素后紧挨着的指定的兄弟元素
    语法：前一个 + 后一个
    span + p{
        background-color: yellow;
    }*/
    /*
    选中后边的所有兄弟元素
    语法：前一个 ~ 后边所有
    */
    span ~ p{
        background-color: yellow;
    }
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>

效果：

image.png

样式的继承

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式的继承</title>
<style type="text/css">
    body{
        font-size: 30px;
    }
</style>
</head>
<body>
<!-- 
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式
但是，并不是所有的样式都会被子元素所继承，比如：背景、边框、定位相关的样式都不会被继承
 -->
<div style="background-color: yellow;">
    <p>
         我是p标签中的文字
         <span>我是span中的文字</span>
    </p>
</div>
<span>我是p元素外的span</span>
</body>
</html>

效果：

image.png

继承优先级

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>选择器的优先级</title>
<style type="text/css">
    .p1{
        background-color: yellow;
    }
    p{
        background-color: red;
    }
    #p2{
        background-color: yellowgreen;
    }
    p#p2{
        background-color: red;
    }
    /*
    当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生了冲突，
    最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示
    优先级的规则
        内联样式，优先级1000
        id选择器，优先级100
        类和伪类，优先级10
        元素选择器，优先级1
        通配*，优先级0
        继承的样式，没有优先级
    当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较
    但是注意，选择器优先级计算不会超过他的最大的数量级
    如果选择器的优先级一样，则使用靠后的样式
    并集选择器的优先级是单独计算的
        div, p, #p1, .hello{}
    可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，
    将会优先于所有的样式显示，甚至超过内联样式，但是在开发中，尽量避免使用!important
    */
    *{
        font-size: 50px;
    }
    p{
        font-size: 30px;
    }
    .p3{
        color: green;
    }
    .p1{
        color: yellow;
        background-color: skyblue !important;
    }
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: orange;">
    我是一个段落
    <span>我是p标签中的span</span>
</p>
</body>
</html>

效果：

image.png

伪类选择器优先级

代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a的伪类</title>
<style type="text/css">
    /*
    涉及到a的伪类一共有四个
        :link
        :visited
        :hover
        :active
    而这四个选择器的优先级是一样的
    */
    a:link{
        color: yellow;
    }
    a:visited{
        color: red;
    }
    a:hover{
        color: green;
    }
    a:active{
        color: skyblue;
    }
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br>
<a href="http://www.baidu123.com">未访问过的链接</a>
</body>
</html>

效果：

image.png

总结的话：css的内部样式表很好的实现结构和样式内容的分离，提高代码重用，体现封装的思想。具体的内容在选择器这一块，它有元素选择器伪元素选择器（子代元素选择器，后代元素选择器、兄弟元素选择器）、类选择器和伪类选择器、ID选择器、通配选择器，以及涉及一些选择器的优先级。

image.png

最后编辑于：2018.06.03 21:52:26

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,265评论 6赞 490
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,078评论 2赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 156,852评论 0赞 347
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,408评论 1赞 283
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,445评论 5赞 384
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,772评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,921评论 3赞 406
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,688评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,130评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,467评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,617评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,276评论 4赞 329
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,882评论 3赞 312
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,740评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,967评论 1赞 265
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,315评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,486评论 2赞 348

前端基础汇总(第一周)

标题/注释/属性/声明/字符集/标签/实体：

meta和HTML规范（遗漏）

内联框架/超链接

CSS及语法

块和内联

普通选择器

子元素后代元素选择器

伪类选择器

伪元素

属性选择器

子元素选择器扩展

兄弟元素选择器扩展

否定伪类

样式的继承

继承优先级

伪类选择器优先级

推荐阅读更多精彩内容