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. 2019年Unity学习资源指南[精心整理]

    前言 进入一个领域,最直接有效的方法就是,寻找相关综述性文章,首先你需要对你入门的领域有个概括性的了解,这些包括: 1.主流的学习社区与网站. 2.该领域的知名大牛与热心分享的从业者. 3.如何有效的 ...

  2. 高频Linux命令小结（新手向）

    示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 近期 ...

  3. Coremail接口存配置读取漏洞POC

    Coremail产品诞生于1999年,经过二十多年发展,如今从亿万级别的运营系统,到几万人的大型企业,都有了Coremail的客户. 截止2019年,Coremail邮件系统产品在国内已拥有10亿终端 ...

  4. [考试反思]1025csp-s模拟测试87：生存

    想起一句话 课上求生存,课下求发展 发展还好说,如何生存? 生存很困难... 没什么可抱怨的.有AK的.高分的也很多. 该说的在<Dust>里说完了,安静会吧. 这场rank43怎么追? ...

  5. Android开发中常用的设计模式

    首先需要说明的是,这篇博文灵感来自于 http://www.cnblogs.com/qianxudetianxia/archive/2011/07/29/2121547.html ,在这里,博主已经很 ...

  6. 通俗易懂了解Vue内置组件keep-alive内部原理

    1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...

  7. [转载]2.9 UiPath中断活动Continue的介绍和使用

    一.Continue的介绍 跳过当前For Each 循环内的迭代, 结束本次循环,Continue控件只能用于For Each循环中 二.Continue在UiPath中结合For Each循环的使 ...

  8. Elasticsearch系列---Elasticsearch的基本概念及工作原理

    基本概念 Elasticsearch有几个核心的概念,花几分钟时间了解一下,有助于后面章节的学习. NRT Near Realtime,近实时,有两个层面的含义,一是从写入一条数据到这条数据可以被搜索 ...

  9. css3 mask遮罩动画(照明灯效果)

    <pre><!DOCTYPE html><html lang="en"><head><meta charset="U ...

  10. php递归删除文件夹

    php递归删除文件夹 <pre> public function deldir($path) { //如果是目录则继续 if (is_dir($path)) { //扫描一个文件夹内的所有 ...