学习html（7）

来源：互联网发布：linux pyqt5 编辑：程序博客网时间：2024/05/18 00:54

1.超链接标签

在href中添加链接的地址，进行跳转，在网络上的添加上网址即可。

target显示添加打开新页面还是不打开新页面，_blank打开新的页面。

title鼠标放上去显示信息。

超链接标签是一个标准的内联元素。

2.锚点

链接到页面，让某一位置置为打开位置。

<a href=”#tips”></a> 定位到tips锚点。

3.CSS伪类

CSS允许针对a标签的4中状态设置各自的CSS特性，叫做CSS的伪类。

a:link 鼠标默认

a:visited 鼠标点过

a:hover 鼠标悬停

a:active 点击触发

其中active中的状态一般可以必须写，并且顺序必须是LVHA的顺序，否则会出现错误。

4.字符实体

在html开发中，有一些字符，不适合直接写出，比如>（>）<(<)

一般的格式:&；（&）+ 实体名 + ;

实体名很多，常用的有>(>) <(<) "(“)。

在w3c的手册中可以查找。

5.完整网页编写

1.整体布局；

2.初始化CSS；

3.各部分区域的处理；

<!DOCTYPE html><html><head><title>首页布局</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="./images/reset.css"><!-- <link rel="stylesheet" href="index.css"> --><style>.clr {clear: both;width: 0px;height: 0px;overflow: hidden;}#container{margin: 0px auto;width: 1002px;}#header{height: 128px;background: gray url();}#nav li{width: 90px;margin-right: 1px;float: left;}#nav a{font:16px/37px '微软雅黑','黑体',sans-serif;color:#363636;display: block;width:90px;height: 37px;text-align: center;}#nav a:visited{}#nav a:hover{color: white;background: url();}#nav a:active{}#binner{margin: 6px 0;}#main{}.subtitle{height: 37px;background: gray url();}.subtitle img{margin:5px 0 0 10px;float: left;}.subtitle h1 {color: #151515;float: left;margin-left: 10px;font:16px/37px 'Microsoft Yahei' , SimHei , sans-serif;}.subtitle a {display: block;color: #888;font: 12px/37px SimSun,serif;float:right;}#lside{height: 480px;width: 694px;border: 1px solid #EEE;border-radius:5px; float: left;border-top:none;}#rside{width: 294px;float: right;}.four{width: 326px;height: 200px;background: #EEE;margin: 10px;float: left;}.four ul{float: left;margin-left: 10px;}.four img{float: left;margin-left: 10px;padding: 6px;background: white;}.four li{background: url() no-repeat;padding-left: 10px;height: 20px;}.four a{font-size: 12px;color:#888;}.four a:visited {color:#808080;}.four a:hover{color: #FF832C;}.four h2 {color: #A0A0A0;margin: 6px 0 6px 10px;font-size:16px;font-family: 'Microsoft Yahei' , SimHei , sans-serif;}#art{background: #EEE;margin-top: 1px;padding-top: 10px;}#art a{font-size: 12px;line-height: 29px;color: #888;display: block;height: 29px;padding-left: 30px;background: url() no-repeat;}#art a:hover{color: #FF832C;background: url();}#contact {margin-top: 1px;height: 249px;background: #EEE;}#footer{margin-top: 15px;height: 120px;}#footer ul {height: 40px;background: #EEE;}#footer li {font-size: 12px;float: left;margin-top: 15px;margin-right: 10px;}#footer address {margin-top: 10px;font-size: 12px;font-family: '微软雅黑',sans-serif;}</style></head>    <body>    <div id="container">    <div id="header">    <img src="" alt="logo"/>    <ul id="nav">    <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>    <img src="" alt="binner" id="binner"/>    <div id="main">    <div id="lside">    <div class="subtitle">    <img src="" alt=""/>    <h1>主要区域</h1>    <a href="#">MORE>></a>    </div>    <div class="four">    <h2>网站</h2>    <img src="" alt=""/>    <ul>    <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>    <div class="four">    <h2>网站</h2>    <img src="" alt=""/>    <ul>    <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>    <div class="four">    <h2>网站</h2>    <img src="" alt=""/>    <ul>    <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>    <div class="four">    <h2>网站</h2>    <img src="" alt=""/>    <ul>    <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>    </div>    <div id="rside">    <div class="subtitle">    <img src="" alt="" />    <h1>文章观点</h1>    <a href="#">MORE>></a>    </div>    <ul id="art">    <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="subtitle">    <img src="" alt="" />    <h1>联系我们</h1>    <a href="#">MORE>></a>    </div>    <div id="contact"></div>    </div>    <div class="clr"></div>    </div>    <div id="footer">    <ul>    <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>    <address>&copy; </address>    </div>    </div>    </body></html>

W3C手册地址：http://download.csdn.net/detail/u011822862/8869355

0 0