做那种英文网站有流量,网站不能正常显示出现后台代码,360建筑网一级消防工程师,国家网站后缀近日就开始回顾html和css相关知识啦#xff0c;并且会学习html5和css3的新知识#xff0c;以下是我对记忆不太深刻的地方以及新知识点的总结#xff1a; Web标准#xff1a; 结构#xff1a;用于对网页元素进行整理和分类#xff0c;即HTML 表现#xff1a;用于设置网页…近日就开始回顾html和css相关知识啦并且会学习html5和css3的新知识以下是我对记忆不太深刻的地方以及新知识点的总结 Web标准 结构用于对网页元素进行整理和分类即HTML 表现用于设置网页元素的版式颜色大小等外观样式即CSS 行为指网页模型的定义及交互的编写,即Javascript VS常用快捷键 快速复制下一行shiftalt下箭头 同时选中多个相同单词ctrld 添加多个光标ctrlalt下箭头上箭头 全局替换某个单词ctrlh 快速定位到某一行ctrlg 选择某个区块shiftalt,之后拖动鼠标 !DOCTYPE:文档类型声明标签  DOCTYPE html即为当前页面采用的是HTML5版本来显示网页   html langenen表示该网页为英文网页zh-CN表示为中文网页fr为法文网站  字符集Character set是多个字符的集合以便计算机能够识别和存储各种文字。在head标签内可以通过meta标签的charset属性规定HTML文档应该使用哪种字符编码一般情况下统一使用UTF-8编码即万国码基本包含了全世界所有国家需要用到的字符。 换行标签:br/单标签不像段落标签段落与段落之间有较大空隙换行只是移至下一行 水平线hr 文本格式化标签突出重要性 加粗strong/strong,b/b 倾斜em/em,i/i 删除线del/del,s/s 下划线ins/ins,u/u 均推荐使用前者语义更加强烈 img标签相关属性 title鼠标移至图片上所显示的文字 alt图像显示不出来时用该文字替换 border:图片边框粗细 相对路径 下一级路径/  超链接a标签相关属性 href指定链接目标的url地址 target指定链接页面的打开方式_self默认打开方式_blank打开新的窗口 内部链接a href”index.html“XXX/a 空链接a href”#“XXX/a 下载链接a href”img.zip“XXX/a,如果href里面地址是一个文件或者压缩包会下载这个文件 锚点链接 快速定位到链接里的某个位置a href”#name“XXX/a将目标标签加上属性id”name“例如h1 idnameXXX/h1,此时点击链接就会跳转到h1标签指代的位置 特殊字符(必记) 空格nbsp; 大于gt;,great than 小于lt; ,less than 表格标签 table aligncenter border1 cellpadding20 cellspacing0 width200theadtr!--表格中的行--th姓名/th!--表头单元格加粗居中显示--th姓名/th!--表头单元格加粗居中显示--th姓名/th!--表头单元格加粗居中显示--th姓名/th!--表头单元格加粗居中显示--/tr/theadtbodytrtd!--表格中的单元格table data--单元格内的文字/td/tr/tbody/table cellpadding规定单元边沿左边沿与其内容之间的空白默认1像素 cellspacing规定单元格之间的空白默认2像素 border规定表格是否有边框 align相对周围元素的对齐方式 width规定表格宽度 合并单元格 跨行单元格以最上方单元格为目标单元格 跨列单元格以最左侧单元格为目标单元格 以下为样例 table aligncenter border1 cellpadding20 cellspacing0 width500theadtr!--表格中的行--th rowspan2姓名/th!--表头单元格加粗居中显示--th colspan2姓名/th!--表头单元格加粗居中显示--/tr/theadtbodytrtd rowspan2!--表格中的单元格table data--单元格/tdtd!--表格中的单元格table data--单元格/tdtd!--表格中的单元格table data--单元格/td/trtrtd!--表格中的单元格table data--单元格/tdtd!--表格中的单元格table data--单元格/td/tr/tbody/table 注意给目标单元格加上属性之后记得删除多余的单元格上图删去了第三列第一个单元格和第三行第一个单元格 列表标签 有序 olli/li/ol 自定义dldtdd/dd/dt/dl 表单标签 表单域 form action methodpost namename1/form input typetext value请输入用户名 maxlength6!--文本框-- input typepassword!--密码框-- input typeradio namesex!--单选按钮-- input typecheckbox checked!--多选框-- input typesubmit value免费注册 input typereset value重新填写!--重置按钮重新填写数据-- input typebutton!--后期结合JS使用常用于给手机发送短信-- input typefile !--上传文件-- 注意单选框若要实现多选一的效果必须将同一类的选项附上相同的名字这样才能实现多选一的效果。 value值为文本框默认带的文字 单选按钮和多选按钮共有属性checked默认选中 label标签用于绑定一个表单元素当点击label标签内的文字时浏览器会自动将焦点光标转到或者选择对应的表单元素用来增加用户体验 例如填写用户名信息时选择用户名即文字就可聚焦该文本框 label fortext用户名/labelinput typetext idtext 注意label属性里的for和input的id属性要相对应 下拉表单 select name idoption valueXXX/optionoption valueXXX/optionoption value selectedXX/optionoption valueXXX/optionoption valueXXX/option/select select与option搭配 文本域 textarea name id cols30 rows10/textareatip若要写出两列整齐的结构例如用户填写信息时姓名文本框可使用表格进行规划姓名文本框即两个td整体一行为tr以此类推。 推荐查阅信息的网站: W3C:  http://www.w3school.com.cn/ id选择器: #div {color: red;} div iddivCSDN博客/div  id选择器只能调用一次用过一次之后其他相同id名字不可再次使用 通配符选择器将所有标签都改样式。 * {color: red;} 字体样式 .em{font-style: italic;} 字体复合样式font:font-style font-weight font-size/line-height font-family;顺序不可颠倒 text-aligncenter文本水平居中 text-decoration:line-through;删除线underline,下划线overline,上划线 none取消 text-indent2em文本缩进第一行 内联样式在html文件中的style中的样式 行内样式在标签属性中写的样式 外部样式表专门写一个css文件写样式 link relstylesheet hrefxxx.css文字内的元素不能使用块级元素p标签里不可存放块级元素h1-h6里均不能存放块级元素常见行内块元素img表单元素单元格td等 background-colortransparent设置背景透明效果 background-positionxy如果只写一个另一个默认居中混合单位background-position20px centerx为20pxy为center有顺序关系background-attachmentfixed/scroll;背景图像固定/背景图像随内容滚动背景复合写法background:背景颜色 背景图片地址 背景平铺重复 背景图像滚动 背景图片位置; 例 background:transparent url(image.jpg) repeat-x fixed top; 行高为1.5即为行高为当前文字的1.5倍  选择器的权重 选择器 选择器权重 继承或*0000元素选择器0001类选择器伪类选择器0010ID选择器0100行内样式style”“1000important 重要的无穷大 注意 继承的权重为0 style#father{color: red;}p{color: pink;}/stylediv idfatherp猜猜我是什么颜色/p/div 由以上代码可知尽管ID选择器的权重比元素选择器的权重大但p元素仍然使用了元素选择器的样式因为ID选择器为父元素的样式而p元素对于父元素的样式为继承权重为0故元素选择器的样式占上方。 表格细线边框 border-collapse:collapse;  合并相邻的边框padding: 值的个数表达意思padding:5px上下左右全为5padding:5px 10px上下5左右10padding:5px 10px 20px上5  左右10 下20padding:5px 10px 20px 30px上右下左顺时针依次对应 注若一个盒模型未设定宽度或高度则设置padding之后不会撑大盒子。 块级元素水平居中设定宽度margin:0 auto;行内元素或者行内块元素水平居中给父元素添加text-align:center; 外边距合并问题(当父元素和子元素均设置margin-top时子元素与父元素的外边距合并问题最终表现为父元素和子元素离上方元素距离为二者margin-top的最大值)解决方案 为父元素加上边框将边框设置为透明给父元素设置内边距为父元素添加overflow:hidden 清除内外边距 网页元素很多都带有默认的内外边距而且不同浏览器默认的也不一致因此在布局前首先清除·网页元素的内外边距。  * {padding: 0;margin: 0;} 行内元素设置内外边距时只可设置左右内外边距设置上下无效除非将其改为块级元素或行内块元素。 ps相关操作快捷键 ctrlr打开标尺或者视图-标尺右击标尺改变单位为像素ctrl加号放大试图缩小同理按住空格键鼠标变成小手拖动图片至任意位置用选区拖动可以直接测量大小ctrld取消选区也可直接在旁边空白处点击一下 去掉无序列表前面的圆点在li样式里加入list-style:none; border-radius: 若想制作成如上样式只需将border-radius设置为矩形高度的一半即可。 div classrect stylewidth: 200px; height: 100px; background: pink; border-radius: 50px;/divborder-radius也可写成四个值从左上开始顺时针对应圆的半径若为两个值则分别对应两组对角线第一个值为左上角对应的对角线以此类推 盒子阴影 box-shadow:h-shadow v-shadow blur spread color inset; 值描述h-shadow必需水平阴影的位置允许负值v-shadow必需垂直阴影的位置允许负值blur可选模糊距离影子的虚实spread可选阴影的尺寸大小color可选阴影的颜色inset可选将外部阴影outset改为内部阴影 阴影默认为外部阴影但不可写出来写出来之后阴影就无效但如果要改为内部阴影内部阴影inset就必须得写出来盒子阴影不占用空间不会影响其他元素的排列 box-shadow: 10px 10px 10px rgba(0,0,0,.3); 文字阴影 text-shadow:h-shadow v-shadow blur color; 值描述h-shadow必需水平阴影的位置允许负值v-shadow必需垂直阴影的位置允许负值blur可选模糊的距离color可选阴影的颜色 格式和盒子阴影基本相同  浮动元素具有行内块的特性如果行内元素有了浮动则不需要转换为行内块或者块级元素就能直接设置宽高如果块级盒子没有设置宽度默认宽度和父级一样宽但若是添加浮动元素他的大小根据内容决定浮动盒子会避开标准流盒子标准流盒子不会避开浮动盒子 浮动元素不再占有原文档流的位置导致外部元素无法感知浮动盒子而造成高度坍塌 解决高度坍塌的方法 1.在最后一个浮动元素后面加上一个div classclear/div新增的盒子必须是块级元素 style.box {width: 500px;background-color: antiquewhite;border: 1px solid black;}.c1,.c2,.c3 {float: left;width: 50px;height: 50px;background-color: aquamarine;margin-right: 5px;}.clear {clear: both;}/style /head bodydiv classboxdiv classc1/divdiv classc2/divdiv classc3/divdiv classclear/div/div /body  2.给父元素加上overflow属性将其属性设置为hidden或auto或scroll 3.给父元素添加伪元素使其撑开父元素 .clearfix:after{content: ;display: block;height:0;clear: both;visibility: hidden;}给父元素加上类名clearfix之后会产生同样效果 4.给父元素添加双伪元素还是要给父元素添加类名clearfix .clearfix:before,.clearfix:after{content: ;display: table;}.clearfix:after {clear: both;}