简单html5的介绍

最新推荐文章于 2023-04-17 14:00:59 发布
最新推荐文章于 2023-04-17 14:00:59 发布
阅读量953 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh323093/article/details/78395182
版权
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>影楼</title>
 <link href="css/stye.css" rel="stylesheet">
 </head>
 <body>
 <div class="wrap">
 <header class="clesr" style="overflow: hidden">
 <div class="logo"><img src="img/logo.png"></div>
 <div class="tel">
 <span>全国免费热线</span><br/>
 <p>400-6666-6666</p>
 </div>
 </header>
 <ul class="nav clear">
 <li><a href="#">网站首页</a></li>
 <li><a href="#">关于我们</a></li>
 <li><a href="#">作品展示</a></li>
 <li><a href="#">最新活动</a></li>
 <li><a href="#">商品特辑</a></li>
 <li><a href="#">新闻动态</a></li>
 <li><a href="#">联系我们</a></li>
 <li><a href="#">在线留言</a></li>
 </ul>
 <div class="banner">
 <img src="img/banner.gif">
 </div>
 <footer>
 <p>最新活动 ACTIVITY</p>
 </footer>
 <div class="xiezi">某某婚纱摄影，庄主品牌20年，我闷骚一群80后的团队，让您的精彩无处不在</div>
 <div class="xiezi2">Charm wedding photo graphy club-the door to happiness lifetime of happiness very outset</div>
 <div class="responsive_11">
 <img src="img/responsive_11.gif">
 <img src="img/responsive_13.gif">
 </div>
 <div class="phone">
 <img src="img/responsive_19.gif">
 <img src="img/responsive_21.gif">
 <img src="img/responsive_16.gif">
 <img src="img/responsive_18.gif">
 </div>
 <div class="data">
 <p>最新动态 NEWS</p>
 </div>
 <div class="des">魅力婚纱摄影会所-通往幸福的大门一辈子的幸福，一开始就幸福无比</div>
 <div class="des2">Charm wedding photo graphy club-the door to happiness lifetime of happiness very outset</div>
 <div class="divone">
 <div class="big">
 <p class="p1">大师在现场:顶级婚礼摄影师抵京</p>
 <p class="p2">2017-08-30</p>
 <p class="p3">国际在线8月30日报道 今日，李孝利在社交网站以"My wedding"</p>
 <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p>
 </div>
 <div class="right">
 <p class="p1">李孝利公开婚礼照片 父亲献唱婚礼现场</p>
 <p class="p2">2017-08-30</p>
 <p class="p3">国际在线8月30日报道 今日，李孝利在社交网站以"My wedding"</p>
 <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p>
 </div>
 </div>
 <div class="divtwo">
 <div class="big2">
 <p class="p1">第三届“热带天堂杯”全国摄影大赛颁奖</p>
 <p class="p2">2017-08-30</p>
 <p class="p3">国际在线8月30日报道 今日，李孝利在社交网站以"My wedding"</p>
 <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p>
 </div>
 <div class="right2">
 <p class="p1">2017“百里画廊，养生临安”全省旅游摄影大赛</p>
 <p class="p2">2017-08-30</p>
 <p class="p3">国际在线8月30日报道 今日，李孝利在社交网站以"My wedding"</p>
 <p class="p4">为主题，公开了和李尚顺于去年9月1号在济州岛完婚</p>
 </div>
 </div>
 <div class="img2">
 <p></p>
 <img src="img/bot_03.png" class="tupian">
 </div>
 <div class="bt">
 <p>魅力摄影 | 精心丽质</p>
 </div>
 <div class="pic3">
 <img src="img/bot_07.png" class="pp1">
 <img src="img/bot_09.png" class="pp2">
 <img src="img/bot_11.png" class="pp3">
 </div>
 </div>
 </body>
 

</html>




style文件


*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.clear:after{
    content: "\200B";
    display: block;
    width: 0;
    height: 0;
    clear: both;
}
.wrap{
    width: 1100px;
    margin: 0 auto;
}
.logo{
    float: left;
    margin-top: 18px;
    margin-bottom: 24px;
}
.tel{
    float: right;
    width: 246px;
    height: 70px;
    padding-left: 20px;
    background: url("../img/tel.png") no-repeat;
}
.tel span{
    color: #666;
    font-size: 12px;
}
.tel p{
    margin-top: 10px;
}
.nav li{
    float:left;
    width: 125px;
    height: 18px;
    margin: 4px;
    border-left: 1px dashed #999;
    border-right: 1px dashed #999;
    text-align: center;
    line-height: 18px;
}
.nav li a{
    color: #999;
}
.banner{
    margin-top: 54px;
}
footer{
    text-align: center;
    color: #f00;
    line-height: 42px;
}
.xiezi{
    font-size: 15px;
    color: #999999;
    margin-top: 30px;
    text-align: center;
}
.xiezi2{
    font-size: 15px;
    color: #999999;
    margin-top: 15px;
    text-align: center;
}
.responsive_11{
    margin-top: 40px;
}
.phone{
    margin-top: 30px;
}
.data{
    text-align: center;
    color: #ff479b;
    margin-top: 15px;
}
.des{
    margin-top: 30px;
    font-size: 15px;
    text-align: center;
    color: #999999;
}
.des2{
    margin-top: 15px;
    font-size: 15px;
    text-align: center;
    color: #999999;
}
.big{
    background: gainsboro;
    width: 540px;
    height: 120px;
    display: block;
    float: left;
    margin-top: 15px;
}
.p1{
    font-size: 15px;
}
.p2{
    font-size: 15px;
    margin-top: 5px;
    color: #999999;
}
.p3{
    font-size: 15px;
    margin-top: 5px;
    color: #999999;
}
.p4{
    font-size: 15px;
    margin-top: 5px;
    color: #999999;
}
.divone{
    width: 1102px;
    height: 120px;
}
.right{
    margin-left: 22px;
    background: gainsboro;
    width: 540px;
    height: 120px;
    display: block;
    float: left;
    margin-top: 15px;
}
.big2{
    background: gainsboro;
    width: 540px;
    height: 120px;
    display: block;
    float: left;
    margin-top: 15px;
}
.divtwo{
    margin-top: 22px;
    width: 1102px;
    height: 120px;
}
.right2{
    margin-left: 22px;
    background: gainsboro;
    width: 540px;
    height: 120px;
    display: block;
    float: left;
    margin-top: 15px;
}
.img2{
    position: relative;
    margin-top: 60px;
    text-align: center;
}
.tupian{
    text-align: center;
    position: absolute;
    left: 50%;
    top: -20px;
    background: #ffffff;
    margin-left: -180px;
}
.img2 p{
    width: 100%;
    height:1px;
    background: darkgrey;
}
.bt{
    font-size: 17px;
    color: #666666;
    text-align: center;
    margin-top: 35px;
}
.pic3{
    margin-top: 15px;
    text-align: center;
}
.pp2{
    margin-left: 20px;
}
.pp3{
    margin-left: 20px;
}

gh323093
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 简介及基础教程
Glenseeds的博客
03-19 971
学习 HTML 新手教程是入门前端开发的基础。对于想要深入学习前端开发的人来说，需要继续学习和掌握其他相关技术和工具。
html5 简单知识
JBVHG的博客
05-08 415
HTML 简介 HTML 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
HTML5详细介绍及使用
热门推荐
小仙儿
12-03 2万+
HTML5详细介绍及使用 一、HTML5简介 1、HMTL5的定义 在W3C中的定义：HTML 5 是下一代的 HTML，设计HTML5最初目的是为了在移动设备上支持多媒体。HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。万维网不等同于互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网...
HTML5简介
FOR.GET
09-16 1871
1 HTML5 简介 HTML是一种描述网页的语言，是一种标记语言，是制作网页的基础语言。 HTML的语法特点： 编写简单：无需任何编程经验。 标记数目有限 语法较弱：不一定需要对用的标记来结束，如就不一定需要来结束 HTML最基本的语法是<标记符></标记符>，通常是成对出现的，一个开始标记和一个结束标记。 2 HTML5 文档基本结构 HTML5文件的基本结构：一个完整的HTML5文件包括标题、段落、列表、表格、绘制的图形和各种嵌入对象，统称为HTML元素。
HTML5简介与标签
qq_43457781的博客
04-17 1284
HTML基础学习
HTML5WebSocket技术介绍
01-31
WebSocket是html5规范新引入的功能，用于解决浏览器与后台服务器双向通讯的问题，使用WebSocket技术，后台可以随时向前端推送消息，以保证前后台状态统一，在传统的无状态HTTP协议中，这是“无法做到”的。...
简单自我介绍HTML版本
06-30
在HTML5这个版本中，语法更加简洁且功能更加强大，使得网页开发变得更加友好。 HTML5引入了许多新特性，如： 1. **离线存储**（Offline Storage）：通过`<html>`标签内的`manifest`属性，可以缓存网页资源，使得...
简单介绍HTML5中的文件导入
09-28
HTML5中的文件导入是一种优化网页资源加载的技术，它允许开发者通过`<link rel="import" href="...">`标签将多个HTML、CSS、JavaScript资源打包到一个文件中，以提高页面加载速度和减少网络请求。这尤其对于处理复杂...
企业html5介绍bootstrap模板
04-02
这个"企业HTML5介绍Bootstrap模板"旨在为企业提供一个高效、快速的起点，以创建具有现代设计感和卓越用户体验的网站。 Bootstrap的核心特性包括一套精心设计的CSS样式、JavaScript组件以及对HTML5的支持。这些特性...
html5介绍.ppt
12-24
ppt格式的html5 介绍，非常形象、生动的资料
HTML5概述 - 语义化标签
前端队长Daotin
11-20 6572
一、HTML5 简介1、什么是 HTML5HTML5 不是一门新的语言，而是我们之前学习的 HTML 的第五次重大修改版本。2、HTML 的发展历史•超文本标记语言（第一版，不叫 HTML 1.0）——在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）；•HTML 2.0——1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 ...
一、HTML5简介
并不傻的袍子
12-16 1003
一、网页 （一）什么是网页 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm 或.html后缀结尾的艾件，因此将其俗称为HTML文件。 （二）什么是HTML HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。 （..
HTML5 简介
梁辰兴的博客
03-31 363
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学。HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
html5简介
WJLSH123的博客
07-26 799
h5简介 ​ <!– ​ ###Html5 HTML5 是定义HTML标准的最新的版本。 该术语表示两个不同的概念： ​ 它是一个新版本的HTML语言，具有新的元素，属性和行为， ​ 它有更大的技术集，允许更多样化和强大的网站和应用程序。 ​ 这个集合有时称为HTML5和朋友，通常缩写为HTML5。 ​ HTML5 约等于 HTML + CSS + JS ​ ###Html5优势 ​ 跨平台:唯一一个通吃PC MAC Ip
HTML5介绍
m0_62038362的博客
11-14 1711
什么是HTML5 HTML5是对HTML标准的第五次修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML发展历程 HTML1.0 实际上应该没有HTML1，所谓的HTML1是1993年IETF(
HTML5 介绍
m0_65511735的博客
06-27 411
html
HTML5 详细介绍 及应用实例
绝对秋香
10-27 986
 HTML5 概况 什么是 HTML5   HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。 ...
家乡介绍html代码简单
最新发布
05-31
好的，以下是一个简单的家乡介绍网站的 HTML 代码，包含了至少五个页面： 1. 主页（index.html）： ```html <!DOCTYPE html> <html> 家乡介绍 欢迎来到我的家乡 <a href="about.html">关于我们 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值