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.autohome.com.cn“ />
-
- 关键词
< 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
1.css
< link rel="stylesheet" type="text/css" href="css/common.css" >
2.icon
< link rel="shortcut icon" href="image/favicon.ico">
在页面中写样式
例如:
< style type="text/css" >
.bb{
}
< /style>
Script
-
- 引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
2.写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
H4
H5
H6
select 标签
上海 北京 广州 上海 北京 广州 广州 上海 北京 广州 广州 石家庄 邯郸 太原 平遥Checkbox
redio
男 女 保密男 女 保密
password
button
file
提交文件时: enctype='multipart/form-data' method='POST'
textarea
label
姓名: 婚否:姓名: 婚否:
ul ol dl
ul
- ul.li
- ul.li
- ul.li
ol
- ol.li
- ol.li
- ol.li
dl
-
河北省
- 邯郸
- 石家庄 山西省
- 太原
- 平遥
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 |
fieldset
登录用户名:
密码:
form 表单
文件:enctype='multipart/form-data' method='POST'
作业
要求:第一个页面:协议,选择【我同意】进入注册页面
第二个页面:用户名、密码、重复密码、省份(下拉菜单)、性别、爱好(多选),使用label来修饰。
对于路径:
- / 网站根目录
- ./ 当前目录(相当于什么也不加)
- ../ 父母路
- ../../ 父目录的父目录
CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。
标签选择器
div{ background-color:red; }
<div > </div>
class选择器
.bd{ background-color:red; }
<div class='bd'> </div>
id选择器
#idselect{ background-color:red; }
<div id='idselect' > </div>
关联选择器
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
组合选择器
input,div,p{ background-color:red; }
属性选择器
input[type='text']{ width:100px; height:200px; }
background
-
- background-color
-
- background-image
-
- background-repeat(no-repeat;repeat-x;repeat-y)
-
- background-position
border
margin
padding
display
display:none
display:block
content contentdisplay:inline
cursor
autohome 老衲-
- css提供的cursor值
pointer || help || wait || move || crosshair
-
- 伪造超链接
pointer
-
- 自定义(一般不用)
mine
浮动
position
http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html透明度
默认样式改造
- 首页
- 菜单1
- 菜单2
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 - HTML 2 - <h6>贺磊</h6> 3 - <h1>贺磊</h1> 4 - <img src=''> 5 6 20个左右 7 - CSS 8 - <h6 style='color:green;display: inline-block;width: 18px;height: 14px;margin: 0 5px;'>贺磊</h6> 9 => 看 10 => 找模板 11 20个左右 12 13 - JavaScript 14 15 - jQuery 16 17 18 19 1. HTML 20 超文本标记语言,规则 21 22 作用:模板 23 24 a. 请求周期 25 b. 规则对应关系 26 h1 -> 加大加粗 27 c. 静态&动态 28 29 学习规则: 30 - meta系列 31 - title 32 33 - p 34 - br 35 - div 36 - span 37 - table thead tbody tr th td : colpan rowspan 38 - a: href target 39 - img: src alt title 40 - ul li ol li dl dt dd 41 - 提交数据 42 - form : action method enctype 43 - input: text password radio checkbox file --> name value checked 44 - input: submit button reset --> value 45 - select option --> name value(option) selected multip 46 - textarea: name 47 48 49 2.CSS 50 层叠样式表 51 52 - 找到某个或某些 53 - 直接:头大 男 女 脑残 黑 ID 54 55 /* 标签选择器 */ 56 /* a{ 57 color: red; 58 } 59 */ 60 61 /* ID选择器 */ 62 /* 63 #wc{ 64 color: red; 65 } 66 67 */ 68 /* class选择器 */ 69 /* 70 .c1{ 71 color: red; 72 }*/ 73 74 75 /* 属性选择器 */ 76 /*input[type="text"]{*/ 77 /*color: rebeccapurple;*/ 78 /*}*/ 79 80 组合 81 .c1,c2{ 82 color: green; 83 } 84 85 - 间接: 86 # 层级选择器 87 div p{ 88 color: green; 89 } 90 div>p{ 91 color: green; 92 } 93 94 - 伪类 95 hover 当鼠标放在上部时,css生效 96 .c10:hover{ 97 color: green; 98 } 99 100 <a class="c10">菜单一</a> 101 102 103 PS: 优先级 104 1. ID选择器 属性选择器 class选择器 标签选择器 105 2. 相同选择器:就近原则 106 3. !important 107 108 109 - “穿衣服” 110 111 /*字体颜色*/ 112 color: white; 113 114 /*背景颜色*/ 115 background-color: red; 116 117 /*字体大小*/ 118 font-size: 16px; 119 120 /*font-weight: bold;*/ 121 122 /*高度*/ 123 /*height: 200px;*/ 124 /*height: 10%;*/ 125 126 /*宽度*/ 127 /*width: 400px;*/ 128 /*width: 40%;*/ 129 130 /* 背景图片 */ 131 background-image: url(5.png); 132 background-repeat: no-repeat; 133 background-position-y: -111px; 134 background-position-x: -106px; 135 136 隐藏标签 137 display: none; 138 隐藏设置内联&块级 139 display: block; 140 display: inline; 141 display: inline-block; 142 143 边框 144 border: 3px solid rebeccapurple 145 border-left: 3px solid rebeccapurple 146 147 边距 148 内边距 149 padding 150 外边距 151 margin 152 153 鼠标移动上方时,显示的图标 154 cursor: wait; 155 156 position 157 position: relative; 158 position: absolute; 159 position: fixed; 160 161 1. 场景一: 162 position: fixed; 163 2. 场景二: 164 position: absolute; 165 3. 场景三: 166 position: relative; 167 position: absolute; 168 float: 169 float: left 170 <div style="clear: both;"></div> 171 172 line-height & text-align 173 上下居中:line-height:48px; 174 左右居中:text-align:center; 175 176 body{ 177 margin:0; 178 } 179 180 181 布局属性: 182 .w{ 183 width: 980px; 184 margin: 0 auto; 185 } 186 187 CSS存在形式 188 - 标签 189 - 当前页面 <style></style> 190 - 文件 <link rel='stylesheet' href='' /> * 191 192 193 194 195 作业: 196 http://dig.chouti.com
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--head:标签--> 4 <!--id="i1": 标签属性--> 5 <head> 6 <!-- 页面编码 --> 7 <meta charset="UTF-8" /> 8 <!-- 页面跳转 --> 9 <!--<meta http-equiv="Refresh" Content="5; Url=http://www.oldboyedu.com" />--> 10 <!-- 关键字 --> 11 <meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" /> 12 <!-- 描述 --> 13 <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" /> 14 15 <!-- 用IE最新的引擎去渲染HTML --> 16 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 17 18 <!-- 头部图标 --> 19 <link rel="shortcut icon" href="favicon.ico"> 20 <!-- 头部标题 --> 21 <title>老男孩教育</title> 22 23 <!--欠四个标签--> 24 25 </head> 26 <body> 27 28 <!--块级标签--> 29 <!--<h1>刘浩</h1>--> 30 <!--<h1>吴春维</h1>--> 31 32 <!--内联标签--> 33 <!--<a>老男 孩</a>--> 34 <!--<a>Alex</a>--> 35 36 <!--一大波符号--> 37 <!--http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html--> 38 39 <!-- p段落,br换行 --> 40 <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;<br/>laskjdf;kajsasdfasdfasdf<br/>kas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>--> 41 <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>--> 42 <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>--> 43 <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>--> 44 45 <!--a标签 跳转,重定向 锚--> 46 <!-- 47 <a href="http://www.oldboyedu.com" target="_blank">老男孩</a> 48 49 <a href="#c1">第一章</a> 50 <a href="#c2">第二章</a> 51 <a href="#c3">第三章</a> 52 53 <div id="c1" style="height: 700px;background-color: rebeccapurple;"> 54 辰东所著的第五部小说又称《遮天前传》,《圣墟》为后传首发于起点,辰东结婚后的第一部作品 55 一粒尘可填海,一根草斩尽日月星辰,弹指间天翻地覆。群雄并起,万族林立,诸圣争霸,乱天动地;问苍茫大地,谁主沉浮?一个少年从大荒中走出,一切从这里开始 56 16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10 57 </div> 58 <div id="c2" style="height: 700px;background-color: antiquewhite"> 59 辰东所著的第五部小说又称《遮天前传》,《圣墟》为后传首发于起点,辰东结婚后的第一部作品 60 一粒尘可填海,一根草斩尽日月星辰,弹指间天翻地覆。群雄并起,万族林立,诸圣争霸,乱天动地;问苍茫大地,谁主沉浮?一个少年从大荒中走出,一切从这里开始 61 16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10 62 63 </div> 64 <div id="c3" style="height: 700px;background-color: brown;"> 65 辰东所著的第五部小说又称《遮天前传》,《圣墟》为后传首发于起点,辰东结婚后的第一部作品 66 一粒尘可填海,一根草斩尽日月星辰,弹指间天翻地覆。群雄并起,万族林立,诸圣争霸,乱天动地;问苍茫大地,谁主沉浮?一个少年从大荒中走出,一切从这里开始 67 16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10 68 </div> 69 --> 70 71 <!--标题--> 72 <!-- 73 <h1>刘浩</h1> 74 <h2>吴春维</h2> 75 <h3>卢思琪</h3> 76 <h4>王远根</h4> 77 <h5>泥泞</h5> 78 <h6>闫帅</h6> 79 <h6>贺磊</h6>--> 80 81 <!--纯洁标签--> 82 <!-- 83 <div>我是块级</div> 84 <div>我是块级</div> 85 <span>我是内联</span> 86 <span>我是内联</span>--> 87 88 <!--列表--> 89 <!-- 90 <ul> 91 <li>菜单一</li> 92 <li>菜单二</li> 93 <li>菜单上</li> 94 </ul> 95 96 <ol> 97 <li>菜单一</li> 98 <li>菜单二</li> 99 <li>菜单上</li> 100 </ol> 101 102 <dl> 103 <dt>标题一</dt> 104 <dd>内容一</dd> 105 <dd>内容一</dd> 106 <dd>内容一</dd> 107 108 <dt>标题一</dt> 109 <dd>内容一</dd> 110 <dd>内容一</dd> 111 <dd>内容一</dd> 112 </dl> 113 --> 114 <!--表格--> 115 <!-- 116 <table border="1"> 117 <thead> 118 <tr> 119 <th>序号</th> 120 <th>主机名</th> 121 <th>端口</th> 122 </tr> 123 </thead> 124 <tbody> 125 <tr> 126 <td>1</td> 127 <td colspan="2">c1.com</td> 128 </tr> 129 <tr> 130 <td>2</td> 131 <td>c1.com</td> 132 <td>80</td> 133 </tr> 134 <tr> 135 <td>3</td> 136 <td rowspan="2">c1.com</td> 137 <td>80</td> 138 </tr> 139 <tr> 140 <td>4</td> 141 <td>80</td> 142 </tr> 143 </tbody> 144 </table> 145 --> 146 147 <!--<label for="user">用户名</label> <input id="user" type="text" />--> 148 149 150 <!--<fieldset>--> 151 <!--<legend>登录</legend>--> 152 <!--asdfasdfasdfas--> 153 <!--</fieldset>--> 154 155 <a href="http://www.xiaohuar.com"> 156 <img src="2.jpg" alt="贺磊" title="我是贺磊,旋涡选我选我"> 157 </a> 158 <form action="http://192.168.12.120:8000/index/" method="POST" enctype="multipart/form-data"> 159 <!--普通文本框--> 160 <input type="text" name="username" value="alex" /> 161 162 <!--<input type="text" name="username" placeholder="请输入内容" />--> 163 164 <!--邮箱格式文本框--> 165 <!--<input type="email" name="em" />--> 166 <!--密码格式文本框--> 167 <input type="password" name="pwd"/> 168 <!--单选框--> 169 <div> 170 <input type="radio" name="gender1" value="1" />男 171 <input type="radio" name="gender1" value="2" checked="checked" />女 172 </div> 173 <!--多选框--> 174 <div> 175 <input type="checkbox" name="hobby" value="11" checked="checked" />男 176 <input type="checkbox" name="hobby" value="12" />女 177 <input type="checkbox" name="hobby" value="13" checked="checked" />男女 178 <input type="checkbox" name="hobby" value="14" />多男女 179 </div> 180 <!--文件: enctype="multipart/form-data" --> 181 <div> 182 <input name="fafafa" type="file" /> 183 </div> 184 <!--城市--> 185 <div> 186 <select name="city"> 187 <option value="bj">北京</option> 188 <option value="sh" selected="selected">上海</option> 189 <option value="ss">沙河</option> 190 </select> 191 192 <select name="city2" multiple> 193 <option value="bj">北京</option> 194 <option value="sh" selected="selected">上海</option> 195 <option value="ss" selected="selected">沙河</option> 196 </select> 197 </div> 198 199 <div> 200 <textarea name="memo">默认值</textarea> 201 </div> 202 203 <input type="submit" value="Submit提交" /> 204 <input type="button" value="button提交" /> 205 <input type="reset" value="重置" /> 206 </form> 207 208 209 210 211 <div> 212 <div></div> 213 <div> 214 <a> 215 <img src="2.jpg"> 216 <p>asdf</p> 217 </a> 218 </div> 219 </div> 220 221 222 223 </body> 224 </html>