9.8 冯娜

学习日志

一、页面增强元素

1、meter:用于表示一个已知最大值和已知最小值;具有如下属性:

(1)form:表单

(2)value:元素的当前值

(3)min/max:元素的最小最大值

(4)low/high:元素指定范围的最小最大值

(5)optimum:元素的最优值

(6)progress:表示一个进度条,其中:max表示指定任务总工作量,value表示指定已完成的任务。

二、多媒体元素

1、audio:定义声音;其中src表示音频的路径,controls设置是否使用播放控制。

2、video:定义视频;其中src表示视频的路径,controls设置是否使用播放控制。

三、HTML5保留的通用属性

1、id;style;class;dir(ltr、rtl);title;lang;accesskey(指定激活元素的快捷键);tableindex(用于控制窗口、获取焦点的顺序Tab键)

2、contenteditable属性和designMode属性

contenteditable属性:规定元素内容是否可编辑,若属性设置为true,则可直接编辑,修改后内容会直接显示在该页面上,但是一旦刷新页面,页面会重新加载,修改的内容会丢失。

designMode属性:若designMode属性为on,该页面上所有支持contenteditable属性的元素都变成可编辑状态;designMode属性的默认值是off。

3、hidden:属性值为true时显示;属性值为false时隐藏。

​ target :属性规定在何处打开页面上的所有链接。

1599530365702

案例:

<head>
    <meta charset="utf-8">
    <title>hidden属性</title>
</head>
<body>
    <button id="button" onclick="
    var target=document.getElementById('target');
    target.hidden=!target.hidden;
    var button=document.getElementById('button');
    if(target.hidden){
        button.innerHTML='显示'
    }else{
        button.innerHTML='隐藏'
    }"> 显示
    </button>
    <div id= "target">轻轻的我走了,正如我轻轻的来</div>
</body>

4、spellcheck属性:对等元素添加了spellcheck属性。若spellcheck="true",浏览器将对用户输入的文本内容执行输入检查;若检查不通过,则浏览器会对拼错的单词进行提示。

案例:

<head>
    <meta charset="utf-8">
    <title>spellcheck属性</title>
</head>
<body>
    <textarea rows="5" cols="50"spellcheck="true">

    </textarea>
</body>

1599532596715

四、HTML5表单相关元素和属性

1、表单元素:form

其属性有如下:

(1) action:用于指定单击表单内的"确定"按钮时,该表单被提交到的地址。一定要有。

(2) method:用于指定提交表单发送哪种类型的请求,其属性值有get、post。

(3) enctype:用于指定表单内容编码使用的字符集。

(4) name:用于指定表单的唯一名称,通常与id属性值相同。

(5) target:用于指定使用哪种方式打开目标URL,使用方法与元素的target一致。

2、表单控件:input

功能最丰富、种类最多。

其属性有如下:

(1) type:text();password();hidden();radio();

​ checkbox();file();image();submit();reset();button()

(2) checked:设置单选框、复选框。

(3) disabled:设置首次加载禁用该元素。

(4) maxlength:设置文本框的内容不允许用户直接修改。

(5) size:设置该元素的高度。

(6) src:设置图像域所显示的图像的URL。

3、表单控件 label

主要用于单击

(1)使用

(2)将说明和表单控件一起放入

4、表单控件 select、option、optgroup

(1)select:用于创建下拉菜单或列表框,但必须配合option、optgroup元素使用。属性有如下:size;multiple.

(2)option:代表一个下拉单选项或者列表项。属性有如下:

​ label.

(3)optgroup:表示一个列表项组。属性有如下:option.

5、表单控件 button

​ 用于定义一个按钮。

属性有如下:button、reset、submit

6、表单控件 textarea

​ 它生成多行文本。

属性有如下:cols(宽度,必须设置);

rows(高度,必须设置);

readonly(指定该文本域只读,属性值只能是readonly)。

7、input元素新增功能类型

(1)color类型

(2)time类型

(3)datetime类型和datetime-local类型

(4)date类型

(5)month类型

(6)week类型

(7)email类型

(8)number类型

(9)range类型

(10)search类型

(11)tel类型

(12)url类型

8、HTML5新增的表单控件

(1)output:用于计算或用户操作的结果,可以更加明显的显示出其他表单控件的值。

9、HTML5表单控件新增的属性

(1)form属性:用于表明该表单控制所属的表单,该属性的值是其所属表单的id。

(2)formaction属性:将内容提交到不同的action即可。

(3)formmethod属性:可以实现不同的submit类型按钮用不同的method提交。该属性的值只能是get或post。

(4)formenctype属性:可以实现不同的submit类型按钮用不同的enctype提交。

(5)formtarget属性:可以实现不同的submit类型按钮用不同的target提交。

(6)placeholder属性:主要作用在文本框,作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在 文本框中,但在用户输入内容后消失,有些浏览器则是获取焦点后该提示便消失。

(7)autocomplete属性:表单的快速输入,自动补全。

(8)autofocus属性:表单控件自动获得焦点。

(9)list属性:指定一个可用的选项列表。

(10)pattern属性:用于验证表单输入的内容。其属性值为正则表达式。

(11)novalidate属性:当提交表单时不对其进行验证。

(12)required属性:规定必须在提交之前填入字段。

(13)textarea新增maxlength属性和wrap属性:

​ maxlength属性:用于规定文本区域的最大字符数。

​ wrap属性:默认值为soft,textarea中的文本不换行,若为hard,提交的文本会包含换行符。

五、CSS3新增选择器

1、兄弟选择器:

元素1~元素2{property:value1;property:value2;property:value3;….}

案例:

<head>
    <meta charset="utf-8">
    <title>兄弟选择器</title>
    <style type="text/css">
        h2~p{
            color: red;
        }
    </style>
</head>
<body>
    <h1>一级标题</h1>
    <p>这里不会变色</p>
    <h2>二级标题</h2>
    <p>这里会变色</p>
    <h3>三级标题</h3>
    <p>这里也会变色</p>
    <div >
        <p>这里在div内部,与h2元素不是同一个父元素,不会变色</p>
    </div>

</body>

2、新增的属性选择器

(1)E(attribute=value):选取带有以指定值开头的属性值的元 素。

(2)E(attribute$=value):选取属性值以指定值结尾的元素。

(3)E(attribute*=value):选取属性值中包含指定值的元素,位 置不同,也不限制整个单词。

案例:

<head>
    <meta charset="utf-8">
    <title>新增的属性选择器</title>
    <style type="text/css">
        td[lang]{
            color: #FF0000;
        }
        td[title="a"]{
            color: #FF0000;
        }
        td[title~="c"]{
            color: #FF0000;
        }
        td[title|="h"]{
            color: #FF0000;
        }
        td[title ^="|"]{
            color: #FF0000;
        }
        td[title$="o"]{
            color: #FF0000;
        }
        td[title*="x"]{
            color: #FF0000;
        }
    </style>
</head>
<body>
    <big><b>有lang属性的td元素会被选择</b></big>
    <table border="1" cellspacing="" cellpadding="">
        <tr>
            <td>th[lang]</td>
            <td>无属性</td>
            <td lang="">lang=""</td>
            <td lang="en">lang="en"</td>
            <td lang="cn">lang="cn"</td>
        </tr>
    </table>
    <big><b>title属性值为a的td元素会被选择</b></big>
    <table border="1" cellspacing="" cellpadding="">
        <tr>
            <td>[title="a"]</td>
            <td>无属性</td>
            <td title="a">title="a"</td>
            <td title="a b">title="a b"</td>
            <td title="ab">title="ab"</td>
            <td title="ba">title="ba"</td>
        </tr>
    </table>
    <big><b>title属性值“包含c,且c前后只能有空格”的td元素会被选择</b></big>
    <table border="1" cellspacing="" cellpadding="">
        <tr>
            <td>[title~="c"]</td>
            <td>无属性</td>
            <td title="c">title="c"</td>
            <td title="c d">title="c d"</td>
            <td title="c-d">title="c-d"</td>
            <td title="cd">title="cd"</td>
            <td title="d c">title="d c"</td>
            <td title="dc">title="dc"</td>
        </tr>
    </table>
    <big><b>title属性值“h开头,且h只能为独立单词,后面可跟连字符”的td元素会被选择</b></big>
    <table border="1" cellspacing="" cellpadding="">
        <tr>
            <td>[title|="h"]</td>
            <td>无属性</td>
            <td title="h">title="h"</td>
            <td title="h i">title="h i"</td>
            <td title="h-i">title="h-i"</td>
            <td title="hi">title="hi"</td>
            <td title="i h">title="i h"</td>
            <td title="ih">title="ih"</td>
        </tr>
    </table>
    <big><b>title属性值“|开头”的td元素会被选择</b></big>
    <table border="1" cellspacing="" cellpadding="">
        <tr>
            <td>[title^="|"]</td>
            <td>无属性</td>
            <td title="|">title="|"</td>
            <td title="| m">title="| m"</td>
            <td title="|-m">title="|-m"</td>
            <td title="|m">title="|m"</td>
            <td title="m|">title="m|"</td>
            <td title="m|n">title="m|n"</td>
        </tr>
    </table>
    <big><b>title属性值“o结尾”的td元素会被选择</b></big>
    <table border="1" cellspacing="" cellpadding="">
        <tr>
            <td>[title$="o"]</td>
            <td>无属性</td>
            <td title="o">title="o"</td>
            <td title="o p">title="o p"</td>
            <td title="o-p">title="o-p"</td>
            <td title="op">title="op"</td>
            <td title="p o">title="p o"</td>
            <td title="p-o">title="p-o"</td>
            <td title="po">title="po"</td>
        </tr>
    </table>
    <big><b>title属性值“包含x”的td元素会被选择</b></big>
    <table border="1" cellspacing="" cellpadding="">
        <tr>
            <td>[title*="x"]</td>
            <td>无属性</td>
            <td title="x">title="x"</td>
            <td title="y">title="y"</td>
            <td title="xy">title="xy"</td>
            <td title="x-y">title="x-y"</td>
            <td title="yx">title="yx"</td>
            <td title="y x">title="y x"</td>
            <td title="y-x">title="y-x"</td>
            <td title="yx">title="yx"</td>
        </tr>
    </table>
</body>

3、新增的伪类选择器

1599559144721

4、新增的伪元素选择器

1599562856595

案例:

<head>
    <meta charset="utf-8">
    <title>新增的伪元素选择器</title>
    <style type="text/css">
        :enabled{
            font-family: "隶书";
        }
        :disabled{
            font-family: "楷体";
        }
        :checked{
            outline: aqua dashed 3px;
        }
        p:not(.black){
            color: blue;
        }
        :target{
            border: 3px red dashed;
        }
        ::selection{
            color: red;
        }
    </style>
</head>
<body>
    <p><a href="#content1">跳转至内容1</a></p>
    <p><a href="#content2">跳转至内容2</a></p>
    <h1 id="content1">内容1</h1>
    <input type="button" name="" id="" value="可用标准按钮" />
    <input type="button" name="" id="" value="不可用标准按钮" disabled="disabled"/><br>
    <input type="checkbox" name="" id="" value="" />
    <input type="checkbox" name="" id="" value="" />
    <h1 id="content2">内容2</h1>
    <p class="black">用一句话概括一下您有什么特长</p>
    <p>用一句话概括一下您有什么特长</p>
    <p>用一句话概括一下您有什么特长</p>
    <p class="black">用一句话概括一下您有什么特长</p>
</body>

六、CSS3新增属性

(一)新增背景属性

1、background-clip

(1)background-clip:设置背景覆盖范围

​ 属性值:border-box(背景显示区域到边框)

​ padding-box(背景显示区域到内边距框)

​ centent-box(背景显示区域到内容框)

(2)background-origin:设置背景覆盖的起点

​ 属性值:border-box/padding-box/centent-box

(3)background-size:设置背景的大小

​ 属性值:cover/contain/百分比

2、background-origin(浏览器专属属性)

(1)-ms-:IE

(2)-moz-:Firefox

(3)-o-:Opera

(4)-webkit-:Chrome

3、background-size(设置背景的大小)

(1) border-box:背景起点在边框的左上角。

(2)padding-box:背景起点在内边距框的左上角,默认值。

(3)content-box:背景起点在内容框的左上角。7

评论

this is is footer