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 width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左
190 边框属性: (Border)
191 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
192 border-width:; 边框宽度
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-width: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 宽 度 {width:长度|百分比| 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>