Html5相关的知识点总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html5相关的知识点总结相关的知识,希望对你有一定的参考价值。

1.html5:万维网的核心语言、HTML规范的第五次重大修改。HTML是一种标记语言。

2.布局的语义化标签:

    article:标签装载显示一个独立的文章内容

    section :标签定义文档中的节

    aside:用来装载非正文类的内容

    header :标签定义文档的页面头部,通常是一些引导和导航信息

    footer : 标签定义 section 或 document 的页脚

    nav :标签定义显示导航链接

    他们的使用场景代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title> Html5标签布局</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         header{
12             width: 1000px;
13             height: 90px;
14             background: #9cf1fd;
15             margin-left: 150px;
16         }
17         p{
18             margin-left: 20px;
19         }
20         nav{
21             width: 950px;
22             height: 30px;
23             line-height: 30px;
24             text-align:left;
25             background: #e9fad0;
26             margin-top: 20px;
27             margin-left: 20px;
28         }
29         article{
30             width: 700px;
31             height: 400px;
32             background: #b2d5fd;
33             margin-top: 10px;
34             margin-left: 150px;
35         }
36         section{
37             width: 650px;
38             height: 100px;
39             margin-left: 20px;
40             margin-top: 20px;
41             background: #fcb062;
42             float: left;
43         }
44         aside{
45             width: 280px;
46             height: 400px;
47             float: right;
48             margin-top: -400px;
49             margin-right: 125px;
50             background: #c8b1e7;
51         }
52         footer{
53             width: 1000px;
54             height: 40px;
55             background: #78def3;
56             margin-left: 150px;
57             margin-top: 10px;
58         }
59 
60     </style>
61 </head>
62 <body>
63     <header>
64         <p>header</p>
65         <nav>
66             <p>nav</p>
67         </nav>
68     </header>
69     <article>
70         <p>article</p>
71         <section><p>section</p></section>
72         <section><p>section</p></section>
73         <section><p>section</p></section>
74     </article>
75     <aside><p>aside</p></aside>
76     <footer>
77         <p>footer</p>
78     </footer>
79 </body>
80 </html>

 

3.标题语义化标签

    <hgroup> 标签用于对网页或区段(section)的标题进行组合.

1 <hgroup class="hgroup">
2     <h2>会议内容</h2>
3     <h2>会议主题</h2>
4 </hgroup>

4.媒体语义化标签

    <figure>: 标签包含独立的媒体内容

    <figcaption> 标签定义 figure 元素的标题

<figure>
    <img src="../../img/8.jpg" alt=""/>
    <figcaption>这是黑夜</figcaption><!--图片注释-->
</figure>

5.标记标签

    <mark> 在需要突出显示文本时使用 <mark> 标签。

<p><mark>我的骑士</mark></p><!--mark默认背景色是黄色 标记字体-->

6.详细信息标签

    <details> 标签用于描述文档或文档某个部分的细节,而这个细节并不需要文档加载时就展示,而是可以折叠。

    <summary> 默认显示的details 元素的标题。

  

1 <details open="open">
2 <!--//option默认导航为打开状态-->
3 <summary>导航1</summary>
4 <p>导航内容1</p>
5 <p>导航内容2</p>
6 <p>导航内容3</p>
7 </details>

7.进度条标签

    <progress> 标签定义运行中的进度(进程)

<progress max="100" value="90"></progress>

8.新增表单类型

    <datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

1 <input type="search" list="A"/>
2 <datalist id="A">
3 <option>111</option>
4 <option>222</option>
5 <option>321</option>
6 <option>444</option>
7 <option>555</option>
8 </datalist>

9.新增表单输入类型

    email ---- 邮箱验证【@】

    url ---- 网址输入法【http://www.xx.xx】

    number --- (min、max、step数字间隔、value)

    range --- (min、max、step数字间隔、value)---进度条

    color ---- 检色器

     date ---- 选取日、月、年

    month ---- 选取月、年 week - 选取周和年

    time ---- 选取时间(小时和分钟)

    datetime ---- 选取时间、日、月、年(UTC 时间)

    datetime-local ---- 选取时间、日、月、年(本地时间)

    

 1 <form>
 2     <input type="email"/>  <!--required必填提示【不能为空】 ,email邮箱验证【@】-->
 3 
 4     <input type="url" />  <!--网址输入法【http://www.xx.xx】-->
 5 
 6     <input type="number" min="0" max="10"/>  <!--购物车【min最小值数,max最大值数】-->
 7 
 8     <input type="range" min="0" max="10" step="5"/>  <!--进度条-->
 9     <input type="color"/>  <!--检色器-->
10 <form>

10.新增表单属性

    placeholder : 输入框提示信息

    autofocus : 指定表单获取输入焦点

    required : 必须要填写的字段

    pattern : 正则验证 pattern="\d{1,5}"

1 <input type="text" placeholder="请输入内容1 " required="required" pattern="\d{1,5}"/>
2 <input type="text" placeholder="请输入内容2 " autofocus="autofocus"/>

 

  

以上是关于Html5相关的知识点总结的主要内容,如果未能解决你的问题,请参考以下文章

HTML5form表单的相关知识总结

HTML5新增相关标签的和属性

熬夜总结了 “HTML5画布” 的知识点(共10条)

HTML和html5知识总结

前端学习总结

线程学习知识点总结