Web学习-优快云博客

本文链接：https://blog.youkuaiyun.com/hhhhhyyyyy8/article/details/141199739

一、HTML

JS书籍：JavaScript高级程序设计

第一个网站：The World Wide Web project

HTML元素：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

注释：

html元素：

设置图片大小用CSS，不用自带属性

img常见的图片格式都支持

a元素：

页面内跳转：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="#title1">点击跳转到标题1</a>
    <a href="#title2">点击跳转到标题2</a>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
    <h1 id="title1">标题1</h1>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h2 id="title2">标题2</h2>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

图片链接：

<a href="https://www.baidu.com"> 
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</a>

a元素其他url地址：

下载zip文件，发送邮件

<a href="https://cdn.ovital.com/pub/omapX64V1005Setup.exe">点击下载奥维地图安装包</a>
<a href="mailto:xxxxxxxxx@qq.com"> 点击发送邮件></a>

iframe元素：

    <iframe src="https://www.taobao.com/"></iframe>
    <iframe src="https://www.ovital.com/"></iframe>
    <!--    百度没法嵌套，设置了的-->
    <iframe src="https://www.baidu.com/"></iframe>

iframe和a元素结合使用：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .area{
            border: 1px solid red;
        }
        .keyword{
            font-size: 30px;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>学习前端</h1>
    <div class="area">
        <h2>第一天学习</h2>
        <p>第一天学习了<span class="keyword">HTML</span>，第一天学习了HTML，第一天学习了HTML</p>
    </div>

    <div class="area">
        <h2>第二天学习</h2>
            <p>第二天学习了CSS，第二天学习了CSS，第二天学习了CSS</p>
    </div>

    <div class="area">
        <h2>第三天学习</h2>
            <p>第三天学习了Javascript，第三天学习了Javascript，第三天学习了Javascript</p>
    </div>
   
</body>
</html>