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. Nginx、WSGI、 uWSGI、 uwsgi的区别

    当我们部署完一个应用程序,浏览网页时具体的过程是怎样的呢?首先我们得有一个 Web 服务器来处理 HTTP 协议的内容,Web 服务器获得客户端的请求,交给应用程序,应用程序处理完,返回给 Web 服 ...

  2. SpringBootCLI 命令行工具

    Spring Boot CLI 是用于快速开发 Spring 应用的命令行工具.用来运行 Groovy (与 Java 风格类似)脚本. spring-cli 似乎不是可以各种diy spring-b ...

  3. 10、pytest -- skip和xfail标记

    目录 1. 跳过测试用例的执行 1.1. @pytest.mark.skip装饰器 1.2. pytest.skip方法 1.3. @pytest.mark.skipif装饰器 1.4. pytest ...

  4. Mysql用户管理及权限分配

    早上到公司,在服务器上Mysql的数据库里新建了个database,然后本地的系统里用原来连接Mysql账号admin连这个数据库.结果报错了,大概是这样子的: Access denied for u ...

  5. 子树问题（DP）

    这题显然是DP 首先,\(dp[i][j]\)表示树深度小于等于i,树的大小为j的有根树的数量$ 可以循环枚举根节点编号次大的子树的大小k. \(dp[i][j]=\sum^{j-1}_{k=1}dp ...

  6. 史上最全 Java 中各种锁的介绍

    更多精彩原创内容请关注:JavaInterview,欢迎 star,支持鼓励以下作者,万分感谢. 锁的分类介绍 乐观锁与悲观锁 锁的一种宏观分类是乐观锁与悲观锁.乐观锁与悲观锁并不是特定的指哪个锁(J ...

  7. 大数据之路week01--day02我实在时被继承super这些东西搞的头疼，今天来好好整理以下。

    这一周的第一天的内容是面向对象的封装,以及对方法的调用.实在时没法单独拿出来单说,就结合这一节一起说了. 我实在是被继承中的super用法给弄的有点晕,程序总是不能按照我想的那样,不是说结果,而是实现 ...

  8. 「Luogu 1525」关押罪犯

    更好的阅读体验 Portal Portal1: Luogu Portal2: LibreOJ Description \(S\)城现有两座监狱,一共关押着\(N\)名罪犯,编号分别为\(1 - N\) ...

  9. 『题解』洛谷P3384 【模板】树链剖分

    Problem Portal Portal1: Luogu Description 如题,已知一棵包含\(N\)个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作\(1\): ...

  10. Unicode字符串和非Unicode字符串

    什么是Unicode? Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每 ...