瑞星卡卡安全论坛

首页 » 技术交流区 » 系统软件 » 网站导航菜单html代码编写规范
一朵小茉莉 - 2016-11-23 10:45:00
<div class="bodymenu">
    <div class="mainnav">
        <ul class="navmenu">
        <li class="nav_0"><a href="http://www.XXXX.com" title="首页"><i></i>首页<span></span></a></li>
        <li class="nav_1"><a href="http://www.XXXX.com/index/chepiao.html" id="booking_menu"  title="汽车票预订"><i></i>汽车票预订<span></span></a></li>
        <li class="nav_2 ico"><a href="http://www.XXXX.com/huodong/rent_bus.html" tts="link_3316" title="约租车" target="_blank"><i></i>跨城约车<span></span></a></li>
        <li class="nav_5"><a href="http://www.changtu.com/" title="汽车票网上预订"><i></i>汽车票网上预订<span></span></a></li>
        <li class="nav_3"><a href="http://www.XXXX.com/news/index.html" title="资讯中心"><i></i>资讯中心<span></span></a></li>
        <li class="nav_4"><a href="http://www.XXXX.com/help/help.html" title="客服中心"><i></i>客服中心<span></span></a></li>
        </ul>
        <div class="navuserbg"></div>
        <ul class="navuser" id="login_content">

        <li class="mytrip" id="login_menu">
              <a tltle="用户中心 " class="ushow" href="http://uc.XXXX.com">用户中心<em>图标</em></a>

          <div style="display: none;" class="ubox" id="login_menubox">
       

        <ul>
                  <li class=""><a tltle="我的订单 " rel="nofollow" href="http://uc.XXXX.com/order/usercenter/orderListAll.html">我的订单</a></li>
                    <li class=""><a tltle="我的提问 " rel="nofollow" href="http://uc.XXXX.com/message/questionList.html">我的提问</a></li>
                    <li class=""><a tltle="个人资料 " rel="nofollow" href="http://uc.XXXX.com/user/infoPage.html">个人资料</a></li>

        </ul>

        </div>

        </li>

       
<li class="reg">

         
<a title="注册" rel="nofollow" href="http://uc.XXXX.com/register/registerPage.html">注册</a>

     
</li>

       
<li class="out hide" style="display: none;">

       
<a title="退出" rel="nofollow">退出</a>

     
    </li>

     
  <li class="go">
             
<span><a title="登录" href="http://uc.XXXX.com" class="logLin">登录</a></span>
                </li>

       
        </ul>

      <!--有订单显示-->
      <!--  <span class="hasorder"><a href="#">1</a></span> -->
    </div>
</div>
</div>

用户系统信息:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.22 Safari/537.36 SE 2.X MetaSr 1.0
一朵小茉莉 - 2016-12-9 13:24:00
嵌套关系:


<head>
    <title>
    </title>
<head>
并列关系:


<head></head>
<body></body>
二、基本标签


1.html标签:作为整个html中所有标签的一个根节点。


2.head标签:用于存放title,meta,base,style,link,script等标签。


2.title标签:放到head中,让页面拥有一个自己的标题。


4.body标签:页面的主体部分,用于存放页面中的所有标签。


例如:


复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
复制代码



三、常用标签


1.标题标签:HTML提供了6个等级的标题。


<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>


h1字体为最大,然后逐渐递减。标题标签帮助我们使页面更加具有语义化。


2.段落标签:<p></p>,用来存放文本段落。默认情况下,会根据浏览器窗口的大小自动换行。


注:块级元素不能放到p标签中。


3.水平线标签:<hr />,可以将页面xxx现一个通栏的水平线。将页面分开显示,使页面更加请先。


4.换行标签:<br />,默认为从左往右显示不下的时候换行。通过<br>标签实现强制换行。


5.文本格式换标签:


<b></b><strong></strong> : 加粗:推荐使用strong


<i></i>和<em></em> : 斜体:推荐使用em


<s></s>和<del></del> : 删除线:推荐使用del


<u></u>和<ins></ins> : 下划线:推荐使用ins


6.图像标签:<img  src="URL"/> : 用来在页面中显示图像,src属性为必需属性。用来指定图片的路径。


7.链接标签:<a href="URL"></a> : 超链接标签,用来实现超链接的功能。页面之间的相互跳转。


注:不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。


8.特殊字符标签:因为好多字符都有特殊的含义,我们没有办法直接书写,就需要依靠一些特殊标签来实现。


详情见下图:






9.注释标签:<!-- 注释内容 -->,不会显示在浏览器窗口中,但是会作为HTML文档的一部分。


<li class="input_city">
<input name="from" type="text" value="请输入出发城市" class="txt" id="from_city"  city_type="from" autoComplete="Off" />
<div class="hotcity_txt" >出发地</div>
<div class="chage f_search_change"></div>
</li>
<li class="input_date">
<input name="date" id="from_date" type="text" value="2016-12-08" class="txt trainCalendar" readonly="readonly"/>
<em class="date_ico" >N</em>
<div class="date_txt">出发日</div>
</li>
<li class="input_city">
<input name="to" type="text" tabindex ='2' value="中文/拼音/首字母" class="txt" id="to_city"  city_type="to"  autoComplete="Off"/>


<div class="hotcity_txt" >到达地</div>
</li>


</ul>
<input type="submit" name="bus_search_btn" class="index_btn btn_orage" value="搜索" />
</form>
</div>


</dd>
</div>


</div>


<div class="in_right_box">
<ul class="silder_list" >
<li>
<a href="http://jiaxing.changtu.com/" target="_blank">嘉兴客运中心网上订票</a>
</li>
</ul>
</div>
</div>
</div>

用户系统信息:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.22 Safari/537.36 SE 2.X MetaSr 1.0
一朵小茉莉 - 2016-12-13 13:25:00
<script type="text/JavaScript">
$(document)。ready(function () {
heBing();
});
function heBing() {
var tableData = new Array();
$("#tab1 tr")。each(function (trindex, tritem) {
tableData[trindex] = new Array();
$(tritem)。find("td")。each(function (tdindex, tditem) {
tableData[trindex][tdindex] = $(tditem)。text();
});
});
var tab = document.getElementById("tab1");
var lingyu = tableData[1][0];
var j = 1;
var k = 1;
for (var i = 2; i < tableData.length; i++) {
if (lingyu == tableData[0]) {
j++;
} else {
for (var m = k + 1; m <= k + j - 1; m++) {
tab.rows[m].cells[0].style.display = "none";
}
tab.rows[k].cells[0].rowSpan = j;
lingyu = tableData[0];
k = k + j;
j = 1;
}
}
}
</script>
<div class="hotcity_txt" >到达地</div>
</li>
</ul>
<input type="submit" name="bus_search_btn" class="index_btn btn_orage" value="搜索" />
</form>
</div>
</dd>
</div>
</div>
<div class="in_right_box">
<ul class="silder_list" >
<li>
<a href="http://www.jxctqcp.com/" target="_blank">嘉兴汽车北站时刻表</a>
</li>
</ul>
</div>


用户系统信息:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.22 Safari/537.36 SE 2.X MetaSr 1.0
1
查看完整版本: 网站导航菜单html代码编写规范