基础总结
来源：互联网 发布：微念科技有限公司 知乎 编辑：程序博客网 时间：2024/06/05 10:50
行元素：a-锚点 br-换行 em-强调 i-斜体 img-图片 input-输入框lebel-表格标签 q-短引用 select-选择项目 span-定义文本内区块sub-上标 sup-下标 textarea-多行文本输入框 var-定义变量块元素：div-常用块级主要标签 dl-定义列表 form-交互表单 h1-h6标题hr-水平分割线 ol,ul-排序表单，非排序列表 p-段落 pre-格式化文本table-表格 blockquote-块引用伪类选择器顺序不要搞错哦！！！
a:link { color : red } a:visited { color:green } a:hover { color: blue } a:active { color: black }inline-block 去掉空隙的方法
锚点
<a href="#1F">三国演义</a><a href="#2F">水浒传</a><a name="1F"></a>貂蝉戏吕布 br*25 （“必须足够长”）<a name="2F"></a>三打祝家庄 br*25 （“必须足够长”）导航栏
<style>#nav ul { list-style:none;去掉 ul 前面的小点点}#nav ul li { display : inline-block;}#nav ul li a{ text-decoration ：none}</style><div id="nav"> <ul> <li><a href="#">糯米</a></li> <li><a href="#">新闻</a></li> <li><a href="#">好123</a></li> </ul></div>CSS的引入有三种方式(一共有四种)
行内样式(在开始标签里写style)内部样式(在head里面写style)外部样式(把样式写成一个文件,在head通过link去引入)三种引入方式的优先级理论上:行内样式>内部样式>外部样式实际上优先级的高低是样式距离标签的远近而来的,离得近级别高,就近原则选择器
id选择器优先级最高 ---100class选择器其次 ---10标签名选择器最低 ---1#fir{ /* 1.id选择器 */ background-color: cyan;}.p1,.p3,.p5{ /* 2.类选择器 */ background-color: #ADFF2F;}div{ /* 3.标签名选择器 */ width: 100px; height: 100px; background-color: red;}/* 后代选择器 */div p{/* 先写父级空格要找的子元素的标签名*/ color: aqua;}#div1,.p1,em{ /* 群组选择器 */background-color: slateblue;font-size: 100px;}/*子代选择器*/ div >p{}/* * :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。 * 选择列表中的第一个 <li> 元素并设置其样式：*/li:first-child{background:yellow;}盒模型
四部分:内容,填充padding,border,margin(外边距)盒子所占的宽度 = margin-left + 左border + padding-left + width + padding-right + 右border + margin-right背景颜色: 内容 + padding + border标签设置的width和height指的是内容的宽高使用场景:当调整父子关系位置时,最好是位置父级的padding当调整同级关系位置时,最好设置其中的margin设置的宽高是内容的宽高padding作用相当于填充物,能改变内容到标签边缘的距离如果加上了padding,还想保证标签尺寸不变,需要相应的减小内容的尺寸,保证平衡背景颜色包含了内容,padding和borderborder也会增加宽度,所以想保证尺寸不变,需要内容减去border的宽度<style>#big{ width: 400px; height: 200px; background: yellow; margin: 0 auto; padding-top: 100px; /*text-align: center;他设置后有传递性 非块标签居中text-align: center; line-height:200px设置非块元素的居中，让lineheight的值等于hight的值 前提：内容为非块元素，且不能换行 * / line-height: 200px; /*块：margin:0 auto; padding-top 行：text-align:center 1.padding-top 2.line-height=height * */}#small{ width: 200px; height: 200px; background: gray; margin: 0 auto;}span{ background: green;}</style><div id="big"> <div id="small"> <span> 文字 </span> </div></div>table 的合并
<table border="1" bordercolor="blue" cellspacing="20" cellpadding="20"><tr> <!--col 行--> <td colspan="2">赵云</td> <td>19</td> <!--<td>男</td>--></tr><tr> <!--row 列--> <td rowspan="2">张飞</td> <td>20</td> <td>男</td></tr><tr> <td>关羽</td> <td>25</td> <!--<td>男</td>--></tr></table>常见的行块标签
10. 常见的行块标签
浮动
浮动特点我们正常的标签书写简称为文档流1.浮动会脱离原有的文档流，不占据原来的位置，在父级元素里面进行浮动，如果有文档流，正常写即可2.被浮动的块元素，可以共存一行3.被浮动的元素有浮动的边界，就是其父级元素的宽度浮动不良影响1.当所有子元素都设置了float时，父级元素高度不会被撑开，高度是零，需要设置父级元素默认的高度2.让浮动元素整体水平居中，可以给其加上一个父级元素，让父级元素水平居中清除浮动浮动会产生两个不良影响：1.是影响之后的同级元素 2.是因为浮动，父级元素没有被内容撑开，造成父级没有高度解决方法:1.给父级一个定高2.同级间 在下面加clear:both，可以给一个空白标签<p></p> p{clear:both}，清除上面的浮动3.父级加 overflow:hidden4.父级可以用浮动清浮动，会影响下面父级的同级元素reset.css 重置浏览器标签的样式表
*{ margin:0; padding:0;}精灵图形
<style type="text/css"> div { width: 120px; height: 115px; background: url(精灵图片1.png) no-repeat; border: 1px solid red; } div:hover { /*绝大部分，精灵图移动的坐标都是负值*/ background-position: 0 -115px; }</style><body> <div></div></body>iframe
14. iframe的作用就是能把其他的html文件作为加载的元素内容引入到父级内显示
行标签加 浮动 之后可以 撑起来 加宽 高内容
a{ width: 200px; height: 200px; background: red; float: left;}多列布局
div{ width: 1024px; padding: 30px; margin: 0 auto; font-family: "微软雅黑"; color: #333; /*设置当前屏幕，平均分成的列数*/ /*column-count: 5;*/ /*设置列宽，列数自动调整*/ column-width: 50px; column-rule: 2px dotted red; column-gap: 120px;}/*创业先锋网会有这样的布局*/<div id=""> <p> 此前一天晚上，马来西亚正式向姜哲下达“逐客令”。马外交部长阿尼法宣布，马来西亚已经把朝鲜驻马大使姜哲列为“不受欢迎的人”，要求其在4日18时开始的48小时内离境。阿尼法在当天发表的声明中说，此举是针对姜哲多次批评马方而采取的行动。马方2月28日曾要求朝鲜赴马来西亚政府代表团在当晚10时前就姜哲此前针对马方的攻击言论作出书面道歉，否则将采取行动。但在截止时间过去4天后，朝方依旧没有道歉迹象。马方随后要求姜哲于当地时间4日18时到外交部与负责双边事务的副秘书长努希尔万见面，但姜哲或其他朝鲜使馆高级官员并没有前往。鉴于此，马外交部向朝鲜使馆发送外交照会，宣布姜哲为“不受欢迎的人”。 </p></div>视距
<style type="text/css"> #main{ width: 302px; height: 452px; border :1px solid red; margin: 100px auto; transform-style: preserve-3d; /*调节元素被查看的视角*/ /*数值越小，视距越大*/ perspective: 4px; } #main img{ /*默认是50% 50%*/ transform-origin:left ; transition:all 1s; width: 100%; height: 100%; } img:hover{ transform: rotateY(-40deg); }</style><div id="main"> <img src="../03练习/03老张律师网/img/002.jpg"/> </div> 表单
<form action="" method="post"> <input type="submit" value="提交数据"/> </form> <table border="" cellspacing="" cellpadding="" > <tr> <td>用户名：</td> <td><input type="text" placeholder="输入一个名字啊"></input></td> </tr> <tr> <td>密码：</td> <td><input type="password" placeholder="密码"></input></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" placeholder="再次输入密码"></input></td> </tr> <tr> <td>年龄：</td> <td><input type="text" value="18"></input></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 <input type="radio" name="sex" checked="checked"/>其他 </td> </tr> <tr> <td>邮箱：</td> <td><input type="text" placeholder="请输入正确的邮箱"></input></td> </tr> <tr> <td>城市：</td> <td> <select name="area"> <optgroup label="地区"> <option value="">铁岭</option> <option value="">大连</option> <option value="">铁岭</option> </optgroup> </select> </td> </tr> <tr> <td>地区：</td> <td> <select name="area"> <optgroup label="地区"> <option value="">铁岭</option> <option value="">大连</option> <option value="">铁岭</option> </optgroup> </select> </td> </tr> <tr style="height: 60px;"> <td> 交友目的： </td> <td> <a style="width: 50px;border: 1px solid grey;float: left;">吃喝玩乐</a> </td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" />敲代码 <input type="checkbox" />敲代码 <input type="checkbox" />敲代码 </td> </tr> <tr> <td>上传照片：</td> <td> <input type="file" 敲代码/> </td> </tr> <tr> <td>我的战绩：</td> <td> <textarea rows="18" cols="40" style="resize: none;"></textarea> </td> </tr> <tr> <td> <input type="submit" value="确认"/> <input type="submit" value="取消"/> <input type="submit" value="提交"/> </td> </tr> </table>伪元素
<style type="text/css"> #div1 { width: 200px; height: 200px; background: red; } #div1::after { content: "World"; color: white; } #div1:before{ content: "Hello"; color: white; }</style></head><body><div id="div1">111</div></body></html>content一般和伪类里的after和before放在一起使用通过伪类添加文本内容通过after添加的也不是标签，就是一个特殊的效果 seo
搜索引擎优化seo是通过网站内部的优化比如结构，内容，代码，提高在搜索引擎的排名，从而吸引使用者进入网站，获得免费的流量，产生直接的品牌推广，增加流量红利1.白帽SEO：上面2.黑帽SEO：通过使用欺骗的关键词，把用户带进网站，从而提高流量白帽：爬虫结构：首页会控制a标签的个数，顶部和尾部都有导航，内容不会过深，电商网站为了方便搜索引擎爬虫获取自己网站的数据，一把结构都在2-3层左右 主导航-副导航-面包屑导航内容：titlemeta keywords 关键词meta description 描述span div 没有含义多用语义化标签 让爬虫更方便 a 会加title,对a标签进行说明 ref="nofollow"h1 标题 h2副标题 其他的标题不用文字大段的用P 段落img alt 对图片的解释说明strong em 都是强调作用多用margin padding 少用br重要内容写在前面重要内容不要用JS来输出，尽量少用iframe尽量不要用display="none" 东西先放在父级外面，需要的时候调回来相对定位 relative
它们相对的是自己的坐标起点进行定位它们不会脱离文档流原先在文档流里的位置，依旧占据当元素需要微调的时候，使用相对定位通常相对定位用于辅助绝对定位来使用绝对定位
1.不占据原来的文档流的位置2.绝对定位的位置是一级一级去查找父级元素，直到找到relative的父级， 然后开始定位，父级设置relative,子元素设置absolute 如果子元素全部绝对定位，需要给父元素加定高来撑起父元素3.一般绝对定位用于界面中重叠部分的铺设4.脱标的元素：可以设置宽高，也可以和其他元素共存一行 脱标可以认为是脱离了文档流的标签父级relative,子集absolute,脱标，手动设置父级的高度，有重叠关系的时候用的最多z-index作用是修改因为定位产生的层级问题z-index后面的参数没有单位，只要设置大的，就在最上面z-index 只用于定位div6 找到bigdiv的relative 开始 top 0 left 100px 定位，但是其在div3中，已经有了div3的left top 值，所以div6的left top 是在div3的 基础上进行加减固定定位
脱标元素设置的位置相对于浏览器窗口进行定位通常用于固定导航，广告和回到顶部老版本的IE浏览器不支持这个属性 1 0
- 基础总结
- 基础总结
- ----基础总结----
- 基础总结
- 基础总结
- 基础总结
- 基础总结
- 基础总结
- 【C#基础】基础总结
- 黑马程序员-基础-基础总结
- 【总结】Java基础总结⑵
- 【总结】软件测试基础总结
- 【总结】Java基础总结⑶
- 【总结】Java基础总结⑷
- 【总结】Java基础总结⑸
- 【总结】Java基础总结⑹
- 【总结】Java基础总结⑺
- BPEL基础总结
- weka，FP，priori
- 嵌入式系统设计师
- 11大科技趋势
- 新的开始
- hive报错---安装系列六
- 基础总结
- java中讲讲FileReader的用法，举例？
- nginx(1)linux系统安装nginx
- 09-排序1 排序 (25分)
- OpenCV 学习记录7 图像实时磨皮及皮肤检测
- Ubuntu16.04安装MySQL5.7的教程
- [数据结构]堆排序
- APP开发实战167-开机自启动的功能设计
- 第十周：[leetCode] 72. Edit Distance
