html5—史上最全的知识点

企业开发 2022-05-12 21:50:13 阅读次数: 0

史上最全的html5知识点（一）

新增的主体结构元素

article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章、一篇论坛的帖子、一段用户评论或独立的插件，或是其他任何独立的内容
article元素可以嵌套使用
article元素可以用来表示插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article元素</title>
</head>
<body>
<h1></h1>
<aticle>
    <header>
        <h1>主体结构元素</h1>
        <p>hello,欢迎来到我的世界</p>
    </header>
    <article>
        <header>
            作者
        </header>
        <p>评论</p>
        <footer>time</footer>
    </article>
    <footer>
        <p>这是底部</p>
    </footer>
</aticle>
  <article>
      <h1>这是一个内嵌</h1>
      <object>
          <embed src="#"width="600"height="400"></embed>
      </object>
  </article>
</body>
</html>

section元素

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常用内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而不是section元素。
PS：1、不要将section元素作为设置样式的页面容器
2、如果article元素、aside元素、nav元素更符合使用条件，那就不要使用section元素。
3、没有标题内容，不要使用section元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>section元素</title>
</head>
<body>
 <section>
     <h1>苹果</h1>
     <p>这是一个水果，很好吃</p>
<!--     通常不推荐没有标题内容使用section元素，不要和article元素混淆-->
 </section>

<article>
    <h1>苹果</h1>
    <p>这是一个苹果，很好吃</p>
    <section>
        <h2>红富士</h2>
        <p>红富士的苹果真的好吃</p>
        <section>
            <h2>国光</h2>
            <p>国光的水果也不错</p>
        </section>
    </section>
</article>
</body>
</html>

nav元素

nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进元素即可
nav元素应用场景：

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作

PS：html5中不能使用menu元素代替nav元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav元素</title>
</head>
<body>
   <nav>
       <ul>
           <li><a href="#">主页</a> </li>
           <li><a href="#">开发文档</a> </li>
       </ul>
   </nav>
<article>
    <header>
        <h1>HTML5u与CSS3</h1>
        <nav>
            <ul>
                <li><a href="#">HTML5历史</a></li>
                <li><a href="#">CSS3历史</a> </li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>HTML5历史</h1>
        <p>内容</p>
    </section>
    <section>
       <h1>CSS3历史</h1>
        <p>内容</p>
    </section>
    <footer>
        <a href="#">删除</a>
        <a href="#">修改</a>
    </footer>
</article>
<footer>
    <p><small>版权声明：</small></p>
</footer>
</body>
</html>

aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aside元素</title>
</head>
<body>
  <header>
      <h1>js入门</h1>
  </header>
<!--  article元素之内使用-->
<article>
    <h1>语法</h1>
    <p>文章正文</p>
    <aside>
        <h1>名词解释</h1>
        <p>语法：这对于语言来说很重要</p>
    </aside>
</article>
<!--article元素外使用-->
<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="#">2021-1-23</a> </li>
            <li><a href="#">认真学一学</a> </li>
        </ul>
    </nav>
</aside>
</body>
</html>

time元素和pubdate属性

time元素代表24小时制或者是某一个日期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time元素</title>
</head>
<body>
<time datetime="2021-1-23">2021-1-23</time>
<time datetime="2021-1-23T20:00">2021-1-23</time>
<time datetime="2021-1-23T20:00Z">2021-1-23</time>
<time datetime="2021-1-23T20:00+09:00">2021-1-23</time>
</body>
</html>

pubdata属性是一个可选的bool类型，可以用在article元素中time元素上，代表文章的发表日期之类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pubtate属性</title>
</head>
<body>
<article>
    <header>
        <h1>橙子</h1>
        <p>发布日期
        <time datetime="2021-1-23" pubdate>2021-1-23</time> </p>
        <p>舞会时间
        <time datetime="2021-1-23"></time></p>
</article>
</body>
</html>

新增的非主体结构元素

header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或者页面内一个内容区块的标题，但是也可以包含其他内容。例如数据表格，搜索表单或者相关的logo图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>header元素</title>
</head>
<body>
<header>
    <h1>IT技术</h1>
    <a href="http://www.baidu.com">百度一下</a>
    <nav>
        <ul>
            <li><a href="#">学习</a></li>
            <li><a href="#">笔记</a></li>
        </ul>
    </nav>
</header>
</body>
</html>

address元素

address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等等。address应该不只是用来呈现电子信息或者真实地址，还可以用来展示文档相关的联系人的所有联系信息。

扫描二维码关注公众号，回复： 14136344 查看本文章 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>address元素</title>
</head>
<body>
<address>
    <a href="#">Mary</a>
    <a href="#">Bob</a>
</address>
<footer>
    <div>
        <address>
            <a href="#">Mary</a>
            IT技术
        </address>
        <time datetime="2021-1-23">2021-1-23</time>
    </div>
</footer>
</body>
</html>

footer元素和hgroup元素

footer元素可以作为其上一层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读连接及版权信息等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer元素</title>
</head>
<body>
<footer>
    <ul>
        <li><a href="#">版权信息</a> </li>
        <li><a href="#">联系方式</a> </li>
    </ul>
</footer>
<article>
    <footer>
        这是一个底部
    </footer>
</article>
<section>
    <footer>
        这是底部
    </footer>
</section>
</body>
</html>

hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hgroup元素</title>
</head>
<body>
<article>
    <header>
        <hgroup>
            <h1>这是文章标题</h1>
            <h2>这是一个子标题</h2>
        </hgroup>
        <p><time datetime="2021--1-23">2021-1-23</time> </p>
    </header>
    <div>
      这是内容
    </div>
    <footer>
     这是底部
    </footer>
</article>
</body>
</html>

网页编排规则

  • 显示编排内容区域块
  • 隐示编排内容区域块
  • 标题分级
  • 不同区域块使用相同级别的标题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页编排</title>
</head>
<body>
<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
    </nav>
</header>
<article>
    <hgroup>
        <h1>文章主标题</h1>
        <h2>文章子标题</h2>
    </hgroup>
    <p>文章正文</p>
    <section>
        <div>
            <article>
                <h1>评论标题</h1>
                <p>评论正文</p>
            </article>
        </div>
    </section>
</article>
<footer>
    <small>版权所有</small>
</footer>
</body>
</html>

表单新增元素与属性

form属性和formation属性

在html4中，表单内的从属元素必须书写在表单内部，而html5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属指定表单了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
   <form id="testform">
    <input type="text">
   </form>
   <textarea form="testform"></textarea>
</body>
</html>

在html4中，一个表单内的所有元素只能通过表单的action属性被统一提交到一个页面，而html5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮可以将表单提交到不同页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formaction</title>
</head>
<body>
   <form id="testform">
    <input type="submit" name="s1" value="v1" formaction="http://localhost:8080/helljsp01/test01.jsp">这是第一个页面
    <input type="submit" name="s2" value="v2" formaction="http://localhost:8080/helljsp01/test02.jsp">这是第二个页面
   </form>
   <textarea form="testform"></textarea>
</body>
</html>

formmethod和formenctype属性

在html4中，一个表单内只能有一个action属性来对表单内所有元素统一指定提交页面，所以每一个表单内页只有一个method属性来统一指定提交方法。在html5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formmethod属性</title>
</head>
<body>
<form id="testform">
    <input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/helljsp01/test01.jsp">提交
    <input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/helljsp01/test02.jsp">提交
</form>
</body>
</html>

关于post和get的区别后面会讲

在html4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的元素进行编码。在html5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formentype属性</title>
</head>
<body>
  <form>
      <input type="text" formenctype="text/plain">
      <input type="text" formenctype="multipart/form-data">
      <input type="text" formenctype="application/x-www-form-urlencoded">
  </form>
</body>
</html>

formtarget属性和autofocus属性

在html4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在html5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所加载的页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formtarget</title>
</head>
<body>
  <form>
      <input type="submit" name="s1" value="v1" formtarget="_blank" formaction="http://localhost:8080/helljsp01/test01.jsp">这是第一个页面(在新的页面中打开）
      <input type="submit" name="s2" value="v2" formtarget="_parent" formaction="http://localhost:8080/helljsp01/test02.jsp">这是第二个页面（在当前页面打开）
  </form>
</body>
</html>

为文本框、选择框或按钮控件加上autofocu属性，当画面打开时，该控件自动获得光标焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>outofocus属性</title>
</head>
<body>
 <form>
     <input type="text">
     <input type="text" autofocus>
 </form>
</body>
</html>

required是属性和labels属性

html5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>required属性</title>
</head>
<body>
 <form action="http://localhost:8080/helljsp01/test01.jsp">
     <input type="text" required="required">
     <button type="submit">提交</button>
 </form>
</body>
</html>

在html5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个Nodelist对象，代表该元素所绑定的标签元素所构成的集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>labels属性</title>
</head>
<body>
<script>
    function Validtate(){
     
     
        var txtName=document.getElementById("txt_name");
        var button=document.getElementById("btnValidate");
        var form=document.getElementById("testform");
        if (txtName.value.trim()==""){
     
     
            var label=document.createElement("label");
            label.setAttribute("for","txt_name");
            form.insertBefore(label,button);
            txtName.labels[1].innerHTML="请输入姓名";
            txtName.labels[1].setAttribute("style","font-size:19px;color:red");
        }
    }
</script>
<form id="testform">
    <label id="label" for="txt_name">姓名:</label>
    <input id="txt_name">
    <input type="button" id="btnValidate" value="验证" onclick="Validtate()">
</form>
</body>
</html>

效果：
效果

control属性和placeholder属性

在html5中，可以在标签你内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>control</title>
</head>
<body>
<script>
    function setValue() {
     
     
        var label=document.getElementById("label");
        var textbox=label.control;
        textbox.value="010010";
    }
</script>
  <form>
      <label id="label">
          邮编：
          <input id="txt_zip " maxlength="6">
          <small>请输入六位数字</small>
      </label>
      <input type="button" value="设置默认值" onclick="setValue()">
  </form>
</body>
</html>

效果：
在这里插入图片描述

placeholder只指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
 <input type="text" placeholder="请输入用户名">
</body>
</html>

list属性和autoComplete属性

在html5中，为单行文本框添加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是html5中新增的元素，该元素累死选择框，但是当用户想要设定的值不在选择列表内，允许自动输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist</title>
</head>
<body>
   <form>
       <input type="text" name="greeting" list="greetings">
       <datalist id="greetings" style="display: none">
           <option value="HTML5学习">HTML5学习</option>
           <option value="C语言学习">C语言学习</option>
       </datalist>
   </form>
</body>
</html>

效果：
在这里插入图片描述

autocomplet属性帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在HTML5之前，因为谁都可以看见输入的值，所以在安全方面存在缺陷，只要使用autocomplete属性，安全性方面也可以得到很好的控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>autocomplete</title>
</head>
<body>
 <input type="text" name="greeting" autocomplete="" list="greetings">
</body>
</html>

pattern属性和selectiondirection属性

在html5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是都符合给定格式。在输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示提示文字，提示输入的内容必须符合给定格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pattern属性</title>
</head>
<body>
    <form action="http://localhost:8080/helljsp01/test01.jsp">
        请输入内容：
        <input pattern="[A-Z]{3}" name="part">
        <input type="submit" >
    </form>
</body>
</html>

效果：
在这里插入图片描述

输入格式正确会跳转到指定页面

SelectionDirection属性这对input元素与textarea元素，html5增加了SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，改属性为“forward”，当用户反向选取文字时，该属性为“backward”。当用户没有选取任何文字时，该属性值为“forward”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SelectionDirection属性</title>
</head>
<body>
<script>
    function AD() {
     
     
        var control=document.forms[0]['text'];
        var Direction=control.selectionDirection;
        alert(Direction);

    }
</script>
   <form>
       <input type="test" name="text">
       <input type="button" value="点击我" onclick="AD()">
   </form>
</body>
</html>

indeterminate属性和image提交按钮的height属性与width属性

复选框的indeterminate属性，对于复选框CheckBox元素来说，过去只是选取与非选取这两种状态。在html5中，可以使用JavaScript脚本代码中对该元素使用跟indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indeterminate属性</title>
</head>
<body>
    <input type="checkbox" indeterminate id="cb">属性测试
    <script>
        var cb=document.getElementById("cb");
        cb.indeterminate=true;
    </script>
</body>
</html>

效果：
在这里插入图片描述

针对类型为image的input元素，在html5新增了两个属性，height和width分别用来指定图片按钮的高度与宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iammge</title>
</head>
<body>
  <form action="test.jap" method="post">
      姓名：<input type="text" name="name">
      <input type="image" src="t016362ac5edaa42581.jpg" alt="编辑" width="20" height="20">

  </form>
</body>
</html>

======================================
‵□′）╯✧Duang~送你五毛钱特效！
动一动小手
♥点个♥

猜你喜欢

转载自blog.csdn.net/weixin_47980825/article/details/113057802
今日推荐
周排行
跟小白一起了解区块链
linux下常用FTP命令 1 连接ftp服务器
Oracle RAC客户端tnsnames.ora相关配置及测试
总结1126
图像成像原理
进阶学习
CF598E Chocolate Bar
StratifiedKFold和Kfold的区别
列表[ ]元组()range
影视 "少年的你" 最大bug之手机出戏
每日归档
更多
2025-02-11(0)
2025-02-10(0)
2025-02-09(0)
2025-02-08(0)
2025-02-07(0)
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022