标题/注释/属性/声明/字符集/标签/实体：
代码：
<!-- 设计一个网页首先声明编写网页的标准例如：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>大于号：></p>
<p>小于号：<</p>
<p>空格：    </p>
<p>版本：©</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
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
网友评论