前端基础——HTML+CSS基础入门
HTML
超文本 标记 语言 --- 用来搭建网页结构
这里的“超”，是超越文本，因为在网页上还有图片，超链接，音频，视频等等，都是超越文本的
这里的“文本”，就是用英文写的文字
这里的“标记”，是标签的意思 标签 <>
这里的“语言”是与浏览器沟通的语言
html标签中有双标签和单标签
行间样式：
只作用于一个元素上，若想用在多个元素上，则需要在每个元素上都复制一个样式，非常麻烦，不用
<!--行间样式--> <div onclick="this.style.width='500px';this.style.height='500px';" style="width: 200px; height: 200px; background-color: red;"></div>
id选择器 内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--内部样式-- 要写在head里面 -->
<style type="text/css">
#id_css{
width: 200px;
height: 200px;
background-color: #aaccee;
}
</style>
</head>
<body>
<div id="id_css">id选择器</div>
</body>
</html>
外部样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--外部样式--> <link rel="stylesheet" type="text/css" href="css/all.css"/> <title></title> </head> <body> <div id="id_css">id选择器</div> </body> </html>
CSS
层叠样式表（个人感觉这个翻译真的不太舒服，不直观难理解），其实就是给网页结构加上不同的表现样式，给网页做装饰的。
常见样式：
#id_css{
width: 200px; /*宽度*/
height: 200px; /*高度*/
background-color: red; /*背景颜色，可以是rgb模式，英文模式，十六进制模式*/
/*当同时设置了背景颜色和背景图片的时候,背景图片将会在最上面,它的层级要高*/
background-image: img/bg.jpg; /*默认图片是平铺的*/
background-repeat:no-repeat ; /*不平铺*/
/*
repeat-x 水平平铺
repeat-y 垂直平铺
*/
background-position:100px 50px ;
/*
背景定位，其中有两个参数，第一个向右移动，第二个是向下移动
background-position:10% 30% 定位也可以设置百分比
background-position:left|center|right 横向设置 top|center|bottom 纵向设置
当只写了一个英文字母的时候，会根据不同的单词进行解析，看看这个单词归谁管，谁管就按照规定的去定位
如果在后面只写了一个数字，浏览器识别不了，则默认在X轴上定位
*/
}
#id_css{
/*这里是将二者结合起来用,这样会让图片居中平铺,而两侧则会被补齐,通常做整站水平或者导航的时候用到*/
background-repeat:repeat-x ;
background-position:center 0 ; /*用center*/
}
#id_css{
background-repeat:no-repeat ;
background-position:-100px -189px; /*有正就可以用负*/
}
background-attachment: fixed; 这里如果定位了center，图片可能会消失，因为这时候定位的并不在元素中，而是在整个可视区域去定位的。
body{
height: 2000px;
background-image: url(img/bg_image.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; /*fixed 固定定位背景图片，它就不会跟着滚轮滑动了*/
background-attachment: scroll; /*scroll 默认为跟着滑动 不写也是一样 就是默认状态*/
}
以上background这些都是单独写在每一行的，这种就叫做单一样式。
那么将他们合并在一起去写一个复合样式，下面开始写复合样式：备注复合样式中，各个属性的位置并不固定可以交换，但是定位的两个数值要紧跟着，不能给分开。
position的数值，一定不要忘了单位（px）
body{
background:url(img/bg_image.jpg) no-repeat -100px 20px scroll ;
}
边框border --border在不同浏览器中，如果边框太粗，比如10px，就很容易造成浏览器兼容问题。比如dotted ie10中是圆形的点，Chrome中是方形的点（新版本的Chrome也是原点了，但也仍然要注意，反正其实也用不上大像素的border），所以还是用小像素。
div{
height: 300px;
width: 300px;
border: 10px dotted red; /*点状线*/
border: 10px solid red; /*实线*/
border: 10px dashed red; /*虚线*/
border-bottom: 10px solid red;
}
border细节控制
<!--
border
border-top
border-right
border-bottom
border-left
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
-->
不要某个位置的边框
border-left:none;
知识点：同一个元素两边边框相交的地方是斜线
JavaScript
浏览器的脚本语言，至今不知道脚本到底怎么翻译出来的，不吐槽了。其实就是网页的行为，让网页动起来，干点事情。
浙公网安备 33010602011771号