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. leetcode算法小题(1)

    题目描述: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数 ...

  2. Unity5-ABSystem(二):AssetBundle导出

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/lodypig/article/detai ...

  3. open_basedir限制目录

    1.open_basedir介绍 前言:前些日我用lnmp一键安装包出现了open_basedir的问题,因为我把项目目录变了,所以要在的fastcgi.conf下面加上open_basedir的目录 ...

  4. API 接口开发规范

    整体规范建议采用RESTful 方式来实施. 协议 API与用户的通信协议,总是使用HTTPs协议,确保交互数据的传输安全. 域名 应该尽量将API部署在专用域名之下.https://api.exam ...

  5. maven项目部署到tomcat方法

    今天记录下,maven项目部署到服务器的过程 1.首先在ide中里将自己的maven项目打包 mvn clean install 2. 看是否需要修改war包的名字,如果要修改,就用命令 mv xxx ...

  6. NOIP模拟测试23

    这次考试又一次暴露了我很大的问题. 首先做的比较好的是这几次考试一分没挂, 但是,这也体现了更大的问题,那就是我的实力似乎也仅限于此了. 考试先拿满了暴力分(100+0+50),然后看了看T2没看懂, ...

  7. The reference to entity "characterEncoding" must end with the ';'

    在配置数据库连接池数据源时,本来没有错误,结果加上编码转换格式后eclipse突然报错: 这是怎么回事? 经过查询,发现这个错误其实很好解决. 首先,原因是: .xml文件中 ‘ & ’字符需 ...

  8. Python 命令行之旅:深入 click 之参数篇

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  9. Golang 类型定义总结手册| 面试最基础

    变量 var 关键字是 var ,定义后须被调用 支持多个同时定义 支持使用 := 缺省定义 变量定义(声明) //使用var 关键字 进行变量定义 : var + 变量名 + 变量类型 //Var ...

  10. 小程序 数字过千 以K显示

    先新建一个 wxs 文件 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块. 每个模块都有自己独立的作用域.即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见. ...