zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    hdu4841 圆桌问题[STL vector]
    hdu1002 A + B Problem II[大数加法]
    hdu1501 Zipper[简单DP]
    C语言学习之结构体
    C++学习之从C到C++
    一键自动格式化你的代码
    C标准库string.h中几个常用函数的使用详解
    Jlink使用技巧系列教程索引
    Jlink使用技巧之合并烧写文件
    Jlink使用技巧之烧写SPI Flash存储芯片
  • 原文地址:https://www.cnblogs.com/Hale-Proh/p/7199501.html
Copyright © 2011-2022 走看看