20170911-20170917 HTML+CSS工作学习周总结
20170911-20170917
HTML学习总结
为了布局的一切。假装在做前端~
HTML是一种超文本标记语言(Markup language)
名词/标签解释
预格式文本——按照现有的格式显示；
<abbr>abbr>
<class>class> 表单——收集用户信息，处理表单用php和asp;form标签有action属性和method属性，用来get/post。
/*
位于文档的头部，可提供有关页面的元信息，比如针对搜索引擎和更新品读的描述和关键词
*/
<meta name = "keywords" content = "教育网站"/><input>input>
<select>select>
<textarea>textarea>
<input type="button">input>
<input type="submit">input>
<input type="reset">input>
/*
input元素要有一个id，label标签就有一个for属性，和id相同就表示绑定了
*/
<label for="要绑定的id">label>字符实体
在html中某些字符是预留的，不能使用小于号和大于号，因为浏览器会误认为他们是标签。如果希望正确地显示预留字符，必须使用字符实体。
不间断空格——防止空白折叠
标准的div+CSS页面，用的标签种类很少：
div,p,h,span,a,img,ul,ol,dl,input
CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。[摘自百度百科]
html:超文本标记语言——从语义角度描述页面结构
CSS:层叠式样式表——从审美角度负责页面样式
JS:JavaScript——从交互角度描述页面行为
JSP全称Java Server Pages，是在服务器端执行的。CSS写在head里或者是单独的文件中。
<style type="text/css">style>选择器
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
一些常见的属性
字符颜色：color:red;
字号大小：font-size:40px;
背景颜色：background-color:green;
等等。。。
基础选择器
标签选择器：
- 所有的标签都可以是选择器；
- 无论这个标签藏得多深，一定能够被选上；
- 选择的是所有，经常用来描述共性而无法描述个性。
知道新标签能更清晰地表达文档结构；
id选择器，选择符是#
一个html页面，不能同时出现相同的id，即使是同一个类型也不可以。
一个标签可以被多个CSS选择器选择，共同作用，这就是层叠式的第一层含义；
user agent stylesheet（浏览器中的审查元素）不用管，用户默认设置。——灰色背景
<nav>nav>
<span>span>
<span>文章作者span><span>文章发表时间span><span>文章类型span>rem：相对字体大小单位
main标签一个文档中不超过一个。
margin padding
box-shadow——盒子阴影
h5有很多语义化标签，比如，article，section，aside，footer，figure等等，可以更好地复用。
label可以内嵌控件；
placeholder=“内容输入后隐藏”
类选择器
所谓类和id类似，class属性可以重复，CSS用点(.)来表示类。
同一个标签，可能属于多个类，雷鸣之间用空格隔开，表示后代选择器。
不要把所有的样式卸载同一个类中，类提供公共服务。某一个标签可以携带多个类。
id是js用的；
var box = document.getElementById("box");后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
用空格。
交集选择器
<style>
p.para1{
color: red;
}
style>并集选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-css并集选择器.htmltitle>
<style>
.ht,.para{
color: red;
}
style>
head>
<body>
<h1 class="ht">我是头h1>
<p class="para">我是段落p>
<p>我是段落p>
<p>我是段落p>
<p>我是段落p>
body>
html>通配符*
*表示所有元素，效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。。。可以用其他方式初始化。
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。IE7开始兼容。用大于号表示。
序选择器
first-child last-child IE8开始兼容
下一个兄弟选择器
h3+p{
color:red;
}
表示紧跟h3的兄弟，能选择上的是h3元素后面紧跟的第一个兄弟。
CSS的继承性和层叠性
[CSS]CSS的继承性、层叠性、权重
这篇博文讲的比较清楚，不再赘述。
权重问题总结
- 先看有没有选中，如果选中了，那么以（id数量，类数量，标签数量）来计算权重，谁大听谁的，如果都一样，听后写的为谁。
- 如果没有选中，那么权重是0，此时标签的数量一点用没有了。如果大家都是0，那么别数标签数量了，别看谁在下面，因为只有一个能影响，就近原则。
- 所有的权重计算，没有任何兼容性问题。
- 如果描述的一样近，比选择器权重，如果权重一样，谁写在后面听谁的。
CSS盒模型理解
css 盒子模型理解
CSS标准文档流
标准文档流