html5的标签
2016-10-08 11:48:33 u013848401 阅读数 1392
//组合表单中的相关元素
<form>
    <fieldset>
        <legend>健康信息</legend>
        身高:<input type="text"/>
        体重:<input type="text"/>
    </fieldset>
</form>

显示效果:
这里写图片描述

<fieldset>标签的定义和使用
fieldset元素可将表单的相关元素分组。
fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到<fieldset>标签内时,浏览器会以特殊的方式来显示它们,它们可能有特殊的边界,3D效果,或者甚至可以穿件一个子表单来处理这些元素。

<legend>标签的定义和使用
legend元素表示作为legend元素的父元素fieldset元素的其余内容标题(caption)。
legend元素作为fieldset元素的第一个子元素来使用。
legend标签为fieldset元素定义标题。

在HTML 4.0.1 与HTML 5 之间,这两个标签的属性有些差异。

2018-03-26 16:13:16 beichen0518 阅读数 108

HTML 超文本标记语言

  • Hyper-Text Markup Language
  • 后缀名.htm / .html

  • 查找错误,开发者工具,找到Console 控制台可以看到报错只有js报错可以看到报错

<!--所有的代码都写在html标签下 它是最顶级标签-->
<!--标签基本上都有开始标签和结束标签,标签还可以有属性-->
<!--1.标签(tag/element- 承载内容-->
<!--2.层叠样式表(CSS) - 显示/渲染页面-->
<!--3.JavaScript - 交互式行为 -->
<!doctype html> <!--文档类型声明,说明页面使用的HTML5的规范-->
<html> <!--标签,用<>,这是一个开始标签-->
    <head> <!--放一些和网页相关的元数据信息,但不会显示在浏览器的主窗口中-->
        <meta charset="utf-8"> <!--源数据标签,标签的属性,如果一个标签中间没有内容,就不需要结束标签-->
        <title>某某的个人空间</title> <!--网页的标题-->
        <!--样式表-->
        <style type="text/css"> 
            h1 {
                color: red;
                font-size:3cm;
            }

        </style> <!--red 和 #ff0000效果是一样的,这是16进制的数等于255,0,0-->
    </head>
    <body> <!--body标签内的内容就是要显示在浏览器窗口中的信息-->
        <h1 title="这是一个提示信息">hello, world</h1>  <!--一级标题, 一共有六级标题,title 属性效果是,鼠标放在标题文字上时,浮出信息--> 
        <h2>你好,世界</h2> <!--二级标题-->
        <button onclick="foo()">OK</button> <!--按钮标签-->
        <script>
            function foo() {
                window.alert('大家好');

            }
        </script> <!--js需要在这里写-->
    </body>
</html>
<!--代码都写在标签了里面,而浏览器就是这个语言的执行环境
    它执行HTML书写的代码将结果渲染到浏览器窗口中-->

HTML参考手册

  • WWW
  • World Wide Web - 万维网
  • 规范标准
  • W3C -
  • 学习HTML5去runoob,或W3school

列表小技巧 在sublime中,装了emmet插件的情况下输ul>li*5 再按Tab键会自动生成5个列表

<!DOCTYPE html>
<!--
    html/head/body
    文本 - h1-h6/p/br/hr/sub/sup/strong/em/del/ins/q
    列表 - ul/ol(li)/dl(dt/dd)
    图像 - img/figure/figcaption
    链接 - a(页面链接/锚链接/功能链接)
    表格 - table/tr/td/th/thread/tbody/tfoot
    表单 - form / input / select / textarea
    音视频 - audio / video(source)
-->
<html lang="en">
<head>
    <a id="top"></a> <!--设置锚点-->
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--音频-->
    <audio controls autoplay loop>
        <!--controls 播放控件, autoplay 自动播放 ,loop循环播放-->
        <source src="./resources/bgmusic.mp3" type="audio/mp3" >
    </audio>
    <!--视频-->
    <video controls>
        <source src="./resources/movie.mp4" type="video/mp4">       
    </video>
    <h1>Hello, world!</h1>
    <hr> <!--水平标尺,一个水平的分割线-->
    <ins>床前</ins>明月光<sup>1</sup><br>
    疑是地上霜<sub>2</sub><br>
    <p>举头望明月<del>明月</del></p>
    <p>低头思故乡<strong></strong><em>故乡</em></strong></p>
    <q>其实地上本没有路,走的人多了也便成了路</q>
    <h3>某某的个人爱好</h3>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul><!--无序列表-->
    <ol>
        <li>a1</li>
        <li>a2</li>
        <li>a3</li>
        <li>a4</li>
        <li>a5</li>
    </ol><!--有序列表-->
    <dl>
        <dt>阅读</dt>
        <dd>每天晚上阅读</dd>
        <dd>阅读科幻小说</dd>
        <dt>
            <figure>
            <img src="./images/卡卡西.ico" alt="卡卡西" width="30"> <!--在这种情况下最好选用相对路径,有图片显示图片,没图片显示替换文字, 可以指定宽高,但一般不建议用这种方法,让美工切好图片,不然浪费流量-->
            <figcaption>这是一个什么图</figcaption>
            </figure>
        </dt><!--放图片-->
        <dd>每天晚上阅读</dd>
        <dd>阅读科幻小说</dd>
    </dl><!-- 定义列表-->
    <!--列表-->
    <table>
        <!--列表行-->
        <tr>
            <!--列表列-->
            <td>

            </td>

        </tr>
    </table>
    <table border="1">
        <caption>学生成绩表</caption><!--标题,自动居中-->
        <thead>
                <tr>
                    <th>姓名</th>
                    <th>Python</th><!--th表示表头里的列-->
                </tr>
        </thead>
        <tbody>
                <tr>
                    <td rowspan="3"></td> <!--跨行,合并单元格-->
                    <td>王大锤</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>小明</td>
                    <td>60</td>
                </tr>
                <tr>
                    <td colspan="2"></td> <!--跨列-->                    
                </tr>
                <tr>
                    <td></td>
                    <td>小强</td>
                    <td>75</td>
                </tr>
        </tbody>
        <tfoot>
                <tr>
                    <td colspan="2" align="right">平均分</td> <!--虽然可以直接用属性来对齐,但都应该由样式表来做-->
                    <td></td>
                </tr>
        </tfoot>
    </table>
    <!--表单-->
    <form action="" method="post" enctype="multipart/form-data">
        <!--action 给url,对应某个服务器的某个功能 method="post" 如果要上传文件必须写post ,enctype="multipart/form-data"这个表示编程语言,上传文件时也需要写-->
        <fieldset>
        <legend>必填信息</legend>
        <p><input type="text" name="username" placeholder="请输入用户名" required></p>
        <!--可输入的文本框, value表示默认值,placeholder表示占位信息, required表示必填-->
        <p><input type="password" name="password" placeholder="请设置密码"></p>
        <!--密码框-->
        <!--单选框-->
        <p>
        <input type="radio" name="gender" checked><input type="radio" name="gender" ></p>
        <!--单选按钮 ,如果name相同,只能选择一个,如果name不同就都可以选,checked表默认选中-->
        <!--复选框-->
        <p>
            <input type="checkbox" name="fav">阅读
            <input type="checkbox" name="fav">健身
            <input type="checkbox" name="fav">游戏
            <input type="checkbox" name="fav"><!--可同时勾选多项-->
        </p>
        <!--日历框-->
        <p>
            <input type="date" name="birthday">生日
        </p>
        <!--输邮箱的框-->
        <p>
            <input type="email" name="email" placeholder="请输入您的邮箱">
        </p>
        </fieldset>
        <!--下拉列表-->
        <fieldset>
        <legend>可选信息</legend>
        <p>
            <select name="prov">
                <option value="北京">北京</option>
                <option value="tj">天津</option>
                <!--value中的值是传给服务器的,可以不和后面的值一样-->
                <option value="成都" selected>成都</option>

            </select>

        </p>
        <!--文本区-->
        <p>
            <textarea rows="5" cols="30" name="intro"></textarea>
        </p>
        <!--文件选择器-->
        <p>
            <input type="file" name="file">
        </p>
        </fieldset>
        <p>
            <input type="submit" value="立即注册">
            <!--提交-->
            <input type="reset" value="重新填写">
            <!--重置-->
        </p>

    </form>

    <!--前三个是页面链接-->
    <a href="http://www.baidu.com">百度一下</a><!--超链接标签,在当前窗口打开-->
    <a href="http://www.baidu.com" target="_blank">百度两下</a><!--在新窗口打开-->
    <a href="index.html">我的首页</a><!--打开自己网站-->
    <a href="#top">回顶部</a> <!--回到锚点位置, 锚链接-->
    <!--功能链接,链接到qq,或发邮件-->
    <a href="mailto:qustwxz@163.com">联系站长</a><!--不好用是因为没有邮件客户端-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin= 

{{544619417}}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3153717369:52 " alt="点击这里给我发消息" title="点击这里给我发消息"/></a>


</body>
</html>
<!--<br>折行标签, <p>内容</p>段落标签,<ins>加下滑线<sup>上标<sub>下标<del>删除线<strong>加粗<em>斜体 <q>引用-->

table技巧 table>tr*5>td*2>{项目$}可生成5行2列的表格

常用图片格式选择

  • svg矢量图 无损
  • gif 动图
  • png 少色彩
  • jpg 多色彩的图
2011-12-05 19:55:14 iteye_2245 阅读数 46

HTML 5 <article> 标签

 

---------------定义独立的内容。

可能的article实例

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论
2012-04-04 14:16:20 iteye_2245 阅读数 11

HTML 5 <video>标签

 

   ------- 定义视频,比如电影片段或其他视频流。

 

 

<video src=""></video>

 

 

属性

 

  • autoplay    ------autoplay    视频就绪后就播放
  • controls     ------controls     显示控件,如播放按钮
  • height       ------ pixels         播放器的高度
  • loop          -------loop           播放完成后再次开始播放
  • preload     -------prelpad      视频在页面加载时进行加载,并预备播放,如果使用autoplay则忽略该属性
  • src            -------url               视频的URL
  • width        ------ pixels         播放器的宽度

 

 

2012-02-17 13:28:20 iteye_2245 阅读数 23

HTML 5 <footer> 标签

 

    -----------定义section或document的页脚。

 

    在典型情况下,该元素会包含作者的姓名、文档的创作日期以及联系信息。

 

 

<footer>The................</footer>
 

 

 

HTML5标签

阅读数 46

<form>和</form>标签组成了一个Web表单,支持多种属性。method='...'该属性只接受两个属性值:‘post'或者'get'。如果选择'post',所有表单数据都将会无声无息地发送到Web服务器;如果选择'get',数据被添加在符号"?"之后并追加在一个HTML请求上,符号“?”之后的文本串被称为查询字符串。这会导致URL看起来很凌乱,但...

博文 来自: zang141588761

HTML5标签

阅读数 86

HTML5的新增主体元素:标签是导航标签无任何语义,只用作格式化网页的某部分。标签代表了文档、页面或者是应用程序中可以独立完整可以被外部引用的内容。带有语义的DIV,按照主题分组的内容区域,通常会带有标题。标签主要是侧边栏即与主要内容不相关的内容。可用来标识网页建立的时间。

博文 来自: qq_16186869

html5的标签

阅读数 57

HTML5&lt;input&gt;标签&lt;input&gt;标签规定了用户可以在其中输入数据的输入字段。&lt;input&gt;元素在&lt;form&gt;元素中使用,用来声明允许用户输入数据的input控件。输入字段可通过多种方式改变,取决于type属性。HTML5&lt;img&gt;标签&lt;img&gt;标签定义HTML页面中的...

博文 来自: ziyuxuan90

html5标签

阅读数 207

1、video>标签定义视频,比如电影片段或其他视频流。属性属性值描述autoplayautoplay如果出现该属性,则视频在就绪后马上播放。controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。heightpixels设置视频播放器的高度。looploop

博文 来自: zhangjinlei00

html5标签

阅读数 475

可以进行省略的标签1、不允许写结束符的标签:area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr2、可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th3、可以完全省略的标签:htm

博文 来自: tuku0801
没有更多推荐了,返回首页