div 标签的局限性
- 没有语义
在 html 中, div 是负责划分大块区域的, 它是没有"语义性"的.
它对文字的颜色, 粗细, 大小等没有影响.
即"无语义"标签.
它不利于seo优化.
- 有一些效果, 是 div 达不到的
有一些内容类型, 是 div 表达不出来的
如, 超链接 图片 flash wmv
- 有一些内容形式, 用 div 来实现非常麻烦, 也不适合
如, 列表 表格
- 无法实现"精细"的控制
如果只想对一行内, 某几个文字发挥作用
没有语义 → 有语义标签
- 标题 h1 h2 h3 h4 h5 h6
<body>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
</body>
- 段落 p
<body>
<p>段落</p>
</body>
- 保持原样输出 pre
<body>
<pre>
需要多次换行,
或保持原样输出时可以使用
</pre>
</body>
- 源代码 code
内容类型
- 超链接 a标签
<body>
点击<a href="https://www.xxx.com/xxx/...">此处</a>跳转至目录
</body>
※ 点击超链接, 默认替换本页面, 也可以打开新页面, 用 target="_blank"
<body>
点击<a href="https://www.xxx.com/xxx/..." target="_blank">此处</a>跳转至目录
</body>
※ 鼠标放在超链接上, 显示提示文字, 用 title=""
<body>
点击<a href="https://www.xxx.com/xxx/..." target="_blank" title="跳转至目录">此处</a>跳转至目录
</body>
- 图片 img标签
<img src="PATH/lion.jpg" />
※ alt 值的作用
1. 如果图片丢失或图片没能正常显示, alt 值会体现出来;
2. 对于搜索引擎来说, alt 值是提示图片信息的重要内容;
3. 对于所学的 xhtml 1.0 strict 标砖来说, 图片不加 alt 是不合规范的.
<img src="PATH/lion.jpg" alt="lion" />
※ 鼠标放在图片上, 有提示文字
<img src="PATH/lion.jpg" alt="lion" title="lion"/>
- 多媒体 (用 object 标签引入)
※ 各浏览器对 flash、wmv 的引入方式不一样, 因此, 相对兼容性较好的引入方式代码如下:
- flash
<object type="application/x-shockwave-flash" data="PATH/NAME.swf" width="400" height="300">
<param name="movie" value="PATH/NAME.swf" />
</object>
※ 两个 PATH/NAME.swf 路径部分需保持一致
- wmv
<object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="300">
<param name="autoStart" value="true" />
<param name="URL" value="PATH/NAME.wmv" />
<embed autostart="true" src="PATH/NAME.wmv" type="video/x-ms-wmv" width="400" height="300" controls="ImageWindow" console="cons">
</embed>
</object>
内容形式
- 无序列表 ul
<style>
ul{
list-style: disc;
}
</style>
...
<ul>
<li>梅</li>
<li>兰</li>
<li>竹</li>
<li>菊</li>
</ul>
list-style 的其他样式:
disc 默认, 实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
none 不适用项目符号
> 用无序列表ul + 浮动float 作导航
<html>
<head>
<title>Index</title>
<style type="text/css">
ul{
list-style:none;
}
li{
float:left;
background:#EFEFEF;
padding:5px;
margin:5px
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">业务介绍</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>
</body>
</html>
- 有序列表 ol
<ol>
<li>梅</li>
<li>兰</li>
<li>竹</li>
<li>菊</li>
</ol>
※ 实际使用中, 考虑到浏览器之间的兼容性, 一般样式都设置为 none
<style>
ul{
list-style: none;
}
</style>
- 表格 table
两个关键元素 行 row & 列 column
tr td
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
例1
- 横向合并单元格
=>
<table>
<tr><td colspan="3"></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
横向(跨列)合并示例
- 纵向合并单元格
=>
<table>
<tr><td></td><td></td><td rowspan="3"></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
纵向(跨行)合并
※ 合并单元格的小技巧
先把合并后要消失的 td 删掉
数一数合并部分包含N个单元格
再通过 colspan="N" 或 rowspan="N" 实现
- 通过 css 控制表格
若给单元格加边框 border, 表格呈现的样式为例1
若要呈现为↓
则用属性 border-collapse 控制
<style type="text/css">
table{
border-collapse: collapse;
}
</style>
※ 默认样式为 border-collapse:separate;
- 其它属性
border-spacing 单元格处于separate状态时, 单元格之间的距离
empty-cells:show(默认) / hide; 空表格是否显示(同样的, 也是处于separate状态时, 才能看出显示效果)
> table 的达标要求:
精细控制 → 内联元素
2012_d1_①_016 017 018
网友评论