01、HTML5学习笔记:网页布局、新添加元素

HTML5的应用场景:
酷炫网站制作、游戏开发、移动开发、应用开发
HTML5新添结构元素:
header:页面或页面中某一个区块的页眉,通常是一些引导和导航
nav:可以作为页面导航的链接组
section:页面中的一个内容区块,通常由内容及其标题组成
article:代表一个独立的、完整的相关内容块,可独立页面其他内容适用
aside:非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容
footer:页面或页面中某一区块的脚注

使用工具:sublime
网页布局案例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .box{
            width: 500px;
            height: 600px;
            border: 1px #ccc solid;
            margin: 30px auto;
        }
        .header{
            width: 500px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: pink;
        }
        .main{
            width: 500px;
            height: 520px;
        }
        .footer{
            width: 500px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: pink;
        }
        .nav{
            width: 500px;
            height: 30px;
            line-height: 30px;
            background: lightgreen;
        }
        .container{
            width: 500px;
            height: 490px;
        }
        .aside{
            width: 150px;
            height: 490px;
            float: left;
            background: skyblue;
            text-align: center;
            line-height:490px;
        }
        .article{
            width: 350px;
            height: 490px;
            float: left;
            text-align: center;
            background: yellow;
            line-height: 490px;
        }
    style>
head>
<body>
    <div class="box">
        <header class="header">头部header>
        <main class="main">
            <nav class="nav">导航nav>
            <div class="container">
                <aside class="aside">侧边栏aside>
                <article class="article">article>
            div>
        main>
        <footer class="footer">底部footer>
    div>
body>
html>

效果图:
01、HTML5学习笔记:网页布局、新添加元素_第1张图片

video:定义视频,如电影片段或其他视频流
audio:定义音频,如音乐或其他音频流
canvas:定义图形
datalist:定义可选数据的列表
time:标签定义日期或时间
mark:在视觉上向用户呈现那些需要突出的文字
网页元素:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <h4>可选数据列表h4>
    <input list="city">
    <datalist id="city">
        <option value="北京">北京option>
        <option value="上海">上海option>
        <option value="广州">广州option>
        <option value="深圳">深圳option>
        <option value="南京">南京option>
        <option value="杭州">杭州option>
    datalist>
    <h4>时间标签h4>
    <p>今天我<time>8:00time>起床p>
    <h4>mark标签h4>
    <p><mark>CSDNmark>,学院学习p>
body>
html>

效果图:
01、HTML5学习笔记:网页布局、新添加元素_第2张图片

新增全局属性
contentEditable:规定是否允许用户编辑内容
designMode:规定整个页面是否可编辑
hidden:规定对元素进行隐藏
spellcheck:规定是否必须对元素进行拼写或语法检查
tabindex:规定元素的tab键迭制次序


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <h4>contenteditableh4>
    <p contenteditable="true">这个段落应该允许被编辑p>
    <h4>designModeh4>
     <p>这个段落应该允许被编辑p>
     <p>这个段落应该允许被编辑p>
     <p>这个段落应该允许被编辑p>
     <h4>hiddenh4>
     <p hidden>这个段落应该被隐藏p>
     <h4>spellcheckh4>
     <p contenteditable="true" spellcheck="true">这个段落可以进行语法检查p>
     <h4>tabindexh4>
     <p><a href="" tabindex="2">我是第二个a>p>
     <p><a href="" tabindex="1">我是第一个a>p>
     <p><a href="" tabindex="3">我是第三个a>p>
body>
html>
<script>
    //document.designMode="on";//可以被编辑
    document.designMode="off"://不可以被编辑
script>

你可能感兴趣的:(HTML系列,html5)