标签:
一、HTML
<!DOCTYPE html>文档类型, 确定使用什么规则来解析,这样浏览器才能知道你使用的类型
head
meta charset=utf-8 告诉浏览器编码是什么
</>自闭合标签,一般会在后面加上一个斜杠
title 只有这个是用户可以看到的
<title name="wzc"></title>主动闭合,只要在标签里面写上XXX=XXX就是标签的属性
刷新和跳转
<meta http-equiv="REFRESH" Content="1"/> 每一秒刷新一次 <meta http-equiv="REFRESH" content="3; Url=http://www.baidu.com"/> 3秒钟以后跳转到百度
IE兼容问题
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Link
icon浏览器标签的小图片
<link rel="wzc icon" href="www.png">
块级标签:div标签、h1、p等,占一整行
内联标签(行内标签):span标签、a标签、select等,自己有多大就占多大
body,用户能看到的所有内容
HTML里面特殊的符号是需要使用特殊的代码的
p标签——段落
br标签——换行,并且是自闭合标签
a标签——href跳转,a标签特有的 。target="_blank"另打开一个新窗口进行跳转。锚——在a标签里面创建href="#l1" ,在后面的div里面使用id="l1" 。#的功能是寻找页面中id=l1的标签,将其标签放置在页面顶部,而且需要注意一点,id在整个页面里面是不可以重复的
<a href="#l1">第一章</a> <a href="#l2">第二章</a> <a href="#l3">第三章</a> <div id="l1" style="height: 500px">第一章内容</div> <div id="l2" style="height: 500px">第二章内容</div> <div id="l3" style="height: 500px">第三章内容</div>
H标签——其实就是标题,对应的就是标题的大小,而且H标签只有6个,1-6是一个递减的过程
<h1>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5> <h6>a</h6> <h6 style="font-size: 65px;">a</h6>
input系列标签:
text——输入框
password——加密输入框
radio——选择按钮,默认不互斥,需要使用name=相同名字来进行互斥
checkbox——多选按钮
file——上传文件,并且如果要是上传文件的话,需要在form里面添加属性:enctype="multipart/form-data"
button——按钮
subimit——提交当前表单
reset——充值表单
testarea——可以实现多行文本操作,备注功能
select标签:下拉框,option就是具体的下拉内容,多个select就可以实现多级下拉框。multiple可以支持多选,而且可以显示多个,加上size可以设置默认能看到几个。optgroup label="aaa"标题分类作用。
form——要提交的内容放置的form标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://1.1.1.1:8000/index/" method="post"> <p>用户名<input type="text" name="wzc" /></p> <p>密码<input type="password" name="pwd" /></p> <input type="submit" value="提交"> <textarea name="www"></textarea> </form> </body> </html>
这个直接把数据提交到1.1.1.1:8000
label标签——通过显示的内容和某个功能结合起来
ul标签——无序编号
ol标签——有序编号
dl标签——标题,dt——内容
table标签——里面用到了tr、th、thead
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <table></table> </head> <body> <table border="1"> <tr> <th colspan="2">11</th><!--左右合并--> <!--<th>22</th>--> <th>33</th> </tr> <tr> <td>dd</td> <td>ss</td> <td>aa</td> </tr> <tr> <td>dd</td> <td colspan="2" rowspan="2">ss</td><!--左右合并,上下合并--> <!--<td>aa</td>--> </tr> <tr> <td>dd</td> <!--<td>ss</td>--> <!--<td>aa</td>--> </tr> </table> <hr/> <table> <thead> <tr> <th>11</th> <th>22</th> <th>33</th> </tr> </thead> <tbody> <tr> <td>dd</td> <td>ss</td> <td>aa</td> </tr> <tr> <td>dd</td> <td>ss</td> <td>aa</td> </tr> <tr> <td>dd</td> <td>ss</td> <td>aa</td> </tbody> </table> </body> </html>
两种使用table标签的方式
iframe标签
fieldset标签
二、CSS
1、存放位置:
单独css文件 底
html头部
标签属性 高
2、效果
coloer:red;
display:none——隐藏起来
inline——行内标签
block——块级标签
inline-block——行内标签,但是有块级标签属性
边距
margin:外边距(本身不增加)
padding:内边距(本身增加)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="common.css" />--> <style> /*标签选择器,找到所有的标签应用以下样式*/ div{ color: green; } /*id选择器,找到标签id等于i1的标签,应用以下样式*/ #i1{ font-size: 56px; /* color: green; */ } /*class选择器,找到class=c1的所有标签,应用一下样式*/ .c1{ background-color: red; } /*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/ /*.c2 div p a{*/ /**/ /*}*/ .c2 div p .c3{ background-color: red; } /*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/ .c4,.c5,.c6{ background-color: aqua; } </style> </head> <body> <div class="c4">1</div> <div class="c5">1</div> <div class="c6">1</div> <div class="c2"> <div></div> <div> <p> <span>oo</span> <a class="c3">uu</a> </p> </div> </div> <div class="c3">sdfsdf</div> <span class="c1">1</span> <div class="c1">2</div> <a class="c1">3</a> <a id="i1">baidu</a> <div>99</div> <div>99</div> <div>99</div> <div> <div>asdf</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .img{ background-image: url("1.jpg"); height: 50px; width: 50px; background-position: 202px -564px; } </style> </head> <body> <div class="img"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 500px;height: 500px;border: 1px solid greenyellow"> <div style="width: 20%;background-color: crimson;float: left;">ffff</div> <div style="width: 30%;background-color: blueviolet;float: left;">a</div> <div style="clear: both;"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 500px;width: 400px;border: 1px solid royalblue;position: relative"> <div style="height: 100px;background-color: aqua;position: relative"> <div style="position: absolute;bottom: 0;right: 0"> 111 </div> </div> <div style="position: absolute;bottom: 0;right: 0"> 222 </div> </div> <div style="position: absolute;bottom: 0;right: 0"> 333 </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/wlzhc/p/5767135.html