前端开发:第一阶段 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; - 重置:resert;提交:submit;文本:text;文本域:textarea;密码:password;按钮:button; 圆点按钮:radio;勾选框:checkbox;

DAY 2

一、HTML常用标签

1、标题标签:

h1-h6;加粗标签:

2、加粗:

3、水平线:


4、换行:


;其中
是一个单标签

5、空格:

 

6、倾斜:

二、列表(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>名词1dt>
    <dd>名词解释1dd>
    <dd>名词解释2dd>
dl>

三、图片标签

四、链接标签

<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文件位于同一文件夹:只需输入图像文件的名称即可;如

(2)

图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开;如

(3)

图像文件位于html文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推;如

2、绝对路径

“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.1000phone.com/img/banner_5_pic1.png”

使用 “…/ …/”,以此类推;如

2、绝对路径

“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.1000phone.com/img/banner_5_pic1.png”

你可能感兴趣的:(前端学习)