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

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

  3. null与undefined的区别？

    古之立大事者,不惟有超世之才,亦必有坚忍不拔之志. ——北宋· 苏 轼<晁错论> 1.首先看一个判断题:null和undefined 是否相等     console.log(null== ...

  4. Java IO编程——转换流

    所谓的转换流指的是可以实现字节流与字符流操作的功能转换,例如:进行输出的时候OutputStream需要将内容变为字节数组后才可以进行输出,而Writer可以直接输出字符串,这一点是方便的,所以很多人 ...

  5. C Primer Plus (一)

    摘要:重读C Primer Plus ,查漏补缺 重读C Primer Plus,记录遗漏的.未掌握的.不清楚的知识点. 一.概览 1.链接器的作用是将这3个目标元素(目标代码.系统的标准启动代码和库 ...

  6. 学习笔记03http协议

    1.浏览器就是一个sokect客户端,使用http协议与服务器进行交流.http请求:请求头:(请求方法)sp(url)sp http/1.x <cr><lf>(通用头类型名) ...

  7. nyoj 29-求转置矩阵问题 (行，列位置调换)

    29-求转置矩阵问题 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:8 submit:18 题目描述: 求一个三行三列的转置矩阵. 输入描述: 第一 ...

  8. nyoj 1112-求次数 (string, substr(begin, length), map, pair)

    1112-求次数 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:8 难度:2 题目描述: 题意很简单,给一个数n 以及一个字符串str,区间[i,i+n-1] 为一个新 ...

  9. 基于.NetStandard的简易EventBus实现-基础实现

    一.问题背景 最近离职来到了一家新的公司,原先是在乙方工作,这回到了甲方,在这一个月中,发现目前的业务很大一部分是靠轮询实现的,例如:通过轮询判断数据处于B状态了,则轮询到数据后执行某种动作,这个其实 ...

  10. Spring Boot2 系列教程(二十六)Spring Boot 整合 Redis

    在 Redis 出现之前,我们的缓存框架各种各样,有了 Redis ,缓存方案基本上都统一了,关于 Redis,松哥之前有一个系列教程,尚不了解 Redis 的小伙伴可以参考这个教程: Redis 教 ...