文档章节

HTML5页面布局前提

夏日的风
 夏日的风
发布于 2017/05/04 11:22
字数 685
阅读 4
收藏 0
点赞 0
评论 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
博文 8
码字总数 2284
作品 0
深圳
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

Safari无痕模式下,storage被禁用问题

前言 Safari开启无痕模式后,localStorage和sessionStorage为空,对其进行set操作也会报错,也就是说这种情况下,storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的...

ITgecko ⋅ 05/02 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

实现多个标签页之间通信的几种方法(sharedworker)

示例地址 prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信。我目前想到的方法有三种:使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedW...

ITgecko ⋅ 04/11 ⋅ 0

HTML5在客户端存储数据的新方法——localStorage

HTML5在客户端存储数据的新方法——localStorage localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上海网站设计用户的计算机。 ...

祈澈姑娘 ⋅ 2017/12/19 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

服务网关过滤器

过滤器作用 我们的微服务应用提供的接口就可以通过统一的API网关入口被客户端访问到了。但是,每个客户端用户请求微服务应用提供的接口时,它们的访问权限往往都需要有一定的限制,系统并不会...

明理萝 ⋅ 22分钟前 ⋅ 1

【2018.06.21学习笔记】【linux高级知识 14.1-14.3】

14.1 NFS介绍 NFS服务全称是NetWork File System:网络文件系统,最早有sun公司开发的,4.0版本由Netapp公司开发,是基于RPC远程过程调用(Remote Procedure Call)协议的服务。 14.2 NFS服务...

lgsxp ⋅ 31分钟前 ⋅ 0

Day18 vim编辑模式、命令模式与练习

编辑模式 命令模式 :nohl 不高亮显示 :x与:wq类似,如果在更改文件之后操作,两者效果一样;如果打开文件,没有任何操作; :wq会更改mtime,但是:x不会。 练习题 扩展 vim的特殊用法 ht...

杉下 ⋅ 34分钟前 ⋅ 0

Enum、EnumMap、EnumSet

1、Enum 不带参数 public enum Car { AUDI { @Override public int getPrice() { return 25000; } }, MERCEDES { ......

职业搬砖20年 ⋅ 35分钟前 ⋅ 0

Java中的锁使用与实现

1.Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源。 在Lock出现之前,java程序是靠synchronized关键字实现锁功能的,而Java SE5之后,...

ZH-JSON ⋅ 36分钟前 ⋅ 0

线程组和 ThreadLocal

前言 在上面文章中,我们从源码的角度上解析了一下线程池,并且从其 execute 方法开始把线程池中的相关执行流程过了一遍。那么接下来,我们来看一个新的关于线程的知识点:线程组。 线程组 ...

猴亮屏 ⋅ 37分钟前 ⋅ 0

相对路径和绝对路径

基本概念   文件路径就是文件在电脑中的位置,表示文件路径的方式有两种,相对路径和绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。   物理路径:物理路...

临江仙卜算子 ⋅ 41分钟前 ⋅ 0

消息队列属性及常见消息队列介绍

什么是消息队列? 消息队列是在消息的传输过程中保存消息的容器,用于接收消息并以文件的方式存储,一个队列的消息可以同时被多个消息消费者消费。分布式消息服务DMS则是分布式的队列系统,消...

中间件小哥 ⋅ 44分钟前 ⋅ 0

java程序员使用web3j进行以太坊开发详解

如何使用web3j为Java应用或Android App增加以太坊区块链支持,教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建、钱包创建、交易转账,交易与状态、智能合约开发与交互、过滤器...

笔阁 ⋅ 44分钟前 ⋅ 0

vim编辑模式、vim命令模式

vim编辑模式 使用vim filename 进入的界面是一般模式,在这个模式下虽然我们能够查看,复制,剪切,粘贴,但是不能编辑新的内容,如何能直接写入东西呢?这就需要进入编辑模式了,从一般模式...

李超小牛子 ⋅ 47分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部