前端自学day01：html5标签的使用（2）

1.超文本连接

    使用<a></a>标签使用实现页面的跳转

href属性 ：跳转的地址（完整地址）

用文本跳转：

 <a href="http://www.baidu.com/">跳转到百度页面</a>

用图片跳转：

 <a href="http://www.baidu.com/">
        <img src="study hard.jpg" alt="go to" title="跳转到百度页面">
 </a>

运行结果：

注：超链接的样式可以通过css改变

2.文本标签

（1）常用的文本标签：em、i、b、strong、span、del

    <em>em：着重文字+斜体效果</em>
    <br>
    <i>i：斜体效果</i>
    <br>
    <b>b：加粗效果</b>
    <br>
    <strong>strong：加粗、加重语气效果</strong>
    <br>
    <span>span：没有任何效果</span>
    <br>
    <del>del：删除效果</del>

 （2）文本标签的嵌套

<p>喜欢的是<em>你的微笑</em></p>

 3.列表标签

（1）有序列表  “ol包裹li标签”

    <ol>
        <li>Monkey</li>
        <li>Tiger</li>
        <li>Cat</li>
        <li>Dog</li>
    </ol>

① 属性：ol的属性type

1：数字符号 1，2，3

a:  小写字母 a，b，c

A：大写字母 A, B, C

i：小写罗马数字 i，ii，iii

I: 大写罗马数字  I, II, III

   <ol type="a">
        <li>Monkey</li>
        <li>Tiger</li>
        <li>Cat</li>
        <li>Dog</li>
    </ol>

    <ol type="i">
        <li>Monkey</li>
        <li>Tiger</li>
        <li>Cat</li>
        <li>Dog</li>
    </ol>

    <ol type="A">
        <li>Monkey</li>
        <li>Tiger</li>
        <li>Cat</li>
        <li>Dog</li>
    </ol>

②有序列表的嵌套 

  <ol type="A">
        <li>水果</li>
        <li>蔬菜</li>
          <ol type="a">
            <li>黄瓜</li>
            <li>香菜</li>
            <li>西红柿</li>
          </ol>
        <li>肉类</li>
    </ol>

（2）无序列表 “ul包裹li标签”

 <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

 ① 属性：ul的属性type

    disc：默认的实心圆

    circle：空心圆

    square：小方块

    none：不显示

 <ul type="disc">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ul type="circle">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ul type="square">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ul type="none">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>

 ②无序列表的嵌套 

<ul type="circle">
        <li>水果</li>
        <li>蔬菜</li>
          <ul type="square">
            <li>黄瓜</li>
            <li>香菜</li>
            <li>西红柿</li>
          </ul>
        <li>肉类</li>
    </ul> 

无序列表的导航效果

<ul>
        <li>Redmi 红米手机 </li>
        <li>Huawei 华为手机</li>
        <li>Apple 苹果手机</li>     
    </ul>

后期通过css变为横向显示

③无序列表的生成快捷键 

ul>li*要生成的li标签的数量+回车

 ul>li*8