html5新增标签以及属性小结
<!-- 现在html最新的版本也就是html5，那么html5新增了哪些呢？总体上说来，html5新增了不少语义化标签 ，也就说，别人看到这种标签，就知道这块在结构上到底代表什么意思。远远的减少了我们对标签的命名。除此之外，html5新增的语义化标签，和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，便于团队开发，维护。 -->
-----------------------------------------------------------
<!-- 标题标签 -->
<header>
位于网页顶部的标题，logo等
</header>
<!-- 底部标签 -->
<footer>
位于网页底部的友情链接，版权声明，练习方式等。
</footer>
<!-- 文章标签 -->
<article>
一般情况为独立完整的篇幅地方用article，article标签里面还可以嵌套article
</article>
---------------
<article>
<header>
<h3>文章标题</h3>
<h5>小标题等</h5>
</header>
<p>段落具体内容1</p>
<p>段落具体内容2</p>
<p>段落具体内容3</p>
<footer>
版权部分，尾部信息
</footer>
</article>
---------------
<!-- 章节部分 -->
<section>
章节部分，用于给页面上的内容分区块 。html中的div 有时候就是用section来代替了。整个网页结构就可以分为头部header，主体section，底部footer。
</section>
<!-- 侧边栏 -->
<aside>侧边栏</aside>
<!-- 导航 -->
<nav>导航。主导航，侧边导航，其他目录都可以</nav>
--------------------
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
--------------------
<!-- 整个网页架构就可以如下 -->
<body>
<header></header>
<nav></nav>
<aside></aside>
<section></section>
<footer></footer>
</body>
<!--时间 -->
<time datetime="2017-10-21">2017年10月21日</time>
<!-- 其中datetime属性可以有以下的设置方式：
datetime="2017-10-22" 2017年10月21日
dateime="2017-10-22T21:00" 2017年10月22日晚上9点 -->
<time pubdate="pubdate"></time>
<!-- pubdate="pubdate" 发布的时间 -->
<div style="width:800px;height:200px;padding:50px;background:red;box-sizing:border-box;">
<!-- 加了box-sizing:border-box; 这句话之后，加padding之后就不用去计算还要减去padding值 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dicta odit minima corrupti, sequi error harum nostrum quos maiores ab quibusdam earum doloribus soluta, rerum atque quam saepe sit in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dicta odit minima corrupti, sequi error harum nostrum quos maiores ab quibusdam earum doloribus soluta, rerum atque quam saepe sit in.</p>
</div>
<!-- 标题分组标签 -->
<hgroup>标题分组标签，通常放在header标签中</hgroup>
---------------
<header>
<hgroup>
<h2></h2>
<h3></h3>
</hgroup>
</header>
----------------
<!-- address标签 -->
<address>文章底部相关信息，作者信息，或者底部版权信息等，注意这个是斜体的哟</address>
----------------
<!-- 媒体组合元素（常用就是图） -->
<figure>里面再包一个img标签</figure>
<!-- figurecaption标签，就是给figure定义一个标题而已 -->
<figcaption>给figure定义一个标题</figcaption>
---------------
<figure>
<img src="" alt="" />
</figure>
<figcaption>图片的标题</figcaption>
---------------
<!-- iuput 里面新增的html5属性 -->
<!-- 提醒用户输入网址 -->
<input type="url" />
<!-- 输入电话号码,但是它不会对具体内容进行验证 -->
<input type="tel" />
<!-- 输入数据为数字,只允许输入数字，有自带点击增大，减小功能 -->
<input type="number" max="10" min="2" step="2"/>
<!-- max="10" min="2" step="2" 这几个都是在区域在最小值和最大值之前起作用的。-->
<!-- 滑块 ,例如可以用于调节音量-->
<input type="range" min="0" max="60" />
<!-- 时间 -->
<input type="time" />
<!-- 06:00 样式-->
<input type="date" />
<!-- 年-月-日 样式 -->
<input type="week" />
<!-- -年第—周 形式 -->
<input type="month" />
<!-- -年-月 形式-->
<input type="datetime-local" />
<!-- 当地时间 /年/月/日--:-- -->
<input type="datetime" />
<!-- UTC时间 不支持 -->
<!-- 颜色 能够把色板调出来，用于选择颜色-->
<input type="color" />
<!-- 搜索 输入内容后，搜索框的最右边会出现一个X的形式-->
<input type="search" />
<!-- 上传文件 accept="image/png" 删选上传的文件格式 multiple="multiple" 允许选择多个文件 -->
<input type="file" accept="image/png" multiple="multiple" />
<!-- 下拉列表中新增的属性 -->
<!-- optgroup 是option的集合 -->
<form action="post">
<select name="" id="" size="3" multiple>
<optgroup>
<option value="html" selected="selected">html</option>
<option value="javascript">javascript</option>
<option value="css">css</option>
</optgroup>
</select>
</form>
<!-- 输入一个字母即可匹配出相应的内容出来，配合input使用 -->
<input type="text" list="cs"/>
<datalist id="cs">
<option value="df"></option>
<option value="fagb"></option>
<option value="adg"></option>
</datalist>
------------------------
<!-- details标签 点击一下 就弹出相应的内容出来 -->
<details>
<summary style="outline:none;">点击显示结果</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non deserunt deleniti, asperiores nulla quod cum aspernatur doloremque, reiciendis, ullam quisquam voluptatum, maiores ab placeat aut ad praesentium. Reiciendis, necessitatibus! Consectetur.</p>
</details>
-------------------------
<!-- 把表单外部的内容关联到表单内部 -->
<form action="get" id="me">
<label for="user">用户名</label><input type="text" name="username" id="user" placeholder="请输入用户名"/>
<select name="" id="">
<optgroup>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</optgroup>
</select>
<input type="submit" value="提交" />
</form>
<!-- 接下来把下面的form关联到上面的form表单里面 -->
<input type="password" form="me" name="password" />
------------------------------------
<!-- output 数据的输出 -->
<form action="get" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="number" id="num1" />+
<input type="number" id="num2" />=
<output name="num" for="num1 num2"></output>
</form>
-------------------------------------
<!-- 进度条 -->
<progress value="20" max="100"></progress>
<!-- value="20" 当前的进度 max="100" 满分值 这2值一定是数字，不能是百分比 -->
<!-- 度量条 -->
<meter max="100" nin="0" value="30"></meter>
------------------------------------
<!-- 将表单里面的相关元素进行分组 就是有个框框起来的样子 -->
<fieldset>
<legend style="text-align:center;">用户登录页面</legend>
<input type="text" />
</fieldset>
----------------------------------
浙公网安备 33010602011771号