HTML标签-->HTML5新增
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新增的更多相关文章
- 浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...
- Html5标签——Html5新增标签的含义和使用
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...
- html5新增及删除标签
一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...
- HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- HTML5新增video标签及对应属性、API详解
知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...
- 第二篇、HTML5新增标签
<html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title&g ...
- html5新增标签兼容性
很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...
- html5 新增语义标签
一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...
- 自学HTML5第二节(标签篇---新增标签详解)
HTML5新增标签: <article> 标签 规定独立的自包含内容.一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源 ...
随机推荐
- leetcode算法小题(1)
题目描述: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数 ...
- Unity5-ABSystem(二):AssetBundle导出
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/lodypig/article/detai ...
- open_basedir限制目录
1.open_basedir介绍 前言:前些日我用lnmp一键安装包出现了open_basedir的问题,因为我把项目目录变了,所以要在的fastcgi.conf下面加上open_basedir的目录 ...
- API 接口开发规范
整体规范建议采用RESTful 方式来实施. 协议 API与用户的通信协议,总是使用HTTPs协议,确保交互数据的传输安全. 域名 应该尽量将API部署在专用域名之下.https://api.exam ...
- maven项目部署到tomcat方法
今天记录下,maven项目部署到服务器的过程 1.首先在ide中里将自己的maven项目打包 mvn clean install 2. 看是否需要修改war包的名字,如果要修改,就用命令 mv xxx ...
- NOIP模拟测试23
这次考试又一次暴露了我很大的问题. 首先做的比较好的是这几次考试一分没挂, 但是,这也体现了更大的问题,那就是我的实力似乎也仅限于此了. 考试先拿满了暴力分(100+0+50),然后看了看T2没看懂, ...
- The reference to entity "characterEncoding" must end with the ';'
在配置数据库连接池数据源时,本来没有错误,结果加上编码转换格式后eclipse突然报错: 这是怎么回事? 经过查询,发现这个错误其实很好解决. 首先,原因是: .xml文件中 ‘ & ’字符需 ...
- Python 命令行之旅:深入 click 之参数篇
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- Golang 类型定义总结手册| 面试最基础
变量 var 关键字是 var ,定义后须被调用 支持多个同时定义 支持使用 := 缺省定义 变量定义(声明) //使用var 关键字 进行变量定义 : var + 变量名 + 变量类型 //Var ...
- 小程序 数字过千 以K显示
先新建一个 wxs 文件 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块. 每个模块都有自己独立的作用域.即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见. ...