HTML的Form新增属性

<form method="post" name="myForm">

    <p>

        邮箱：<input type="email"/>

    </p>

    <p>

        搜索：<input type="search"/>

    </p>

    <p>

        范围（滑块）：<input type="range" min="0" max="100" value="20" step="10"/>

    </p>

    <p>

        数字：<input type="number" min="5" max="100" step="10"/>

    </p>

    <p>

        网址：<input type="url"/>

    </p>

    <p>

        颜色：<input type="color"/>

    </p>

    <p>

        电话：<input type="tel"/>

    </p>

    <p>

        日期：<input type="date"/>

    </p>

    <p>

        月：<input type="month"/>

    </p>

    <p>

        周：<input type="week"/>

    </p>

    <p>

        <input type="submit"/>

    </p>

</form>

HTML新增标签

<figure>

    <img src="" alt=""/>

    <figcaption>描述</figcaption>

</figure>

<!--细节-->

<details>

    <summary>标题</summary>

</details>

<!--标记-->

<mark>黄背景颜色</mark>

<!--刻度-->

<meter value="" min="" max="" low="" high="">您的浏览器不支持meter标签</meter>

<!--进度条-->

<progress max="" value="">您的浏览器不支持progress标签</progress>

HTML5新增结构标签

<header>头部</header>

<nav>导航</nav>

<footer>页脚</footer>

<article>文章</article>

<section>章节</section>

<aside>侧边栏</aside>

视频和音频

<video src="路径" autoplay controls loop poster="" width="" height="" muted preload="auto">

    您的浏览器不支持video标签

</video>

<audio src="路径" autoplay controls loop>

    您的浏览器不支持audio标签

</audio>

<video autoplay>

    <source src=""/>

    <source src=""/>

    您的浏览器不支持video标签

</video>

<embed src="" width="" height=""/>

CSS

层叠样式表，级联样式表，简称样式表

文件后缀  .css

作用：

实现了内容与表现的分离

提高了代码的重用性和可维护性

一个css文件可以被对个HTML文件引入

一个HTML文件可以引入多个css文件

引入css

1）行内样式（内联样式）  只对当前元素起作用

<div style="color: red;"></div>

2）内部样式     只对当前页面起作用

<head>

    <style>

        /*css样式*/

        选择器{

            属性:属性值;

            属性:属性值;

            属性:属性值;

        }

    </style>

</head>

3）外部样式   提高了代码的重用性和可维护性，实现了内容与结构完全分离

<head>

    <link rel="stylesheet" href=".css"/>

</head>

4）导入式

<head>

    <style>

        @import "";

    </style>

</head>

@import和link的区别：

1.@import先加载HTML，再加载css样式，link一边加载HTML，一边加载css

2.@import有兼容性，IE5以上支持，link没有兼容性

3.@import只能引入css文件，link还可以引入其他内容

4.@import会增多http请求

基本选择器

7.基本选择器

1）全局选择器，通用选择器    *

选中网页所有内容

2）元素选择器   div   a   img   b   p  span  ul   li   table   input

选中所有指定的元素

3）类选择器

<div class="className"></div>

.className{}

class名字可以重复，class名字可以起多个，用空格隔开

4）ID选择器

<div id="idName"></div>

#idName{}

id名字唯一

选择器优先级：行内样式>ID选择器>类选择器>元素选择器>全局选择器

权重：         1000      100      10          1

优先级相同，后面的代码生效

5）合并选择器

选择器1,选择器2,...{}

提取共同样式

HTML标签-->HTML5新增的更多相关文章

  1. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  2. Html5标签——Html5新增标签的含义和使用

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

  3. html5新增及删除标签

    一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...

  4. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  5. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  6. 第二篇、HTML5新增标签

    <html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title&g ...

  7. html5新增标签兼容性

    很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...

  8. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  9. 自学HTML5第二节（标签篇---新增标签详解）

    HTML5新增标签: <article> 标签 规定独立的自包含内容.一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源 ...

随机推荐

  1. ORM之多表操作

    一.创建模型 from django.db import models # Create your models here. class Book(models.Model): nid = model ...

  2. Android_Bundle

    1 Bundle介绍 Bundle主要用于传递数据:它保存的数据,是以key-value(键值对)的形式存在的. 我们经常使用Bundle在Activity之间传递数据,传递的数据可以是boolean ...

  3. SQLserver2016对字段是json对象查询

    现在2016内置对json对象的查询支持了.正好项目中用到,做个备忘 如果字段内容是: [{"tagid":"100015","orderid&quo ...

  4. 前端技术之：通过plop生成Controller的方法与步骤

    # Controller的生成 开发者可以通过plop命令生成各种类型的控制器类(Normal.Restful.View), 以下是示例生成步骤. 1. 执行以下命令: plop controller ...

  5. appium 处理webview

    折腾了一段时间,无论是模拟器还是真机,driver.contexts都只有NATIVE_APP,无奈放弃切换webview,直接查找定位元素 from time import sleep import ...

  6. 手写一个简易的IOC

    这个小项目是我读过一点Spring的源码后,模仿Spring的IOC写的一个简易的IOC,当然Spring的在天上,我写的在马里亚纳海沟,哈哈 感兴趣的小伙伴可以去我的github拉取代码看着玩 地址 ...

  7. mysql 备份 docker mysql备份

    #未用docker安装的 mysqldump -h192.168.1.180 -P3306 -uroot -p123456 demo0201 > bak180814.sql mysql -u用户 ...

  8. Apache Flink任意Jar包上传导致远程代码执行漏洞复现

    0x00 简介 Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎.Flink以数据并行和流水线方式执行任意流数据程序,Fl ...

  9. Java描述设计模式(19)：模板方法模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 通常一款互联网应用的开发流程如下:业务需求,规划产品,程序开发,测试交付.现在基于模板方法模式进行该过程描述. public c ...

  10. nginx目录安全设置

    nginx目录安全设置<pre> location ~ /\. { deny all; }</pre>这样所有隐藏文件都不会以URL方式打开了