HTML5基础随手记

最新推荐文章于 2022-11-04 19:35:11 发布

晨丶曦

最新推荐文章于 2022-11-04 19:35:11 发布

阅读量417

点赞数

分类专栏： HTML5 文章标签： html5 浏览器标签控件法律

本文链接：https://blog.csdn.net/sheng6110/article/details/51095916

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.标签部分

<header>一般用在页面顶部</header>

<footer>一般用在页面底部，法律条文</footer>

<mark>黄底高亮标签</mark>

<small>用来定义小字，通常用在页面底部的版权信息</small>

★★label标签★★
当用户选择该标签时，浏览器会自动将焦点转到和标签相关（ID相同）的表单控件上

<from>
<lable for="male">male</lable>
<input type="radio" name="sex" id="male" />
</from>

★★radio★★
1、html代码片段：

<form action="" method="get">
您最喜欢水果？<br /><br />
<label><input name="Fruit" type="radio" value="" />苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>
</form>

2.举例代码片段二(默认选中设置举例):

<input type="radio" name="identity" value="学生" checked="checked" />学生
<input type="radio" name="identity" value="教师" />教师
<input type="radio" name="identity" value="管理员" />管理员

代码中的checked=”checked” 表示默认选中项设置

3.代码举例三(js操作radio):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script>
<!--
    //选中2返回的也是1，找到第一个ID为该值的DOM，弹出 1
    function getVById(){alert(document.getElementById('test11').value);}
    function getVByName(){
        var tt = document.getElementsByName('test11');
        for (var iIndex = 0; iIndex < tt.length ; iIndex++ )
        {
            if(tt[iIndex].checked)
            {
                alert(tt[iIndex].value);
                break;
            }
        }
    };
-->
</script>
<title>http://blog.csdn.net/sheng6110</title>
</head>
<body>
    <input type="radio" id="test11" name="test11" value="1" />测试1
    <input type="radio" id="test11" name="test11" value="2" />测试2
    <input type="button" value="BTN_ByID" onclick="getVById()" />
    <input type="button" value="BTN_ByName" onclick="getVByName()" />
</body>
<html>

这个方法可以测试你选中的是那个radio

★★input里面的常用属性★★

<input type="text" placeholder="请输入用户名" required="required" autofocus="autofocus"/>

placeholder: 占位符。（提前设置的提示信息，用户开始输入时消失）
required: 必要属性。（指定某一输入是否必须，如果空白的话表单不允许提交）
autofocus： 自动聚焦（默认从当前位置开始输入）

★★audio音频★★

<audio autoplay="autoplay" controls="controls">
您的浏览器不支持 audio 标签。
<source src="file.ogg" />   ogg支持火狐内核
<source src="file.mp3" />   mp3支持谷歌内核
注：ie都不支持。opera 10以下版本只支持.wav格式
</audio>

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

autoplay=”autoplay” 音频在就绪后马上播放。
controls=”controls” 向用户显示控件，比如播放按钮
loop=”loop” 每当音频结束时重新开始播放。
muted=”muted” 规定视频播出应该被静音
preload=”preload” 音频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src=”file.xxx” 要播放的音频的 URL。

★★video视频★★

<video controls="controls" preload="preload">
您的浏览器不支持 video标签。
<source src="file.ogv" type="video/ogg"  codecs="vorbis,theora"/>   为火狐配置
<source src="file.mp4" type="video/mp4" />   mp4支持谷歌内核
</audio>