HTML(增加)--day04

最新推荐文章于 2024-07-12 20:49:16 发布

.桃子摇摇冰

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量332

点赞数 5

分类专栏： html 基本标签文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_48675760/article/details/125768342

版权

基本标签同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

一、表单进阶(标签)

（1）单选框

使用<input type="radio" >

注意：因为只选择一个，所以所有的input要在一个组中

点击文字即选中：<label for=""></label>

注意：for后面时id

 <div><input type="radio" name="bbb" id="woman">

        <label for="woman">女</label>
 </div>

（2）复选框（多选功能）

使用<input type="checkbox" >

注意：将一个选项组，放到同一个组中。

<div>你的兴趣爱好时什么</div>
        <div>
            <input type="checkbox" name="ccc">唱歌
            <input type="checkbox" name="ccc">写作
            <input type="checkbox" name="ccc">跳舞
        </div>

（3）上传文件和隐藏字段

上传文件： <input type="file" name="" id="">

图片按钮-代替提交按钮(input type="submit")：<input type="image" src="3.png">

禁用disabled，只读readonly：

（4）下拉菜单

    <div>
        <div>你的收货地址</div>
        <!-- select 支持的属性
            1.size 控制显示几个
            2.multiple 可以选择多个
        -->
        <!-- option 支持的属性 
            1.value 提供给后端需要用的value值
            2.select 默认选中
        -->
        <select size="1">
            <option value="ln">辽宁</option>
            <option value="sd">山东</option>
            <option value="sx">陕西</option>
            <option value="hn" selected>河南</option>
        </select>
    </div>

（5）文本域

多行文本输入框-文本域： <textarea name="" id="" cols="30" rows="10"></textarea>

（6）字段集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        fieldset{
            border:1px solid blue;
        }
        legend{
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <h1>表单进阶-字段集</h1>

    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="aa" id="">男
        <br>
        <input type="radio" name="aa" id="">女
    </fieldset>
</body>
</html>

二、H5基础与语法

新增加的东西：

        语义化标签

        增强型表单

        canvas svg

        音频视频

        本地存储和离线存储

（一）HTML5发展史

HTML5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。

HTML5的第一份正式草案已于2008年1月22日公布。HTMLS仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。

2012年12月17日，万维网联盟(WB3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTMLS是开放的Web网络平台的奠基石。”

2013年5月6日，HTM 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的AP)、Canwas等，同时HTML5的图像ing标签及svg也进行了改进，性能得到进一步提升。

（二）HTML5的浏览器兼容

支持Html5的浏览器包括Firefox (火狐浏览器)，IE9及其更高版本，Chrome(谷歌，Safari，Opera等;国内的遨游浏览器(Maxthon)，以及基于E或Chromium (Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力.
常用的五大浏览器有:IE,chrome,firefox,safari,opera

（三）HTML5 语法

内容类型（ContentType）

HTML5的文件扩展符与内容类型保持不变，任然为“.html”或“.htm”。

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset="UTF-8"

可忽略标记的元素

不允许写结束标记的元素：br col hr img input link meta

可以省略结束标记的元素：li dt dd p option colgroup thead tbody tfoot tr td th

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

省略引号

属性值可以使用双引号，也可以使用单引号。

（四）HTML5新增语义化标签

section元素表示页面中的一个内容区块
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息

header元素表示页面中一个内容区块或整个页面的标题

footer元素表示页面中一个内容区块或整个页面的脚注

nav元素表示页面中导航链接部分
figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

main元素表示页面中的主要的内容(ie不兼容)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        header,footer{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: orange;
        }
        section{
            height: calc(100% - 100px);
        }
        nav,aside{
            width: 100px;
            height: 100%;
            background:#ccc;
            float:left;
        }
        main{
            float:left;
            width:calc(100% - 200px);
            height: 100%;
            background:white;
        }
        aside{
            color:white;
        }
        main .article1{
            height: 60%;
        }
        main .article2{
            height: 40%;
        }
    </style>
</head>
<body>
    <header>header</header>
    <section>
    <nav>
        <figure>nav</figure>
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ul>
    </nav>
    <main>
        <article class="article1">
            <header>article-header</header>
            <p>
            Lorem ipsum dolor sit amet consectetur adip
            isicing elit. Ratione harum, dolores archit
            ecto commodi natus aliquam ullam totam repr
            ehenderit repellendus? Adipisci pariatur id
            itaque eos, cupiditate eveniet. Quae quaera
            t ad ab?
            </p>
            <footer>article-footer</footer>
        </article>
        <article class="article2">
            <header>article-header</header>
            <p>
                Lorem ipsum dolor sit amet consectetur adip
            isicing elit. Ratione harum, dolores archit
            ecto commodi natus aliquam ullam totam repr
            ehenderit repellendus? Adipisci pariatur id
            itaque eos, cupiditate eveniet. Quae quaera
            t ad ab?
            </p>
            <footer>article-footer</footer>
        </article>
    </main>
    <aside>
        <figure>aside</figure>
        <p>
            Lorem ipsum dolor sit amet consectetur adip
            isicing elit. Ratione harum, dolores archit
            ecto commodi natus aliquam ullam totam repr
            ehenderit repellendus? Adipisci pariatur id
            itaque eos, cupiditate eveniet. Quae quaera
            t ad ab?
        </p>
    </aside>
    </section>
    <footer>footer</footer>
</body>
</html>

（五）音频视频标签

video元素定义视频
cvideo src="movie.ogg" controls="controls">Video元素</video>
audio元素定义音频
<audio src="someaduio.wav" >Audio元素</audlio>

controls属性:如果出现该属性，则向用户显示控件,比如摄放按钮。

autoplay属性:如果出现阂属性。则视频在就辖后马上描放。
loop属性:重复振放属性,
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像,直到用户点击拒放按钮。

（六）增强表单

（1）

Type="color"	生成一个颜色选择的表单
Type="tel"	唤起拨号盘表单
Type="search"	产生一个搜索意义的表单
Type="range"	产生一个滑动条表单
Type="number"	产生一个数值表单
Type="email"	限制用户必须输入email类型
Type="url"	限制用户必须输入url类型
Type="date"	限制用户必须输入日期
Type="month"	限制用户必须输入月类型
Type="week"	限制用户必须输入周类型
Type="time"	限制用户必须输入时间类型
Type="datetime-local"	选取本地时间

注意：每一个都要加上name值（反馈给后端）

    <form action="">
        <div>
            颜色选择
            <input type="color" name="color" id="">
        </div>

        <div>
            邮箱输入
            <input type="email" name="myemail">
        </div>
        <div>
            url地址：(必须是完整地址)
            <input type="url">
        </div>
        <div>
            电话号码：（手机端使用）
            <input type="tel">
        </div>
        <div>
            滑块效果：
            <input type="range" name="range" 
            min="100" max="200" value="100" step="10">
            <!-- step步长功能 -->
        </div>
        <div>
            数字类型：
            可以设置最大最小值
            <input type="number" min="10" max="20" 
            value="4" step="2" name="age">
        </div>
        <div>
            搜索：
            <input type="search">
        </div>
        <div>
            日期选择框：
            <input type="date">
            月份选择
            <input type="month" name="" id="">
            周数选择
            <input type="week">
            本地时间
            <input type="datetime-local">
        </div>
        <input type="submit">
    </form>

（2）选项列表（实现输入一个字下面有关键字词条）

注意：需要设置id值和input关联，提前设置value值（后端反馈）

<body>
    <input type="text" list="mylist">

    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手坏"></option>
        <option value="手镯"></option>
    </datalist>
</body>

（七）表单属性

autofocus属性:
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
required属性:
验证输入不能为空
Multiple:
可以输入一个或多个值，每个值之间用逗号分开例:

还可以应用于file
pattern：
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例:<input pattern =“[0-9][A-Z]{3}”title="输入内容:一个数与三个大写字母" placeholder=‘输入内容:一个数与三个大写字母’>

<body>
    <form action="">
        <!-- 
            autofocus 获取焦点
            required 必填项，不能为空
            multiple 支持多个地址，由逗号隔开
            pattern 正则表达式
        -->
        <div>
            用户名：<input type="text" autofocus required pattern ="[0-9][A-Z]{3}">
        </div>
        <div>
            邮箱：<input type="email" name="email" required multiple>
        </div>
        <input type="submit">
    </form>
</body>