前端开发：第一阶段 HTML和 CSS

第一阶段 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、空格：

​ &nbsp

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”