【文件属性】：
文件名称：前端css+html+布局笔记
文件大小：1.44MB
文件格式：XMIND
更新时间：2020-10-04 13:50:39
css html 布局笔记
详尽的前端笔记，包含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页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
实体也可以称为转义字符
实体的语法
&实体名;
常用的实体
空格
<
<
>
>
版权符号
©
图片标签
<img />
使用图片标签可以向页面中引入一个外部图片
属性
src
指向一个外部图片的路径，可以使用相对路径
alt
指定一个在图片无法加载时对图片的描述
搜索引擎主要通过该属性来识别图片的内容
如果不写该属性则搜索引擎会对图片进行收录
width
设置图片的宽度
height
设置图片的高度
图片的格式
JPEG
颜色丰富的图片，如，照片
GIF
颜色单一，简单透明的图片，动态图
PNG
颜色丰富，复杂透明的图片
图片选择的原则
效果一致，用小的
效果不一致，用效果好的
相对路径
相对于当前资源所在的目录的路径
可以使用../返回一级目录，返回几级使用几个../
xHtml语法规范
1.HTML中不区分大小写，但是尽量使用小写
2.HTML的注释不能嵌套
3.标签必须结构完整
要么成对出现
要么自结束标签
4.标签可以嵌套但是不能交叉嵌套
5.属性必须有值，且值必须加引号，单引号双引号都可以
文本标签
<em>
表示语气上的强调
<strong>
表示内容的重要性
<i>
表示单纯的斜体
<b>
表示单纯的加粗
<small>
表示细则一类的内容
<cite>
表示参考的内容，凡是加书名号的都可以使用cite
<q>
短引用，行内引用
<blockquote>
长引用，块级引用
<sup>
上标
<sub>
下标
<del>
删除的内容
<ins>
插入的内容
<pre>
预格式标签，可以保留代码中空格换行这些格式
<code>
表示程序代码
列表
无序列表
使用ul来创建一个无序列表，在列表中使用li来表示一个列表项
无序列表使用符号作为项目符号
有序列表
使用ol来创建一个无序列表，在列表中使用li来表示一个列表项
使用有序的序号作为项目符号
定义列表
列表相关的元素都是块元素，他们之间可以互相嵌套
去除项目符号
list-style:none
<div class="p10 mt20 tc">
<a rel="nofollow" class="btn btn-big download" href="javascript:void(0)" title="立即下载">立即下载</a>
</div>
<br/>
</div></article>
<div class="single-xg mb-40 pb-40">
<div class="con-title"><h3>网友评论</h3>
</div>
<div class="new-list">
<ul class="row">
</ul>
</div>
</div>
<div class="single-info mb-40"></div><div class="single-xg mb-40 pb-40">
<div class="con-title"><h3>相关文章</h3>
</div>
<div class="new-list">
<ul class="row"><li class="col-md-6 col-sm-6 col-xs-6"><a href="/down/3978881.html" target="_blank" title="前端布局">前端布局</a></li><li class="col-md-6 col-sm-6 col-xs-6"><a href="/down/6430200.html" target="_blank" title="前端布局设计">前端布局设计</a></li><li class="col-md-6 col-sm-6 col-xs-6"><a href="/down/3874350.html" target="_blank" title="前端-flex布局案例">前端-flex布局案例</a></li><li class="col-md-6 col-sm-6 col-xs-6"><a href="/down/4325602.html" target="_blank" title="前端布局-Position详解">前端布局-Position详解</a></li></ul>
</div>
</div></div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="sidebar"><aside id="rand_post-2" class="widget widget_rand_post"><h3 class="widget-title">推荐文章</h3><ul class="new-list"><li><a href="/1214.html" title="笔记示例" target="_blank"><span class="title_color">笔记示例</span></a></li><li><a href="/1215.html" title="123" target="_blank"><span class="title_color">123</span></a></li><li><a href="/1217.html" title="React Apollo入门" target="_blank"><span class="title_color">React Apollo入门</span></a></li><li><a href="/1279.html" title="TypeScript：字符串转换为数字" target="_blank"><span class="title_color">TypeScript：字符串转换为数字</span></a></li><li><a href="/1282.html" title="Jackson设置JSON的日期格式" target="_blank"><span class="title_color">Jackson设置JSON的日期格式</span></a></li><li><a href="/1287.html" title="5月30日周一上午" target="_blank"><span class="title_color">5月30日周一上午</span></a></li><li><a href="/1292.html" title="股市早8点（10月15日周一）" target="_blank"><span class="title_color">股市早8点（10月15日周一）</span></a></li><li><a href="/1293.html" title="男人的葵花宝典" target="_blank"><span class="title_color">男人的葵花宝典</span></a></li><li><a href="/1195.html" title="Spring boot maven打包后文件变大原因以及解决方法" target="_blank"><span class="title_color">Spring boot maven打包后文件变大原因以及解决方法</span></a></li><li><a href="/1198.html" title="Maven使用本地jar包" target="_blank"><span class="title_color">Maven使用本地jar包</span></a></li></ul></aside>
<aside id="rand_post-2" class="widget widget_rand_post">
<h3 class="widget-title">相关下载</h3>
<ul class="new-list">
<li><a href="/down/1585563.html" title="前端css+html+布局笔记下载" target="_blank"><span class="title_color">前端css+html+布局笔记下载</span></a></li>
<li><a href="/down/3978881.html" title="前端布局下载" target="_blank"><span class="title_color">前端布局下载</span></a></li>
<li><a href="/down/6430200.html" title="前端布局设计下载" target="_blank"><span class="title_color">前端布局设计下载</span></a></li>
<li><a href="/down/3874350.html" title="前端-flex布局案例下载" target="_blank"><span class="title_color">前端-flex布局案例下载</span></a></li>
<li><a href="/down/4325602.html" title="前端布局-Position详解下载" target="_blank"><span class="title_color">前端布局-Position详解下载</span></a></li>
</ul>
</aside>
</div>
</div>
</div>
</div></main><section id="footer" class="pt-30 pb-20"><div class="container"><div class="footer-top clearfix"><div class="copyr text-center"><div class="footer-menu clearfix mb-10"><ul class="footer-menu-con"><li><a href="/zuixin/">最新编程技术文章</a></li><li><a href="/sitemap.xml">网站地图</a></li></ul></div><p>Copyright © 2021-2022 www.miaokee.com 秒客网 备案号：<a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备2021167564号</a></p><p>免责声明：本站文章多为用户分享,部分搜集自互联网,如有侵权请联系站长,我们将在72小时内删除。<span class="emailbox" title="emailbox"></span></p></div></div></div></section><mip-fixed type="gototop" class="gototop mip-element" mipdata-fixedidx="Fixed0" style="z-index: 10000; bottom: 90px; right: 10%;"><mip-gototop threshold="300" class="mip-element mip-layout-container mip-gototop-show"><i class="iconfont"></i></mip-gototop></mip-fixed><script id="opendown" type="text/html">
<div class="opendown_header">
<i class="fa fa-cloud-download" aria-hidden="true"></i>下载文件
</div>
<div class="opendown_body">
<ul>
<li class="text-danger likes down-1"><strong>资源为：XMIND 文件大小为：1.44MB</strong></li>
<li class="opendown_title down-1">前端css+html+布局笔记</li>
<li class="text-danger down-1"> 下载协议：本网站资源收集于网络并不能保证每一条都是完美的资源,您下载本资源赞助的费用仅仅是对网站的友情支持与本资源内容无关,一旦赞助不支持退款。 </li>
<li class="text-danger down-1"> <label><input type="checkbox" value="1" name="agreetxt" /> 同意下载协议 </label> </li>
<li class="down-1"> <a href="javascript:void(0)" class="btn btn-big btn-blue btngetdown">获取下载地址</a></li>
</ul>
</div>
</script>
<script id="paydown" type="text/html">
<div class="opendown_header" id="pay-title">填写信息</div>
<div class="opendown_body">
<div id="pay-1">
<ul>
<li class="opendown_title">前端css+html+布局笔记</li>
<li>
<div>
<span class="for-span">邮箱地址：</span>
<input type="text" class="for-down" id="pay-email" data-rule="required;email" name="email" value="" placeholder="输入邮箱地址以便发送订单信息">
</div>
</li>
<li class="text-danger">邮箱建议使用QQ邮箱，填写邮箱方便查询订单信息</li>
<li class="down-1"><a href="javascript:void(0)" type="button" class="btn btn-big btn-blue downurl" id="click-pay">高速下载</a></li>
</ul>
</div>
</div>
</script>
<script>
$('.download').click(function(){
layer.open({
type: 1,
shade: 0.8,
title: false,
closeBtn: 1,
area: ['350px', ''],
content: $('#opendown').html()
});
})
$(document).on('click','.btngetdown',function(){
var id=/\/(\d+)\./.exec(window.location.href)[1];
if(!$('[name="agreetxt"]').is(':checked')){
alert('请同意下载协议');
}else{
layer.closeAll();
layer.open({
type: 1,
shade: 0.8,
title: false,
closeBtn: 1,
area: ['350px', ''],
content: $('#paydown').html()
});
}
})
$(document).on('click','#click-pay',function(){
var id=/\/(\d+)\./.exec(window.location.href)[1];
var email=$.trim($('#pay-email').val());
if(email.length==0){
alert('请填写邮箱地址，接收下载文件和查询订单信息');
return;
}
if(!/\w+@\w+\.\w+/.test(email)){
alert('请填写邮箱正确的邮箱地址，建议使用QQ邮箱');
return;
}
layer.closeAll();
layer.open({
type: 2,
title: '赞助网站',
shadeClose: true,
shade: 0.8,
area: ['580px', '630px'],
content: '/default/pay/init?id='+id+'&email='+email
});
})
</script>
<script type="text/javascript" src="/statics/miaokee/js/show.js">
</script>
</body>
</html> 