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. LFU的基本原理与实现

    前言:之前有写过一篇关于LRU的文章链接https://www.cnblogs.com/wyq178/p/9976815.html  LRU全称:Least Recently Used:最近最少使用策 ...

  2. 前端开发之VSCode扩展

    1.Chinese (Simplified) Language Pack for Visual Studio Code——中文语言包 2.Beautify——代码格式化工具 3.HTML Snippe ...

  3. 泛微ecology OA系统某接口存在数据库配置信息泄露漏洞

    2漏洞详情 攻击者可通过该漏洞页面直接获取到数据库配置信息,攻击者可通过访问存在漏洞的页面并解密从而获取数据库配置信息,如攻击者可直接访问数据库,则可直接获取用户数据,由于泛微e-cology默认数据 ...

  4. 利用python的requests和BeautifulSoup库爬取小说网站内容

    1. 什么是Requests? Requests是用Python语言编写的,基于urllib3来改写的,采用Apache2 Licensed 来源协议的HTTP库. 它比urllib更加方便,可以节约 ...

  5. Blue：贪心，单调队列

    考场上什么都没想. 显然在扯淡了,应该说是刚开始想了一些没用的. 有决策单调性,所以二分答案? 好,那就二分答案.想想怎么检查每只蛤能不能都跳到终点? 那么每只蛤都不能掉队啊. 如果你现在遇到了一个石 ...

  6. Elasticsearch6.x集群部署

    一.准备阶段 三台ubuntu系统机器 ip 计算机名 192.168.2.132 master 192.168.2.133 slave1 192.168.2.134 slave2 下载: jdk-8 ...

  7. Python 基础之re 模块

    Python 基础之大话 re 在使用re模块中主要会用到一下几个方法: re.match() #从头匹配一个字符串 re.search() #浏览全部字符串,匹配第一个符合规则的字符串 re.fin ...

  8. 201871010114-李岩松《面向对象程序设计（java）》第四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  9. VS2019打包WPF安装程序最新教程

    VS2019打包WPF安装程序最新教程,使用Visual Studio 2019开发的WPF程序如果想要打包为安装程序,除了在VS2019找到WPF项目类库直接右键发布之外,更常用的还是将其打包为ex ...

  10. Asciinema：你的所有操作都将被录制

    如何实现类似于Jumpserver koko一样的终端录制回放功能呢?本文介绍一个神器 asciinema 是一款开源免费的终端录制工具,它可以将命令行输入输出的任何内容加上时间保存在文件中,同时还提 ...