html简单代码模板(html5简单网页制作代码)

admin 338 0

很多朋友对于html简单代码模板和html5简单网页制作代码不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!

一、测试html代码

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<title>whatsns专业级开源内容付费php问答系统</title>

<meta name="description" content="whatsns是一款全面开放源码采用php+mysql技术研发的问答系统,产品端包括免费版,个人版,基础版,高级版,微信版,小程序版,APP版,个人站长和企业可以选择合适的产品端。"/>

<meta name="keywords" content="whatsns,问答系统,php问答系统,语音问答系统,内容付费问答系统,采集问答系统"/>

<meta name="author" content="whatsns Team"/>

<meta name="copyright" content="www.whatsns.com"/>

<link href="./dist/css/main.css" rel="stylesheet">

<link href="./dist/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<script src="./dist/js/jquery-1.11.3.min.js" type="text/javascript"></script>

<script src="./dist/js/bootstrap.js" type="text/javascript"></script>

<script src="./dist/js/ie.js" type="text/javascript"></script>

<nav class="navbar navbar-fixed-top navbar-has-shadow">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">

<span class="sr-only">折叠</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<a class="navbar-brand" href="./">

<img src="dist/images/redash-logo.svg" class="navbar-brand__img" alt="">

<div class="collapse navbar-collapse" id="navbar-collapse">

<ul class="nav navbar-nav navbar-left">

<li><a data-track="" data-track-location="header" href="./">首页</a></li>

<li><a data-track="" data-track-location="header" href="./buy.html">产品购买</a></li>

<li><a data-track="" data-track-location="header" href="./dingzhi.html">定制开发</a></li>

<li><a data-track="" data-track-location="header" href="./daili.html">代理招商</a></li>

<li><a data-track="" target="_blank" data-track-location="header" href="https://www.ask2.cn/kc/">开发配置视频教程</a></li>

<li><a data-track="" target="_blank" data-track-location="header" href="https://www.ask2.cn/cat-312">开发文档</a></li>

<li><a data-track="" target="_blank" data-track-location="header" href="https://www.ask2.cn/cat-219">配置文档</a></li>

<ul class="nav navbar-nav navbar-right">

<li><a data-track="" data-track-location="header" target="_blank" href="https://www.ask2.cn/">社区交流</a></li>

<li><a data-track="" data-track-location="header" track-event="Clicked Get Started"  target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=617035918&site=qq&menu=yes" class="btn btn-primary navbar-btn">购买咨询</a></li>

<div class="jumbotron masthead">

<h2>极速安装,配置简单,功能强大,二开方便</h2>

<h2>集问答,文章,课程,采集,SEO优化,运营功能于一体的开源系统</h2>

<h2>适合网站类型:个人流量网站,企业部门交流网站,企业知识库网站,邀请入住型网站,内容付费型网站</h2>

<p class="masthead-button-links">

<a class="btn btn-lg btnsource btn-shadow" href="https://gitee.com/huangyouzhi/whatsns" target="_blank" role="button">开源版V4</a>

<a class="btn btn-lg btnshangye btn-shadow" href="./buy.html" target="_blank" role="button">商业授权</a>

<p class="qqgroup hidden-xs">

<a class="bgtouming" target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=ba66b440d8042da9fe78d78a4e7f67369dc79ddf7cdb47827b527d8a25c8cdb2"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="ask2问答系统(whatsns)" title="ask2问答系统(whatsns)"></a>

<a  class="bgtouming"  target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=f8afbaaa1e209c5892b4fb84a8bbe1ec6570153c218af0c90b8b5ba2e7a2cf6a"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="ask2问答系统官方群二" title="ask2问答系统官方群二"></a>

<p class="qqgroup hidden-md hidden-lg hidden-sm">

<span>官方QQ群一:370431002</span><span>官方QQ群二:258722465</span>

<section class="section">

<div class="col-md-8 col-md-offset-2 text-center">

<h2 class="dtitle">为什么选择whatsns</h2>

<p  class="huitext">1、可以满足在垃圾虚拟主机运行流畅</p>

<p  class="huitext">2、傻瓜式安装,快速采集,快速SEO优化内容</p>

<p  class="huitext">3、轻松配置对接熊掌号,火车头采集,xunsearch,OSS</p>

<p  class="huitext">4、PC和wap模板分离自由组合终端展示效果</p>

<p  class="huitext">5、网站从注册,登录,防灌水,内容优化,内容采集挖掘,网站运营等方方面面为站长深度定制细节</p>

<p  class="huitext">6、超强大的功能配置,自由开关前端功能</p>

<p  class="huitext">7、深度挖掘问答,文章,课程内容付费,让站长没有难赚的钱</p>

<p  class="huitext">8、解决内容付费终端支付问题,您可以在PC,wap和微信端,APP中动态调用不同底层支付方案解决内容付费问题<label class="label-danger">独家</label></p>

<p  class="huitext">9、支持微信语音回答,自动转码,任何终端可以收听语音回答<label class="label-danger">独家</label></p>

<p  class="huitext">10、性价比超值,货比三家,市面上没有任何一家问答+课程的开源系统能和我们比,有的一个终端(要么只有pc模板,要么只有wap模板)15000多人民币,有的只有问答模块,一套就是20000多人民币只包含卖系统钱,技术支持单算,选择我们是花一份钱买多个终端可用的产品,而且功能都碾压其他家。</p>

<section class="section bghui">

<div class="col-md-8 col-md-offset-2 text-center">

<h2 class="dtitle">使用whatsns如何实现盈利</h2>

<p class="huitext">可以通过广告获得收入,用户充值现金和财富值,付费看答案,付费看文章内容,优质回答和文章被打赏,付费咨询专家,现金悬赏和财富值悬赏问题,用户可以付费购买课程,办理VIP打折购买课程,拥有偷看卡免费看答案。平台可以设置分成比例,提现可收取手续费,付费看回答可分成,付费咨询可分成,悬赏问题采纳可分成。</p>

<section class="section section--small get-started">

<div class="row get-started--signup text-center">

<div class="col-sm-12 p-0">

<h3 class="mb-xs">成为商业客户,享受私人服务,一对一安装程序,程序问题及时解决。</h3>

<a data-track="" data-track-location="get-started" data-track-event="Clicked Get Started" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=617035918&site=qq&menu=yes" class="btn btn-lg btn-primary">点击购买咨询</a>

<p class="qqgroup hidden-md hidden-lg hidden-sm mar-t-1">

如果不能一键唤起咨询可加QQ:617035918

<section class="section">

<div class="col-md-8 col-md-offset-2 text-center">

<h1 class="">合作伙伴</h1>

<p>历经多年的技术研究,知名国企,上市公司,国内五百强企业,以及其它优秀的企业和个人站长在使用我们的系统</p>

<section class="section">

<img src="./dist/images/users-list-strip.png" width="100%" class="customer-logoshow">

<div class="col-xs-4 col-md-2 col-sm-3 footer__item">

<h3 class="footer__title">网站相关</h3>

<ul class="footer__list">

<li class="footer__list-item">

<a data-track="" data-track-location="footer" href="./aboutus.html" class="footer__list-link">关于我们</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" href="dingzhi.html" class="footer__list-link">定制开发</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" href="xuke.html" class="footer__list-link">授权说明</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://www.ask2.cn/c-249.html" class="footer__list-link">问题建议</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" href="./contactus.html" class="footer__list-link">联系我们</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://gitee.com/huangyouzhi/whatsns" class="footer__list-link">码云地址</a>

        </div>

        <div class="col-xs-4 col-md-2 col-sm-3 footer__item">

<h3 class="footer__title">友情链接</h3>

<ul class="footer__list">

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank" href="https://www.ask2.cn/" class="footer__list-link">产品社区</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank" href="http://down.admin5.com/php/132164.html" class="footer__list-link">A5源码</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://www.yuanshichang.com/" class="footer__list-link">源市场</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="http://www.itiyan.net/" class="footer__list-link">云帆互联</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://zixun.ask2.cn/" class="footer__list-link">产品演示</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://www.bt.cn/" class="footer__list-link">宝塔面板</a>

        </div>

        <div class="col-xs-4 col-md-2 col-sm-3 footer__item">

<h3 class="footer__title">帮助</h3>

<ul class="footer__list">

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://www.ask2.cn/tag/weijingtai.html" class="footer__list-link">伪静态配置</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank" href="https://www.ask2.cn/q-314633.html" class="footer__list-link">水印设置</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://www.ask2.cn/tag/youxiangyoujianpeizhi.html" class="footer__list-link">邮箱配置</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://www.ask2.cn/tags.html" class="footer__list-link">标签管理</a>

<li class="footer__list-item">

<a data-track="" data-track-location="footer" target="_blank"  href="https://www.ask2.cn/cat-219.html" class="footer__list-link">使用教程</a>

        </div>

        <div class="col-lg-4 col-lg-offset-2 col-md-5 col-md-offset-1 col-sm-3 footer__item--other text-right">

<ul class="footer__list footer__list--social">

<li class="footer__list-item">

<a href="https://gitee.com/huangyouzhi/whatsns" target="_blank" class="footer__list-link">

<i class="fa fa-github-square" aria-hidden="true"></i>

<li class="footer__list-item">

<a href="./wechatinfo.html" class="footer__list-link">

<i class="fa fa-wechat" aria-hidden="true"></i>

          <p>

<span data-track="" data-track-location="footer"  class="footer__list-link">Powered by WHATSNS V4</span>⚬

            <span data-track="" data-track-location="footer"  class="footer__list-link">京ICP备15032243号-3</span>

      </div>

    </div>

<a href="javascript:;" id="backToTop" onclick="backToTop(10)" style="display:block;"></a>

<script src="./dist/js/common.js" type="text/javascript"></script>

<script src="./dist/js/vendors-270e81adaf.js" type="text/javascript"></script>

<script src="./dist/js/main.js" type="text/javascript"></script>

var bp= document.createElement('script');

var curProtocol= window.location.protocol.split(':')[0];

if(curProtocol==='https'){

bp.src='https://zz.bdstatic.com/linksubmit/push.js';

bp.src='http://push.zhanzhang.baidu.com/push.js';

var s= document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(bp, s);

二、求html静态网页源码

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

background:#e9fbff url(img/self.jpg) no-repeat bottom right;

font-size:12px;padding-right:15px;

<table align="center" cellpadding="1" cellspacing="0">

<tr><td><img src="img/banner3.jpg" border="0"/></td></tr>

<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">

<tr><td>首面</td><td>心情日记</td><td>Free</td><td>一起走到</td><td>从明天起</td><td>纸飞机</td><td>下一站</td></tr>

<table width="600px" align="center" cellpadding="0" cellspacing="1">

<td width="150px" class="chara2"><p><img src="img/selfpic.jpg" class="pic"/><br/>我的日记本</p>

<p class="con">他们彼此深信,是瞬间并发的热情让他们相遇。这样的确定是美丽的,但变幻无常更为美丽。</p>

<p><img src="img/selfpic2.jpg" class="pic"/><br/>心情轨迹</p>

<p class="con">董事长的一切都让人既羡慕又忌妒,但更让人受不了的是,有一天,上苍忽然赐给他一个神奇的礼物</p></td>

<p>我努力的抓紧世界,最后却仍被世界淘汰,如果一开始就松手,我会不那么伤心吗?你说,亲爱的孩子,世事难料,随它去吧!</p>

<p>关于童年,你记住了什么?<br>

两岁时,我拥有一只巨大的粉红猪,它总在我嚎啕大哭时逗我笑。<br>

三岁时,我骑着小木马一路摇到外婆家,它不喝水也不吃草。<br>

四岁时,我离家出走,在公车上睡着了,最后是太空超人送我回家。<br>

我真的没骗你,我通通都记得,还有照片为证。

<p>天使在地下铁的入口,<br>

和我说再见的那一年,<br>

十五岁生日的那年秋天早晨,<br>

<h4>向左走向右走</h4>

<p>They're both convinced<br>

that a sudden passion joined them.<br>

Such certainth is beautiful,<br>

but uncertainty is more beautiful still.</p>

三、使用HTML代码编辑网页模板的注意事项

良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候,我总是首先告诉他们:良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样,对不?整洁、语义化的HTML标记具有很多的优势,但却还是有很多网站使用着并不友好的标记写法。

让我们来看一些写得并不友好的HTML标记,并针对这些问题进行讨论,从而学习如何书写整洁规范的HTML标记。

注: Chris Cyier在这里使用了两个文档来进行本文的代码说明: bad code和 good code。大家学习的时候请参考着这两个文件。

我们要做到这一点,只需要按正确的步骤来做即可。没必要去讨论是否使用HTML 4.01或 XHTML 1.0,两者都对我们书写正确的代码提出了严格的要求。

但无论如何我们的代码不应该使用任何Tables表格来进行布局,所以也就没必要使用Transitional DOCTYPE.

注:所谓的DTD就是文档类型声明,简单来说,就是对特定文档所定义的一些规则,这些规则包括一系列的元素和实体的声明。XHTML文档类型有三种: STRICT(严格类型), TRANSITIONAL(过渡类型)和 FRAMESET(框架类型)。目前,我们使用最多的是TRANSITIONAL,比如本站目前也是使用 XHTML 1.0 TRANSITIONAL。如果你的HTML代码书写的还算良好,那把现有的TRANSITIONAL转为STRICT还是比较方便的。反之,也不用太急着转,个人觉得,STRICT更严谨,但用TRANSITIONAL也并没有太大影响。

2. Character set& encoding characters

在我们的《head》部份,第一件事情就是声明字符集。我们使用了UTF-8,但是把它放到了《title》后面。让我们把字符集声明移动到最上面,因为我们要让浏览器在阅读任何内容之前就应该知道以何种字符集来进行处理。

除了字符集声明的位置外,《title》中出现的奇怪字符也是需要注意的问题,比如最常用的”&“字符,我们应该使用字符实体”&“来替换它。

在书写代码的时候,缩进并不会影响网页的外观,但使用适当的缩进能使代码更具可读性,标准的缩进方法是当你开始一个新的元素时缩进一个Tab位(或几个空格)。另外,记得,关闭元素的标签与开始标签对齐。

注:一些朋友会嫌书写代码的时候缩进比较麻烦,如果仅仅是你一个人阅读这份代码,那可能没什么问题,你自己觉得OK就好。但如果是协作或你的作品是公开发布分享的,那书写漂亮的可读化性更高的代码就很有必要了。

我们有一些CSS代码已经延伸到我们的《head》部分。这是一个严重的犯规,因为它它只能适用于单一的HTML网页。保持独立的CSS文件意味着未来的网页可以链接到它们,并使用相同的代码。Javascript也是同样的道理。

注:当然,这个问题或许也并不是那么严重。比如作为WordPress主题来说,写在《head》里面的代码也就作用于所有WordPress页面。但把CSS写在《head》里面仍然是个非常不好的习惯。

关于html简单代码模板到此分享完毕,希望能帮助到您。