html是一个裸体的人,css就是给这个裸体的人穿上衣服,JavaScript就是让这个人动起来
概述
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:djangomoan模版引擎)
HTML文档
文档树Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
- BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
- CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
有,用什么?
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
更多Meta(metadata information)
提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
- 页面编码(告诉浏览器是什么编码)
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
- 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com"/>
- 关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
- 描述
例如:cnblogs
- X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来,作为占统治地位的桌面操作系统,也使得IE占据了通知地位,许多的网站开发的时候,就按照IE6的标准去开发,而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候,采用了微软公司内部标准以及部分W3C的标准,这个时候许多网站升级到IE7的时候,就比较痛苦,很多代码必须调整后,才能够正常的运行。而到了微软的IE8这个版本,基本上把微软内部自己定义的标准抛弃了,而全面的支持W3C的标准,由于基于对标准彻底的变化了,使得原先在早期IE8版本上能够访问的网站,在IE8中无法正常的访问,会出现一些排版错乱、文字重叠,显示不全等各种兼容性错误。
与任何早期浏览器版本相比,Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此,针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题,Internet Explorer 8 引入了文档兼容性的概念,从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式;这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示,则可以更新该站点以支持最新的 Web 标准(首选方式),也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中,可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时,它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型,则 Internet Explorer 8 将以 IE5 模式(Quirks 模式)显示该网页。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title
网页头部信息
Link
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
例如:< style type="text/css" >
.bb{
}
< /style>
Script
- 引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
- 写js代码
< script type="text/javascript" > ... </script >
常用标签
标签一般分为两种:块级标签 和 行内标签
- 行内 a、span、select 等
- 块级div、h1、p 等
各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.htmlp 和 br
p表示段落,默认段落之间是有间隔的!
br 是换行
a标签
< a href="http://www.autohome.com.cn"> </a>
1、target属性,_black表示在新的页面打开
2、锚
H 标签
H1
H2
H3
<!DOCTYPE html> <html lang="en"> <head>
<!--<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com"/>-->#5秒后自动跳转到url
<meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: 0">#边距为0 <div style="height: 48px;background-color: #5e4b7c;"></div> <div>f</div>#块级标签 <span>a</span>#行内标签 <p>asdfasdfasdfasd<br/>fasdfasdf</p>#p段落,br换行 <h1>白少凯</h1> <h6>小白少凯</h6> <!--跳转--> <a href="http://www.baidu.com" target="_blank">百度</a>#target重新打开一个页面 <!--锚点--> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <div id="i1" style="background-color: green;height: 900px;"></div> <div id="i2" style="background-color: red;height: 900px;"></div> <div id="i3" style="background-color: pink;height: 900px;"></div> </body> </html>
select 标签
Checkbox
redio
男 女 保密男 女 保密
password
button
<input type="button" value="提交" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
用form表单包裹,点submit会提交form表单里所有能提交的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin: 0"> <div style="height: 48px;background-color: #5e4b7c;"></div> <div> <form> <h1>用户登录</h1> <p>用户名:<input type="text" /></p> <p>密码:<input type="password" /></p> <input type="button" value="提交" /> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </div>
file
提交文件时: enctype='multipart/form-data' method='POST'
textarea
label
姓名: 婚否:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <label for="user">用户名:</label> <input id="user" type="text" /></div> <!--点击用户名,就会自动跳转到后面的文本框,input是自闭合--> <div><label for="password">密码:</label> <input id="password" type="password" /></div> <div>性别: <div>男 <input type="radio" name="geasdf" /></div> <!--选择框,加上name单选--> <div>女 <input type="radio" name="geasdf"/></div> </div> <div> 爱好:男<input type="checkbox" /> 女<input type="checkbox" /> 海涛<input type="checkbox" /> <!--复选框--> </div> <div> 上传: <input type="file" /> </div> <div> 城市: <select> <option>上海</option> <option>北京</option> <option>广州</option> <option>沙河</option> </select> <select multiple size="10"> <option>上海</option> <option>北京</option> <option>广州</option> <option>沙河</option> </select> <select multiple size="10"> <optgroup label="河北"> <option>石家庄</option> <option>保定</option> <option>廊坊</option> <option>邯郸</option> <option>沙河</option> </optgroup> <optgroup label="河南"> <option>石家庄</option> <option>保定</option> <option>廊坊</option> <option>邯郸</option> <option>沙河</option> </optgroup> </select> </div> <div> 简介: <textarea></textarea> </div> </body> </html>
ul ol dl
ul
- ul.li
- ul.li
- ul.li
ol
- ol.li
- ol.li
- ol.li
dl
- dt河北省
- dd邯郸
- 石家庄
- 山西省
- 太原
- 平遥
table
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | ||
---|---|---|
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 3 | 3 |
3 | 3 | |
3 | 3 | |
3 | 3 | 3 |
colspan
rowspan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="img/1.png "alt="我是图片" title="把鼠标拿走"> <ul> <li>alex</li> <li>alex1</li> <li>alex2</li> </ul> <ol> <li>eric</li> <li>eric1</li> <li>eric2</li> </ol> <dl> <dt>江苏</dt> <dd>南京</dd> <dd>苏州</dd> </dl> <table border="1"> <thead> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>12</td> <td><a href="http://www.baidu.com">删除</a>|<a href="#">修改</a></td> </tr> <tr> <td>1</td> <td colspan="2">12</td> <!--<td><a href="http://www.baidu.com">删除</a>|<a href="#">修改</a></td>--> </tr> <tr> <td>1</td> <td>12</td> <td><a href="http://www.baidu.com">删除</a>|<a href="#">修改</a></td> </tr> </tbody> </table> </body> </html>
fieldset
form 表单
文件:enctype='multipart/form-data' method='POST'
image标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="img/1.png"> </body> </html>
作业
要求:第一个页面:协议,选择【我同意】进入注册页面
第二个页面:用户名、密码、重复密码、省份(下拉菜单)、性别、爱好(多选),使用label来修饰。
对于路径:
- / 网站根目录
- ./ 当前目录(相当于什么也不加)
- ../ 父母路
- ../../ 父目录的父目录