第一阶段 HTML和 CSS
DAY 1
认识前端
1、前端主要为三种语言:
html5
(结构)、css
(样式)、js
(行为)
2、认识网页及框架
3、单词预习:
html
-hyper text markup language;单元格间距: cellspacing
;单元格边距:cellpadding
;排列:align
; 合并行:rowspan
; 合并列:colspan
; 行:row
; 列:col
; 禁止输入:disable
; <input属性> - 重置:resert
;提交:submit
;文本:text
;文本域:textarea
;密码:password
;按钮:button
; 圆点按钮:radio
;勾选框:checkbox
;
DAY 2
一、HTML常用标签
1、标题标签:
h1-h6
;加粗标签:
2、加粗:
<b>
、<strong>
、
3、水平线:
<hr>
4、换行:
<p>
、<br>
;其中<br>
是一个单标签
5、空格:
 
6、倾斜:
<i>
、<em>
二、列表(ul/ol/dl
)
1、ul
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2、ol
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
3、dl
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
三、图片标签<img>
四、链接标签
<a href="跳转地址" target="目标窗口的弹出方式"></a>
href:用于指定链接目标的url地址;
target:有-self(本窗口打开)和-blank(在新窗口打开)两种方式;-self为默认方式;
五、表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
两行三列
表格属性
border、width、height、cellspacing、cellpadding、
合并单元格属性:
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;
六、表单域
1、表单域
<form nanme="表单名字" methord="get/post" action="收集到的内容提交到哪里去">
</form>
*注意get和post的区别:
get:提交的数据会显示到地址栏,不安全;如果数据特别大,地址栏会显示不完全。
post:直接把数据交给后台,不会显示出来,相对较安全;能提交的数据量较大。
2、文本框
<input type="text" value="默认值" />
3、密码框
<input type="password" />
4、提交按钮
<input type="submite" value="按钮内容"/>
5.重置按钮
<inpput type="reset" value="按钮内容" />
6、单选框和单选按钮
<input type="radio" name="sex" />
<input type="radio" name="sex" />
单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。
7、复选框
<input type="checkbox" name="hobby" />
<input type="checkbox" name="hobby" disabled="disabled" />
(disabled="disabled" :禁用)(checked="checked" :默认选中)
8、下拉菜单
<select nanme="">
<option>红烧肉</option>
<option>干烧鲤鱼</option>
</select>
9、文本域(多行文本)
<textarea name="textarea" cols="字符宽度" rows="行数">
</textarea>
10、按钮
<input name="'" type="button" value="按钮内容" />
它和submit的区别是 ,submit是提交按钮 起到提交信息的作用,button只起到跳转的作用,不进行提交。
七、路径
1、相对路径
(1)
图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可;如<img src="logo.gif" />
(2)
图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开;如<img src="img/img01/logo.gif" />
(3)
图像文件位于html文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推;如<img src="../logo.gif" />
2、绝对路径
“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.1000phone.com/img/banner_5_pic1.png”
使用 “…/ …/”,以此类推;如<img src="../logo.gif" />
2、绝对路径
“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.1000phone.com/img/banner_5_pic1.png”