2021/02/09html 进阶篇 - 高级标签 - 《java笔记打卡》

1.学习视频：html 进阶篇 - 高级标签

2.学习内容
空格、回车是文本分隔符(不管是多少个空格或回车)
html编码
1） —> 一个空格文本
2）&less than , great than—程度上的比较）
3）a
b —>a 换行 b 补充：不需要成对出现，叫单标签
4）

—> 代表水平线
5）有序列表
1.

    <!--<ol type="a" reversed="reversed">-->
    <ol type="a" start="3">
      <li>marvel</li>
      <li>速8</li>
      <li>返老还童</li>
      <li>了不起盖茨比</li>
    </ol>

6）无序列表
1.

<html>//该程序不可运行，为注解部分
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        <!--空隙去除-->
        ul{
            list-style:none;
        }
        <!--圆圈去除-->
        li{
            margin: 0 10px;<!--加点空隙-->
            float: left;
            color: #f40;<!--淘宝红-->
            font-weight: bold;<!--字体加粗-->
            font-size: 14px;<!--字号大小设置-->
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
        }
        <!--横过来，在一行上面-->
        li:hover{
            border-radius: 15px;<!--把边框设置成圆角的-->
            background-color: #f40;
            color: #fff;<!--背景颜色变成白色-->
        }
    </style>
</head>
<body>
    <ul type="circle">
        <li>天猫</li>
        <li>聚划算</li>
        <li>天猫超市</li>
    </ul>
</body>
</html>

<html>
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style:none;
        }
        li{
            margin: 0 10px;
            float: left;
            color: #f40;
            font-weight: bold;
            font-size: 14px;
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
        }
        li:hover{
            border-radius: 15px;
            background-color: #f40;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul type="circle">
        <li>天猫</li>
        <li>聚划算</li>
        <li>天猫超市</li>
    </ul>
</body>
</html>

7）图片
1.网上url —> 网上图片的浏览地址
2.本地的绝对路径
2.本地的相对路径
1—D:/a/b/lesson2.html
2—D:/a/b/123.jpg
3—D:/a/b/c/123.jpg
2021/02/09html 进阶篇 - 高级标签 - 图1
当HTML文件和这张图片在同一个文件夹下的时候，他俩的路径成相对关系（1和2）
2021/02/09html 进阶篇 - 高级标签 - 图2
不是一个地址就是绝对关系，需要将地址写全（1和3）

<img src="C:\Users\hp\Desktop\大学\大一（下）\壁纸\校园.jpeg" style="width: 200px;" alt="这是校园" title="this is college"><!--image图片-->
    <!--alt图片占位符-->

8）href 1.超链接
2.锚点
3.打电话

<html>
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    hyperText reference超文本引用
    //1.超链接        anchor -- 抛锚，记录锚点
    <a href="https://www.baidu.com" target="_blank"> www.baidu.com</a>
    <!--图片跳转，新的页面  blank空的-->
    <a href="https://www.baidu.com" style="width: 100px;height: 100px;background-color: red;display: block;">
    </a><!--图片跳转，当前页面-->
    id唯一标识的意思
  //2.锚点
    <div id="demo1" style="width: 100px;height: 100px;background-color: green;">demo1</div>
    <br>
    <div id="demo2" style="width: 100px;height: 100px;background-color: red;">demo2</div>
    <br>
    <a style="display: block;position: fixed;bottom: 150px;right: 100px;border: 1px solid blank;height: 50px;width: 200px;background-color: #ffc;"href="#demo1">find demo1</a>
    <a style="display: block;position: fixed;bottom: 200px;right: 100px;border: 1px solid blank;height: 50px;width: 200px;background-color: #fcc;"href="#demo2">find demo2</a>
  //3.打电话
  <a href="tel:159xxxx2799" style="font-size: 12px">打电话啊</a>
  //4.发邮件
  <a href="mailto:2802791636@qq.com" style="font-size: 12px">发邮件</a>
    //5.协议限定符
  <a href="javascript:while(1){alter('弹窗内容')}">死循环弹窗</a>
</body>
</html>

9）提交数据、单选、输入框

<html>
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        input{
            border: 1px soild #999;
        }
    </style>
</head>
<body>
    提交数据
    <form method="get" action="接收地址">
        <p>
            username:<input type="text" name="username" style="color: #999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">
        </p>
        <p>
            password:<input type="password" name="password">
        </p>
        //单选框
        1.<input type="radio" name="star" value="数据值">
        2.<input type="radio" name="star" value="xiaolai">
        3.<input type="radio" name="star" value="handsome">
        <input type="submit" value="login">
    </form>
    提交成功之后：
    file:///E:/HTML/%E6%8E%A5%E6%94%B6%E5%9C%B0%E5%9D%80?username=123&password=456
    md5 加密，不可逆
</body>
</html>

总结：
通过这节课的学习，了解到了很多的标签用法及用途，对html的认识也更进一步