给李书记点个赞吧
首页

html5在飞速的发展着

随着移动通信技术的革新及互联网产业的迅猛发展,以移动互联网为代表的移动数据业务呈现出快速增长的势头,尤其是近两年,移动通信带宽大幅提高,移动终端存储和处理能力不断增强,单一的语音服务和传统的移动增值服务已经不能满足商务活动、互动交流和多媒体服务等多元化的用户需求。

程序员都不擅长人际交往

程序员都不擅长人际交往

作为下一代网页文本核心技术的 HTML5,它的出现成为移动互联网应用的又一选择。HTML5 是最近十年来 Web 开发标准最巨大的飞跃,目前苹果、谷歌、微软世界三大移动互联网巨头都支持了 HTML5,HTML5 的发展给移动互联网应用带来了全新的变化。HTML5 的出现,给移动互联网带来了新的变革,为移动互联网中富媒体的应用提供了新的思路,并具有广阔的应用前景。所以HTML5适应了目前的移动互联网应用潮流。

涉及到HTML5开发必备技术。课程内容上包括以下八个方面:Web页面制作基础,UI网站设计,编程基础技术,后端开发技术,移动互联网应用,特效开发高级实战,企业级应用开发以及网页游戏开发。课堂实例丰富,由浅入深,学习内容全面丰富。另外,目前的课程根据市场需求,每月一更新,经过许多H5大牛参与修订,已达到和目前市场接轨,提供人才需求的目的,以达到真正实用的目的,能够与大型软件开发公司所需要的开发技术相吻合。课程中的每个知识点都是程序开发人员必不可少的内容,都可以提高开发人员的开发效率,开发出安全、稳定的Web系统。

来李书记这里学习php教程是比较综合的,不仅仅学习php教程,还能定期的学习到更多的关于html5的课程。

欢迎观看html5相关的课程体系:

HTML5入门教程(1)

  • 评论:0条
  • 分类:html
  • 浏览:1040
  • 04月03日

    CSS层叠样式表总结

    在学习完html语言基础学习总结之后接下来我们说下CSS层叠样式表,当然css是html一个样式,用起来比较好,我们可以通过css,js等语言写出自己的更加好看的网页,当然也有注意的地方比如用css的时候使用字母、数字或下划线和减号构成,不要以数字开头。

    CSS层叠样式表

    CSS层叠样式表

    一、css的语法
    —————————–
    格式: 选择器{属性:值;属性:值;属性:值;….}
    其中选择器也叫选择符
    CSS中注释:/* … */
    二、在HTML中如何使用css样式(html中嵌入css的方式);
    —————————————————-
    1. 内联方式(行内样式)
    就是在HTML的标签中使用style属性来设置css样式
    格式: <html标签 style=”属性:值;属性:值;….”>被修饰的内容</html标签>
    <p style=”color:blue;font-family:隶书”>在HTML中如何使用css样式</p>
    特点:仅作用于本标签。

    2. 内部方式(内嵌样式)
    就是在head标签中使用<style type=”text/css”>….</style>标签来设置css样式
    格式:<style type=”text/css”>
    ….css样式代码
    </style>
    特点:作用于当前整个页面

    3. 外部导入方式(外部链入)
    3.1 (推荐)就是在head标签中使用<link/>标签导入一个css文件,在作用于本页面,实现css样式设置
    格式:<link href=”文件名.css” type=”text/css” rel=”stylesheet”/>

    3.2 还可以使用import在style标签中导入css文件。
    如:<style type=”text/css”>
    @import “style.css”;
    </style>
    特点:作用于整个网站
    他们的优先级:当样式冲突时,就是采用就近原则,是值css属性离被修饰的内容最近的为主。
    若没有样式冲突则采用叠加效果。

    三、**css2的选择符:
    —————————————————————
       1. html选择符(标签选择器)
    就是把html标签作为选择符使用
    如 p{….}  网页中所有p标签采用此样式
    h2{….}  网页中所有h2标签采用此样式

     2. class类选择符 (使用点.将自定义名(类名)来定义的选择符)
    定义:               .类名{样式….}    匿名类
    其他选择符名.类名{样式….}
    使用:<html标签 class=”类名”>…</html标签>

    .mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */

    p.ps{color:green;}  /*只有p标签中class属性值为ps的才采用此样式*/

    注意:类选择符可以在网页中重复使用

    3. Id选择符
    定义: #id名{样式…..}
    使用:<html标签 id=”id名”>…</html标签>

    注意:id选择符只在网页中使用一次.

    选择符的优先级:从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

    4. 关联选择符(包含选择符)
    格式: 选择符1 选择符2 选择符3 …{样式….}
    例如: table a{….} /*table标签里的a标签才采用此样式*/
    h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

     5. 组合选择符(选择符组)
    格式: 选择符1,选择符2,选择符3 …{样式….}
    h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

     6. 伪类选(伪元素)择符:
    格式: 标签名:伪类名{样式….}

    a:link {color: #FF0000; text-decoration: none}         /* 未访问的链接 */
    a:visited {color: #00FF00; text-decoration: none}         /* 已访问的链接 */
    a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
    a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

       7. 属性选择器:

     8. 其他伪类选择器

    四、  CSS3中的选择器(了解)
    ------------------------------------------------
        1. 关系选择器:
    div>p 选择所有作为div元素的子元素p
    div+p 选择紧贴在div元素之后p元素
    div~p 选择div元素后面的所有兄弟元素p
     2. 属性选择器:
    [attribute]选择具有attribute属性的元素。
    [attribute=value]选择具有attribute属性且属性值等于value的元素。
    [attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表,其中一个等于value的元素。
    [attribute|=value]选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素。
    [attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
    [attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
    [attribute*=value]匹配具有attribute属性、且值中含有value的E元素

    3. 结构性伪类选择器:
    ::first-letter设置对象内的第一个字符的样式。
    ::first-line设置对象内的第一行的样式。
    :before设置在对象前(依据对象树的逻辑结构)发生的内容。
    :after设置在对象后(依据对象树的逻辑结构)发生的内容。
    :lang(language)匹配使用特殊语言的E元素。
    :element1~element2:
    :first-of-type匹配同类型中的第一个同级兄弟元素
    :last-of-type匹配同类型中的最后一个同级兄弟元素
    :only-of-type匹配同类型中的唯一的一个同级兄弟元素
    :only-child匹配父元素仅有的一个子元素
    :nth-child(n)匹配父元素的第n个子元素
    :nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
    :last-child()匹配父元素的最后一个子元素
    :root匹配元素在文档的根元素。在HTML中,根元素永远是HTML
    :empty匹配没有任何子元素(包括text节点)的元素

        4. *状态伪类选择器
    :link 设置超链接a在未被访问前的样式。
    :visited 设置超链接a在其链接地址已被访问过时的样式
    :active     设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
    *:hover    设置元素在其鼠标悬停时的样式
    *:focus    设置元素在其获取焦点时的样式   针对输入框采用此样式
    :target    匹配相关URL指向的E元素
    :enabled   匹配用户界面上处于可用状态的元素
    :disabled   匹配用户界面上处于禁用状态的元素
    :checked   匹配用户界面上处于选中状态的元素
    :not(selector)匹配不含有selector选择符的元素
    ::selection  设置对象被选择时的样式

        5. 其他伪类选择器
    E:not(s) : {attribute}
    匹配所有不匹配简单选择符s的元素E
    p:not(.bg) {background-color:#00FF00;}

    ===========================================================

    五、CSS中常用的属性:
    —————————————————————————————
        1. color颜色属性:
    a. HSL颜色:  通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.
    background-color: hsl(240,100%,50%);color:white;
    b. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A);
    background-color: hsla(0,100%,50%,0.2);
    *c. RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
    background-color: rgb(200,100,0);
    d. RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
    background-color: rgba(0,0,0,0.5);
    *e. 图片透明度的设置  img.opacity{ opacity:0.25;}

        2. 字体属性: font
    font
    *font-size:         字体大小:20px,60%基于父对象的百分比取值
    *font-family:    字体:宋体,Arial
    font-style:    normal正常;italic斜体; oblique倾斜的字体
    *font-weight:    字体加粗 :bold
    font-variant:    small-caps 小型的大写字母字体
    font-stretch:    [了解]文字的拉伸是相对于浏览器显示的字体的正常宽度(大部分浏览器不支持)。

        3. 文本属性:
    text-indent:    首行缩进:text-indent:30px;
    text-overflow:    文本的溢出是否使用省略标记(…)。clip|ellipsis(显示省略标记)
    *text-align:     文本的位置:left center right
    text-transform:对象中的文本的大小写:capitalize(首字母)|uppercase大写|lowercase小写
    *text-decoration: 字体画线:none无、underline下画线,line-through贯穿线
    text-decoration-line:[了解]文本装饰线条的位置(浏览器不兼容)
    *text-shadow: 文本的文字是否有阴影及模糊效果
    vertical-align: 文本的垂直对齐方式
    direction:文字流方向。ltr | rtl
    white-space:nowrap; /* 强制在同一行内显示所有文本*/
    *letter-spacing: 文字或字母的间距
    word-spacing:单词间距
    *line-height:行高
    *color: 字体颜色

        *4. 边框:
    border:宽度 样式 颜色;
    border-color;
    border-style; 边框样式:solid实现,dotted点状线,dashed虚线
    border-width:
    border-left-color;
    border-left-style;
    border-left-width:

    CSS3的样式
    border-radius:圆角处理
    box-shadow:    设置或检索对象阴影

        5. 背景属性:background
    *background-color: 背景颜色
    *background-image: 背景图片
    *background-repeat:是否重复,如何重复?(平铺)
    *background-position:定位
    background-attachment: 是否固定背景,
    scroll:默认值。背景图像是随对象内容滚动
    fixed:背景图像固定

    css3的属性
    *background-size: 背景大小,如 background-size:100px 140px;
    多层背景:
    background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
    background-origin:content-box,content-box,content-box;
    background-clip:padding-box,padding-box,padding-box;
    background-size:50px 60px,50px 60px,50px 60px;

        6. *内补白(内补丁)
    padding:        检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
    padding-top:    检索或设置对象顶边的内部边距
    padding-right:    检索或设置对象右边的内部边距
    padding-bottom:检索或设置对象下边的内部边距
    padding-left:    检索或设置对象左边的内部边距
        
        7. *外补白(外补丁)
    margin:        检索或设置对象四边的外延边距,如 margin:10px;  margin:5px auto;
    margin-top:    检索或设置对象顶边的外延边距
    margin-right:    检索或设置对象右边的外延边距
    margin-bottom: 检索或设置对象下边的外延边距
    margin-left:    检索或设置对象左边的外延边距

        8. Position定位
    *position:    定位方式:absolute(绝对定位)、fixed(固定)(relative定位参考,可对内部相对absolute定位)
    *z-index:    层叠顺序,值越大越在上方。
    *top:        检索或设置对象与其最近一个定位的父对象顶部相关的位置
    right:        检索或设置对象与其最近一个定位的父对象右边相关的位置
    bottom:        检索或设置对象与其最近一个定位的父对象下边相关的位置
    *left:        检索或设置对象与其最近一个定位的父对象左边相关的位置

        9. Layout布局
    *display:    是否及如何显示:none隐藏,block块状显示…
    *float:        指出了对象是否及如何浮动:值none | left | right
    *clear:        清除浮动:none | left | right | both两侧
    visibility:设置或检索是否显示对象。visible|hidden|collapse。
    与display属性不同,此属性为隐藏的对象保留其占据的物理空间
    clip:        检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
    如:clip:rect(auto 50px 20px auto);上和左不裁剪,右50,下20.
    *overflow:    超出隐藏:hidden,visible:不剪切内容
    overflow-x:内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
    overflow-y:内容超过其指定高度时如何管理内容

        10.Flexible Box 弹性盒子(了解见手册)      
    box-orient: 设置或检索弹性盒模型对象的子元素的排列方式。horizontal(水平)|vertical(纵向)
    box-pack    设置或检索弹性盒模型对象的子元素的对齐方式。
    box-align    设置或检索弹性盒模型对象的子元素的对齐方式。
    box-flex    设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
    box-flex-group    设置或检索弹性盒模型对象的子元素的所属组。
    box-ordinal-group    设置或检索弹性盒模型对象的子元素的显示顺序。
    box-direction    设置或检索弹性盒模型对象的子元素的排列顺序是否反转。
    box-lines    设置或检索弹性盒模型对象的子元素是否可以换行显示。

        11. 用户界面 User Interface
    *cursor    鼠标指针采用何种系统预定义的光标形状。pointer小手,url自定义
    zoom    设置或检索对象的缩放比例: normal|5倍|200%百分比
    box-sizing    设置或检索对象的盒模型组成模式。content-box | border-box
    content-box: padding和border不被包含在定义的width和height之内。
    border-box: padding和border被包含在定义的width和height之内。

    resize    设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。
    none: 不允许用户调整元素大小。
    both: 用户可以调节元素的宽度和高度。
    horizontal: 用户可以调节元素的宽度
    vertical: 用户可以调节元素的高度。
    outline     复合属性:设置或检索对象外的线条轮廓
    outline-width    设置或检索对象外的线条轮廓的宽度
    outline-style    设置或检索对象外的线条轮廓的样式
    outline-color    设置或检索对象外的线条轮廓的颜色
    outline-offset    设置或检索对象外的线条轮廓偏移位置的数值
    nav-index    设置或检索对象的导航顺序。
    nav-up    设置或检索对象的导航方向。
    nav-right    设置或检索对象的导航方向。

        12. 多栏 Multi-column
    columns         设置或检索对象的列数和每列的宽度
    column-width     设置或检索对象每列的宽度
    column-count     设置或检索对象的列数
    column-gap         设置或检索对象的列与列之间的间隙
    column-rule     设置或检索对象的列与列之间的边框
    column-rule-width     设置或检索对象的列与列之间的边框厚度
    column-rule-style     设置或检索对象的列与列之间的边框样式
    column-rule-color     对象的列与列之间的边框颜色
    column-span     象元素是否横跨所有列
    column-fill     对象所有列的高度是否统一
    column-break-before 对象之前是否断行
    column-break-after     对象之后是否断行
    column-break-inside 对象内部是否断行

        13. 表格相关属性:
    table-layout    设置或检索表格的布局算法
    border-collapse    设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开    separate | collapse
    border-spacing    设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距
    caption-side    设置或检索表格的caption对象是在表格的那一边    top | right | bottom | left
    empty-cell    设置或检索当表格的单元格无内容时,是否显示该单元格的边框    hide | show

        14. 过渡 Transition:
    transition     检索或设置对象变换时的过渡效果
    transition-property    检索或设置对象中的参与过渡的属性
    transition-duration    检索或设置对象过渡的持续时间
    transition-timing-function    检索或设置对象中过渡的类型
    transition-delay    检索或设置对象延迟过渡的时间

        15. 动画 Animation
    animation     检索或设置对象所应用的动画特效
    animation-name    检索或设置对象所应用的动画名称
    animation-duration    检索或设置对象动画的持续时间
    animation-timing-function    检索或设置对象动画的过渡类型
    animation-delay    检索或设置对象动画延迟的时间
    animation-iteration-count    检索或设置对象动画的循环次数
    animation-direction    检索或设置对象动画在循环中是否反向运动
    animation-play-state    检索或设置对象动画的状态
    animation-fill-mode    检索或设置对象动画时间之外的状态

        16. 2D变换 2D Transform:
    transform     检索或设置对象的变换
    transform-origin    检索或设置对象中的变换所参照的原点

        17. Media Queries Properties媒体查询
    width    定义输出设备中的页面可见区域宽度
    height    定义输出设备中的页面可见区域高度
    device-width    定义输出设备的屏幕可见宽度
    device-height    定义输出设备的屏幕可见高度
    orientation    定义’height’是否大于或等于’width’。值portrait代表是,landscape代表否
    aspect-ratio    定义’width’与’height’的比率
    device-aspect-ratio    定义’device-width’与’device-height’的比率。如常见的显示器比率:4/3, 16/9, 16/10
    device-aspect-ratio    定义’device-width’与’device-height’的比率。如常见的显示器比率:4/3, 16/9, 16/10
    color    定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0
    color-index    定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
    monochrome    定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
    resolution    定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
    scan    定义电视类设备的扫描工序
    grid    用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否

    备注:根据李书记一贯的作风都是将整理好的文档重要的加上*,小伙伴们想学习html、css的一定要掌握*的内容。

  • 评论:0条
  • 分类:html
  • 浏览:1104
  • 02月22日

    html语言基础学习总结

    今天李书记为大家总结下html的基础语法知识,在很多人不知道html的时候李书记就在学习html了,很长时间没有给大家发帖了,今天特地的总结下相关的html知识,我总结的比较笼统,但是相信有一定基础的人一定能搞定html,希望大家以后多关注李书记php博客。

    一、 HTML介绍:
    —————————————
    1. 什么是HTML?
    超文本标记语言,  <标签名>–标记(标签、节点)

    2. HTML是由:标签和内容构成

    3. 程序语言有两种:解释性语言(HTML、PHP、Javascript)和编译型语言(C、C++、Java

    4. HTML的标签组成部分、属性、实体

    HTML的实体: <:&lt;  >:&gt;  空格:&nbsp;

    5. HTML中注释: <!– …. –>
    注释的目的:1. 辅助说明  2.代码调试

    6. HTML标签(标记)的语法: 标签是由”<“和”>”括起来
    双标签:<标签名>….</标签名>
    单标签:<标签名/>

    7. HTML中的颜色:可以是颜色单词:red/blue/green/yellow…
    还可以是:#000000 — #ffffff
    十六进制:0123456789abcdef
    其中前两位表示红色,中间两位绿色,后两位表示蓝色。

    二、 HTML中HEAD头部设置
    —————————————-
    设置网页编码:<meta charset=”utf-8″/>
    关键字:<meta name=”Keywords” content=”关键字” />
    描述:  <meta name=”Description” content=”简介、描述” />
    网页标题:<title>本网页标题</title>
    导入CSS文件:<link type=”text/css” rel=”stylesheet” href=”**.css”/>
    CSS代码:<style type=”text/css”>嵌入css样式代码</style>
    JS文件或代码: <script >。。。</script>
    … …

    三、 HTML中的文本标签、格式化标签
    —————————————-
    文本标签:
    1. *<br/> 换行
    2. *<p>…</p> 换段
    3. <i>…</i> 斜体
    4. <em>…</em> 强调斜体
    5. <b>…</b> 加粗
    6. *<strong>…</strong> 强调加粗
    7. *<hn>…</hn> 其中n为1–6的值。 标题标签(加粗、独立行)
    8. <cite></cite> 引用
    9. <sub>… </sub>  <sup>…</sup>
    10.*<del></del> 删除线
    ….
    格式化标签:
    1. *<br/> 换行
    2. *<p>…</p> 换段
    3. 列表:
    *<ul> 无序列表
    <ol> 有序列表  其中type类型值:A a I i 1   start属性表示起始值
    *<li> 列表项

    <dl> 自定义列表
    <dt> 自定义列表头
    <dd> 自定义列表内容
    4. <div> <span>

    四、*HTML中中的超级链接A
    ————————————————
    *<a href=””></a> 超级链接标签
    属性:href必须,指的是链接跳转地址
    target: 表示链接的打开方式:
    _blank  新窗口
    _parent 父窗口
    _self   本窗口(默认)
    _top    顶级窗口
    framename 窗口名
    title:文字提示属性(详情)
    锚点链接:
    定义一个锚点:<a id=”a1″></a> 以前使用的是 <a name=”a1″></a>
    使用锚点:      <a href=”#a1″>跳到a1处</a>

    五、 *图片标签img
    —————————————
    <img /> 在网页中插入一张图片
    属性:src: 图片名及url地址
    alt: 图片加载失败时的提示信息
    title:文字提示属性
    width:图片宽度
    height:图片高度
    border:边框线粗细

    六、 多媒体标签(熟悉)
    ————————————
    <audio src=”./images/beidahuang.mp3″ controls=”controls”>
    你的浏览器不支持播放
    </audio>
    <br/>
    <audio controls=”controls”>
    <source src=”./images/beidahuang.mp3″ type=”audio/mpeg” />
    你的浏览器不支持播放
    </audio>

    <br/><br/>
    <video controls=”controls” width=”400″ height=”400″>
    <source src=”./images/fun.mp4″ type=”video/mp4″ />
    <source src=”movie.webm” type=”video/webm”>
    你的浏览器不支持视频播放
    </video>

    <video  controls loop poster=”tiao.jpg”>
    <source src=”movie.webm” type=”video/webm”>
    <source src=”movie.ogg” type=”video/ogg”>
    <source src=”movie.mp4″ type=”video/mp4″>
    您的破浏览器该扔了,不支持视频标签
    </video>

    <br/><br/>

    <embed src=”./images/haowan.swf” width=”300″ height=”300″ />

    七、 *表格标签
    ————————————
    *table  表格标签
    caption 表格标题
    *tr    行标签
    *th  列头标签
    *td  列标签

    *thead  表头
    *tbody  表体
    tfoot  表尾

    八、**form表单标签
    ———————————————————
    1. <form></form> –表单标签
    form标签常用属性:
    *action属性:提交的目标地址(URL)
    *method属性:提交方式:get(默认)和post
    get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
    post方式是URL地址不可见,长度不受限制,相对安全.
    enctype:提交类型
    target: 在何处打开目标 URL。
    name:属性为表单起个名字.HTML5不支持。用 id 代替。

    2. <input> 表单项标签input定义输入字段,用户可在其中输入数据。在 HTML 5 中,type 属性有很多新的值。
    具体在下面有详解:
    如:<input type=”text” name=”username”>

    3. <select> 标签创建下拉列表。
    *name属性:定义名称,用于存储下拉值的
    size:定义菜单中可见项目的数目,html5不支持
    disabled 当该属性为 true 时,会禁用该菜单。
    multiple 多选
    *<option>  下拉选择项标签,用于嵌入到<select>标签中使用的;
    *value属性:下拉项的值
    *selected属性:默认下拉指定项.

    4. *<textarea> 多行的文本输入区域
    *name :定义名称,用于存储文本区域中的值。
    *cols :规定文本区内可见的列数。
    *rows :规定文本区内可见的行数。
    disabled: 是否禁用
    readonly: 只读

    默认值是在两个标签之间

    5. *<button> 标签定义按钮。
    您可以在 button 元素中放置内容,比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

    6. <fieldset> html5标签–fieldset 元素可将表单内的相关元素分组。
    disabled属性:定义 fieldset 是否可见。
    form属性: 定义该 fieldset 所属的一个或多个表单。

    7. <legend> html5标签–<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
    <form>
    <fieldset>
    <legend>健康信息:</legend>
    身高:<input type=”text” /><br/>
    体重:<input type=”text” /><br/>
    </fieldset>
    </form>

    8. <optgroup> html5标签–<optgroup> 标签定义选项组。此元素允许您组合选项
    样例:
    <select>
    <optgroup label=”Swedish Cars”>
    <option value=”volvo”>Volvo</option>
    <option value=”saab”>Saab</option>
    </optgroup>
    <optgroup label=”German Cars”>
    <option value=”mercedes”>Mercedes</option>
    <option value=”audi”>Audi</option>
    </optgroup>
    </select>

    9. <datalist> html5标签–<datalist> 标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
    样例:
    <form action=”demo_form.php” method=”get”>
    <input list=”browsers” name=”browser”>
    <datalist id=”browsers”>
    <option value=”Internet Explorer”>
    <option value=”Firefox”>
    <option value=”Chrome”>
    <option value=”Opera”>
    <option value=”Safari”>
    </datalist>
    <input type=”submit”>
    </form>

    10. **<input/>  表单项中的属性,可以提供
    *type属性:表示表单项的类型:值如下:
    text:单行文本框
    password:密码输入框
    checkbox:多选框 注意要提供value值
    radio:单选框   注意要提供value值
    file:文件上传选择框
    button:普通按钮
    submit:提交按钮
    image:图片提交按钮
    reset:重置按钮, 还原到开始(第一次打开时)的效果
    hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
    *name属性:表单项名,用于存储内容值的
    *value属性:输入的值(默认指定值)
    size属性:输入框的宽度值
    maxlength属性:输入框的输入内容的最大长度
    readonly属性:对输入框只读属性
    *disabled属性:禁用属性
    *checked属性:对选择框指定默认选项
    accesskey属性:指定快捷键(不常用) (IE:alt+键  火狐:alt+shift+键)
    tabindex属性:通过数字指定tab键的切换顺序(不常用)

         src和alt是为图片按钮设置的

    注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空
    image图片按钮,默认具有提交表单功能。

    备注:以上打*号的都是比较重要的,而且用的也是比较多的,希望大家多学习。

  • 评论:0条
  • 分类:html
  • 浏览:862
  • 02月22日