HTML和CSS

本节内容

1. HTML部分

2. CSS部分

1.HTML部分

1.1 meta

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

一。页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

二。刷新和页面跳转

<meta http-equiv="Refresh" content="5" />
<meta http-equiv="Refresh" content="5; Url=http://www.baidu.com" />

三。关键字

<meta name="keywords" content="40块,开发者,帅" />

四。描述信息

<meta name="description" content="我是40块" />

五。以最新的IE内核来渲染HTML

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

六。头部标题

<title>头部标题</title>

1.2 link

头部图标

<link rel="shortcut icon" href="logo.ico">

加载CSS文件

<link rel="stylesheet" type="text/css" href="all.css">

1.3 常用标签

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html（各种符号）

标签一般分为两种：块级标签和内联标签

p和br

p表示段落，默认段落之间是有间隔的！

br 是换行

a标签

<!--跳转-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--锚-->
<a href="#c1">第一章</a>
<a href="#c2">第二章</a>
<a href="#c3">第三章</a>
<div id="c1" style="height: 700px;background-color: antiquewhite">第1章的内容</div>
<div id="c2" style="height: 700px;background-color: aqua">第2章的内容</div>
<div id="c3" style="height: 700px;background-color: azure">第3章的内容</div>

select标签

<select size="2">
    <option value="sh" selected="selected">上海</option>
    <option value="bj">北京</option>
    <option value="sb">陕坝</option>
</select>
<select multiple="multiple">
    <option value="sh">上海</option>
    <option value="bj">北京</option>
    <option value="sb">陕坝</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
</select>
<select>
    <optgroup label="大城市">
        <option value="sh">上海</option>
    </optgroup>
    <optgroup label="中城市">
        <option value="bj">北京</option>
    </optgroup>
    <optgroup label="小城市">
        <option value="sb">陕坝</option>
    </optgroup>
</select>

password

<form action="http://www.baidu.com/s">
    <input type="password" name="wd"/>
    <input type="submit"/>
</form>

button

<!--当执行点击操作是触发函数button(),button()为js的函数-->
<input type="button" onclick="button()"/>

file

<form action="http://www.baidu.com" enctype='multipart/form-data'>
    <input type="file" name="file"/>
    <input type="submit" />
</form>

textarea

<textarea>textarea</textarea>

label

姓名<input type="text"/>
是否是北京人<input type="checkbox"  name="city" value="bj">
<br/>
<label>
    姓名<input type="text"/>
</label>
<label>
    是否是北京人<input type="checkbox"  name="city" value="bj">
</label>

ul、ol、dl

<ul>
    <li>ul.li</li>
    <li>ul.li</li>
    <li>ul.li</li>
</ul>
<ol>
    <li>ou.li</li>
    <li>ou.li</li>
    <li>ou.li</li>
</ol>
<dl>
    <dt>中国</dt>
    <dd>台湾</dd>
    <dt>美国</dt>
    <dd>日本</dd>
</dl>

table

<table border="1">
    <thead>
        <tr>
            <th>选项</th>
            <th>IP</th>
            <th>端口</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"/></td>
            <td>c1.com</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>c1.com</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

fieldset

<fieldset>
    <legend>信息</legend>
    <p>40kuai</p>
    <p>zhuawawa</p>
</fieldset>

form

<form action="http://ww.baidu.com/s" method="get">
    <input type="text" name="wd"/>
    <input type="submit"/>
</form>

1.4 其他-----详细的打开看。

<!--图片链接-->
<a href="http://www.xiaohuar.com">
    <img src="helei.ico" alt="贺磊" title="我是贺磊，旋涡选我选我">
</a>
<form action="http://192.168.12.120:8000/index/" method="get" enctype="multipart/form-data">
    <!--input表单方法-->
    <input type="text" name="username" value="helei"/>
    <input type="password" name="pwd"/>
    <div>
        <!--单选框-->
        <input type="radio" name="gender" value="1" checked="checked"/>男
        <input type="radio" name="gender" value="2"/>女
    </div>
    <div>
        <!--多选框-->
        <input type="checkbox" name="aihao" value="1"/>学习
        <input type="checkbox" name="aihao" value="2"/>读书
        <input type="checkbox" name="aihao" value="3" checked="checked"/>看看报
    </div>
    <!--select表单方法（下拉框）-->
    <div>
        <!--下拉单选框-->
        <select name="city">
            <option value="bj" selected="selected">北京</option>
            <option value="bn">巴彦淖尔</option>
            <option value="sh">上海</option>
        </select>
        <!--多选-->
        <select name="citys" multiple>
            <option value="bj" selected="selected">北京</option>
            <option value="bn" selected="selected">巴彦淖尔</option>
            <option value="sh">上海</option>
        </select>
    </div>
    <!--上传文件--enctype="multipart/form-data-->
    <div>
        <input type="file"  name="giffile" />
    </div>
    <div>
        <textarea>默认值</textarea>
    </div>
    <input type="submit" value="提交"/>
    <input type="button" value="按钮" />
    <input type="reset" value="重置"/>
</form>

2 CSS部分

2.1 style样式的存在形式

1.第一种
# type=text/css 可以不写
< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style> 
2.第二种
<div style="k1=v1"><div>

2.2 样式选择器

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符选择器
7. 浏览器自定义或继承

同一级别

同一级别中后写的会覆盖先写的样式

/*标签选择器*/
div{
    background-color: #dddddd;
}
/*class选择器*/
.c1{
    background-color: #dddddd;
}
/*属性选择器*/
[class="c2"]{
    background-color: #dddddd;
}
/*id选择器*/
#i1{
    background-color: #dddddd;
}

一些注意事项：http://www.cnblogs.com/dolphinX/p/3511300.html

2.3 一些样式

background-color

 

background-image

 

background-repeat

 

background-position

 

border

 

 

 

margin是外边框（不属于自己）

padding是内边框（属于自己）

这里就不写了。但是很重要，你自己去查吧。

display

　　display:none　　消失

　　display:block　　变成块级标签

　　display:inline　　变成内联标签 

　　display:inline-block　　块级&内联

这里就不写了。但是很重要，你自己去查吧。

cursor

　　pointer　　手

　　help　　问号

　　wait　　等待圈

　　move　　移动

　　crosshair　　十字

<span style="cursor:url(image/favicon.ico),auto;">自定义</span>

left

right

 

position

http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

opacity:0.4