文档章节

HTML5页面布局前提

夏日的风
 夏日的风
发布于 2017/05/04 11:22
字数 685
阅读 5
收藏 0

一、语义元素概述

1、header:(可以允许多个)。

2、footer:章节的末尾部分(可以允许多个)。

3、nav:构建导航,显示导航链接。

4、aside:定义一个页面的区域,装载非正文类的内容,如广告侧边栏等。

5、article:用来显示一块独立的文章内容。

6、section:定义为文档中的节,如每一章节等。

7、hgroup:定义为对网页或区段的标题元素进行组合,如H1~H6。

8、audio:音频内容。

9、canvas:画布功能。

10、video:视频内容。

...等元素。

二、本地存储

    本地储存的两种存储类型API接口:sessionStorage和localStorage。

    sessionStorage:在会话期间内有效。   localStorage:存储在本地,并且永久储存,除非对其执行删除。

三、部分表单属性

    1.placeholder:作用于文本框处于未输入状态和内容为空时的提示内容。

    2.autofocus:指定控件自动获取焦点。

    3.required:必填属性。

    4.tel:供用户舒服电话号码的文本框。

四、部分选择器

    1.before:在某个元素之前插入内容,一般用于清除浮动。

        语法:content:"内容";(必须添加这个)

    2.after:在某个元素之后插入内容。

        语法:content:"内容";(必须添加这个)

    3.first-child:指定元素列表中的第一个元素的样式

    4.last-child:指定元素列表中的最后一个元素的样式

    5.nth-child 和 nth-last-child:指定某个元素的样式或者从后起某个元素的样式。

五、阴影

    1.box-shadow:让元素具有阴影效果

        语法:box-shadow:  x y z color;(X轴偏移量,Y轴偏移量,发散程度,颜色)

    2.text-shadow:设置文本内容的阴影效果或模糊效果

        语法:text-shadow:x y z color;(X轴偏移量,Y轴偏移量,发散程度,颜色)

六、背景

    1.background-size:设置背景图像的大小

    2.background:

        (1)设置多重背景:background: url(img1.png) no-repeat top center,

                                                    url(img2.png) no-repeat top center;

        (2)设置渐变色:background: linear-gradient(to left, #f80 10%, #ff0 100%);

    3.圆角边框:border-radius: 0 0 0 0;

七、适应移动设备

    1.viewport:允许开发者创建一个虚拟窗口,并自定义其窗口的大小或缩放功能。

        语法:<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

        解释:虚拟宽度width为窗口宽度,初始缩放比例大小为1倍,同事不允许用户使用手动缩放功能。

    2.media:(媒体查询)

        语法:(在所有media前面加上一个@)

                (1)media screen and (max-width:600px){...}(屏幕像素小于600px执行)

                (2)media screen and (min-width:600px){...}(屏幕像素大于600px执行)

                (3)media screen and (min-width:600px) and (max-width:760px){...}(屏幕像素大小在600px~700px执行)

© 著作权归作者所有

共有 人打赏支持
下一篇: 初入博客
夏日的风
粉丝 1
博文 10
码字总数 2815
作品 0
深圳
私信 提问
HTML5下TABLE标签是否没什么用处了

在HTML5以前经常使用TABLE标签来进行网页排版和布局,但发现在HTML5下好像已很少再使用这个标签来布局网页内容了。那么请教一下大家,在HTML5下使用什么标签进行页面内容的排版和布局呢?...

wlrjgzs
2016/03/24
1K
6
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的新标签元素有: <header>定义页面或区段的头部; <footer>定义页面或区段的尾部; <nav>定义页面或区段的导航区域; <section>页面的逻辑区域或内容组合; <article>定义正文或一篇完...

哈狮子
2015/01/24
0
0
11月5日HTML5小白入门培训公开课之腾讯课堂页面布局篇

今天扣丁学堂HTML5培训直播公开课给大家介绍一下关于一个腾讯课堂页面布局篇的详细介绍,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧。 腾讯课堂直播地址:https://ke.qq.c...

扣丁学堂
11/05
0
0
使用 HTML5 时如何改进移动 Web 应用开发

因为 HTML5 有易于维护,更好的互动性,更快的开发等优点,被越来越多的应用在移动 Web 应用程序的开发中。HTML5 是一种标记语言,与 Javascript 和 CSS 一起,构成了每个开发者的核心技术,...

oschina
2015/07/01
5.6K
28
HTML5定稿一周年,谈谈我与HTML5

原来学习的HTML5&CSS3只是知道了一些Html5独有的标签和CSS3新添加的特性,我以为这就是HTML5了。后来当我和教研主任聊天中发现原来我所学习的方法——利用表格布局原来是几年前的老套路了。后...

devops1024
06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新手也能看懂,消息队列其实很简单

该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 16k)。地址:https://github.com/Snailclimb/JavaGuide. 本文内容思维导图: 消息...

阿里云官方博客
16分钟前
1
0
如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
今天
9
0
nginx中部署vue打包后的静态文件

如何在nginx中部署静态资源就不描述了, 请看我的这篇博客 将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢. 1 项目中router的mode 路由的mode要为h...

克虏伯
今天
13
0
JS容易理解错误的地方

在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {};2 function sayHello(hi) { ...

器石_
今天
9
0
Java开发学习--MongoDB

之前只学过sql,第一次使用非关系型数据库。以前对于关系型数据库与非关系型数据库的概念很模糊,通过这次的学习对这两者有了一个清晰的概念。 主键 在MongoDB中,主键名叫"_id",如果在生成...

微笑向暖wx
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部