网站导航菜单html代码编写规范 bbs.ikaka.com

一朵小茉莉 - 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>



</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

瑞星卡卡安全论坛