9.8 冯娜

前端工程师 1K+ 4年前 0 学员日志

学习日志

一、页面增强元素

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 ：属性规定在何处打开页面上的所有链接。

案例：

<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>

四、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）使用元素的for属性，指定为关联表单控件的id即可。

（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、新增的伪类选择器

4、新增的伪元素选择器

案例：

<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

9.8 冯娜

一、页面增强元素

二、多媒体元素

三、HTML5保留的通用属性

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

五、CSS3新增选择器

六、CSS3新增属性

热门资源

评论

取消回复

一、页面增强元素

二、多媒体元素

三、HTML5保留的通用属性

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

五、CSS3新增选择器

六、CSS3新增属性

热门资源

相关推荐

评论

取消回复