前端内容学习：HTML和CSS
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--支持utf-8字符--> <!--meta http-equiv="Refresh" Content="5; Url=http://www.etiantian.org" /--> <!--5秒后自动跳转--> <!--meta http-equiv="Refresh" Content="2" /--> <!--2秒后刷新--> <title>老男孩</title> <!--标题--> <link rel="icon" href="favicon_lc83d380.ico" > <!--标题logo--> </head> <body> <!--标签：块级标签，行内标签--> <div>adfsdfsdfsd</div> <!--什么特性都没有(块级标签里最常用的就是div)--> <h1>Luo</h1><h1>Luo</h1> <!--字体加粗加大（会生成两行，一行一个)--> <h6>Luo</h6> <!--h1到h6常用,字体是依次递减，h1最大--> <p>dfsdfdfd<br/>dfdfsdfsdafdsdf</p> <!--p标签是段落，段落之间有间隔的,<br/>是换行 --> <span>jkjkkj</span> <!--行内标签--> <!-- 标签的包含：<p>里面所有的内容应该只在<div>的块里显示出来 --> <div style="width: 200px;border:1px solid red;word-break:break-all;"> <!-- 一个像素为200大小的红色块,word-break:break-all;代表超出的就自动换行 --> <p>dfjkljkjj;lj;ljljdfdfasdfasdfsdfdsfasfdsasdffdfsdfsadfsdf</p> </div> <a href="http://www.baidu.com" target="_blank">百度</a> <!--超链接,target是新标签页中打开--> <a href="#tt" >看第二章</a> <!--跳转到id=tt的那一行--> <div style="height:2000px;background-color:red;">看第一章</div> <div id="tt" style="height:2000px;background-color:green;">看第二章</div> <img title="图片说明" src="1.jpg" style="height: 10px;width: 10px;" /> <!--定义图片--> <select> <!--选项标签，和option配套使用--> <option>北京</option> <option>上海</option> <option selected="selected">广州</option> <!--selected="selected"靠前显示--> </select> <select multiple="multiple" size="2"> <!--size显示个数为2;multiple可多选--> <optgroup label="城市"> <!--optgroup分组--> <option value="1">北京</option> <!--一般select加ID，而option加value--> <option value="2">上海</option> <option value="3">广州</option> </optgroup> </select> <!--符号--> > < <!--特殊的符号 >是> , <是< --> <!-- 各种符号：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html --> <!--input系列标签--> <input type="checkbox" /> <!--复选框--> <p>男：<input name="gender" type="radio" /></p> <!--单选:例如性别选择时,只有name值是一样的 情况下，radio才会互斥不然都是可选的--> <p>女：<input name="gender" type="radio" /></p> <input type="text" /> <!--创建一个用户输入文本--> <input type="text" value="aaa" /> <!--value属性是默认值--> <input type="password" /> <hr /> <!--横线--> <input type="file" /> <!--选择文件--> <form action="http://www.baidu.com"> <!--把下面的port和user以字典的方式传给baidu(form标签就是提交数据)--> <div> 端口:<input name="port" value="80" type="text"> <!--value是默认值--> </div> <div> 用户:<input name="user" type="text"> <!--name相当于字典的key一定要写--> </div> <input type="button" value="提交" /> <!--只是一个按键，没有提交--> <input type="submit" value="sub" /> <!--会提交给网站后台--> </form> <textarea>iii</textarea> <!--可换行输入文本--> <label for="cb1">婚否</label> <!--文本和标签做对应关系--> <input id="cb1" type="checkbox" /> <!--for属性和id要一致，就关联起来了--> <ul> <!--前面加了一个黑色的标记--> <li>111</li> <li>222</li> </ul> <ol> <!--前面加了序号--> <li>111</li> <li>122</li> </ol> <dl> <dt>标题1</dt> <!--标题--> <dd>内容1</dd> <!--内容--> </dl> <table border="1"> <!--表,border为设置边框--> <thead> <!--表头--> <tr> <!--行--> <th>第一列</th> <!--头部里面的列--> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td colspan="2">h1,j1</td> <!--colspan表示这一行占两列--> <td>h1</td> <!--body里面的列是td表示--> <td rowspan="2">h1</td> <!--rowspan表示这一列占两行--> </tr> </tbody> </table> <fieldset> <!--画一个长方形，左上角写上登录，无卵用--> <legend>登录</legend> <p>用户名：</p> <p>密码：</p> </fieldset> id,style,name:所有标签都可以定义的属性 a,target,href:a标签独有的属性 </body> </html>
1、块级标签，内联标签
1）块级标签：div、p、h系列
2）内联标签：span、a、label、input、form、img
2、各种符号
 ：空格
3、标签
input系列
select
textarea
form
div
span
a
img
table
h，ul，li，ol，dl，p，br，hr
4、属性
公共属性：id，name（一般只提交数据用），style，class
input：text，password
<input type='text' value="123" />
input：button，submit
<input type='submit' valut='BIN' />
input：checkbox
<input type='checkbox' checked="checked" /> <!--checked默认被勾选-->
input：radio
<input name='gender' type='radio' /> <!--name一样互斥，只能选其中一个-->
<input name='gender' type='radio' /> <!--checked默认勾选-->
input：file
如果想要提交文件，需要在其所在的form标签中添加特殊的一个属性：
enctype='multipart/form-data' method='POST'
form
<form action='' enctype='multipart/form-data' method='POST'> <!--action提交到某一个地址，比如百度-->
<input type='file' />
</form>
select
<select>
<option value='9' selected='selected'>ff</option> <!--提交的时候提交的是value不会把ff提交到后台-->
</select>
table:
table,
thead,tbody
tr：行
td：tbody中的列
th：thead中的列
合并单元格：colspan:横向合并 rowspan:纵向合并
简单实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 48px;background-color:pink;">头部信息</div> <div style="background: #ddd;"> <div style="width: 20%;height:500px;float: left;background-color: aquamarine">左边内容</div> <div style="width: 80%;height:500px;float: left"> <h1>Form表单提交</h1> <form action="127.0.0.1" enctype="multipart/form-data" method="post"> <p> 用户名：<input type="text" name="host" /> </p> <p> 密码：<input type="password" name="pwd" /> </p> <div style="background-color: rosybrown;color: white;"> <h6>爱好</h6> 篮球：<input name="favor" type="checkbox" value="1" /> 足球：<input name="favor" type="checkbox" value="2" /> 羽毛球：<input name="favor" type="checkbox" value="3" /> </div> <div> <h6>性别</h6> 男：<input name="gender" type="radio" value="1" /> 女：<input name="gender" type="radio" value="2" /> </div> <div> <h6>城市</h6> <select name="city"> <option value="123">深圳</option> <option value="321">广州</option> </select> </div> <div> <textarea name="mono"></textarea> </div> <div> <h4>文件</h4> <input type="file" name="file_name"> </div> <input type="submit" value="提交" /> </form> </div> </div> </body> </html>
CSS
寻找标签
class选择器
.c1{}
<div class='c1'></div>
<div class='c1'></div>
标签选择器
a{
color:red;
}
html中所有的a标签，全部红色字体
input[type='text']{
}
div
span
select
ID选择器
#uu{
}
<div></div>
<div id ='uu'></div> <!--id='uu'的时候才会引用uu的样式
层级选择器 （一层一层的绝对路径，此时.c4只有div a div下的span才可以引用，空格表示下一级）
.c3 #i8 div .c4{
}
<div class='c3'>
<a id='i8'>
<div>
<span class='c4'></span>
</div>
</a>
</div>
组合选择器 (a和p需要用同一样式时，a,p就可以都运用这个样式)
a{}
p{}
a,p{}
应用样式：
background属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .b1{ height: 500px; background-image: url("http://img11.360buyimg.com/da/jfs/t2764/70/439784599/90859/851bb367/571436d2Nf73571d8.jpg"); background-repeat: no-repeat; /*默认是铺满，no-repeat不铺满，显示原图*/ background-position-x:0px; /*移动图片x轴*/ background-position-y:100px; /*移动图片y轴*/ } </style> </head> <body> <div class="b1"></div> </body> </html>
display属性：
none; 隐藏
block; 内联标签变成块级标签
inline; 块级标签变成内联标签
cursor属性：
pointer;变成小手
help; 问号
wait;等待
move; 移动
crosshair; 坐标
float属性：
<body> <div style="width: 300px;background-color: blue;"> <div style="background-color: red;float: left;width: 20%;">123</div> <div style="background-color: green;float: left;width: 50%;">312</div> <div style="float: right;width: 10%;background-color: pink;">99</div> <div style="clear: both;"></div> </div> </body>
注：用了float属性，背景色就不会显示正常，必须加上<div style="clear: both;"></div>
position属性：
fixed; 固定：永远固定在一个位置，下拉依旧固定在那里
abslute; 绝对：只固定一次，随着下拉会上移
relative; 相对：单独没什么效果，一般配合abslute使用
<div style="position:relative;background-color: green;height: 400px;width: 500px;"> <!--定位的位置会出现在这个块标签的右下角，而不是整个窗口的,因为加了relative--> <div style="position: absolute;bottom:30px;right: 30px;">定位</div> <!--定位放在离底30px，右边30px的位置--> </div> <div style="position: fixed;right: 0;bottom: 0;background-color: black;"> <!--'我是黑色'放在右下角，浏览器下拉不会改变他的位置--> 我是黑色 </div>
z-index和opacity：
<body> <div style="z-index:10;position: fixed;top:0;left:0;right: 0;bottom: 0;background-color: black;"> <!--top,left,right,bottom都是0的话，背景色就铺满整个页面，z-index越大就越靠前--> <span style="color: white;">我是黑色；</span> </div> <div style="z-index:11;position: fixed;top:0;left:0;right: 0;bottom: 0;background-color: red;opacity:0.5"></div> <!--opacity透明度,0是完全透明,1是不透明--> </body>
margin和padding：
<body> <div style="height: 70px;border: 1px solid red;"> <div style="height: 50px;background-color: green; margin-top:20px;"></div> </div> </body>
margin: 10px 20px 30px 40px; #给上右下左加边距
margin：10px 20px; #上下10px，左右20px
margin:外边距
padding:内边距
