<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,...{}
提取共同样式