分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

HTML5

HTML5   发布时间：2022-04-25  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

HTML5的DTD声明

在编写HTML文档时，要求指定文档类型，以确保浏览器能再HTML5的标准模式下进行渲染，在THML5中刻意不使用版本声明，一份文档会适用于所有版本的HTML，非常简便，HTML5的DTD声明方法如下：

<!DOCTYPE html>

而HTML4及以前的版本的DTD声明是这样<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">声明的

HTML5不区分关键字的大小写，引号也不区分是单引号，还是双引号。（这和HTML4都是一样的）

HTML5设置页面字符编码

在HTML5中可以使用对<Meta>元素直接追加charset属性的方式来指定字符编码，如下所示：

<!--从html5开始，对于文件的字符编码推荐使用utf-8-->
<Meta charset="utf-8" />

而HTML4及之前的版本是<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 这样写的。


HTML5可以省略标记的元素

HTML5做到了与之前版本的兼容。

HTML5


以后HTML5文档都可以省略<html><head><body><colgroup><tbody>标签了。


具有Boolean值的属性

在html中有些元素的属性，只写属性名称而不指定属性值时，表示属性值为true，如果该属性值为false，则不使用该属性即可。
例如<input>标签的disabled和readonly属性就是布尔值的属性 
<!--以下4个input标签的 disabled属性表示的意思都是一样，即禁用input标签-->
<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="true" />
<input type="text" disabled="disabled" />

引号的使用
在HTML5中属性的值可以用单引号，或者双引号括起来，但是HTML还做了一些改进，就是当属性值不包括空字符串，"<",">","=",单引号，双引号等字符的时候，属性两边的引号是可以省略的。 
<!--因为button没有包含大于号，小于号，等号，单引号，双引号等字符，所以button两边的引号可以省略-->
<input type=button value="按钮">

HTML新增加的语义标签

HTML5新增加了一些新的元素和属性，反映典型的现代网站用法

其中有些技术上类似<div>和<span>标签，但是有一定含义，例如<nav>(网站导航块) 和在<footer>，这种语义标签将有利于搜索引擎的索引整理，小屏幕装置和视障人士使用。
也提供了新的功能标签，如媒体播放器<audio>和<video>标签

还有一些过时的html4标签将取消，如<font><center>  因为它们已经完全被css取代了。

曾经，网页编写会频繁使用<table>这种没有任何语义的布局，不过最终还是慢慢接受了相对更语义化的<div>布局来替代，并且开始调用外部样式表来操作<div>
但是不幸的是，代码中大量使用<div>标签又太单一了，而且复杂的网页设计需要大量不同的标签结构代码，我们把它叫做"<div>-soup" 综合征

现在，HTML和CSS3正跃跃欲试的等待大家，新增了和布局相关的多种语义标签

HTML5

下面我们来看看使用div来布局 和使用HTML新标签来布局的区别

@H_419_120@使用传统div来布局 

（我们想要区分哪个div，要么用id，要么用class，这就导致了太多的id，和class属性）

<!DOCTYPE html>
<html>
<head>
    <Meta name="viewport" content="width=device-width" />
    <title>使用传统的DIV来布局：缺点是页面到处到是Div标签，不直观</title>

    <style type="text/css">
        div#news {width: 660px;margin: 0 auto;}
        div.section { width: 100%;}
        div.article {width: 500px; float: left;}
        div.aside {width: 150px; float: right; }
        div.header {width: 100%; text-align: center;background: #ddd;}
        div.content {width: 100%;}
        div.footer {width: 100%;background: #ddd;
        }
    </style>
</head>
<body>
    <div id="news">
        <div class="section">
            <div class="article"><!--文章-->
                <div class="header"><!--文章头部-->                   
                    <h1>Div布局示范</h1>
                    <p>发表于2016年11月6日</p>
                </div>
                <div class="content"><!--文章内容-->                   
                    <p>文章内容等等</p>
                    <p>文章内容等等</p>
                    <p>文章内容等等</p>
                </div>
                <div class="footer"><!--文章脚部-->                    
                    <p>Tage:HTML,代码演示</p>
                </div>
            </div>

            <div class="aside"> <!--边栏-->             
                <div class="header"><!--边栏头部-->                   
                    <h1>附属信息</h1>
                </div>
                <div class="content"> <!--边栏内容-->                  
                    <p>边栏内容等等</p>
                    <p>边栏内容等等</p>
                    <p>边栏内容等等</p>
                    <p>边栏内容等等</p>
                </div>
                <div class="footer"><!--边栏脚部-->                    
                    <p>Tage:HTML,代码演示</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

HTML5



@H_419_120@用HTML5新增的语义标签来布局

（优点是每个区块区分的非常明显，头是头，躯体是躯体，脚是脚） 
<!DOCTYPE html>
<html>
<head>
    <Meta name="viewport" content="width=device-width" />
    <title>使用HTML5语义便签来布局，简单直观</title>

    <style type="text/css">
        section { width: 660px;margin: 0 auto; }
        article { width: 500px;float: left;}
        header { width: 100%;text-align: center;background-color: #ddd;}
        footer { width: 100%;background: #ddd; }
        aside { width: 150px; float: right; }
    </style>
</head>
<body>
    <section>
        <article><!--文章-->
            <header><!--文章头部-->               
                <h1>Div 布局示范</h1>
                <p>发表于2016年11月6日</p>
            </header>
            <section><!--文章内容-->               
                <p>内容文本等等</p>
                <p>内容文本等等</p>
                <p>内容文本等等</p>
            </section>
            <footer> <!--文章脚部-->              
                <p>Tags:HTML,代码演示</p>
            </footer>
        </article>

        <aside><!--边栏-->
            <header><!--边栏头部-->
                <h1>附属信息</h1>
            </header>
            <section><!--边栏内容-->
                <p>边栏文本等等</p>
                <p>边栏文本等等</p>
                <p>边栏文本等等</p>
                <p>边栏文本等等</p>               
            </section>
            <footer><!--边栏脚部-->
                <p>Tags:HTML,代码演示</p>
            </footer>
        </aside>
    </section>
</body>
</html>

HTML5

HTML5中表单新增属性

HTML5



@H_419_120@传统表单

对于传统的form表单的写法，对于一个input标签，它是属于哪个表单的就必须写在哪个表单里的。缺点：配合表格，配合div去布局的话，有时候标签嵌套可能不太利于我们布局。 
<body>
    <form action="Login.aspx" method="post">
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
</body>

@H_419_120@HTML5 标签新增的form属性

而对于HTML新增的的属性功能则可以将input，或者其他标签与form表单分离开来。即：一个input标签虽然属于某个form表单，但是这个input标签并不需要些在那个form表单中 
<body>
    <!--HTML5标签新增form属性，将标签与form表单关联起来-->
    <form id="Login" action="Login.aspx" method="get"> </form>

    <!--form="Login"表示这个标签属于Id为Login的这个表单-->
    <input type="text" form="Login" name="username" value="Liy" />
    <input type="submit" form="Login" value="提交" />
</body>
当点击“提交”的时候就会将相应的from属性为Login的表单元素提交到Login.aspx中

HTML5


@H_419_120@HTML5 标签新增的formaction属性和formmethod（指定提交到页面和指定提交方式）

<body>
    <!--HTML5标签新增form属性，将标签与form表单关联起来-->
    <form id="Login" method="post"> </form>

    <!--form="Login"表示这个标签属于Id为Login的这个表单-->
    <input type="text" form="Login" name="id" value="12" />
    <input type="text" form="Login" name="username" value="Liy" />

    <!--通过指定formaction属性的值可以将此标签对应的表单提交到指定的页面-->
    <!--通过指定的formmethod属性的值可以指定这个标签属于的表单的提交方式-->
    <input type="submit" form="Login" formaction="Add.aspx" formmethod="post" value="新增" />
    <input type="submit" form="Login" formaction="Delete.aspx" formmethod="get" value="删除" />
    <input type="submit" form="Login" formaction="Edit.aspx"  formmethod="get" value="编辑" />

</body>

HTML5

 

HTML5


HTML5



@H_419_120@HTML5标签新增的autofocus属性（进入页面获取焦点）

<body>
    <form id="form1" action="Add.aspx" method="post"></form>

    <!--autofocus的作用就是当进入这个页面的时候这个标签获取焦点-->
    <input form="form1" type="text" autofocus />
    <input form="form1" type="text" />
</body>

HTML5


@H_419_120@HTML5标签新增的placeholder属性 （提示信息）

<body>
    <input form="form1" type="text" placeholder="我是提示信息" autofocus />
    <input form="form1" type="text" placeholder="用户名" />
</body>

HTML5


@H_419_120@HTML标签新增的list属性（自动感应）

<body>
    <!--list属性需要和datalist标签配合使用，它的作用其实就是自动感应提示-->
    <input type="text" list="city"  />

    <datalist id="city">
        <option>永州</option>
        <option>长沙</option>
        <option>长春</option>
        <option>广州</option>      
    </datalist>
</body>

HTML5

HTML5


HTML5标签的autocomplete属性 
<body>
    <form action="Login.aspx" method="get">
        <!--有时候我们在输入的时候浏览器会记下我们输入的数据，等我们下次输入的时候会自动提示我们过去输入过的值，这样虽然很方便，但是存在安全隐患，所以我们可以通过设置autocomplete属性的值来指定是否关闭自动提示功能-->
        <!--autocomplete="on"的时候表示打开自动提示功能-->
        <!--autocomplete="off"的时候表示关闭自动提示功能-->
        <input type="text" list="city" name="name" autocomplete="on" />
        <input type="submit" value="提交" />
    </form>
</body>

HTML5


HTML5中改良的input元素 

@H_419_120@Tel

tel被设置用来输入电话号码的专用文本框，它没有特殊的校验规则，不强制输入数字，因为许多电话号码通常都带有其它文字，如#，但开发者可用通过pattern属性来指定对于输入的电话号码格式的验证。 
<body>
    <form action="Login.aspx" method="get">
        <!--pattern指定验证规则，title表示在输入错误时候的提示文本-->
        <input type="tel" title="请输入11位数字" pattern="^\d{11}$" />
        <input type="submit" value="提交" />
    </form>
</body>

HTML5

@H_419_120@url

@H_419_120@ 
    <form action="Login.aspx" method="get">
        <!--required表示这个元素是必填的，如果不填则不能提交-->
        <input type="url" required />        
        <input type="submit"  value="提交" />
    </form>
@H_419_120@

HTML5


@H_419_120@Email

@H_419_120@ 
    <form action="Login.aspx" method="get">
        <!--required表示这个元素是必填的，如果不填则不能提交-->
        <input type="email" required />        
        <input type="submit"  value="提交" />
    </form>

HTML5

@H_419_120@年月日和时间


<body>
    <form action="Login.aspx" method="get">
        <!--注意：value值的 日和时间的中间用大写T隔开-->
        年月日时间<input type="datetime-local" name="datetime-local" value="2015-10-13T11:11" />
        年月日<input type="date" name="date"  value="2015-10-13"/>
        年月<input type="month" name="month" value="2015-10" />
        <!--注意：value值的 年和周的中间用大写的W隔开-->
        年周<input type="week" name="week"  value="2015-W18"/>
        时间<input type="time" name="time" value="11:11"/>              
    </form>
</body>

HTML5



@H_419_120@Number数字

    <form action="Login.aspx" method="get">
        <!--min表示输入框中能输入的最小值  max表示能输入的最大值-->
        <input type="number" min="0" max="10" /> 
        
        <input type="submit" value="提交" />                  
    </form>

HTML5

HTML5


<body>
    <form action="Login.aspx" method="get">
        <!--min表示输入框中能输入的最小值  max表示能输入的最大值-->
        <!--step表示输入框中只能输入2的倍数，即只能输入2，4，6，8，10-->
        <input type="number" min="0" max="10" step="2" /> 
        
        <input type="submit" value="提交" />                  
    </form>
</body>

HTML5




@H_419_120@Color 颜色

<body>
    <form action="Login.aspx" method="get">
        <input type="color" name="color" />
        <input type="submit" value="提交" />
    </form>
</body>

HTML5

@H_419_120@Range滑块

<body>
    <form action="Login.aspx" method="get">
        <input type="range" onchange="document.getElementById('num').value=this.value" min="0" max="100" step="5" name="range" value="50" />
        <!--我们可以将renge和output标签搭配起来使用，output标签主要起一个提示range所选择值的作用-->
        <output id="num">
            50
        </output>
    </form>
</body>

HTML5

大佬总结

以上是大佬教程为你收集整理的HTML5全部内容，希望文章能够帮你解决HTML5所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的HTML5相关文章
其他相关热搜词更多
JavaScript之正则表达式学习笔记