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 ：属性规定在何处打开页面上的所有链接。
案例：
<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属性：对、
案例：
<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）使用
（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
近期评论