HTML
W3School离线手册,进入界面 ctrl+F 搜索功能
记事本可以写文本文件
扩展名:.html
根标签:
一个页面有且仅有一个根标签:所有内容都应写到里面
子标签: head的内容不会在网页里直接显示,head是帮助浏览器解析网页的
<span class="md-plain"> 是head的子标签:内容显示在网页的标题栏</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> <span class="md-tag md-raw-inline"><body><span class="md-plain"> <span class="md-tag md-raw-inline"></body><span class="md-plain"> :表示网页的主题,网页中让用户看的东西都写到body里</span></span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">###### </span></p>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">< body > 中一共有六级标签 //但表现一般用css,使用html标签时,关心的是标签的语义</span></h5>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><h1>一级标题 </h1> //六级标题中h1最重要(只写一个),重要性依次降低,一般使用到h3<br><span>. <span class="cm-tab"> <span class="cm-tab"> <span class="cm-tab"> <span class="cm-tab"> <span class="cm-tab"> <span class="cm-tab"> //h3以后不怎么用<br><span>.<br><span><span>?<br><span><h6>六级标题 </h6></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><hr /> //分割线</span></pre>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">段落标签 < p> 表示一个自然段</span></h5>
<p class="md-end-block md-p"><span class="md-plain"> html中字符之间再多的空格,浏览器也会当成一个空格解析,换行也会当成一个空格解析</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><p>表示一个段落</p></span></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">< br /> < br> 表示换行</span></h5>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><p><br><span><span class="cm-tab"> <span class="cm-tab"> 呵呵,<br /> // <br> 也可以<br><span></p></span></span></span></span></span></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">实体 / 转义字符</span></h5>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span> &实体的名字;<br><span> <br><span> < <<br><span> > ><br><span>空格 </span></span></span></span></span></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">图片标签 < img /></span></h5>
<p class="md-end-block md-p"><span class="md-plain"><! --使用img标签来向网页中引入一个外部图片,img标签也是一个自结束标签</span></p>
<p class="md-end-block md-p"><span class="md-plain">属性: src:设置一个外部图片的路径,目前我们所要使用的路径全部都是相对路径。</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>src="文件名/子文件名/图片.gif"<br><span><img src="../1.gif" /> // ../ 表示返回上一层目录</span></span></pre>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">alt:可以用来设置在图片不能显示时,对图片的描述</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> 搜索引擎通过alt属性来识别不同的图片</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">width:可以用来修改图片的宽度,一般用px作为单位(像素)</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">height:可以用来修改图片的高度,一般用px作为单位</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">(宽度和高度两个属性如果设置一个,另一个也会同时等比例调整大小 除非同时指定)</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">一般开发中除了自适应的页面,不建议设置width 和high</span></span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><img src="1.gif" /> <!--因为1.f这个图片该网页文件在同一个标签里--> <br><span><img src="1.gif" alt="这是一个大松鼠" width="200px" high="500px"/> </span></span></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">图片格式</span></h5>
<p class="md-end-block md-p"><span class="md-plain">IPEG(JPG) :支持的颜色比较多可以压缩,但不支持透明</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">-- 一般用来保存照片等颜色丰富的图片</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">GIF : <span class="md-tab"> <span class="md-plain">支持的颜色少,只支持简单的透明(直线的),支持动态图</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">-- 一般图片颜色单一或者动态图时可以使用gif</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">PNG:<span class="md-tab"> <span class="md-plain">支持的颜色多,支持复杂的透明</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">-- 可用来显示颜色复杂的透明的图片</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">图片使用原则:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">效果不一致,使用效果好的 </span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">效果一致,使用小的</span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">注: 文件资源管理选项,查看中的高级设置,将文件扩展名显示出来</span></h6>
<h5 class="md-end-block md-heading"><span class="md-comment"><!-- 可换行 --><span class="md-plain"> 注释</span></span></h5>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<h6 class="md-end-block md-heading"><span class="md-plain">font 属性标签:(在开始标签里添加 color ="颜色" ()相当于一个名值对)</span></h6>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-tab"> 属性名=”属性值“ size color face 都可以同时设置,size属性范围:1-7 //不赞成使用该标签</span></span></pre>
<pre class="md-fences mock-cm md-end-block"><h1>这是我的<font color="red" size="7">第二个<fond>网页</h1> //把“第二个”这三个字单独设置成红色</pre>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">文档声明</span></h4>
<pre class="md-fences mock-cm md-end-block"><!doctype html> //文档前一定要写 </pre>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">乱码问题</span></h4>
<p class="md-end-block md-p"><span class="md-plain">中文系统的浏览器中,默认都是使用GB2312进行解码的</span></p>
<p class="md-end-block md-p"><span class="md-plain">notepad++ 要选utf-8 无bom格式</span></p>
<p class="md-end-block md-p"><span class="md-plain">!- 需要告诉网页编码的字符集:</span></p>
<pre class="md-fences mock-cm md-end-block"><!-meta 标签设置网页的元数据,比如:字符集,关键字,简介
meta是自结束标签 -->
<meta charset ="utf-8"/> <!-- 在head里,可放在title上面 --></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">meta标签 </span></h5>
<p class="md-end-block md-p"><span class="md-plain">搜索引擎在检索页面时,会同时检索页面中的关键词和描述,但是这两个值不会影响搜索引擎中的排名</span></p>
<pre class="md-fences mock-cm md-end-block"> meta标签还可以用来设置网页的关键字
<meta name="keywords" content="HTML5,前端,haha" />
还可以用来指定网页的描述
<meta name="description" content="发布h5,js等前端信息" /></pre>
<h6 class="md-end-block md-heading"><span class="md-plain">使用meta可以用来做请求的重定向 </span></h6>
<pre class="md-fences mock-cm md-end-block"><meta http-equiv="refresh" content="秒数;url=目标路径" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
//5秒后页面跳转,重定向到百度</pre>
<h4 class="md-end-block md-heading"><span class="md-plain">html的语法规范(xhtml)</span></h4>
<p class="md-end-block md-p"><span class="md-plain">1.html中不区分大小写,但一般都是用小写</span></p>
<p class="md-end-block md-p"><span class="md-plain">2.注释不能嵌套</span></p>
<p class="md-end-block md-p"><span class="md-plain">3.标签结构必须完整,要么成对出现,要么自结束标签</span></p>
<p class="md-end-block md-p"><span class="md-plain">4.html标签可以嵌套,不可以交叉嵌套</span></p>
<p class="md-end-block md-p"><span class="md-plain">5.标签必须有值,且值必须加引号(双引号单引号都可以)</span></p>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">内联框架(不推荐使用,因为内联框架中的内容不会被搜索引擎所检测)</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">使用内联框架可以引入一个外部页面;使用iframe创建一个内联框架</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">属性:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">src:指向一个外部页面的路径,可以使用相对路径</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">width:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">height:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">name:可以为内联框架指定一个name属性</span></span></p>
<pre class="md-fences mock-cm md-end-block"><iframe src="demo02.html"></iframe></pre>
<h4 class="md-end-block md-heading"><span class="md-plain">超链接</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">可以从一个页面跳转到另一个页面;使用 <span class="md-tag md-raw-inline"><a><span class="md-plain">标签创建超链接</span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">属性:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">target:用来指定打开标签的位置 </span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> _self,表示在当前窗口打开(默认值)</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> _blank,在新的窗口打开</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> 可以设置一个内联框架的name属性值,链接将会在指定的内联框架中打开</span></span></p>
<pre class="md-fences mock-cm md-end-block"><a href="http://www.baidu.com">我是一个超链接</a> <br>
<a href="demo03.html">我是一个超链接</a>
<a href="#">我是一个超链接</a> //当超链接地址不确定时可以用#作为占位符</pre>
<h6 class="md-end-block md-heading"><span class="md-plain">center 标签中的内容会默认居中显示(表现不推荐使用) </span></h6>
<h5 class="md-end-block md-heading"><span class="md-plain">回到顶部 (# 功能)</span></h5>
<p class="md-end-block md-p"><span class="md-plain">若将地址设置成#,则点击超链接以后,会自动跳转到当前页面的顶部</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">去底部</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">html中有一个属性,每一个元素都可以设置,该属性可以作为标签唯一的标识,这个属性就是id <span class="md-tab"> <span class="md-plain">注:<span class="md-tab"> <span class="md-plain">1.id不可以以数字开头</span></span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">2.页面同样id只有一个</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>所以,想跳转到id为某某的元素所在元素的位置,直接在href中写 #id属性值</strong></span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">发送电子邮件的超链接</span></h4>
<p class="md-end-block md-p"><span class="md-plain"> 点击链接以后可以自动打 开计算机中默认的邮件客户端</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">< a href="mailto:邮件地址">联系我们<span class="md-tag md-raw-inline"></a></span></span></span></p>
<p class="md-end-block md-p"> </p>
<h1 class="md-end-block md-heading"><span class="md-plain">CSS</span></h1>
<p class="md-end-block md-p"><span class="md-plain">方式一:内联样式(不推荐)</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">可以将css样式编写到元素的style属性当中,每个样式写完了要分号结尾</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">-- 将样式编写到style属性中,这种样式我们称为内联样式,内联样式只对当前的元素中的内容起作用</span></p>
<p class="md-end-block md-p"><span class="md-plain"> 不方便重复使用,结构与表现耦合,不方便后期的维护</span></p>
<pre class="md-fences mock-cm md-end-block"><p style="color:red;font-size:20px;">呵呵</p> </pre>
<p class="md-end-block md-p"><span class="md-plain">方式二:内部样式表</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">将CSS样式编写到head中的style标签里,将样式表编写到style标签中,然后通过css选择器选中指定元素;然后可以同时为这些元素一起设置样式,这样可以使样式进一步复用</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">该方式使表现和结构进一步分离它是我们推荐的使用方式</span></span></p>
<pre class="md-fences mock-cm md-end-block"><head>
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
</head></pre>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">type="text/css" 可写可不写,为了兼容一些老的浏览器</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">方式三:外部的css文件(最推荐)</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">编写到css外部文件中;(文件后缀 .css);然后通过link标签来讲外部的css文件引入当前文件中</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">将css样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表在不同的页面中使用</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器缓存加快用户访问的速度,提高了用户体验;</span></p>
<pre class="md-fences mock-cm md-end-block"><head>
<link rel="styleheet" type="text/css" href="style.css"/>
</head></pre>
<h6 class="md-end-block md-heading"><span class="md-plain">style 里面不能用html的语句</span></h6>
<h5 class="md-end-block md-heading"><span class="md-plain">css的注释</span></h5>
<p class="md-end-block md-p"><span class="md-plain">快捷注释:选中 ctrl+shift+/</span></p>
<pre class="md-fences mock-cm md-end-block">/*
*/</pre>
<h5 class="md-end-block md-heading"><span class="md-plain">css的语法</span></h5>
<pre class="md-fences mock-cm md-end-block"> 选择器:
-通过选择器可有选中页面中的指定元素,并将声明块的样式应用到选择器对应的元素上
声明块:
- 声明块紧跟在选择器的后面,使用{}括起来,
声明块中实际上就是一组一组的名值对结构
这一组一组的名值对我们称为声明,一个声明块可使用多个声明,用;隔开,
声明的样式名和样式值之间使用:来连接</pre>
<p class="md-end-block md-p"><span class="md-plain">#### </span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">Hbuilder </span></h3>
<p class="md-end-block md-p"><span class="md-plain">新建一个web项目,编写html文件,若没有框架 ->输入!并按tab键->自动生成</span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">ctrl +D 删除一行</span></h6>
<h6 class="md-end-block md-heading"><span class="md-plain">标签名+tab键 建立完整标签</span></h6>
<h6 class="md-end-block md-heading"><span class="md-plain">查看页面:可以直接往浏览器里拖拽</span></h6>
<h6 class="md-end-block md-heading"><span class="md-plain">ctrl +shift+R 复制一行</span></h6>
<h6 class="md-end-block md-heading"><span class="md-plain">ctrl+回车 换行</span></h6>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">块元素和内联元素</span></h4>
<p class="md-end-block md-p"><span class="md-plain">div就是一个块元素,所谓的块元素就是会独占一行的元素,无论他的内容有多少,他都会独占一行,</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">p h1 h2 h3 ...都独占一行</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- div这个标签没有任何语义,就是一个纯粹的块元素,并且不会为它里面的元素设置任何的默认样式</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">作用:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">div元素主要对网页进行布局</span></span></p>
<pre class="md-fences mock-cm md-end-block"><div style=" width:200px;">
</div></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">内联元素</span></h5>
<p class="md-end-block md-p"><span class="md-plain">span是一个内联元素(行内元素)</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">所谓的行内元素,指的是只占自身大小的元素,而不是一整行</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">常见的内联元素:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">a img iframe span</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">span没有任何语义,span标签专门用来选中文字,然后为文字来设置样式</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">作用:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">内联元素主要用来选中文本设置样式</span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素</span></h6>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">a元素可以包含任何元素,但除了a本身。</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">p元素不可以包含任何块元素</span></span></p>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">元素选择器</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">作用:通过元素选择器可以选择页面中的所有指定元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">语法:标签名{}</span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">id选择器</span></h5>
<p class="md-end-block md-p"><span class="md-plain">#id名</span></p>
<pre class="md-fences mock-cm md-end-block">#p1{
font-size:20px;
}</pre>
<h3 class="md-end-block md-heading"><span class="md-plain">class属性</span></h3>
<p class="md-end-block md-p"><span class="md-plain">class属性和id属性类似,只不过class属性可以重复</span></p>
<p class="md-end-block md-p"><span class="md-plain">可以同时为一个元素设置多个calss属性值,多个值之间用空格隔开</span></p>
<pre class="md-fences mock-cm md-end-block"><p class="p2 hello">呵呵</p></pre>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">类选择器</span></h4>
<p class="md-end-block md-p"><span class="md-plain">通过元素的class属性值选中一组元素</span></p>
<p class="md-end-block md-p"><span class="md-plain">语法:.class名</span></p>
<pre class="md-fences mock-cm md-end-block">.p2{
color:red;
font-size:40px;
}</pre>
<h4 class="md-end-block md-heading"><span class="md-plain">选择器分组(并集选择器)</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- 可以同时选中多个选择器对应的元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- 语法:选择器1,选择器2,选择器N{}</span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">通配选择器</span></h4>
<pre class="md-fences mock-cm md-end-block">- 用来选中页面中的所有元素
- 语法:*{}</pre>
<h4 class="md-end-block md-heading"><span class="md-plain">交集选择器</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">作用:可以选中同时满足多个选择器的元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">语法: 选择器1选择器2选择器N{}</span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">对于id选择器不建议使用复合 选择器</span></h6>
<h6 class="md-end-block md-heading"><span class="md-plain">元素之间的关系</span></h6>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">父元素:直接包含子元素的元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">子元素:直接被父元素包含的元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">祖先元素:包括父元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">后代元素:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">兄弟元素:</span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">后代元素选择器</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">指定元素的指定后代</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">语法:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">祖先元素 后代元素 后代的后代{}</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">-- 中间空格隔开,可以是#id,也可以是元素,也可以是* ;尽量不要写长,选择器越短越好</span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">子元素选择器(IE6以下的浏览器不支持)要问清</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">作用:选中指定父元素的指定子元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">语法:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">父元素>子元素{}</span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">兄弟类型选择器</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">A+B 类型选择器 -------will select all B elements that directly follow A (brother)</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">仅仅选择后紧挨着的一个兄弟B</span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">A~B 选择器 ----------will select all B that follow A (brother)</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">选择A后的所有兄弟B</span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">子伪类选择器</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">:first-child 选择器 ---------selects all first child elements</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">P:first-child ---- selects all first child <span class="md-tag md-raw-inline"><p><span class="md-plain"> elements.</span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">div p:first-child -----selects all first child<span class="md-tag md-raw-inline"><p><span class="md-plain">elements that are in a <span class="md-tag md-raw-inline"><div></span></span></span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">:only-child 选择器 ----用法同上,孩子也可用*表示</span></h5>
<h5 class="md-end-block md-heading"><span class="md-plain">:last-child 选择器 -----selects all last-child elements.</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>span:last-child</strong><span class="md-plain"> selects all last-child <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><span></span></strong><span class="md-plain"> elements.</span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>ul li:last-child</strong><span class="md-plain"> selects the last <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><li></span></strong><span class="md-plain"> elements inside of any <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><ul></span></strong><span class="md-plain">.</span></span></span></span></span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">:nth-child(8) 选择器 ----selects every element that is the 8th child of another element.</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>div p:nth-child(2)</strong><span class="md-plain"> selects the second <span class="md-pair-s "><strong>p</strong><span class="md-plain"> in every <span class="md-pair-s "><strong>div</strong></span></span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">也可以选择even 和 odd </span></span></p>
<h5 class="md-end-block md-heading"><span class="md-pair-s ">span:first-of-type<span class="md-plain"> 选择器 ---selects the first <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><span></span></strong><span class="md-plain"> in any element</span></span></span></span></h5>
<h5 class="md-end-block md-heading"><span class="md-pair-s ">div:nth-of-type(2)<span class="md-plain"> 选择器 --- selects the second instance of a div.</span></span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>.example:nth-of-type(odd)</strong><span class="md-plain"> selects all odd instances of a the example class.</span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">:nth-of-type(An+B) 选择器 --从第B个开始每间隔n个,包括B</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>span:nth-of-type(6n+2)</strong><span class="md-plain"> selects every 6th instance of a <span class="md-tag md-raw-inline"><span><span class="md-plain">, starting from (and including) the second instance.</span></span></span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">:only-of-type 选择器</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>p span:only-of-type</strong><span class="md-plain"> selects a span within any p if it is the only span in there.</span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">:last-of-type 选择器</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>div:last-of-type</strong><span class="md-plain"> selects the last <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><div></span></strong><span class="md-plain"> in every element.</span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>p span:last-of-type</strong><span class="md-plain"> selects the last <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><span></span></strong><span class="md-plain"> in every <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><p></span></strong><span class="md-plain">.</span></span></span></span></span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">:empty 选择器</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>div:empty</strong><span class="md-plain"> selects all empty <span class="md-pair-s "><strong><span class="md-tag md-raw-inline"><div></span></strong><span class="md-plain"> elements.</span></span></span></span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">否定伪类</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">:not(X)</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>:not(#fancy)</strong><span class="md-plain"> selects all elements that do not have <span class="md-pair-s "><strong>id="fancy"</strong><span class="md-plain">.</span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>div:not(:first-child)</strong><span class="md-plain"> selects every div that is not a first child.</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s "><strong>:not(.big, .medium)</strong><span class="md-plain"> selects all elements that do not have <span class="md-pair-s "><strong>class="big"</strong><span class="md-plain"> or <span class="md-pair-s "><strong>class="medium"</strong><span class="md-plain">.</span></span></span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">##### </span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">伪类链接</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">专门表示元素的一种状态。比如:访问过的超链接,比如获得焦点链接</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">a:link{} -表示普通链接(没访问过的链接)</span></p>
<p class="md-end-block md-p"><span class="md-plain">a:visited{} -表示访问过的链接</span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">犹豫设计用户隐私问题,所以使用visited伪类只能设置字体的颜色</span></h6>
<p class="md-end-block md-p"><span class="md-plain"> 浏览器是通过历史记录来判断一个链接是否访问过</span></p>
<p class="md-end-block md-p"><span class="md-plain">a:hover{}<span class="md-tab"> <span class="md-plain">- 鼠标移入的状态</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">a:active{}<span class="md-tab"> <span class="md-plain">- 表示超链接被点击的状态</span></span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">:hover 和 active 也可以为其他元素设置 (IE6不支持对超链接以外的元素设置:hover和:active</span></h6>
<pre class="md-fences mock-cm md-end-block">input 创建文本输入框
<input type="text" /></pre>
<p class="md-end-block md-p"><span class="md-plain">input:focus{} <span class="md-tab"> <span class="md-plain">-输入框的焦点 (IE6不支持</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">::selection{}<span class="md-tab"> <span class="md-plain">- 选中的内容设置样式 (兼容大部分浏览器)</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">在火狐中用另一种方式编写 p::-moz-selection{}</span></span></p>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">伪元素</span></h4>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">使用伪元素来表示元素中的一些特殊的位置</span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">首字母</span></h6>
<p class="md-end-block md-p"><span class="md-plain">:first-letter</span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">首行</span></h6>
<p class="md-end-block md-p"><span class="md-plain">:first-line</span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">元素前面的位置(不能选中)</span></h6>
<p class="md-end-block md-p"><span class="md-plain">:before{</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">content:出现在内容前面的;</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">color:red;</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">}</span></p>
<p class="md-end-block md-p"><span class="md-plain">元素的后面(不能选中</span></p>
<p class="md-end-block md-p"><span class="md-plain">:after{}</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">title属性,这个属性可以给任何标签指定</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">为所有具有title属性的p元素,设置一个背景颜色</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">属性选择器</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">作用:可以根据元素中的属性或者属性值来选取指定元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">语法:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">[属性名] 选取含有指定属性的元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">[属性名="属性值"] 既有指定属性,还有指定的属性值的元素</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">[属性名^="属性值"] 选取该属性的属性值以该指定属性值<span class="md-pair-s "><strong>开头</strong><span class="md-plain">的元素</span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">[属性名$="属性值"] 选取以该特定属性值<span class="md-pair-s "><strong>结尾</strong><span class="md-plain">的元素</span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">[属性名*="属性值"] 选取<span class="md-pair-s "><strong>包含</strong><span class="md-plain">属性值的元素</span></span></span></span></p>
<pre class="md-fences mock-cm md-end-block"><style type="text/css">
p[title="hello"]{
}
p[class]{
}
</style></pre>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">元素的继承</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">css中祖先元素上的样式,也会被他的后代元素所继承,并不是所有样式都会被继承,比如:背景颜色不会被继承</span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">选择器的优先级</span></h5>
<p class="md-end-block md-p"><span class="md-plain">使用不同的选择器选中同一个元素时,并且设置相同的样式时</span></p>
<p class="md-end-block md-p"><span class="md-plain">优先级规则:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">内联样式,优先级 1000</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">id选择器,优先级 100</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">类和伪类,优先级10</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">元素选择器,优先级1</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">通配* , <span class="md-tab"> <span class="md-plain">优先级0</span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">继承的样式,没有优先级</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">但是注意,选择器优先级计算不会超过他的最大的数量级</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">如果选择器的优先级一样,则使用靠后的样式</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">并集选择器的优先级是单独计算的</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">可以在样式的最后,添加一个 !important,则此时该样式将会获得一个最高的优先级,优先于所有的样式显示甚至超过内联样式(不建议使用,不利于后期修改)</span></p>
<pre class="md-fences mock-cm md-end-block">.p1{
color:yellow;
background-color:greenyellow !important; //只对这一行有效
}</pre>
<h5 class="md-end-block md-heading"><span class="md-plain">伪类的顺序</span></h5>
<p class="md-end-block md-p"><span class="md-plain">涉及到a的伪类一共有四个:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">:link</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">:visited</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">:hover</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">:active</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">而这四个选择器的优先级是一样的。</span></p>
<p class="md-end-block md-p"><span class="md-plain">在后面的优先级高;所以hover要写到active的上面,</span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">所以写这四个伪类一定要按这个顺序</span></h6>
<p class="md-end-block md-p"> </p>
<h1 class="md-end-block md-heading"><span class="md-plain">文本标签样式</span></h1>
<h5 class="md-end-block md-heading"><span class="md-plain">< em> 和 < strong></span></h5>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">em标签用于表示一段内容中的着重点</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">strong 标签用于表示一个内容的重要性</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">这两个标签可以单独使用,也可以一起使用。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">通常em显示为斜体,而strong显示为粗体</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">em主要表示语气上的强调</span></span></p>
<pre class="md-fences mock-cm md-end-block"><p>
今天天气<em>真不错</em>
</p>
<p>
<strong>
强调重点内容,比em更强烈
</strong>
</p></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">i标签 斜体</span></h5>
<h5 class="md-end-block md-heading"><span class="md-plain">b标签 加粗</span></h5>
<p class="md-end-block md-p"><span class="md-plain">h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体就可以用b标签和i标签</span></p>
<pre class="md-fences mock-cm md-end-block"><p>
<i>斜体</i>
<b>加粗</b>
</p></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">small标签 标签内容会比他的父元素中的文字要小一些</span></h5>
<p class="md-end-block md-p"><span class="md-plain">在h5中使用small标签来表示一些细则一类的内容:比如合同中的小字,网站的版权声明</span></p>
</li>
</ul>
<pre class="md-fences mock-cm md-end-block"><p>
我是p标签中的内容<small>我是samll标签中的内容</samll>
</p></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">cite标签</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">网页中所有的加<span class="md-pair-s "><strong>书名号</strong><span class="md-plain">的内容都可以使用cite标签,表示参考的内容</span></span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">q标签表示一个短的引用(行内引用)内联元素</span></h5>
<p class="md-end-block md-p"><span class="md-plain"> 默认加上引号 </span></p>
<pre class="md-fences mock-cm md-end-block"><p>
子曰:<q>学而时习之不亦说乎</q>
</p></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">blockquote<span class="md-tab"> <span class="md-plain">标签 块元素</span></span></span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">表示一个长引用(块级引用)</span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">p里面不可以有块元素</span></h6>
<pre class="md-fences mock-cm md-end-block"><div>
<blockquote>
呵呵
</blockquote>
</div></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">sup 和 sub 标签</span></h5>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">sup设置一个上标</span></p>
</li>
</ul>
<pre class="md-fences mock-cm md-end-block"><p>赵薇<sup><a href="#">[1]</a></sup></p></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">sub 下标 用法和上面相同</span></p>
</li>
</ul>
<h5 class="md-end-block md-heading"><span class="md-plain">ins 和 del</span></h5>
<p class="md-end-block md-p"><span class="md-plain">del 标签语义:表示一个删除的内容 ----删除线</span></p>
<p class="md-end-block md-p"><span class="md-plain">ins 标签 语义:表示插入的内容;自动添加下划线 </span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">pre标签</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">pre是一个预格式标签,会将代码中的<span class="md-pair-s "><strong>格式保存,不会忽略多个空格</strong><span class="md-plain">。</span></span></span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">code标签</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">专门表示代码 ,但<span class="md-pair-s "><strong>不</strong><span class="md-plain">会保留格式。</span></span></span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">一般结合使用pre和code来表示一段代码</span></h6>
<pre class="md-fences mock-cm md-end-block"><pre>
<code>
</code>
</pre></pre>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">无序列表和有序列表</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">HTML中一共有三种列表:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">1.无序列表</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">2.有序列表</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">3.定义列表</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">无序列表:</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">使用ul标签来创建一个无序列表</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">使用li在ul中创建一个一个的列表项,</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">一个li就是一个列表项</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">通过type属性可以修改无序列表的项目符号(不用)</span></p>
</li>
</ul>
<pre class="md-fences mock-cm md-end-block"><style type="text/css">
ul{
list-style:none; /*要去掉项目符号*/
}
</style>
<ul>
<li>一号内容</li>
<li>二号内容</li>
</ul></pre>
<p class="md-end-block md-p"><span class="md-plain">注意:默认的项目符号我们一般都不使用!!(因为不同浏览器效果不同)</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置</span></span></p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">无序列表:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">无序列表和有序列表类似,只不过它使用ol来代替ul</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">有序列表用有序的序号作为项目符号</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">type属性,可以指定序号的类型</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">可选值:1.默认值,使用阿拉伯数字</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">2.a/A采用大写或小写字母作为序号</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> 3.i/I 采用小写或者大写罗马数字作为序号</span></span></p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">列表都是可以互相嵌套,自身嵌套的。</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">定义列表</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">定义列表用来对一些词汇或内容进行定义</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">使用dl来创建一个定义列表,dl中有两个子标签 <span class="md-pair-s "><strong>dt</strong><span class="md-plain">:被定义的内容,<span class="md-pair-s "><strong>dd</strong><span class="md-plain">:对定义内容的描述</span></span></span></span></span></p>
<pre class="md-fences mock-cm md-end-block"><dl>
<dt>武松</dt>
<dd>景阳冈打虎英雄,战斗力99</dd>
</dl></pre>
<p class="md-end-block md-p"><span class="md-plain">##### </span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">CSS基础_长度单位</span></h5>
<p class="md-end-block md-p"><span class="md-plain">hbuilder 技巧 div.box +按tab键 ->快捷建立class=box的div,div#box 同理建立id</span></p>
<p class="md-end-block md-p"><span class="md-plain">长度单位:</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">像素px</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- 我们网页中使用最多的一个单位,一个像素就相当于我们屏幕中的一个小点,屏幕上实际就是由这些像素点构成的,但是这些像素点是不能直接看见的</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- 不同显示器一个像素的大小不相同,显示越好效果越清晰,像素越小,反之像素越大</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">百分比%</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- 也可以将单位设置成一个百分比的形式,这样浏览器会将根据其父元素的样式来计算该值</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- 使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">- 创建自适应的页面时,经常使用百分比作为单位</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">em</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> - em和百分比类似,他是相当于当前元素的字体的大小来计算的</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> - lem = 1font-size,使用em时,当字体大小发生改边时,em也会随之变化</span></span></p>
<pre class="md-fences mock-cm md-end-block">.box1{
font-size:50px;
width:1em;
height:50%;
background-color:yellow;
}</pre>
<h5 class="md-end-block md-heading"><span class="md-plain">颜色单位</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">在css可以直接用颜色的单词来表示不同的颜色</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">也可以使用RGB值来表示不同的颜色</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">RGB值指的是通过Red,Green,Blue三原色,通过这三种颜色的不同浓度,来表示出不同的颜色</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">例子: rgb(红色的浓度,绿色的浓度,蓝色的浓度);</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">颜色的浓度需要用一个0-255之间的值,255表示最大,0表示没有</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">浓度也可以采用百分数来设置,使用百分数最终也会转化为0-255之间的数 0%表示0,100%表示255</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样 语法: #红色绿色蓝色</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">#000000 每组两位,范围00-ff</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">两两都重复的颜色,可以简写,比如:#ff0000 可以写成#f00</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">#abc -> #aabbcc</span></span></p>
</li>
</ul>
</li>
</ul>
<h4 class="md-end-block md-heading"><span class="md-plain">字体</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">font-size </span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的 , </span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">font-size实际上是设置格的高度,并不是字体的大小</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体不同,显示效果也不同。</span></span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">font-family 文字的字体</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">font-family:微软雅黑;</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">如果字体不支持,则使用默认字体,该样式可以同时指定多个字体,多个字体之间使用,分开。</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">采用多个字体时,浏览器会优先使用前面的字体,如果前边字体没有再尝试下一个。</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">字体分类</span></h5>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">网页中将字体分为5大类:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">serif(衬线字体)</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">sans-serif(非衬线字体)</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">monospace(等宽字体)</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">cursive(草书字体)</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">fantasy(虚幻字体)</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">可以将字体设置为这些大类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">font-style 字体样式</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">font-weight 字体粗度 :可以指定100-900之间的数值;normal 正常;bold加粗</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">font-variant可以用来设置小型大写字母</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">可选值:normal,默认值,文字正常显示</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">small-caps 文本以小型大写字母显示</span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">font</span></h6>
<p class="md-end-block md-p"><span class="md-plain">在css中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">空格隔开,大小和字体必须写,缺一不可,字体必须是最后一个样式,大小必须是倒数第二个样式</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">实际上使用简写性能更好一些</span></span></p>
<pre class="md-fences mock-cm md-end-block">font:italic small-caps bold 60px "微软雅黑";</pre>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">行高</span></h5>
<p class="md-end-block md-p"><span class="md-plain">CSS中并没有为我们提供一个直接设置行间距的方式,只能通过行高间接的设置行间距,行高越大,行间距越大,使用line-height来设置行高。在style标签中设置</span></p>
<p class="md-end-block md-p"><span class="md-plain">行间距=line-height - font-size</span></p>
<p class="md-end-block md-p"><span class="md-plain">line-height可以间接的设置行高</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">可以接收的值:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">1.直接就收一个大小 20px</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">2.可以指定一个百分数,则会相对于字体去计算行高 200%--就是二倍行高</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">3.可以直接传一个数值,则行高会设置字体大小相应的倍数</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">对于单行文本来说,可以将行高设置为和父元素的高度一致,这样可以使单行文本在父元素中垂直居中</span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">font也可以指定行高</span></h6>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">字体大小/行高</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">font:30px/30px "微软雅黑";</span></span></p>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">文本样式</span></h5>
<p class="md-end-block md-p"><span class="md-plain">text-transform</span></p>
<p class="md-end-block md-p"> </p>
<h6 class="md-end-block md-heading"><span class="md-plain">文本修饰</span></h6>
<p class="md-end-block md-p"><span class="md-plain">text-decoration属性,用来给文本添加各种修饰。通过它可以为文本的上方,下方或者中间添加线条</span></p>
<p class="md-end-block md-p"> </p>
<h6 class="md-end-block md-heading"><span class="md-plain">字母间距和单词间距</span></h6>
<p class="md-end-block md-p"><span class="md-plain">letter-spacing用来设置<span class="md-pair-s "><strong>字符</strong><span class="md-plain">之间的间距。 单位px</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">word-spacing用来设置<span class="md-pair-s "><strong>单词</strong><span class="md-plain">之间的间距。 单位px</span></span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">文本的对齐方式</span></h6>
<p class="md-end-block md-p"><span class="md-plain">text-align 用于设置文本的对齐方式 <span class="md-tab"> <span class="md-plain">-- 通过调整文本之间的空格大小来实现对齐的目的</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">可选值:</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">left 默认值,文本靠左对齐</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">right,靠右对齐</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">center,居中</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">justify,两端齐</span></span></p>
<h6 class="md-end-block md-heading"><span class="md-plain">首行缩进</span></h6>
<p class="md-end-block md-p"><span class="md-plain">text-indent 单位px 或者 em;--em是字体大小</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">当给定正值时,会自动向右侧缩进指定的像素。</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">当给定的是负值时,会向左移动指定的像素,通过这种方式可以将一些不想显示的文字隐藏起来</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">一般使用em作为单位</span></p>
<p class="md-end-block md-p"> </p>
<h3 class="md-end-block md-heading"><span class="md-plain">盒子模型(框模型)</span></h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">一个盒子分为几个部分<span class="md-softbreak"> <span class="md-tab"> <span class="md-plain">- 内容区(content)<span class="md-softbreak"> <span class="md-tab"> <span class="md-plain">- 内边距(padding)<span class="md-softbreak"> <span class="md-tab"> <span class="md-plain">- 边框(border)<span class="md-softbreak"> <span class="md-tab"> <span class="md-plain">- 外边框(margin)</span></span></span></span></span></span></span></span></span></span></span></span></span></p>
</li>
</ul>
<p class="md-end-block md-p"> </p>
<pre class="md-fences mock-cm md-end-block"><head>
<meta charset="UTF-8">
<title>
设置边框宽度与颜色
见上段代码
border-width
border-xxx-width
border-color 与 width同理
设置边框样式
border-style
简写样式 border
-
通过border可以同时设置四个边框的样式,宽度,颜色;没有任何顺序要求
-
border一指定就指定四个边不能分别指定
-
border-xxx xxx可以是top right bottom left
可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效;
border:10px red solid;
内边距
内边距(padding),指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距
padding-xxx xxx可以是top,right,bottom,left
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距。
盒子的大小由内容区,内边距和边框共同决定
盒子可见框的宽度 =
border-left-width + padding-left + width + padding-right + border-reght-width
padding-top:100px;
使用padding可以同时设置四个边框的样式,规则和border-width一致
padding:100px;
padding:100px 200px 300px;
#####
外边距
外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置
盒子有四个方向的外边距:margin-xxx 单位为px,
xxx 是 top,right,left,bottom
由于页面中的元素都是靠左靠上摆放的,所以注意当我们设置上和左外边距时,会导致盒子自身的位置放生改变。
margin还可以设置为auto,auto一般只设置给水平方向的margin。
如果只指定,左外边距或右外边距的margin为auto则会将外边距设置为最大值;
垂直外边距的重叠
如果想父子元素不重叠,可以给父元素设置一个padding-top 或者border-top元素,或者加一个内容
使用padding-top会导致可见框边长,可以从height将padding-top的长度抛去,就可以和原来高度相同
/*父子之间加一个空的table,但只增加了没用的结构*/
.box:before{
content:"";
/*display:table可以将一个元素设置为表格显示,空表格不会占用任何空间
display:table;
}
默认样式
每个类型都有特定的默认样式;所以我们要清除默认样式
*{
margin:0;
padding:0;
}
内联元素盒子模型
内联元素不能设置width和height
将一个内联元素变成块元素
通过display样式可以修改元素的类型
可选值:
inline:可以将一个元素作为内联元素显示
block:可以将一个元素设置为块元素显示
inline-block:将一个元素转换为行内块元素
可以使一个元素既有行内元素的特点又有块元素的特点,
既可以设置宽高,又不会独占一行
none:此元素不会被显示,并且元素不会在页面中继续占有位置
visibility -- 设置元素显示隐藏的状态
overflow
如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示
超出父元素的内容叫溢出内容,父元素默认是将溢出的内容,在父元素外边显示,
通过overflow可以设置父元素如何处理溢出内容:
可选值:
visible,默认值,不会对溢出内容做处理,元素会在父元素外呈现
hidden,溢出的内容会被修剪,不会显示
scroll,会为父元素添加滚动条,通过拖动滚动条查看完整内容;无论内容是否溢出都会添加水平和垂直双滚动条。
auto, 会根据需求自动添加滚动条,不需要就不加
文档流
一个html页面就是一个文档,
文档流处在网页的最底层,他表示的是一个页面中的位置;我们所创建的元素默认都在文档流中
元素在文档流中的特点
块元素:
1.块元素在文档流中会独占一行,块元素会自上向下排列(垂直排列)
2.块元素在文档流中默认宽度是父元素的100%。(auto)
3.块元素在文档流中的高度默认被内容撑开
内联元素:
1.内联元素在文档流中只占自身的大小,会默认自左向右排列,
如果一行中不足容纳所有的内联元素,则换到下一行,继续自左向右。
2.内联元素在文档流中的高度和宽度都默认被内容撑开
浮动
块元素在文档流中默认垂直排列,如果希望块元素在页面中
水平排列,可以使块元素脱离文档流
使用float来使元素浮动,从而脱离文档流
可选值:
none,默认值,元素默认在文档流中排列
left,元素会立即脱离文档流,向页面左侧浮动
right,元素会立即脱离文档流,向页面右侧浮动
当为一个元素设置浮动以后(float属性是一个非none的值)
- 元素会立即脱离文档流,元素脱离文档流以后,他下边的元素会立即向上移动
- 元素浮动后,会尽量向页面左上或者右上漂浮,直到遇到父元素的边框或者其他的浮动元素
- 浮动元素不会超过他上边的兄弟元素,最多最多一边齐
开启span的浮动;内联元素脱离文档流以后会变成块元素
高度塌陷
文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。
但是为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷;由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
避免高度塌陷
根据W3C的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context
简称BFC(块级格式化环境),该属性可以设置打开或者关闭,默认是关闭的。
当开启元素的BFC以后,元素将会具有如下的特性:
1.父元素的外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
开启元素的BFC
1.设置元素浮动
- 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式 也会导致下边元素上移。
2.设置元素绝对定位
3.设置元素为inline-block -> display:inline-block
- 会导致宽度丢失
以上方式都不推荐
4.将元素的overflow设置为一个非visible的值 -- 设成auto和hidden值
但是在IE6及以下的浏览器不支持BFC,所以使用这种方式不能兼容IE6
在IE6中虽然没有BFC,但是具有另一个隐含的属性叫做Has Layout,该属性作用和BFC类似。
开启hasLayout的方式:
直接将元素的zoom设置为1即可;
zoom表示放大的意思,后面跟着一个数值,写几就放大几倍;zoom:1;表示不放大元素;
zoom:1;
overflow:hidden;
解决高度塌陷的最终方案
我们有时希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能
clear可以用来清除其他浮动元素对当前元素的影响
可选值:
none,默认值,不清除浮动元
left,清除左侧浮动元素对当前元素的影响
right,清除右侧浮动元素对当前元素的影响
both,清除两侧浮动元素对当前元素的影响;清楚对他影响最大的那个元素的浮动
回到针对的元素不浮动的那个位置
解决高度塌陷方案二:
可以直接在高度塌陷的父元素的最后,添加一个空白的div;由于这个div并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动,这样可以通过空白的div来撑开父元素高度,基本没有副作用
使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。
.clear{
clear:both;
}
通过after伪类实现(最好)
可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动;
这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,目前最优方式。几乎没有副作用
.clearfix:after{
/*添加一个内容*/
content:"";
/*转换为一个块元素*/ /*display:table也可以实现*/
display:block;
/*清除两侧的浮动*/
clear:both;
}
/*在IE6中不支持after伪类,
所以在IE6中还需要使用hasLayout来处理*/
.clearfix{
zoom:1;
}
即解决高度塌陷有解决外边距重叠
.clearfix:before,
.clearfix:after{
content:"";
display:table;
clear:both;
}
.clearfix{
zoom:1;
}
PS基本操作
ctrl+R 标尺操作
alt+滚轮 放大缩小
ctrl+1 恢复到100%
ctrl+0 适应屏幕大小
选中框 -> F8 选中框信息
裁剪好的图片存储为web所用格式
相对定位
div.box$*3
$表示从1开始变,上句表示创建3个box$类的div
定位:
- 定位指的就是将指定的元素摆放到页面的任意位置
- 通过position设置定位
position 可选值:
1.position:relative; 开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质,块还是块,内联还是内联
当开启了元素的定位(position属性值是一个非static的值)时,可以通过left right top bottom四个属性来设置元素的偏移量
position:relative;
/*相对于原来的位置向右移动100px*/
left:100px;
通常偏移量只需要两个就可以对一个元素进行定位
绝对定位
position:absolute; 开启绝对定位
1.开启绝对定位,会使元素脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)
如果所有祖先元素都没有开启定位,则会相对于浏览器窗口开启定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质,内联元素变成块元素,块元素的宽度和高度默认都被内容撑开
固定定位
position:fixed;
固定定位也是一种绝对定位,大部分特点都和绝对定位一样
不同的是:
1.固定定位永远是相对于浏览器窗口进行定位
2.固定定位会固定在窗口的某个位置,不会随着滚动条滚动
IE6不支持固定定位
元素的层级
如果定位元素的层级是一样的,则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级;可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示。
-
对于没有开启定位的元素不能使用z-index
-
父元素的层级再高也不会盖住子元素
设置透明背景 opacity
它需要一个0-1之间的值
0表示完全透明
1完全不透明
0.5 表示半透明
opacity属性在IE8及以下的浏览器不支持
IE8及以下的浏览器需要使用如下属性代替
filter:alpha(opacity=透明度);
透明度:需要一个0-100之间的值。
这种方式支持IE6,但是这种效果在IE Tester中无法测试
背景
使用back-ground-image设置背景图片
- 如果背景图片大于元素,默认会显示图片的左上角
- 如果背景图片和元素一样大,则会将背景图片全部显示
- 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素
/*相对路径,同一个文件夹下*/
background-image:url(img/1.jpg);
引入外部样式表
background-repeat 属性
继承性:无
可选值:
repeat:默认值,背景图片会双方向重复(平铺)
no-repeat:不重复,有多大显示多大
repeat-x:背景图片沿着水平方向重复
repeat-y: 垂直
background-position 背景图片定位
背景图片默认是贴着元素的左上角显示
可选值: top right left bottom center 中的两个值指定一个背景图片的位置
如果只给出一个值,则第二个值默认是center
也可以直接指定两个偏移量:水平偏移量 垂直偏移量;
background-attachment 属性
用来设置背景图片是否随着页面一起滚动
可选值:
scroll:默认值,背景图片随着窗口滚动
fixed:背景图片会固定在某一位置,不随页面滚动。
当背景图片的background-attachment设置为fixed时,背景图片的定位永远相对于浏览器的窗口
不随窗口滚动的图片,我们一般都是设置给body,而不设置给其他元素
按钮练习
做完按钮功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,用户体验不佳。
产生闪烁问题的原因:
背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求。但是我们外部资源并不是同时加载,浏览器会在资源被使用时才去加载资源。所以伪类hover和active的外部资源请求未被加载;hover和active被触发时才回加载。
background
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序要求,也没有数量要求,不写的属性使用默认值
background: #bfa url(img/3.png) center center no-repeat fixed;
表格
在html中使用table标签来创建一个表格;在table标签中使用tr来表示表格中的一行,有几行就有几个tr;在tr中使用td来创建单元格,有几个单元格就有几个td
/*用css设置其他属性*/
td下:
colspan="单元格个数" 横向合并单元格
rowspan="单元格个数" 纵向合并单元格
表格的样式
table属于块元素
border-spacing属性
table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离
table{
width:300px;
margin:0 auto;
border:1px solid black;
border-spaceing:0px;
}
border-collapse可以用来设置表格的边框合并
设置border-collapse,则border-spacing自动失效
border-collapse:collapse;
th 标签标识 表头
默认样式:居中,加粗
/*实现隔行变色*/
tr:nth-child(odd){
background-color:#bfa;
}
长表格
有一些情况下表格是非常长的,这时就需要将表格分为三个部分:表头,表格的主体,表格底部
在HTML中为我们提供了三个标签:
thead 表头 永远显示在头部
tbody 表格主题 永远显示到表格的中间
tfoot 表格底部 永远显示在表格的底部
这三个标签的作用,就是来区分表格的不同的部分,他们都是table的子标签,都需要直接写道table中,tr需要写在这些标签之中
如果表格中没有写tbody,浏览器会自动在表格中添加tbody,并且将所有的tr都放到tbody中
表单
表单的作用就是用来将用户的信息提交给服务器的
比如:百度的搜索框 注册 登录这些操作都需要填写表单
使用form标签创建表单;form标签中必须指定一个action属性,该属性指向的是一个服务器的地址,当我们提交表单时将会提交到action属性对应的地址
用户名
css中text属性
overflow:auto ; 去除滚动条
/*设置文本域不能调整大小 * /
resize:none;
性别 男
女
爱好 足球
篮球
羽毛球
乒乓球
-
下拉列表
使用select来创建一个下拉列表;使用option标签来创建一个一个列表项,有几个选项就写几个option
下拉列表的name属性需要指定给select,而value属性需要指定给option
可以通过option中添加selected="selected"来将选项设置为默认选中。
当为select添加一个multiple="multiple",则下拉列表变成一个多选的下拉列表
在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字
如果希望单选按钮或者是多选框中指定默认选中的选项则可以加入以下名值对
名值对:check="checked"
-
一个单纯的按钮
没有任何作用,只可以被点击,可以通过js绑定事件
框架集
框架集和内联框架的作用类似,都是用于在一个页面中引入其他的外部的页面
框架集可以同时引入多个页面,而内联框架只能引入一个,相较而言,更推荐使用框架集
使用frameset来创建一个框架集,注意frameset不能和body出现在同一个页面中,所以要使用框架集就不能使用body标签
在frameset使用frame子标签来指定要引入的页面
属性:
rows,指定框架集中的所有的框架,一行一行的排列
cols,指定框架集中的所有的页面,一列一列的排列
这两个属性frameset必须选择一个,并且需要在属性中指定每一部分所占的大小,可以使用*代替剩余所占的大小
frameset中可以嵌套一个frameset
frameset和iframe一样,它里面的内容都不会被搜索引擎所检索,所以不推荐使用。
这就意味着页面中不能有自己的内容,只能引入其他的页面,而我们没单独加载一个页面,浏览器都需要重新发送一次请求,引入几个页面就发送几次请求,用户体验比较差。
如果非要使用建议使用frameset,而不用iframe。
IE6 pong的修复
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示
解决方法:
1.可以使用png8来代替png24,即可解决这个问题
2.使用javascript来解决该问题,需要向页面引入一个外部的javascript文件,然后再写一些简单的JS代码,来处理该问题
在body标签的最后引入外部的JS文件
再创建一个新的script标签,并且编写一些js代码;fix()函数是修复的意思