css 1

1、图像和链接

         1、URL

                   地址

                   1、分类

                            1、绝对路径

                                     1、引用互联网资源

                                               协议名

                                               主机名(IP地址，域名)

                                               目录路径

                                               文件名

                                     2、本机文件

                                               从文件所在的最高目录处(盘符)开始

                            2、相对路径

                                     通过 文件间的位置关系 找到资源文件

                                     1、同目录，直接用

                                     2、子目录，先进入

                                     3、父目录，先返回(../)

                            3、根相对路径

                                     永远都是从WEB站点所在的根目录处开始查找

                                     语法：/

         2、图像

                   1、语法

                            <img>

                            <img/>

                   2、属性

                            1、src

                                     指定要显示的图像的URL

                            2、width

                            3、height

                                     注意：等比缩放

         3、链接

                   1、语法

                            <a>内容</a>

                   2、属性

                            1、href

                                     链接文件URL

                            2、target

                                     目标，打开新网页的方式

                                     取值：

                                               1、_self

                                                        默认值

                                               2、_blank

                                                        新标签页打开

                   3、链接4种表现形式

                            1、目标文档为下载资源

                                     <a href="xxx.rar/zip">xxx</a>

                            2、电子邮件链接

                                     <a href="mailto:xxx@xxx.com">xxxx</a>

                            3、返回页面顶部空链接

                                     <a href="#">xxx</a>

                            4、链接到JS

                                     <a href="javascript:js代码">xxx</a>

                   4、锚点

                            1、定义锚点

                                     1、通过任何标记的 id 属性

                                     2、通过a标记的 name 属性

                            2、链接到锚点

                                     <a href="#锚点名称"></a>

                                     <a href="页面URL#锚点名称"></a>

2、表格

         1、作用

                   将数据 按照 从左到右，从上到下的顺序进行显示

         2、语法

                   1、标记

                            1、创建表格

                                     <table></table>

                            2、创建表行

                                     <tr></tr> -- table row

                            3、创建列(单元格)

                                     <td></td> -- table data

                   2、属性

                            1、table

                                     width,height,align,border,cellspacing,cellpadding,bgcolor

                            2、tr

                                     align,valign,bgcolor

                            3、td

                                     align,valign,bgcolor,width,height,colspan,rowspan

                   3、表格其他标记

                            1、标题

                                     <caption></caption>

                            2、行标题或列标题

                                     <th></th>

                   4、表格复杂应用

                            1、行分组

                                     表头：<thead></thead>

                                     表主体：<tbody></tbody>

                                     表尾:<tfoot></tfoot>

                            2、不规则表格

                                     通过 td 的 colspan和rowspan 属性来设置

                                     colspan：跨列，从指定单元格位置处开始，水平向右 合并 几列，被合并掉的单元格一定要删除

                                     rowspan：跨行，从指定单元格位置处开始，纵向向下 合并 几个单元格,被合并掉的单元格一定要删除

 

                            3、表格嵌套

                                     一个表格中又出现一个表格

                                     表格中的所有内容，只能出现在td中

***********************************

1、列表

         1、什么是列表

                   按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据

         2、列表的组成

                   主要由 列表类型 和 列表项 来组成

         3、语法

                   1、有序列表

                            标记:<ol></ol> -- Order List

                            列表项：<li></li>

 

                            <ol>

                                     <li>内容</li>

                                     <li>内容</li>

                                     ... ...

                            </ol>

                            属性：

                                     1、type

                                               作用：列表项前的标识

                                               取值：

                                                        1、1 数字，默认值

                                                        2、a 小写字母

                                                        3、A 大写字母

                                                        4、i 小写罗马数字

                                                        5、I 大写罗马数字

                                     2、start

                                               指定 列表项 从第几个字符开始显示

                   2、无序列表

                            标记：<ul></ul> -- Unorder List

                            列表项：<li></li>

                            属性：

                                     1、type

                                               1、disc，实心圆（默认值）

                                               2、circle，空心圆

                                               3、square，实心方块

                                               4、none，没有

                   3、列表的嵌套

                            通过列表嵌套，可以实现多层列表

                            被嵌套的内容，必须放在li中

         4、定义列表

                   1、作用

                            定义列表用于给出一类事物的定义情形

 

                            掩耳盗铃

                                     xxxxxxxxxxxx

                   2、语法

                            <dl></dl>:定义一个定义列表

                                     <dt></dt>:定义列表中要解释的名词或术语

                                     <dd></dd>:定义列表中对名词或术语的解释

 

 

                   3、使用场合

                            图文混排 时

2、结构标记

         1、作用

                   用于表示页面中的布局，目的是为了提升标记的语义化

         2、结构标记

                   1、<header>元素

                            1、语法

                                     <header></header>

                            2、作用

                                     定义文档的页眉

                                     用于取代：<div id="header"></div>

                   2、<nav>元素

                            1、语法

                                     <nav></nav>

                            2、作用

                                     用于表示页面中的导航部分

                   3、<section>元素

                            1、语法

                                     <section></section>

                            2、作用

                                     用于表示 页面中的 主体部分

                   4、<article>元素

                            1、语法

                                     <article></article>

                            2、作用

                                     用于表示独立于文档的其他部分的内容

                                     比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等... ...

                   5、<footer>元素

                            1、语法

                                     <footer></footer>

                            2、作用

                                     用于表示 网页 底部信息

                   6、<aside>元素

                            1、语法

                                     <aside></aside>

                            2、作用

                                     表示网页 内容 中的边栏信息

3、表单(重难点)

         1、表单作用

                   用于显示、收集用户信息，并将信息提交给服务器

 

                   表单组成：

                   1、表单元素-负责将用户数据提交给服务器

                   2、表单控件-负责接收用户的数据(与用户进行数据交互)

         2、表单元素

                   1、标记

                            <form></form>

                   2、属性

                            1、action

                                     定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL

                                     默认 是提交给本页

                            2、method

                                     指定表单数据提交的方式

                                     取值：

                                               1、get(默认值)

                                                        向服务器端要数据时使用

                                                        特点：

                                                        1、显示提交：用户数据是可以显示在地址栏上的

                                                        2、提交数据长度限制：2KB

                                               2、post

                                                        向服务器传递数据时使用

                                                        特点：

                                                        1、隐式提交：所提交的数据是看不见的-安全性较高

                                                        2、无数据大小限制

                            3、enctype(非重点)

                                     表单数据进行编码的方式

                                     取值：

                                     1、application/x-www-form-urlencoded(默认值)

                                     2、multipart/form-data

                                               使用场合：上传文件时使用

                                     3、text/plain

         3、表单控件

                   1、作用

                            提供多种类型的表单控件，并且具备可视化的外观，可以接收用户的数据

                   2、表单控件分类

                            input组元素，textarea，选项框(select和option)，其他元素

                            1、input 元素

                                     1、语法

                                               <input>或<input/>

                                               属性：

                                                        1、type

                                                                 根据type值，创建各种类型的输入字段,如文本框，密码框，单选按钮复选框等... ...

                                                        2、value

                                                                 值，要提交给服务器的值

                                                        3、name

                                                                 控件的名称，服务器端使用，没有名字，无法提交

                                                        4、disabled

                                                                 禁用控件，该属性无值，只要出现在控件中就表示禁用

                                                                 <input disabled>

                                     2、分类

                                               1、文本框与密码框

                                                        文本框：type="text"

                                                        密码框：type="password

 

                                                        属性：

                                                                 1、maxlength

                                                                           限制输入的字符数

                                                                 2、readonly

                                                                           只读

                                                                 3、name

                                                                           以控件的缩写+功能名称组成

                                                                           文本框和密码框的缩写：txt

                                                                           ex:

                                                                                    用户名称:txtUsername

                                                                                    用户昵称:txtNickname

                                                                 4、value

                                               2、单选按钮 和 复选框

                                                        单选按钮：type="radio"

                                                        复选框：type="checkbox"

 

                                                        属性：

                                                                 1、name

                                                                           名称以及分组，一组单选按钮或复选框的话，名称必须一致

                                                                           单选按钮:rdo

                                                                           复选框：chk

                                                                 2、value

                                                                           值

                                                                 3、checked

                                                                           设置默认被选中

                                               3、按钮

                                                        提交按钮：type="submit"

                                                                 负责提交数据到服务器

                                                        重置按钮：type="reset"

                                                                 将表单元素恢复到默认值

                                                        普通按钮：type="button"

                                                                 执行客户端脚本(JS)

                                                        属性：

                                                                 1、name

                                                                           缩写：btn

                                                                 2、value

                                                                           按钮上的显示文本

                                               4、隐藏域和文件选择框

                                                        1、隐藏域

                                                                 不想给用户看，但是要提交给服务器的数据

 

                                                                 <input type="hidden">

                                                                 属性：

                                                                           1、name 名称,缩写 txt

                                                                           2、value 值

                                                        2、文件选择框

                                                                 提交(上传)文件时使用

                                                                 <input type="file">

                                                                 属性：

                                                                           1、name

                                                                                    缩写 ：txt

                                                                 注意：

                                                                           1、保证 form 的 method 属性 必须为 post

                                                                           2、保证 form 的 enctype 属性 必须为 multipart/form-data

                            2、textarea 元素

                                     多行文本框

                                     1、语法

                                               <textarea>文本</textarea>

                                     2、属性

                                               1、name

                                                        控件的名称，缩写 txt

                                               2、readonly

                                                        只读

                                               3、cols

                                                        指定文本域的列数

                                                        变相设置宽度

                                               4、rows

                                                        指定文本域的行数

                                                        变相设置高度

                            3、选项框

                                     两种：

                                               1、下拉选项框

                                               2、滚动列表

                                     语法

                                               1、<select></select>

                                                        功能：创建选项框(滚动列表)

                                                        属性：

                                                        1、name

                                                                 缩写：sel

                                                        2、size

                                                                 默认显示的选项数量，如果取值大于1的话，则为滚动列表

                                                        3、multiple

                                                                 设置多选

                                               2、<option></option>

                                                        选项框中的选项

                                                        属性：

                                                                 1、value

                                                                           值

                                                                 2、selected

                                                                           预选中

                            4、其他元素

                                     1、label 元素

                                               1、作用

                                                        关联 文本 与表单控件。

                                               2、语法

                                                        <label>文本</label>

                                                        属性：

                                                                 for ：表示与该元素相关联的表单控件的ID值

                                     2、fieldset 元素

                                               1、作用

                                                        为控件分组

                                               2、语法

                                                        1、<fieldset></fieldset>

                                                                 为控件分组

                                                        2、<legend></legend>

                                                                 为分组指定标题

                                     3、button 元素

                                               语法:

                                                        <button>内容</button>

                                               注意：

                                                        <button>元素放在<form>中，就是提交按钮,放在<form>之外，就是普通按钮(IE除外)

4、其他标记

         1、浮动框架

                   1、作用

                            可以在一个浏览器窗口中同时显示多个页面文档

                   2、语法

                            <iframe>内容</iframe>

                            注意：

                                     1、必须是成对标记

                                     2、当浏览器不支持<iframe>元素时，将显示"内容"作为该处的 内容

                            属性

                                     1、src

                                               浮动框架中的网页URL

                                     2、width

                                     3、height

                                     4、frameborder

                                               浮动框架的边框，设置为0，则取消边框

         2、摘要与细节

                   1、作用

                            允许将页面某部分内容进行展开或收缩

                   2、语法

                            <details>

                                     <summary>标题</summary>

                            </details>

         3、度量元素

                   1、作用

                            用于显示静态比例的信息

                   2、语法

                            <meter>文本</meter>

                            属性：

                                     1、min

                                               度量范围的最小值，默认为0

                                     2、max

                                               度量范围的最大值，默认为1

                                     3、value

                                               当前显示的度量值，默认为0

         4、时间元素

                   1、作用

                            用于关联时间的不同表现形式

                   2、语法

                            <time>时间文本</time>

                            属性：

                                     datetime:关联的日期时间，可以只关联日期，也可以只关联时间。如果同时关联日期与时间的话，日期与时间之间用"T"来分割

         5、高亮文本显示

                   1、作用

                            将页面中的某部分文本，以特殊的背景颜色显示出来

                   2、语法

                            <mark>高亮文本显示</mark>