HTML5是什么？有哪些新增标签(请举例说明)？
HTML5
HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强网络应用的标准集。
新增标签
HTML5添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
-
header-----页面的头部
<header></header> -
main----页面主体内容部分（每个页面只可以出现一次）
<main></main> -
section------划分区域
<section></section>(section里面可以放多个article) -
article------划分文章每章节(article里面可以放多个aside)
<article></article> -
nav----导航区域
<nav> ul>li </nav> -
footer----底部导航区域
<footer></footer> -
figure----里面可以放入图片和文字
<figure> p img h3</figure> -
hgroup----标题与子标题的组合
<hgroup></hgroup>
input 有哪些新增类型(请举例说明)？
email电子邮箱文本框
<input type="email" name="" id="">
tel电话号码
<input type="tel" name="" id="">
url网页URL地址
<input type="url" name="" id="">
search搜索引擎
<input type="search" name="" id="">
date日期类型
<input type="date" name="" id="">
time时间
<input type="time" name="" id="">
range特定范围内的数值选择器
<input type="range" name="" id="">
number只包含数字的输入框
<input type="number" name="" id="">
placeholder输入框提示信息
<input type="text" name="" id="" placeholder="请输入用户名">
autocomplete是否保存用户输入值
<input type="" autocomplete="off" name=""/>
autocomplete是否保存用户输入值，默认为on，关闭提示选择off
autofocus指定表单获取输入焦点
<input type="text" name="" autofocus>
required此项必填，不为空
Name: <input type="text" name="usr_name" required="required">
disabled表单禁用状态
<p>Last name: <input type="text" name="lname" disabled></p>
datalist选项列表与input元素配合使用，来定义input可能的值
<label for="myBrowser">从列表中选择这个浏览器</label> <input list="browsers" id="myBrowser" name="myBrowser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist> <input type="submit" value="提交">
用html5标签做简单的页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<article>
<img src="img/图标.png" alt=""width="110px"height="106px">
</article>
<nav><ul><br><br><br><br><br>
<li class="l1"><a href="#">主页</a></li>
<li><a href="#">咖啡及文化</a></li>
<li><a href="#">饮品及美食</a></li>
<li><a href="#">星享俱乐部</a></li>
<li><a href="#">在线订阅</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h3>开启您的星享之旅</h3>
<p>
星享卡会员光顾星巴克时可积累星星，兑换好礼！<br>
每积累消费50元可获赠一颗星星。星星越多，好礼<br>越多哦！<a>点击这里</a>开启您的星享惊喜之旅！
</p>
</section>
<aside>
</aside>
<article>
<h3>星巴克饮品</h3>
<div class="img1">
<img src="img/coffee1.png" alt=""class="i1">
<img src="img/coffee2.png" alt=""class="i2">
</div>
<a class="a2">美式咖啡</a><span class="s2">卡布奇诺</span>
<div class="img2">
<img src="img/coffee3.png" alt=""class="i3">
<img src="img/coffee4.png" alt=""class="i4">
</div>
<a class="a3">拿铁</a><span class="s3">魔卡</span>
</article>
</main>
</body>
</html>
css代码
*{
text-decoration:none;
list-style:none;
margin:0;
padding:0;
}
header{
width:1100px;
height:150px;
margin:0px auto;
}
header img{
margin:35px 40px;
}
header li{
float:left;
background-color:rgb(236, 228, 208);
margin:0px 10px;
width:92px;
text-align:center;
}
nav .l1{
width:60px;
background-color:rgb(200, 185, 156);
}
header a{
color:rgb(25, 112, 73);
font-weight: bolder;
}
nav{
width:700px;
height:150px;
float:left;
margin-left:70px;
}
article{
width:130px;
height:150px;
float:left;
}
main{
width:1100px;
height:630px;
margin:0px auto;
}
section{
width:35%;
height:180px;
background-color: rgb(239, 229, 208);
float:left;
}
h3{
color:rgb(25, 112, 73);
margin-left:20px;
line-height:70px;
}
section p{
margin-left:20px;
font-size:14px;
}
section p a{
color:rgb(25, 112, 73);
font-weight: bolder;
}
main article{
width:35%;
height:480px;
float:left;
background-color: rgb(239, 229, 208);
margin:10px 0px;
}
aside{
width:63%;
height:75%;
float:right;
background-image: url(../img/main.png);
background-repeat: no-repeat;
margin-right:10px;
}
.img1{
width:350px;
height:163px;
}
.img1 .i1{
float:left;
margin-left:25px;
}
.img1 .i2{
float:right;
}
article .a2{
font-size:14px;
margin-left:73px;
}
article .s2{
font-size:14px;
margin-left:115px;
}
.img2{
width:350px;
height:163px;
margin:10px 0px;
}
.img2 .i3{
float:left;
margin-left:25px;
}
.img2 .i4{
float:right;
}
article .a3{
font-size:14px;
margin-left:86px;
}
article .s3{
font-size:14px;
margin-left:150px;
}
阴影和圆角的实现
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css3.css">
<title>阴影和圆角的实现</title>
</head>
<body>
<div class="all">
<div class="f1">
<div class="fang">圆角</div>
<div class="yuan">圆形</div>
</div>
<footer>
<div class="f2">
<div class="zheng">
阴影
</div>
</div>
</footer>
</div>
</body>
</html>
css代码
*{
margin:0;
padding: 0;
}
.all{
width:100%;
height:695px;
background-image: url(../img/coffee1.png);
float:left;
}
.f1{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:0px 15px;
border-radius:30px;
}
.f1 .fang{
width: 90px;
height: 90px;
background-color: rgb(37,195,183);
border-radius:10px;
margin:60px 570px;
float:left;
text-align: center;
line-height: 90px;
}
.f1 .yuan{
width: 90px;
height: 90px;
background-color: rgb(37,195,183);
border-radius:45px;
margin:60px -390px;
float:left;
text-align: center;
line-height: 90px;
}
footer{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:235px 15px;
border-radius:30px;
}
.f2{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:0px auto;
border-radius:30px;
}
.zheng{
width:200px;
height:200px;
background-color: rgb(131,128,231);
text-align: center;
line-height: 200px;
margin:15px auto;
box-shadow: 10px 10px 5px rgb(219,43,173);
}
网友评论