week 2

第八章 超链接

代码量

1.a标签

语法：<a href="链接地址">文本或图片</a>

eg：

文本：<a href="http://www.lvyestudy.com">绿叶学习网</a>

图片：<a href="http://www.lvyestudy.com"><img src="./8.1lvye.png"></a>

2.target属性

_blank：在新窗口打开链接；

_self(默认值)：在原来窗口打开；

_parent：在父窗口打开；

_top：在顶层窗口打开超链接；

3.内部链接

4.锚点链接

锚点链接时内部链接的一种。指单击某个超链接，它会跳转到当前页面的某一部分。

Ⅰ.目标元素的id

Ⅱ.a标签的href属性指向该id

Ⅲ.给a的标签赋值时，需要加上#，来表现这个是锚点链接

eg:<a href="#article">推荐文章</a><br />

<div id="article">

        <h3>推荐文章</h3>

        <ul>

            <li>朱自清-荷塘月色</li>

            <li>余光中-乡愁</li>

            <li>鲁迅-阿Q正传</li>

        </ul>

    </div>

5.编程题

第九章 表单、

1.表单的标签：form，input，textrea，select，option

外观划分:单行文本框，密码文本框，单选框，复选框，按钮，文件上传，多行文本框，下拉列表

2.form（标签属性：name，method，action，target，enctype）

<form>

       各种表单标签

    </form>

3。input标签

text：单行文本框

password：密码文本框

radio：单选框

checkbox：多选框

button/submit/reset：按钮

file：文件上传

4.text：单行文本框

语法：<input type="text">

属性：

（1）value：默认显示

（2）size：长度

（3）maxlength：最多输入字符

5.password：密码文本框

语法：<input type="password">

属性：

（1）value：默认显示

（2）size：长度

（3）maxlength：最多输入字符

6.radio：单选框

语法：<input type="radio">

属性：必需设置（value表示单选按钮的值，name表示单选按钮所在的组名）

（1）value：默认显示

（2）size：长度

（3）maxlength：最多输入字符

（4）checked：默认情况，让某个单选框选中

7.checkbox：复选框

语法：<input type="checkbox" name=“组名” value=“取值”/>

属性：checked：同单选框

8.（1）button：按钮

语法：<input type="button" value="取值">

value就是按钮上的文字

（2）提交按钮submit（用来给服务器提交数据）

普通按钮（配合Javascript来进行使用）

（3）重置按钮reset（清除用户在表单中输入的内容）

重置按钮只能清空在form标签中表单下的内容。

9.文件上传

语法：<input type="file"/>

10.多行文本框

语法：<textarea rows="行数" cols="列数" value=“取值”>默认内容</textarea>

11.下拉列表

语法：

<select>

            <option value="qq.com">选项内容</option>

            。。。。。

            <option value="kugou.com">选项内容</option>

        </select>

（1）select

Ⅰ.multiplle：可以选择多项（使用Ctrl+鼠标左键）

Ⅱ.size:可显示几个列表项，取值为整数（一般浏览器最低是4）

（2）option

Ⅰ.selected：是否选中

Ⅱ.value:选项值

编程题

第十章 框架

iframe标签：

语法：<iframe src="链接地址" width="数值" height="数值"></iframe>

第十一章 CSS简介

CSS用于控制网页外观

页面引入CSS的三种方式：

1.外部样式表

语法：<link rel="stylesheet" type="text/class" href="文件路径" />（放在head标签里面）

2.内部样式表

语法：(放在head标签里面)

<style type="text/css">

.....

</style>

3.行内样式表

语法：（标签的style属性中定义的）

<div style="color:red;">绿叶</div>

PS：在实际开发中，一般都是使用外部样式表

第十二章 CSS选择器

1.元素的id和class

Ⅰ.id：在同一个页面中，不允许出现两个id相同的元素。但是不在同一个页面，可以出现。

eg：<div id="content">存在即合理</div>

Ⅱ.class:可以为同一个页面的相同元素或者不同元素设置相同的class

2.选择器

CSS选择器格式：

选择器

{

属性1：取值1；

。。。。。

}

①元素选择器

选中相同的元素，定义同一个CSS格式

eg：div{color:red;}

<div>绿叶学习网</div>

②id选择器

#lvye

<div id="lvye">绿叶学习网</div>

③class选择器

.lv{color:red;}

<div class="lv">绿叶学习网</div>

④后代选择器

选择元素内部某一种元素的所有元素：包括子元素和其他后代元素（孙元素）

#father1 div{color:red;}

#father2 div{color:green;}

<div id="father1"></div>

<div id="father2"></div>

⑤群组选择器

指同时对几个选择器进行相同的操作