HTML5的浏览器兼容
支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本,Chrome (谷歌浏览器),Safari, Opera等; 国内的遨游浏览器(Maxthon) ,以及基于IE或Chromium (Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
常用的五大浏览器有: IE, chrome,firefox,safari,opera
内容类型(ContentType)
HTML5的文件扩展符与内容类型保持不变,仍然为".html
" 或" .htm
"。
DOCTYPE声明
不区分大小写
指定字符集编码
meta charset=“UTF-8”
可省略标记的元素
不允许写结束标记的元素
: br、col、 embed、 hr、img、 input、link、meta可以省略结束标记的元素
: li、dt、dd、p、 option、colgroup、thead、 tbody、tfoot、 tr、td、 th可以省略全部标记的元素
: html、head、 body、colgroup、 tbody
省略引号
属性值可以使用双引号,也可以使用单引号。
HTML5新增语义化标签
section
元素表示页面中的一个内容区块
article
元素表示一块与上下文无关的独立的内容
aside
元素在article之外的,与article内容相关的辅助信息
header
元素表示页面中一个内容区块或整个页面的标题
footer
元素表示页面中一个内容区块或整个页面的脚注
nav
元素表示页面中导航链接部分
figure
元素表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一 个子元素的位置)main元素表示页面中的主要的内容(ie不兼容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
header,footer{
height: 50px;
line-height: 50px;
text-align: center;
background-color: orange;
}
section{
height: calc(100% - 100px);
}
nav,aside{
width: 100px;
height: 100%;
background-color: #ccc;
float: left;
}
main{
float: left;
width: calc(100% - 200px);
background-color: white;
height: 100%;
}
aside_p{
font-size: 12px;
color: white;
}
main .article1{
height: 60%;
}
main .article2{
height: 40%;
}
</style>
</head>
<body>
<header>header</header>
<section>
<nav>
<figure>nav</figure>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</nav>
<main>
<article class="article1">
<header>article-header</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quod id, nulla tempora expedita animi eum eius, quia sint eos, quisquam dolores dignissimos modi aliquam commodi? Enim eligendi eos earum?</p>
<footer>article-footer</footer>
</article>
<article class="article2">
<header>article-header</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quod id, nulla tempora expedita animi eum eius, quia sint eos, quisquam dolores dignissimos modi aliquam commodi? Enim eligendi eos earum?</p>
<footer>article-footer</footer>
</article>
</main>
<aside>
<figure>aside</figure>
<p class="aside_p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet magni nisi reprehenderit quis quisquam. At nesciunt tempore architecto possimus amet voluptates itaque libero placeat quibusdam perferendis, praesentium consectetur alias.</p>
</aside>
</section>
<footer>footer</footer>
</body>
</html>
H5新增音频标签
H5新增视频标签
link标签最常见的用途是链接样式表
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样!</p>
</body>
</html>
header页眉
footer页脚
main主体
hgroup标题组合
nav导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
</html>
注:header和main和footer在一个网页中只能出现一次
article独立的内容
aside辅助信息的内容
section区域
figure描述图像或视频
figcaption描述图像或视频的标题部分
<main>
<article>
<section>
<ul>
<figure>
<img src="https://pic3.iqiyipic.com/image/20171009/64/c9/a_100104281_m_601_m1_260_360.jpg?caplist=jpg,webp,avif" alt="干物妹!小埋第2季 ">
<figcaption>干物妹!小埋第2季 2017</figcaption>
</figure>
</ul>
</section>
</article>
</main>
datalist选项列表
details/summary文档细节/文档标题
progress/meter定义进度条/定义度量范围
time定义日期或时间
mark带有记号的文本
<main>
<input type="text" list="elems">
<datalist id="elems">
<option value="围棋少年"></option>
<option value="超智能足球"></option>
<option value="干物妹!小埋"></option>
</datalist>
<details open>
<summary>HTML</summary>
</details>
<progress min="0" max="10" value="8"></progress><br>
<meter min="0" max="100" value="80" ></meter>
<p>
今天是<time title="2-14">情人节</time>,街上人很多
</p>
<p>
今天是<mark>情人节</mark>,街上人很多
</p>
</main>
H5新增标签
Type= "color”
生成一个颜色选择的表单
Type= "tel”
唤起拨号盘表单
Type= "search”
产生一个搜索意义的表单
Type= "range”
产生一个滑动条表单
Type= "number”
产生一个数值表单
Type= "email"
限制用户必须输入email类型
Type= "url"
限制用户必须输入url类型
Type= "date"
限制用户必须输入日期Type= "month”
限制用户必须输入月类型Type= "week"
限制用户必须输入周类型
Type= "time”
限制用户必须输 入时间类型Type= "datetime-local"
选取本地时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<div>
颜色选择:<input type="color" name="color">
</div>
<div>
邮箱:<input type="email" name="myemail">
</div>
<div>
url地址(完整地址): <input type="url">
</div>
<div>
电话号码:<input type="tel">
</div>
<div>
滑块效果:
<input type="range" name="range" min="100px" max="200px">
</div>
<div>
数字类型<input type="number"><br>
数字类型<input type="number" name="age" min="0" max="10" value="4" step="2">
</div>
<div>
搜索:<input type="search">
</div>
<div>
日期选择:<input type="date"><br>
月份选择:<input type="month"><br>
周数选择:<input type="week"><br>
<input type="datetime-local" name="" id="">
</div>
<input type="submit">
</form>
</body>
</html>