详细说明：
详尽的前端笔记，包含html和css部分，由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 使用内部样式 表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式 编写的位置 1.内联样式 将样式编写到标签的style属性中
这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式 基本语法 选择器 通过选择器可以选中页面中的一组元素，然后为其设置样式 元素选择器 根据标签名，选中页面中的指定元素 语法：标签名{ } 例子： div{} p{} h1{} id选择器 根据元素的id属性值选中一个唯一的元素 语法：#id {} 例子： #box1{} #hello{} 类选择器 根据元素的class属性值，选中一组元素 语法：.class{} 例子： .hello{} .box{} 通配选择器 选中页面中的所有元素 语法：*{} 通配选择器的性能比较差，尽量避免使用 并集选择器 可以同时选中符合多个选择器的元素 语法：选择器1,选择器2,选择器N{} 例子： div,p,#box,.hello{} 交集选择器 可以选中满足多个条件的元素 语法：选择器1选择器2选择器N{} 例子：p.hello{} 后代元素选择器 选中指定元素的指定后代元素 语法：祖先元素 后代元素{} 例子： div span {} div p{} 子元素选择器 选中指定元素的指定子元素 语法：父元素 > 子元素 {} 例子： div > span {} div > p{} 声明块 声明块中实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式，实际上就是一个名值对的结构 名和值之间使用:链接 :左边是样式的名字 :右边是样式的值 每一个声明以;结尾 例子 color:red; font-size:20px; 元素之间的关系 父元素 直接包含子元素的的元素叫做父元素 子元素 直接被父元素包含的元素叫做子元素 祖先元素 直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素 后代元素 直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素 兄弟元素 拥有相同父元素的元素叫做兄弟元素 块元素和内联元素 块元素 块元素会独占页面中的一行，无论他的内容的多少 一般使用块元素对页面进行布局 常见的块元素 div p h1~h6 内联元素 内联元素只占用自身的大小，不会独占一行 内联元素也叫行内元素（inline） 一般内联元素都是用来为文本来设置效果 常见的内联 span a img 包裹规则 一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素 a元素可以包含任意元素，除了a本身 p元素不能包含任何块元素 伪类和伪元素 伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置 :link 表示一个普通的链接（未访问过的链接） :visited 表示访问过的链接 :hover 鼠标移入的链接，也可以为其他元素设置hover :active 正在被点击的链接，也可以为其他元素设置active :focus 表示元素获取焦点的状态，一般用于文本框 ::selection 表示内容被选中的状态 在火狐中使用::-moz-selection来代替 :first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边 一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容 :after 选中元素的最后边 一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容 属性选择器 根据元素的属性选择指定元素 [属性名] 选取含有指定属性的元素 [属性名="属性值"] 选取属性值等于指定值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值中包含指定内容的元素 兄弟元素选择器 选取后一个兄弟元素 前一个 + 后一个 选取后边所有的兄弟元素 前一个 ~ 后边所有 子元素的伪类 :first-child 寻找父元素的第一个子元素，在所有的子元素中排序 :last-child 寻找父元素的最后一个子元素，在所有的子元素中排序 :nth-child 寻找父元素中的指定位置子元素，在所有的子元素中排序 例子 p:nth-child(3) 可以使用even，来找到偶数的子元素 可以使用odd，来找到奇数的子元素 :first-of-type 寻找指定类型中的第一个子元素 :last-of-type 寻找指定类型中的最后一个子元素 :nth-of-type 寻找指定类型中的指定子元素 否定伪类 从一组元素中将符合要求的元素剔除出去 语法： :not(选择器) 例子： .abc:not(div) HTML，超文本标记语言 负责页面中的结构，定义出页面中的各个组成部分 HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分 标签 成对出现 <标签名> 自结束标签 <标签名 /> 属性 通过属性可以设置标签的效果 属性需要定义在开始标签中或这自结束标签中 属性实际上是一组一组名值对结构 例子： <标签名 属性名="属性值" 属性名="属性值"> <标签名 属性名="属性值" 属性名="属性值" /> HTML页面的基本结构 常用标签 网页的根标签 一个页面中有且只有一个根标签 网页中的所有内容都需要写在html标签的内部 网页的头部 该标签中的内容不会在网页中直接显示 该标签用于帮助浏览器解析页面 子标签
用来设置网页的标题 默认会在浏览器的标题栏中显示 搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名 <meta> 用来设置网页的元数据，比如网页使用的字符集 <meta charset="utf-8" /> 设置网页的关键字 <meta name="keywords" content="关键字,关键字,关键字,关键字"/> 设置网页的描述 <meta name="description" content="网页的描述"/> 请求的重定向 <meta http-equiv="refresh" content="秒数;url=地址" /> <body> 网页的主体 网页中所有的可见部分都需要在body中编写 <h1> ~ <h6> 标题标签 在html中一共有六级标题 六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3 h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容 一般一个页面中只能写一个h1 <p> 段落标签 <br /> 换行标签 <hr /> 水平线标签 内联框架 可以向一个页面中引入其他的外部页面 <iframe></iframe> 属性 src 外部页面的地址，可以使用相对路径 width和height 可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时，页面将会在相应的内联框架中打开 内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架 超链接 可以使当前页面跳转到其他的页面 <a>链接的文字</a> 属性 href 指向链接跳转的目标地址，可以是一个相对路径 还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的超链接 target 指定在哪个窗口中打开链接 可选值 _self 默认值，默认在当前窗口打开链接 _blank 在新窗口中打开链接 内联框架的name属性值 在指定的内联框架中打开链接 注释 语法 <!-- 注释内容 --> 注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面中不想显示的内容 实体 在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号 实体也可以称为转义字符 实体的语法 &实体名; 常用的实体 空格 < < > > 版权符号 </B>
</div>
<div class="title2"><div class="title_more">(系统自动生成,下载前可以参看下载内容)</div><h2>下载文件列表</h2></div>
<div class="font12">
</div>
<div id="show_memo" class="show_info">
<div class="title2"><h2>相关说明</h2></div>
<div class="box_content">
<ul>
<li>本站资源为会员上传分享交流与学习,如有侵犯您的权益,<a href="/about/contact.php" target="_blank">请联系我们删除</a>.</li>
<li>本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行<a href="https://www.baidu.com" target="_blank">百度</a>。</li>
<li class="red">本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用<a href="http://rarlab.com/download.htm" target="_blank">WinRAR最新版</a>进行解压.</li>
<li>如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录<a href="/user/log.php?type=5" target="_blank">反馈给我们</a>.</li>
<li>下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录<a href="/user/log.php?type=5" target="_blank">反馈给我们</a>，经确认后退回积分.</li>
<li>如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.</li>
</ul>
</div>
</div>
<div class="detail_line">
<B>相关搜索</B>:
<a href="/search.php?keyword=css" target="_blank">css</a> <a href="/search.php?keyword=html" target="_blank">html</a> <a href="/search.php?keyword=布局笔记" target="_blank">布局笔记</a> </div>
<form name="search" action="/search.php" method="get">
<div class="detail_line">
输入关键字，在本站1000多万海量源码库中尽情搜索：<INPUT maxLength="50" size="20" name="keyword" value="">
<input type="submit" value="搜 索" name=_search2>
</div>
</form>
</div><!-- Show end. -->
</div>
<div id="sidebar" class="fr"><!-- Left begin -->
<!--频道分类开始-->
<div class="box">
<div class="title"><h2>下载资源分类</h2></div>
<div class="channel_sort">
<h3><a href="/21/">移动开发</a></h3>
<h3><a href="/16/">开发技术</a></h3>
<h3><a href="/15/">课程资源</a></h3>
<h3><a href="/19/">网络技术</a></h3>
<h3><a href="/12/">操作系统</a></h3>
<h3><a href="/10/">安全技术</a></h3>
<h3><a href="/18/">数据库</a></h3>
<h3><a href="/14/">行业</a></h3>
<h3><a href="/13/">服务器应用</a></h3>
<h3><a href="/11/">存储</a></h3>
<h3><a href="/20/">信息化</a></h3>
<h3><a href="/17/">考试认证</a></h3>
<h3><a href="/22/">云计算</a></h3>
<h3><a href="/23/">大数据</a></h3>
<h3><a href="/24/">跨平台</a></h3>
<h3><a href="/25/">音视频</a></h3>
<h3><a href="/26/">游戏开发</a></h3>
<h3><a href="/27/">人工智能</a></h3>
<h3><a href="/28/">区块链</a></h3>
</div>
</div>
<div class="box">
<div class="title"><h2>资源分类</h2></div>
<div class="channel_sort">
<h3><a href="/1601/">Actionscript</a></h3>
<h3><a href="/1602/">C</a></h3>
<h3><a href="/1603/">C#</a></h3>
<h3><a href="/1604/">C++</a></h3>
<h3><a href="/1605/">Delphi</a></h3>
<h3><a href="/1606/">Java</a></h3>
<h3><a href="/1607/">Javascript</a></h3>
<h3><a href="/1608/">Perl</a></h3>
<h3><a href="/1609/">PHP</a></h3>
<h3><a href="/1610/">Python</a></h3>
<h3><a href="/1611/">VB</a></h3>
<h3><a href="/1612/">Web开发</a></h3>
<h3><a href="/1613/">硬件开发</a></h3>
<h3><a href="/1614/">其它</a></h3>
<h3><a href="//"></a></h3>
</div>
</div>
<div class="box"><!--本站统计开始-->
<div class="title"><h2>本站统计</h2></div>
<UL class="info_ul">
<LI>资源总数：<b>630</b>万个</LI>
<LI>资源大小：<b>15</b>TB</LI>
<LI>今日更新：468个</LI>
<LI>注册人数：225万</LI>
<LI>今日注册：838</LI>
</UL>
</div><!--本站统计结束-->
<div class="box"><!--Intro begin.-->
<div class="title"><h2><a href="/register.php">加入“点数信息”会员</a></h2></div>
<div class="box_content">
“点数信息”是专业的,大型的源码,编程资源等搜索,交换平台,旨在帮助软件开发人员提供源码,编程资源下载,技术交流等服务!目前源码资源大小已超过8TB。<br>
超值价格，购买下载积分，即时到帐，无需等待马上可以下载你所需的资料。无限期使用，一次购买越多越优惠！<br>
</div>
</div><!--Intro end.-->
<div class="box"><!--Intro begin.-->
<div class="title"><h2><a href="/register.php">免费获取积分</a></h2></div>
<div class="box_content">
免费获得积分的途径是通过会员下载您上传的资料，您的帐户即增加积分。<br>
立即上传资料，越多越好，被搜索到的机会越大！越早上传越早得积分，下载次数越多，您的积分越多。<br>
</div>
</div><!--Intro end.-->
<!--合作伙伴开始-->
<div class="box">
<div class="title1"><h2>合作伙伴</h2></div>
<!--推荐商家具体内容开始-->
<div class="channel_friend"><!--最多七个字-->
<ul>
<li><a href="http://www.codeproject.com/" target="_blank">CodeProject</a></li>
<li><a href="http://www.dssz.com/" target="_blank">搜珍网</a></li>
<li><a href="http://www.5177517.com/" target="_blank">建筑工程网</a></li>
<li><a href="http://www.csdn.net/" target="_blank">CSDN.net</a></li>
<li><a href="http://www.5imomo.com/" target="_blank">建筑资料网</a></li>
</ul>
</div>
</div>
</div><!-- Left end -->
</div>
<div id="footer">
<div class="content">
<div class="cr">
客服QQ:6133080 <a href="mailto:info@dssz.net">联系站长</a> · <a href="/about/guestbook.php" rel="nofollow">版权投诉</a> · <a href="/about/guestbook.php" rel="nofollow">网站修改建议</a>
</div>
<div class="cl">
© 1999-2048 <a href="https://www.dssz.net" target="_blank"><font color=red>dssz.net</font></a> <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备11031372号</a>
</div>
</div>
</div>
</body>
</html>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
//-->
</SCRIPT>
