• 读《HTML5与CSS3权威指南(上册)》笔记


    第二章

      1.内容类型:“text/html”。DOCTYPE声明:<!DOCTYPE html>。指定字符编码:<meta charset="utf-8">

      2.不允许写结束标记的元素有:area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr

       可以省略结束标记的元素有:li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,body,tfoot,tr,td,th

         可以省略全部标记的元素有:html,head,body,colgroup,tbody

      3.具有boolean值得属性,当只写属性而不指定属性值时,表示属性值为true;如果要想将属性值设为false,可以不使用该属性。另外,要想将属性值设为true时,也可以将属性名设定为属性值,或将空字符串设定为属性值。

        <!-- 只写属性不写属性值代表属性为true -->
        <input type="checkbox" checked>
        <!-- 不写属性代表属性为false -->
        <input type="checkbox">
        <!-- 属性值=属性名,代表属性为true -->
        <input type="checkbox" check="checked">
        <!-- 属性值=空字符串,代表属性为true -->
        <input type="checkbox" check="">

      4.HTML5中,指定属性值时,可以省略引号。

      5.新增元素:<section>...</section>  <article>...</article>  <aside>...</aside>  <header>...</header>  <hgroup>...</hgroup>  

    <footer>...</footer>  <nav>...</nav>  <figure>...</figure>

        <video src="movie.ogg" controls="controls">video元素定义视频</video>
        <audio src="some.wav">audio元素定义音频</audio>
        <!-- embed元素用来插入各种多媒体,格式可以是Midi,Wav,AIFF,AU,MP3等 -->
        <embed src="horse.wav">
        <mark>高亮显示文字</mark>
        <progress>表示运行中的进程</progress>
        <meter>表度量</meter>
        <time>表示时间</time>
        <ruby>ruby注释</ruby>
        <wbr>软换行,浏览器窗口宽度不够时,主动换行
        <canvas id="maCanvas" width="200" height="200">表示图形</canvas>
        <command onclick=cut() label="cut">表示命令按钮</command>
        <details>表示详细信息</details>
        <datalist>表示可选数据列表,与input配合使用,可以制作出输入值的下拉列表</datalist>
        <datagrid>表示可选数据列表,以树形列表的形式来显示</datagrid>
        <keygen>表示生成密钥
        <output>表示不同类型的输出</output>
        <source>定义媒介资源
        <menu>表示菜单列表</menu>

      6.新增input类型:email,url,number,range,Date Pickers

      7.新增全局属性:contentEditable属性,designMode属性,hidden属性,spellcheck属性,tabindex属性。

    第三章

      1.putdate属性:是一个可选的,boolean值的属性,它可以用到article元素中的time元素上,意思是time元素代表了文章或整个网页的发布时间。

    第四章

      1.新增属性:表单内元素的form属性;表单元素的formaction属性;表单内元素的formmethod属性;表单内元素的formenctype属性;表单内元素的formtarget属性;表单内元素的autofocu属性;表单内元素的required属性;表单内元素的labels属性;标签的control属性;文本框的placeholder属性;文本框的list属性;文本框的autocomplete属性;文本框的SelectionDirection属性;复选框的indeterminate属性;image提交按钮的height属性与width属性;textarea元素的maxlength属性与wrap属性。

        <!-- 表单内元素的form属性; -->
        <form id="testform">
            <input type="text">
        </form>
        <textarea form="testform"></textarea>
    <hr>
        <!-- 表单元素的formaction属性; -->
        <form id="testform" action="serve.jsp">
            <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
            <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
            <input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到s3
        </form>
    <hr>
        <!-- 表单内元素的formmethod属性;指定不同的提交方法-->
        <form id="testform" action="serve.jsp">
            姓名:<input type="text" name="name"/><br/>
            <input type="submit" value="post方式提交" formmethod="post">
            <input type="submit" value="get方式提交" formmethod="get">
        </form>
    <hr>
        <!-- 表单内元素的formenctype属性;指定在表单发送到服务器之前应该如何对表单内的数据进行编码 -->
        <form action="serve.jsp" method="post">
            <input type="text" name="name" value="test"/><br/>
            文件:<input type="file" name="files">
            <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data">
            <input type="submit" value="提交">
        </form>    
    <hr>
        <!-- 表单内元素的formtarget属性;指定在何处打开表单提交后所需要加载的页面 -->
        <form id="testform" action="serve.jsp">
            <input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到s1
            <input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到s1
        </form>
    <hr>
        <!-- 表单内元素的autofocus属性;自动获得光标焦点 -->
        <input type="text" autofocus>
    <hr>
        <!-- 表单内元素的required属性;验证提交内容是否为空 -->
    <hr>
        <!-- 表单内元素的labels属性; -->
    <hr>
        <!-- 标签的control属性; -->
    <hr>
        <!-- 文本框的placeholder属性; -->
        <input type="text" placeholder="input me">
    <hr>
        <!-- 文本框的list属性; -->
        text:<input type="text" name="greeting" list="greetings">
        <datalist id="greetings" style="display:none;">
            <option value="good morning">good morning</option>
            <option value="hello">hello</option>
            <option value="good afternoon">good afternoon</option>
        </datalist>
    <hr>
        <!-- 文本框的autocomplete属性; -->
        <input type="text" name="greeting" autocomplete="on" list="greetings">
    <hr>
        <!-- 文本框的pattern属性 -->
        <form>
            请输入指定格式的内容:<input pattern="[0-9][a-z]{3}">
            <input type="submit">
        </form>
    <hr>
        <!-- 文本框的SelectionDirection属性; -->
        <form>
            <input type="test" name="text">
            <input type="button" value="点击我" onclick="AlertSelectionDirection()"> 
        </form>
        <script type="text/javascript">
        function AlertSelectionDirection(){
            var controls=document.form[0]['text'];
            var Directon=control.selectionDirection;
            alert(Direction);
        }
        </script>
    <hr>
        <!-- 复选框的indeterminate属性; -->
    <hr>
        <!-- image提交按钮的height属性与width属性; -->
        <form action="test.aspx" method="post">
            姓名:<input type="text" name="name">
            <input type="img" src="edit.gif" alt="编辑"width=23 height=23/>
        </form>
    <hr>
        <!-- textarea元素的maxlength属性与wrap属性。 -->
        <form action="test.php"method="post">
            <textarea name="name" maxlength=100 row=5 wrap="hard" cols=5></textarea>
            <input type="submit" value="提交">
        </form>
  • 相关阅读:
    Mysql存储类型选择
    Mysql的MVCC
    SQL标准中的四种隔离级别
    web权限管理总结
    关于oauth2中为什么不直接返回token而是传授权码code
    课程作业——爬取校园新闻首页的新闻的详情,使用正则表达式,函数抽离
    网络爬虫基础练习
    Python中文词频统计
    关于Maven的配置与学习
    课程作业——综合练习:英文词频统计
  • 原文地址:https://www.cnblogs.com/fashion1993/p/3980701.html
Copyright © 2020-2023  润新知