软件架构分两类:b/s,c/s.
html的版本迭代.代码的编写要注释版本型号.
html的代码要规范.
html元素的高度和宽度如果只改变一个,则另一个是等比例改变.
图片使用原则:效果一致,使用小的. 效果不一致,使用好的.
图片类型:gif,png,jpg, 特点分别是:动态, 全面且非动态, 较全面且非动态.
html的解析时,浏览器会在一般情况下进行补充! 所以并非所有情况都会补充,所以规范!!!
html注释不可嵌套.
html元素可嵌套,不可交叉嵌套.
内联框架iframe的使用是不被推荐的,在实际开发中,内联框架中的内容不会被关注.
center标签的内容默认是居中的.可将要居中的元素都放在其内部.
其实纯表现得元素和属性都是不被推荐的.
每个标签都有一个共同的属性,对某一个标签来说是唯一的.且此属性是所有标签集中唯一的.
即为:id属性.
<a href="#">联系我们</a> 的作用是自动打开计算机的电子邮件的客户端的.
css的内联样式一般在开发中是用于测试的.不用于成品. 目的是为了使得结构和表现分离....
div标签是没有语义的,但是有主要用途.即布局.
span标签也是没有语义的,但是用途是给文字加样式.
a标签可以包含任何元素.
p标签不能报好块元素.
文件路径尽量不用中文,可能会出现问题.
复合选择器的写法就是多个选型合在一起写,挨着的.
父元素---某一元素的父亲元素.(一个)
子元素-----某一元素的子元素.(多个)
后代元素------某一元素的孩子元素以及它的孙子元素...
祖先元素-------某元素的所有祖先(包括父亲,爷爷,太爷爷等等.).
后代选择器: 选择某一元素的所有后代.如: p span{}
子元素选择器: 选择某一元素的孩子元素,而非所有后代.如:p > span{}
伪类专门表示元素的状态的. 当我们需要把处于特殊状态的元素给设置样式,则可以通过伪类.
常用伪类有:link visited hover active focus selection
伪元素 :跟伪类的用法类似,不过(伪类类似于类一样,成组操作) 当然伪元素也是成组操作,不过它更像一个元素的选择.
常见的伪元素有:first-letter first-line before after 其中before,after分别表示标签内容和标签的连接处的位置.通常与content 连起来用.
如:
p:before{ color:red; content:"helloworld"; } <p>hello worldjasklfjkalsjflkjaf</p>
如上图.
title属性干嘛的呢? 当鼠标移入到标签中时,就会自动显示title内容出来.
属性选择器: 选取带有指定属性的元素.
选择有多种写法:
如:
<style type="text/css"> p[title]{ color:red; } p[title="xx"]{ background-color:green; } </style> </head> <body> <p title="xx">hello worldjasklfjkalsjflkjaf</p> <p title="yy">hello worldjasklfjkalsjflkjaf</p> <p title="zz">hello worldjasklfjkalsjflkjaf</p>
属性选择器的用法.
其实还有其他匹配的选择.如
/* *首配 尾配 通配 */ p[title^="x"]{ color:red; } p[title$="x"]{ color: red; } p[title*="x"]{ color: green; }
兄弟选择器: 选择某一元素的兄弟元素.
具体分以下几类:
相邻兄弟选择器:
<style type="text/css"> h1 + p{ background-color: blue; } </style> </head> <body> <h1>hello world</h1> <p title="xx">hello worldjasklfjkalsjflkjaf</p> <p title="yy">hello worldjasklfjkalsjflkjaf</p> <p title="zz">hello worldjasklfjkalsjflkjaf</p>
否定伪类: 当我们在所选的元素中想去除某些特殊的元素,可以使用否定伪类!
not括号里面是选择器.
干嘛的呢?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>html</title> <link href="main.css" rel="stylesheet" type="text/css"/> <style type="text/css"> p:not(#a){ background-color:red; } </style> </head> <body> <h1>hello world</h1> <p id="a">hello worldjasklfjkalsjflkjaf</p> <p title="yy">hello worldjasklfjkalsjflkjaf</p> <p title="zz">hello worldjasklfjkalsjflkjaf</p> </body> </html>
元素样式是可以继承的.
有啥用处呢?
在需要设置祖先和后代的样式且样式一样时,只需要设置祖先的样式即可,这样可以简化编码.
但是,继承不是完全的.也就是说元素的样式不是都有继承性的....
选择器之间是有优先级别的.
什么意思呢?
就是说多种选择器选中同一个元素的同一样式时:
优先级别分别是:
内联样式1000 > id选择器100 > 类和伪类选择器 10 > 元素选择器1 > 通配选择器0 > 继承样式(无)
当多个选择器共同使用时,优先级相加作为之后的优先级.
但是,要注意: 并集选择器的优先级计算是各个单独计算的.
如果两个选择器优先级一样,则选择后者选择器确定的样式.
特殊点: 在选择器后面加入 !important 之后,它的优先级就变成最高的了. 比内联还高. 但是要尽量不在开发中使用.
从优先级来看,我们的伪类的编写也是要谨慎的.因为伪类即"状态" 状态之间有时候是有先后关系,因果关系,前后关系的. 编写原则是: 前因后果.