HTML、CSS
HTML、CSS
1、 Doctype
<!DOCTYPE html>
告知浏览器使用什么样的HTML规范来解析HTML文档
有和无的区别
BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
2、Meta(metadata information)（<head>标签中）
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1） 页面编码（告诉浏览器是什么编码）
<meta charset="utf-8"></meta>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”></meta>
2） 刷新和跳转
<meta http-equiv=“Refresh” Content=“30″></meta>
<meta http-equiv="Refresh" Content="5;Url=http://www.autohome.com.cn"></meta>
3） 关键词
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">
</meta>
4） 描述
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮 助开发者通过互联网分享知 识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
</meta>
3、Title
<title>博客园 - 开发者的网上家园</title>
4、Link
1）css
<link rel="stylesheet" type="text/css" href="css/common.css">
2）icon
<link rel="shortcut icon" href="image/favicon.ico">
5、Style
1）在页面中写样式
例如：
<style type="text/css">
.bb{
background-color: red;
}
</style>
2）在文件中写样式，然后在文件里导入使用
调用CSS文件，<link rel="stylesheet" href="mucss.css"/>
3) 本地优先级最高
6、Script
1）引进文件
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script>
2）写js代码
<script type="text/javascript"> ... </script>
常用标签（分为块级标签和内联标签，均在<body>标签之间）
<!--块级标签占用正行 和 内联标签占用整个字符串-->
1、p 和 br
p表示段落，默认段落之间是有间隔的
br 是换行
<h1 style="background-color: red">liYang</h1>
<a style="background-color: green">liYang</a>
<p>段落</p>
<p>段落</p>
<br>
2、a标签
1） <a href="http://www.etiantian.org">oldBoy1</a><br>
<!--在新标签页打开-->
<a target="_blank" href="http://www.etiantian.org">oldBoy2</a><br>
<a href="#a2">bookmark</a>
<!--跳转-->
<div id="a1" style="height: 100px;">
position1
</div>
<div id="a2" style="height: 100px;">
position2
</div>
2） <h2>anchor</h2>
<a href="#label1">label1</a>
<a href="#label2">label2</a>
<a href="#label3">label3</a>
<a href="#label4">label4</a>
<a href="#label5">label5</a>
<div style="height: 500px;"></div>
<div id="label1" style="height: 100px;">content_label1</div>
<div id="label2" style="height: 100px;">content_label2</div>
<div id="label3" style="height: 100px;">content_label3</div>
<div id="label5" style="height: 100px;">content_label5</div>
3、h标签
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
4、select 标签
1） <select>
<option value="1">上海</option>
<option value="2" selected="selected">北京</option>
<option value="3">广州</option>
</select>
2） <select size="2"> <!--显示两个标签-->
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
3） <select multiple="multiple" size="2"> <!--多个标签的选择-->
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
4） <select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
5、textarea
<textarea></textarea>
<textarea style="width:500px;height: 200px;"></textarea> <!--设定文本输入区域框的大小-->
6、label标签
1和2的区别在于，没有使用label标签时，点击汉字无法选中框
1) 验证码：<input id="code" type="text">
确认：<input id="assert" type="checkbox">
2) <label for="code">验证码：<input id="code" type="text"></label>
<label for="assert">确认：<input id="assert" type="checkbox"></label>
7、ul ol dl
1） <p>ul</p> <!--在行前自动加点-->
<ul>
<li>ul.li</li>
<li>ul.li</li>
<li>ul.li</li>
</ul>
2） <p>ol</p> <!--自动排序-->
<ol>
<li>ol.li</li>
<li>ol.li</li>
<li>ol.li</li>
</ol>
3） <p>dl</p> <!--列表-->
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
8、table标签
<table border="1">
<thead>
<th>menu1</th>
<th>menu2</th>
<th>menu3</th>
</thead>
<tbody>
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
9、form表单和input标签
<form actions="http://127.0.0.1:8000/login" method="post">
<p>
username: <input name="user" type="text"/>
</p>
<p>
password: <input name="password" type="password"/>
</p>
<p>
department: <select>
<option value="1">CEO</option>
<option value="2">DBA</option>
</select>
<br>
gender: <input type="radio" name="gender" value="1"/> man <br/>
<input type="radio" name="gender" value="2"/> woman <br/>
<input type="radio" name="gender" value="3"/> people <br/>
<textarea name="multi"></textarea>
</p>
<input type="submit" value="submit"/>
</form>
10、fieldset标签
<fieldset>
<legend>登录</legend>
<p>用户名：<input name="user" type="text"/></p>
<p>密码：<input name="password" type="password"/></p>
</fieldset>
CSS调用方式
1) 调用CSS文件，<link rel="stylesheet" href="mucss.css"/>
mycss.css文件内容：
.c1{
background-color:red;border:100px solid green;
}
2) 定义在head标签之间
<style>
.c1{
background-color:red;border:100px solid green;
}
</style>
3) <div style="background-color:red;border:100px solid green;"></div>
优先级：3 > 2 > 1 本地优先级最高
CSS选择器
1) <style>
.c1{
background-color:red;border:100px solid green;
}
<!--'.'代表class选择器-->
</style>
2) <style>
#c2{
background-color:red;border:100px solid green;
}
<!--'#'代表ID选择器-->
</style>
3) <style>
div{
color:red;
}
<!--标签选择器-->
</style>
4) <style>
img{
border:0px;
}
<!--默认使所有浏览器都没有边框-->
</style>
5) <style>
.c3 a{
color:#ddd;
}
<!--关联选择器-->
<!--在body标签之间
<div class="c3">此标签中所有的a标签都会使用c3这个class</div>
-->
</style>
6) <style>
.c3 .c4{
color:#ddd;
}
<!--联合选择器-->
<!--在body标签之间
<div class="c3"><div class="c4">liYang</div></div>
-->
</style>
7) <style>
.c3 a,.c3 .c4{
color:#ddd;
}
<!--组合选择器-->
<!--在body标签之间
<div class="c3"><div class="c4">liYang</div></div>
-->
</style>
代码重用
8) <style>
input[type='password']{
}
<!--属性选择器
将匹配input标签内的type字段
-->
</style>
<div class="c1">liYang</div>
<div id="c2">liYang</div>
<div>liYang</div>
浙公网安备 33010602011771号