1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!--header标签里面的内容是不会显示到浏览器上的--> 5 <!--meta中的内容 name为keywords是为了搜索引擎 爬虫使用的 descrption 是为了在搜索引擎中显示所用--> 6 <!--<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信,数码,汽车,手机,财经,--> 7 <!--科技,相册">--> 8 <!--<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务--> 9 <!--，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。">--> 10 <!--<title>Title</title>--> 11 <meta charset="utf8"> 12 </head> 13 <body> 14 <!--<h1 id = 'head'>我是一个大标题</h1>--> 15 <!--<img src="./timg.jpg" alt="meinv" title="美女">--> 16 <!--<h1 id = 'head1' class="">我是一个大标题</h1>--> 17 <!--<p align="enter">我是一个段落</p>--> 18 <!--<a href="http://www.baidu.com">百度一下</a>--> 19 <!--<a href="javascript:viod(0);" title="wu">--> 20 <!--<img src="./time1.jpg" alt="meinv">--> 21 <!--</a>--> 22 <!-- #是标识 id 的标识符--> 23 <!-- 如果连接 a 中组织a标签的默认事件 使用<a href="javascript:viod(0);" title="wu">--> 24 <!--p 中的对齐方式 --> 25 <!--img 中 alt 图片资源加载失败显示的内容 title 图片悬浮显示的内容 src 连接图片资源--> 26 <!----> 27 28 <!--规范：1.标记都必须小写，2、标记必须关闭 双边标记或单标标记 3、所有属性值必须引号 4、所有属性必须有值--> 29 <!--html在在乎标签的嵌套结构 和换行 tab无关--> 30 <!--div和span 被称为布局 div是块区域 span 是小块标签--> 31 <!--head标签里面的标签包含：tytle meta link style 32 <title>：指定整个网页的标题，在浏览器最上方显示。 33 <meta>：提供有关页面的基本信息 34 <link>：定义文档与外部资源的关系。 35 <style>:定义内部样式表与网页的关系--> 36 37 <!--上午： 38 html中的一堆标签: 39 行内标签：display：inline 40 a ：超链接 href ：连接资源地址 title ： 所有的标签中都有title属性 41 span ： 小的区域 42 i： 43 en: 44 strong: 45 (1)在一行内显示 46 (2)不能设置宽高 47 (3)它的宽和高是内容的宽高 48 行内块标签：inline-block 49 img input 50 (1)在一行内显示 51 (2)可以设置宽高 52 块级标签：display：block 53 div p 54 (1)独占一行 55 (2)可以设置宽高 56 (3)如果不设置宽度，默认是父盒子的100%宽度--> 57 <!--#######################列表标签###################################--> 58 <!-- 无序列表 unordered list--> 59 <!--<ul>--> 60 <!--<li>菜单--> 61 <!--<ul>--> 62 <!--<li>1</li>--> 63 <!--<li>2</li>--> 64 <!--<li>3</li>--> 65 <!--<li>4</li>--> 66 <!--</ul>--> 67 <!--</li>--> 68 <!--<li>张三</li>--> 69 <!--<li>张三</li>--> 70 <!--<li>张三</li>--> 71 <!--<li>张三</li>--> 72 <!--<!–ul 里面只能使用 li 标签 别的都不要–>--> 73 <!--</ul>--> 74 <!-- 有序列表 ordered list --> 75 <!--<ol>--> 76 <!--<!–ol 里面只能使用 li 标签 别的都不要–>--> 77 <!--<li type="circle">lisi</li>--> 78 <!--<li>lisi</li>--> 79 <!--<li>lisi</li>--> 80 <!--<li>lisi</li>--> 81 <!--</ol>--> 82 <!--<dl>--> 83 <!--<dt>1</dt>--> 84 <!--<dd>2</dd>--> 85 <!--<dd>3</dd>--> 86 <!--<dd>4</dd>--> 87 <!--</dl>--> 88 <!--<dl>--> 89 <!--<dt>1</dt>--> 90 <!--<dd>2</dd>--> 91 <!--<dd>3</dd>--> 92 <!--<dd>4</dd>--> 93 <!--</dl>--> 94 <!--<table border="1">--> 95 <!--<tr>--> 96 <!--<td></td>--> 97 <!--<td></td>--> 98 <!--<td></td>--> 99 <!--</tr>--> 100 <!--</table>--> 101 <!-- form 表单提交的时候 表单空间中的name属性会被封装成url上的key value属性 102 会被封装成url上的value 如果有多个key 会使用&做隔离 103 有求情 必有响应 哪怕是404 200 104 get 明文提交 post 就不是明文提交 105 name：表单的名称，用于JS来操作或控制表单时使用； 106 id：表单的名称，用于JS来操作或控制表单时使用； 107 action：指定表单数据的处理程序，一般是PHP，如：action=“login.php” 108 method：表单数据的提交方式，一般取值：get(默认)和post 109 form标签里面的action属性和method属性，在后面课程给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。 110 111 get提交和post提交的区别： 112 GET方式： 113 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。 114 特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。 115 116 POST方式： 117 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。 118 特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img) 119 --> 120 <!--<form action="https://www.baidu.com/s" method="get">--> 121 <!--<label for="user">用户名</label>--> 122 <!--<input type="text" name="wd" id="user">--> 123 <!--<label for="pwd">密码</label>--> 124 <!--<input type="password" name="password" id="pwd">--> 125 <!--<input type="submit" value="注册">--> 126 <!--<input type="button" value="普通按钮"><br>--> 127 <!--<input type="submit" value="提交按钮"><br>--> 128 <!--<input type="reset" value="重置按钮"><br>--> 129 <!--<input type="image" src="images/bojie.jpeg" width="400" value="图片按钮2"><br>--> 130 <!--<input type="file" value="文件选择框">--> 131 <!--<select>--> 132 <!--<option>小学</option>--> 133 <!--<option>初中</option>--> 134 <!--<option>高中</option>--> 135 <!--<option>大学</option>--> 136 <!--<option selected="">研究生</option>--> 137 <!--</select>--> 138 <!--<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>--> 139 <!--<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>--> 140 <!--<textarea name="txtInfo" rows="4" cols="20">路飞学城</textarea>--> 141 <!--</form>--> 142 <!-- 143 table border = '1' 更细的边框线 144 tr 145 td 146 form表单标签 147 action：提交的地址 148 method：提交的方式 get post 149 表单空间； 150 input 151 属性：type 152 text：普通文本 153 password：密码文本 154 radio：单选框 155 checkbox：多选框 156 file：上床文件 157 select：下拉列表 158 option 159 textarea：多行文本 rows 行数 cols 列数 160 所有的表单空间中都有name属性，这个name属性与服务端有很大的联系 161 --> 162 <!-- 163 字体属性：(font) 164 大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 165 样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常) 166 行高 line-height:normal;(正常) 单位：PX、PD、EM 167 粗细 font-weight:bold;(粗体) lighter;(细体) normal;(正常) 168 变体font-variant: small-caps;(小型大写字母) normal;(正常) 169 大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 170 修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 171 常用字体：(font-family) 172 "Courier New", Courier, monospace, "Times New Roman",Times, serif, Arial, Helvetica, sans-serif, Verdana 173 背景属性： (background) 174 色彩background-color:#FFFFFF; 175 图片background-image:url(); 176 重复background-repeat:no-repeat; 177 滚动background-attachment:fixed;(固定) scroll;(滚动) 178 位置background-position:left(水平) top(垂直); 179 简写方法 background:#000url(..) repeat fixed left top; 180 区块属性： (Block) 181 字间距letter-spacing:normal; 数值 182 对刘text-align:justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 183 缩进text-indent: 数值px; 184 垂直对齐vertical-align:baseline;(基线) sub;(下标) super;(下标) top; text-top; middle;bottom; text-bottom; 185 词间距word-spacing:normal; 数值 186 空格white-space:pre;(保留) nowrap;(不换行) 187 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table;table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group;table-column; table-cell; table-caption;(表格标题) 188 方框属性： (Box) 189 ; height:; float:; clear:both; margin:; padding:; 顺序：上右下左 190 边框属性： (Border) 191 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; 192 border-; 边框宽度 193 border-color:#; 194 简写方法border：width style color; 195 列表属性： (List-style) 196 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman;lower-alpha; upper-alpha; 197 位置list-style-position:outside;(外) inside; 198 图像list-style-image:url(..); 199 定位属性： (Position) 200 Position: absolute; relative; static; 201 visibility: inherit; visible; hidden; 202 overflow: visible; hidden; scroll; auto; 203 clip: rect(12px,auto,12px,auto) (裁切) 204 205 css属性代码大全 206 一 CSS文字属性： 207 color : #999999; /*文字颜色*/ 208 font-family : 宋体,sans-serif;/*文字字体*/ 209 font-size : 9pt; /*文字大小*/ 210 font-style:itelic; /*文字斜体*/ 211 font-variant:small-caps; /*小字体*/ 212 letter-spacing : 1pt; /*字间距离*/ 213 line-height : 200%; /*设置行高*/ 214 font-weight:bold; /*文字粗体*/ 215 vertical-align:sub; /*下标字*/ 216 vertical-align:super; /*上标字*/ 217 text-decoration:line-through; /*加删除线*/ 218 text-decoration: overline; /*加顶线*/ 219 text-decoration:underline; /*加下划线*/ 220 text-decoration:none; /*删除链接下划线*/ 221 text-transform : capitalize; /*首字大写*/ 222 text-transform : uppercase; /*英文大写*/ 223 text-transform : lowercase; /*英文小写*/ 224 text-align:right; /*文字右对齐*/ 225 text-align:left; /*文字左对齐*/ 226 text-align:center; /*文字居中对齐*/ 227 text-align:justify; /*文字分散对齐*/ 228 vertical-align属性 229 vertical-align:top; /*垂直向上对齐*/ 230 vertical-align:bottom; /*垂直向下对齐*/ 231 vertical-align:middle; /*垂直居中对齐*/ 232 vertical-align:text-top; /*文字垂直向上对齐*/ 233 vertical-align:text-bottom; /*文字垂直向下对齐*/ 234 二、CSS边框空白 235 padding-top:10px; /*上边框留空白*/ 236 padding-right:10px; /*右边框留空白*/ 237 padding-bottom:10px; /*下边框留空白*/ 238 padding-left:10px; /*左边框留空白 239 三、CSS符号属性： 240 list-style-type:none; /*不编号*/ 241 list-style-type:decimal; /*阿拉伯数字*/ 242 list-style-type:lower-roman; /*小写罗马数字*/ 243 list-style-type:upper-roman; /*大写罗马数字*/ 244 list-style-type:lower-alpha; /*小写英文字母*/ 245 list-style-type:upper-alpha; /*大写英文字母*/ 246 list-style-type:disc; /*实心圆形符号*/ 247 list-style-type:circle; /*空心圆形符号*/ 248 list-style-type:square; /*实心方形符号*/ 249 list-style-image:url(/dot.gif); /*图片式符号*/ 250 list-style-position: outside; /*凸排*/ 251 list-style-position:inside; /*缩进*/ 252 四、CSS背景样式： 253 background-color:#F5E2EC; /*背景颜色*/ 254 background:transparent; /*透视背景*/ 255 background-image : url(/image/bg.gif); /*背景图片*/ 256 background-attachment : fixed; /*浮水印固定背景*/ 257 background-repeat : repeat; /*重复排列-网页默认*/ 258 background-repeat : no-repeat; /*不重复排列*/ 259 background-repeat : repeat-x; /*在x轴重复排列*/ 260 background-repeat : repeat-y; /*在y轴重复排列*/ 261 指定背景位置 262 background-position : 90% 90%; /*背景图片x与y轴的位置*/ 263 background-position : top; /*向上对齐*/ 264 background-position : buttom; /*向下对齐*/ 265 background-position : left; /*向左对齐*/ 266 background-position : right; /*向右对齐*/ 267 background-position : center; /*居中对齐*/ 268 五、CSS连接属性： 269 a /*所有超链接*/ 270 a:link /*超链接文字格式*/ 271 a:visited /*浏览过的链接文字格式*/ 272 a:active /*按下链接的格式*/ 273 a:hover /*鼠标转到链接*/ 274 鼠标光标样式： 275 链接手指 CURSOR: hand 276 十字体cursor:crosshair 277 箭头朝下cursor:s-resize 278 十字箭头 cursor:move 279 箭头朝右 cursor:move 280 加一问号 cursor:help 281 箭头朝左cursor:w-resize 282 箭头朝上cursor:n-resize 283 箭头朝右上cursor:ne-resize 284 箭头朝左上cursor:nw-resize 285 文字I型 cursor:text 286 箭头斜右下cursor:se-resize 287 箭头斜左下cursor:sw-resize 288 漏斗 cursor:wait 289 光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 290 六、CSS框线一览表： 291 border-top : 1px solid #6699cc; /*上框线*/ 292 border-bottom : 1px solid #6699cc; /*下框线*/ 293 border-left : 1px solid #6699cc; /*左框线*/ 294 border-right : 1px solid #6699cc; /*右框线*/ 295 以上是建议书写方式,但也可以使用常规的方式如下: 296 border-top-color : #369 /*设置上框线top颜色*/ 297 border-top-width :1px /*设置上框线top宽度*/ 298 border-top-style : solid/*设置上框线top样式*/ 299 其他框线样式 300 solid /*实线框*/ 301 dotted /*虚线框*/ 302 double /*双线框*/ 303 groove /*立体内凸框*/ 304 ridge /*立体浮雕框*/ 305 inset /*凹框*/ 306 outset /*凸框*/ 307 七、CSS表单运用： 308 文字方块 309 按钮 310 复选框 311 选择钮 312 多行文字方块 313 下拉式菜单选项1选项2 314 八、CSS边界样式： 315 margin-top:10px; /*上边界*/ 316 margin-right:10px; /*右边界值*/ 317 margin-bottom:10px; /*下边界值*/ 318 margin-left:10px; /*左边界值*/ 319 320 CSS 属性：字体样式(Font Style) 321 序号中文说明标记语法 322 1 字体样式{font:font-style font-variant font-weight font-size font-family} 323 2 字体类型{font-family:"字体1","字体2","字体3",...} 324 3 字体大小 {font-size:数值|inherit| medium| large|larger| x-large| xx-large| small| smaller| x-small| xx-small} 325 4 字体风格{font-style:inherit|italic|normal|oblique} 326 5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;} 327 6 字体颜色 {color:数值;} 328 7 阴影颜色{text-shadow:16位色值} 329 8 字体行高 {line-height:数值|inherit|normal;} 330 9 字间距 {letter-spacing:数值|inherit|normal} 331 10 单词间距{word-spacing:数值|inherit|normal} 332 11 字体变形{font-variant:inherit|normal|small-cps } 333 12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase} 334 13 字体变形 {font-size-adjust:inherit|none} 335 14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider} 336 文本样式(Text Style) 337 序号中文说明标记语法 338 1 行间距 {line-height:数值|inherit|normal;} 339 2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink} 340 3 段首空格 {text-indent:数值|inherit} 341 4 水平对齐{text-align:left|right|center|justify} 342 5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super} 343 6 书写方式{writing-mode:lr-tb|tb-rl} 344 背景样式 345 序号中文说明标记语法 346 1 背景颜色{background-color:数值} 347 2 背景图片{background-image: url(URL)|none} 348 3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 349 4 背景固定{background-attachment:fixed|scroll} 350 5 背景定位 {background-position:数值|top|bottom|left|right|center} 351 6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置} 352 框架样式(BoxStyle) 353 序号中文说明标记语法 354 1 边界留白{margin:margin-top margin-right margin-bottom margin-left} 355 2 补 白{padding:padding-top padding-right padding-bottom padding-left} 356 3 边框宽度{border-border-top-width border-right-width border-bottom-widthborder-left-width} 357 宽度值：thin|medium|thick|数值 358 4 边框颜色{border-color:数值数值数值数值} 数值：分别代表top、right、bottom、left颜色值 359 5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 360 6 边 框{border:border-width border-style color} 361 上边框{border-top:border-top-width border-style color} 362 右边框{border-right:border-right-width border-style color} 363 下边框{border-bottom:border-bottom-width border-style color} 364 左边框{border-left:border-left-width border-style color} 365 7 宽 度 {长度|百分比| auto} 366 8 高 度 {height:数值|auto} 367 9 漂 浮{float:left|right|none} 368 10 清 除{clear:none|left|right|both} 369 分类列表 370 序号中文说明标记语法 371 1 控制显示{display:none|block|inline|list-item} 372 2 控制空白{white-space:normal|pre|nowarp} 373 3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 374 4 图形列表{list-style-image:URL} 375 5 位置列表{list-style-position:inside|outside} 376 6 目录列表 {list-style:目录样式类型|目录样式位置|url} 377 7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize} 378 --> 379 </body> 380 </html>