H5页面基础元素

最新推荐文章于 2023-10-11 12:03:29 发布
最新推荐文章于 2023-10-11 12:03:29 发布
阅读量202 收藏
点赞数
原文链接：http://www.cnblogs.com/AlexanderZhao/p/10780746.html
版权

H5页面结构元素示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>h5结构</title>
</head>
<body>
    <header>
        <h1>网页标题</h1>
        <h2>次级标题</h2>
        <h4>提示信息</h4>
    </header>
    <div id="container">
        <nav>
            <h3>导航</h3>
            <a href="#">链接1</a>
            <a href="#">链接2</a>
            <a href="#">链接3</a>
        </nav>
        <section>
            <article>
                <header>
                    <h1>文章标题</h1>
                </header>
                <p>文章内容。。。</p>
                <footer>
                    <h2>文章注脚</h2>
                </footer>
            </article>
        </section>
        <aside>
            <h3>相关内容</h3>
            <p>相关辅助信息或者服务...</p>
        </aside>
        <footer>
            <h2>页脚</h2>
        </footer>
    </div>
</body>
</html>

style.css

body {
    background-color: #CCCCCC;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    margin: 0px auto;
    max-width: 900px;
    border: solid;
    border-color: #FFFFFF;
}

header {
    background-color: #F47D31;
    display: block;
    color: #FFFFFF;
    text-align: center;
}

header h2 {
    margin: 0px;
    color: #FFFFFF;
}

h1 {
    font-size: 72px;
    margin: 0px;
}

h2 {
    font-size: 24px;
    margin: 0px;
    text-align: center;
    color: #F47D31;
}

h3 {
    font-size: 18px;
    margin: 0px;
    text-align: center;
    color: #F47D31;
}

h4 {
    color: #F47D31;
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 20px #888;
    -webkit-transform: rotate(-45deg);
    -moz-box-shadow: 2px 2px 20px #888;
    -moz-transform: rotate(-45deg);
    position: absolute;
    padding: 0px 150px;
    top: 50px;
    left: -120px;
    text-align: center;
}

nav {
    display: block;
    width: 25%;
    float: left;
}

nav a:link,
nav a:visited {
    display: block;
    border-bottom: 3px solid #fff;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 5px;
}

nav a:hover {
    color: white;
    background-color: #F47D31;
}

nav h3 {
    margin: 15px;
    color: white;
}

#container {
    background-color: #888;
}

section {
    display: block;
    width: 50%;
    float: left;
}

article {
    background-color: #eee;
    display: block;
    margin: 10px;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 20px #888;
    -webkit-transform: rotate(-10deg);
    -moz-box-shadow: 2px 2px 20px #888;
    -moz-transform: rotate(-10deg);
}

article header {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
}

article footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
}

article h1 {
    font-size: 18px;
}

aside {
    display: block;
    width: 25%;
    float: left;
}

aside h3 {
    margin: 15px;
    color: white;
}

aside p {
    margin: 15px;
    color: white;
    font-weight: bold;
    font-style: italic;
}

footer {
    clear: both;
    display: block;
    background-color: #F47D31;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}

footer h2 {
    font-size: 14px;
    color: white;
}

/* links */
a {
    color: #F47D31;
}

a:hover {
    text-decoration: underline;
}

740100-20190427221924891-1541389230.jpg

转载于:https://www.cnblogs.com/AlexanderZhao/p/10780746.html

dianbian4042
关注
H5（1）H5页面的新增元素的介绍和使用
weixin_40693717的博客
01-14 1251
1、H5并不是新的语言，而是Html语言的第五次重大修改-版本 2、支持：所有主流浏览器都支付H5（Chrome，firefox，safari...）.IE9及以上支持H5，但是Ie8及以下不支持H5 3、改变用户与文档的交互方式：多媒体：video、audio、canves 4、增加了其它的新特性：语义特性、本地存储特性、网页多媒体、二维三维、特效（过度、动画） 5、相对于H4: （1...
H5的页面元素
qq_38844939的博客
08-31 1206
details元素与summary元素 details语义：详情 summary语义：概要，摘要 details元素可以实现类似显示/隐藏的功能，summary用于显示details的标题或者间接 注意：（1）如果details下面没有summary元素，浏览器会自动添加，同时内容是“详细信息”。  （2）details默认是关闭状态的，我们可以通过设置open属性让他打开。    
h5基础
xuhan97的博客
11-01 476
选择器 1.类选择器 通过给标签元素起一个classname类名的方式 在编写样式时 用类名来和获取该元素 .div1{ width: 100px; height: 100px; background-color: red; 我是div1 2.id选择器 元素起一个id名用来获取该元素设置样式使用 一个元素可
前端——HTML5的基本元素和属性
nO0b
09-18 2371
HTML5保留的基本元素有如下几个： &lt;!--...--&gt;注释 &lt;html&gt;根元素，允许省略 &lt;head&gt;页面头部分，允许省略 &lt;title&gt;页面标题 &lt;body&gt;页面主体部分，可指定各种通用属性和事件属性 &lt;h1&gt;到&lt;h6&gt;标题从大到小 &lt;p&gt;段落 &lt;br
鲁班H5页面生成工具源码
最新发布
12-13
这款工具的源码提供了丰富的功能和自定义选项，使得开发者能够快速构建出具有动态效果和交互性的H5页面。源码中的关键知识点主要包括以下几个方面： 1. **HTML5基础**：理解HTML5的基本结构、元素和属性是使用此...
vue写h5页面的方法总结
11-28
在H5页面开发中，可以创建组件来封装重复使用的UI元素。 6. **响应式设计**： 利用Vue.js的响应式数据绑定和计算属性，我们可以轻松地创建响应式界面。结合媒体查询（Media Queries）和Vue.js的条件渲染，可以实现...
APP下载H5页面纯静态html前端模板_静态照片会动的软件
12-04
标题中的“APP下载H5页面纯静态html前端模板”指的是一个用于展示应用程序（APP）下载信息的网页模板，该模板完全基于HTML静态语言构建。在Web开发中，H5通常是指HTML5，这是一种最新的超文本标记语言标准，具有更...
免费H5页面制作,微信h5页面,制作工具源码.rar
05-25
标题中的“免费H5页面制作,微信h5页面,制作工具源码.rar”指的是一个用于创建H5页面的开源项目，特别适用于制作适应微信环境的H5页面。这个压缩包包含的是该工具的源代码，方便开发者进行定制和二次开发。 H5...
h5页面模版源码
03-22
H5页面模板通常会采用响应式设计，确保页面在不同设备（如手机、平板、桌面电脑）上都能自适应显示。这主要通过媒体查询（Media Queries）和百分比布局来实现，使页面布局和样式可以根据屏幕尺寸变化。 3. **CSS3...
HTML5入门学习笔记——二、HTML5页面元素及属性
qq_61562251的博客
06-04 428
3、spellcheck属性——主要针对input元素与textarea文本输入框进行拼写和语法检查：true、false。5、class属性、id属性——定义该元素的类名、id名，其他属性可以进行定义（class可以多个，id只能一个）4、contenteditable属性——是否可编辑元素的内容：true、false。1、draggable属性——是否可拖动：true、false。2、hidden属性——是否隐藏改元素：true、false。
html5网页构成要素有哪些,网页界面的构成要素
weixin_29250403的博客
06-11 1638
在互联网上浏览时，所见到的那些风格各异的网页给浏览者带来的感受是不尽相同的。有的简洁明快，有的柔和雅致，有的活力四射，有的含蓄沉稳。当然，也有些网页因设计不当，给人以杂乱、无序、莫名其妙的感觉。但无论网页是何种类型、何种风格，设计精妙还是平庸，从网页界面的构成要素来讲，基本上都是一致的。我们平常看到的报纸、杂志等传统媒体，都是由两种元素构成的，即文字与图形。网页作为一新兴媒体．可以说是书报杂志的电...
html5网页构成要素有哪些,网页的基本构成元素有哪些
weixin_39774556的博客
06-15 2491
在设计网页时，我们应该组织页面的基本元素，同时配合一些特效，形成一个色彩丰富的网页。网页由文本，图像和超链接组成。内容是网站的灵魂，文本是网站灵魂的物质基础。文本和图像是网站上使用最广泛的。具有丰富内容的网站将不可避免地使用大量文本和图像，然后将超链接应用于文本和图像，以使这些文本和图像“生动”。1.文本元素文本是网页的主体。虽然flash和图形文本可以达到同样的效果，即使超出了纯文本的效果，We...
掌握html5的基本页面元素,静态HTML/HTML5的结构和基本元素（一）
weixin_30114439的博客
06-04 191
首先我们理解下思路开发思路。第一步，我们先只考虑一个静态的前端网页。假设：一、先不管数据从哪里来的，假定我们已经有相应的数据(例如菜单名、表格数据等)，我们需要使用什么样的元素；二、不要考虑样式问题，只简单考虑，在标准文档流下，语义是否合理，页面是否会正常呈现，能否完成基本的数据呈现功能。这种情况下的页面怎么开发。第二步， 页面元素的布局如何实现，样式怎么设计更美观，甚至可以设定几套样式，可以自定...
【HTML5】主要的元素
Super_Tyr的博客
01-06 556
基于上一篇，我个人是不太喜欢长文的，但是呢，说清楚一个东西，还想文章短小是矛盾的，我尽力克服，写出长的清楚的应该是重要的，起码我自己看起来要清楚。再者，为啥html5标签要认真学学呢？我是这样想的，一个合理的网页骨架，然后搭配css3，应该可能是最高效，最好用的一种最佳实践吧 1、Html5新增的主体结构元素 article元素 语义标签自然让人想到语义代表的内容就放在该语义标签下，不...
六大H5常用结构元素
zy1992As的博客
10-11 787
例如，新闻的详情页有一篇文章，该文章有自己的标题和内容，因此可以使用article标签标注，如果该新闻内容太长，分好多段落，每段都有自己的小标题，这时候就可以使用section标签把段落标注起来。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签，如header标签、nav标签、article标签等，具体介绍如下。需要注意的，在上面的示例代码中还缺少主体内容。nav标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。
HTML5边框的设置（border）
热门推荐
恬静的男子的博客
10-23 3万+
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：
盒子模型
December_shi的博客
09-13 463
盒子模型（CSS重点） 1.盒子边框（border） 语法： border:border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式 border-color 边框颜色 边框的样式： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线（最为常用的） dashed：边框为虚线 dotted：边框为点线 2.
H5页面属性和元素
xiaobozhu的博客
12-16 5202
H5常用页面属性与元素        大家都知道HTML5添加了很多新的属性和元素，那我们常常用到的有哪些呢？我为您整理了一下我们常用的元素，仅供参考，注意下面分类中并非全是新加入元素。 l        文档头部元素 base:页面上所有连接默认地址或默认目标 meta:页面元信息，针对搜索引擎和更新频度的描述和关键词 title:标题 link：文档与资源之间的关系 style:
Javascript实现高效H5页面设计源码集合
H5页面设计中常用的HTML5新特性包括语义化标签、表单元素、绘图API（Canvas）、多媒体（Audio、Video）等，CSS3则提供了更多样式和动画方面的支持。 3. 项目结构分析 本项目中包含的文件类型非常丰富，每个类型的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值