妙味课堂——HTML+CSS(第二课)
Posted 叶十一少
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了妙味课堂——HTML+CSS(第二课)相关的知识，希望对你有一定的参考价值。
常见标签——img标签
<img src="图片地址" alt="图片名"/>
alt属性是图片名字，是给百度搜索引擎抓取使用的。也有当图片地址不正确时，显示图片名。
常见标签——a标签
1、a标签(链接)
target链接打开方式(常用)：
- _blank：新窗口
- _self：当前窗口
<base target="_blank"/> 定义页面链接默认打开方式
例，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <base target="_blank" /><!-- 定义页面中所有链接打开方式 --> </head> <body> <a href="http://www.miaov.com/">a标签(链接)</a> <a href="http://www.miaov.com/">a标签(链接)</a> <a href="http://www.miaov.com/" target="_self">a标签(链接) last</a> </body> </html>
2、a标签(锚点)
例，点击百步飞剑，就跳到介绍百步飞剑的地方。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#box1">百步飞剑(锚点)</a> <a href="#box2">夜尽天明</a> <a href="#box3">诸子百家</a> <a href="#box4">万里长城</a> <a href="#box5">君临天下</a> <div style="height: 1000px;" id="box1"> 百步飞剑<br/> ..................... </div> <div style="height: 1000px;" id="box2"> 夜尽天明<br/> ..................... </div> <div style="height: 1000px;" id="box3"> 诸子百家<br/> ..................... </div> <div style="height: 1000px;" id="box4"> 万里长城<br/> ..................... </div> <div style="height: 1000px;" id="box5"> 君临天下<br/> ..................... </div> </body> </html>
3、a标签(下载)
例，点击链接，可以进行下载(文件、视频等)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="常见标签（上）.ppt">a标签(下载)</a> </body> </html>
常见标签：
| div | 块 |
| img | 图片(单标签) |
| a | 下载、链接、锚点 |
| h1-h6 | 标题 |
| p | 段落 |
| strong | 强调(页面展示为粗体) |
| em | 强调(页面展示为斜体) |
| span | 区分样式 |
| ul | 无序列表 |
| ol | 有序列表 |
| li | 列表项 |
| dl | 定义列表 |
| dt | 定义列表标题 |
| dd | 定义列表项 |
例，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>块</div> <img src="1.png" alt="美女" /><!-- 单标签 --> <a href="http://www.miaov.com">a标签</a> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <p>段落</p> <strong>强调(页面展示为粗体)</strong> <em>强调(页面展示为斜体)</em> <span>区分样式</span> <span style="color: blue;">月亮·兰顿</span>13小时前 <!-- 有序列表 --> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <!-- 无序列表 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <!-- 定义列表 --> <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> <dd>定义列表项</dd> <dd>定义列表项</dd> </dl> </body> </html>
以上是关于妙味课堂——HTML+CSS(第二课)的主要内容，如果未能解决你的问题，请参考以下文章