笔记 | PHP 2012 | 标签详解

2020-08-29 本文已影响0人 Say哥

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