收藏
PHPz批改状态：合格
老师批语：
属性
href 规定链接指向的页面的 URL
target 规定在何处打开链接文档
_blank 在新窗口中打开被链接文档
_self 默认。在相同的框架中打开被链接文档
跳转到站外 <a href="https://www.php.cn">php.cn</a>
在指定的窗口打开
<a href="https://tmall.com" target="tmall">天猫</a><iframe frameborder="2" name="tmall"></iframe>
target="" 和 name="" 对应的值要一样站内跳转
<a href="#hello">我要找到你</a><h2 id="hello" style="margin-top: 2000px">你发现我了吗?</h2><a href="#">回到顶部</a>
href="#hello" 和 id="hello" 对应关系 href="#hello" 里要多加一个 #属性
src 规定显示图像的 URL
alt 图像不显示的时候 的替代文本
<a href="https://php.cn"><img src="php.jpg" alt="php.cn" /></a>有序列表 <ol><li></li></ol> 极少用
无序列表 <ul><li></li></ul>
ul + li + a 小案例
<ul class="menu" style="display: flex; place-content: space-around"><li class="item"><a href="">首页</a></li><li class="item"><a href="">教学视频</a></li><li class="item"><a href="">社区问答</a></li><li class="item"><a href="">资源下载</a></li><li class="item"><a href="">关于我们</a></li></ul>
nav + a 小案例
<nav class="menu" style="display: flex; place-content: space-around"><a href="">首页</a><a href="">教学视频</a><a href="">社区问答</a><a href="">资源下载</a><a href="">关于我们</a></nav>
自定义列表 主要用在页脚
<dl><dt>地址:</dt><dd>政务新区蔚蓝商务港</dd><dt>邮箱:</dt><dd>admin@php.cn</dd></dl>
<table width="300" border="1"><!-- 标题 --><caption>表格标题</caption><!-- 表头 --><thead><tr bgcolor="lightgreen"><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr></thead><!-- 表格中的所有数据必须放在单元格td的元素中,td元素又必须写到tr中 --><!-- 表格主体 --><tbody><tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr><!-- 注意2点: 合并操作一定是发生在单元格上td元素, --><!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 --><tr><td>x5</td><td bgcolor="red" colspan="2">x6</td><!-- colspan 水平方向合并 合并 n 行 当前 tr 包裹的 td 就要少写 n-1 个 --><!-- <td>x</td> --><td>x1</td><td>x2</td><td>x3</td></tr><tr><td>x</td><!-- rowspan 垂直方向合并 合并 n 列 --><td bgcolor="violet" rowspan="2">x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr><tr><!-- <td>x</td> --><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr></tbody><!-- 可以有多个tbody表格主体 --><!-- 表尾 --><tfoot><tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr></tfoot></table>
<iframe src="https://tmall.com" width="100%"></iframe>
<h2><a href="https://taobao.com" target="taobao">淘宝</a></h2><iframe srcdoc="<em>点击上面的链接打开</em>" frameborder="1" width="400" height="400" name="taobao"></iframe><button onclick="taobao.location='https://taobao.com'">打开淘宝</button>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>常用布局标签</title></head><body><!-- 语义化布局标签 --><header>header</header><main>main</main><footer>footer</footer><!-- 经典 --><div id="header">header</div><div id="main">main</div><div id="footer">footer</div><!-- id权重太大 --><!-- 改进 --><div class="header">header</div><div class="main">main</div><div class="footer">footer</div><!-- class权重小于id,有利于样式复用 --><!-- 绝大多数程序员还是喜欢 div + class 模式 --><!-- 1. 目前至少90%以上的项目是基于移动端,不依赖或不在乎搜索引擎 --><!-- 2. 完全是个人习惯,主要原因是这种布局的语义化标签太少了,不如语义更明确的class --><!-- 文章头部 --><header>我是文章的头部</header><!-- div + class --><div class="article-header">我是文章头部</div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
