HTML标签-->HTML5新增
2019-04-27 本文已影响0人
nger
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,...{}
提取共同样式
原文链接：https://www.cnblogs.com/Testking/p/11990839.html
