HTML5+CSS3

一. HTML5是什么？有哪些新增标签(请举例说明)？

1. HTML5是HTML标准的最新演进版本。它是一个新的 HTML语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。HTML5的一些新规则：新特性应该基于 HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求(比如 Flash)；更优秀的错误处理；更多取代脚本的标记(新增了一些语义化的标签：在HTML4当中，很明显的一个形象就是用DIV来进行任何的布局。)；HTML5应该独立于设备(对于各个移动设备说来，也是完美兼容的)。
2. 新增的标签：
(1).特殊内容元素：

header------页面的头部
<header></header>
main------页面的主体内容（每个页面只能有一个）
<main></main>
section------划分区域（相当于html4中的div）
<section></section>
article------划分文章每章节(article里面可以放多个aside)
<article></article>
nav----导航区域
<nav> ul>li </nav>
footer------底部导航
<footer></footer>
figure------新闻形式的组合（文字主标题副标题和图片组合）
<figure> <h1></h1> <h5></h5> </figure>
hgroup------标题和子标题的组合
<hgroup> <h1></h1> <h5></h5> </hgroup>

(2).form表单控件：

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-----是否保存用户输入值
默认为on，关闭为off
autofocus-----获取输入焦点
<input type="text" name=""autofocus>
required-----此项必填，不为空
Name: <input type="text" name="" required="required">
disabled-----表单禁用状态
<p>Last name: <input type="text" name="" disabled></p>
datalist 定义可选数据的列表。(与 input 元素配合使用，就可以制作出输入值的下拉列表)

<label for="mygame">选择你喜欢的游戏</label>```
<input list="games" id="mygame" name="mygame">
     <datalist id="games">
         <option value="Over Watch">
         <option value="Tom Clancy's The Division">
         <option value="Dark souls">
         <option value="Grand Theft Auto V">
     </datalist>
<input type="submit" value="提交">

二.用html5标签做一个简单的页面布局

星巴克页面.png

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>starbucks</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="starbucks">
            <header>
                <img src="images/logo.png" alt="" class="logo fl">
                <nav>
                    <ul class="clearfix naver">
                        <li class="list1">主页</li>
                        <li class="list">咖啡及文化</li>
                        <li class="list">饮品及美食</li>
                        <li class="list">星享俱乐部</li>
                        <li class="list">在线订阅</li>
                    </ul>
                </nav>
            </header>
            <main class="clearfix contener">
                <div class="left fl">
                    <div class="left_top">
                        <h4>开启您的星享之旅！</h4>
                        <p>星享卡会员光顾星巴克时可积累星星，兑换好礼！每积累消费50元可获赠一颗星星。星星越多，好礼越多哦！点击这里开启您的星享惊喜之旅！</p>
                    </div>
                    <div class="left_bellow">
                        <h4>星巴克饮品</h4>
                        <ul class="clearfix leftb_list">
                            <li class="lb_li">
                                <img src="images/caffe-1.jpg" alt="">
                                <h5>美式咖啡</h5>
                            </li>
                            <li class="lb_r">
                                <img src="images/caffe-2.jpg" alt="">
                                <h5>卡布奇诺</h5>
                            </li>
                        </ul>
                        <ul class="clearfix leftb_list">
                            <li class="lb_li">
                                <img src="images/caffe-3.jpg" alt="">
                                <h5>拿铁</h5>
                            </li>
                            <li class="lb_r">
                                <img src="images/caffe-4.jpg" alt="">
                                <h5>摩卡</h5>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right fl">
                        <div class="text_t">
                            <p>家庭咖啡作坊帮助孩子们上大学</p>
                            <p>2015年6月30日</p>
                            <p>坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作坊”发展而来，其目的是为了控制其出产的咖啡豆品质。</p>
                            <p> 他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且他们现在已经有能力为让子女上大学，接受更好的教育。</p>
                            <p> 该地出产的咖啡：星巴克家常咖啡豆，浓缩烘培，优肯综合咖啡豆</p>
                            <p>阅读(100)评论(2)</p>
                        </div>
                        <div class="text_m">
                            <p>部落与商业文化的有机融合有助社区发展</p>
                            <p>2015年5月20日</p>
                            <p>2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。</p>
                            <p> 在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。</p>
                            <p>该地出产的咖啡：浓缩烘焙，祥龙咖啡豆阅读</p>
                            <p>阅读(100)评论(2)</p>
                        </div>
                        <div class="text_b">
                            <p> 咖啡为这个新国家的种植户带来发展的希望</p>
                            <p>2015年3月29日</p>
                            <p>东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的 医疗服务。</p>
                            <p>该地出产的咖啡：TimorLorosa'e (核心咖啡只在澳大利亚销售)</p>
                            <p>阅读(100)评论(2)</p>
                        </div>
                    </div>
            </main>
        </div>
    </body>
</html>

/* css初始化 start */
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.fl {
    float: left;
}
/* css初始化 end */
.starbucks {
    width: 1100px;
    margin: 0 auto;
}
.naver {
    margin-left: 140px;
}
[class^="list"] {
    float: left;
    background: yellow;
    padding: 6px 10px;
    margin: 75px 10px 0 10px;
    font-weight: bold;
    font-size: 14px;
}
[class="list1"] {
    background: green;
}
.left_top {
    width: 360px;
    background: yellow;
    padding: 20px;
}
.left_top h4 {
    margin-bottom: 14px;
}
.left_top p {
    line-height: 30px;
}
.left_bellow {
    width: 360px;
    background: yellow;
    padding: 20px;
    margin-top: 10px;
}
[class^="lb"] {
    float: left;
    text-align: center;
    margin: 10px 20px 0 0; 
}
[class="lb_r"] {
    margin-right: 0;
}
.right {
    width: 620px;
    background: yellow;
    padding: 20px;
    margin-left: 10px;
}
.right p {
    line-height: 22px;
}

代码实现图

starbucks.png

11060404-549c7ce5ebbcf893.png

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>圆角</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="squre">
            <p>圆角</p>
        </div>
        <div class="circle">
            <p>圆形</p>
        </div>
        <div class="shadow">
            <p>阴影</p>
        </div>
    </body>
</html>

.squre {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: green;
    text-align: center;
    line-height: 100px;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: red;
    text-align: center;
    line-height: 100px;
}
.shadow {
    width: 100px;
    height: 100px;
    background: blue;
    text-align: center;
    line-height: 100px;
    box-shadow: 10px 10px 10px gray;
}

代码实现图

圆角.png

HTML5+CSS3

一. HTML5是什么？有哪些新增标签(请举例说明)？

二.用html5标签做一个简单的页面布局

推荐阅读更多精彩内容