码迷,mamicode.com
首页 > Web开发 > 详细

妙味课堂——HTML+CSS(第二课)

时间:2016-04-02 20:27:45      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:

   常见标签——img标签

<img src="图片地址" alt="图片名"/>

   alt属性是图片名字,是给百度搜索引擎抓取使用的。也有当图片地址不正确时,显示图片名。

   常见标签——a标签

   1、a标签(链接)

   target链接打开方式(常用):

  1. _blank:新窗口
  2. _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(第二课)

标签:

原文地址:http://www.cnblogs.com/yerenyuan/p/5348141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!