day3 a标签描点图片标签 div标签_a标签描点-优快云博客

本文介绍了HTML的基础元素如a标签的使用，包括链接、禁止跳转的方法，以及锚点的概念。同时，深入讲解了CSS中的样式设置，如边框、颜色、盒模型以及如何通过margin实现元素的布局。此外，还探讨了div标签及其在页面布局中的应用，以及如何利用边框创建三角形和实现元素的居中对齐。

<a href="">这是一个空的跳转地址</a>

锚点

<a href="#42">第一,跳转到第四十二</a>

<a href="#42" name="42">我是第四十二</a>

a标签可以通过href后#后面的内容跳转到与之相对应的name后的内容

图片标签

src是照片存放的路径，alt是缺失照片的提示，width宽，height长，title光标静止在照片上显示的提示

从盘符出发的图片路径只能由本地才能看到（alt + b本地打开）但是本地打开

在网页中的网址图片由本地打开和服务器打开都可以看到

路径

绝对路径：从域名出发；从盘符出发

相对路径：./img/01.jpg

div标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- div : division  意为划分、区分他可以把文档分割，成为独立的不同的部分。

     -->
    <div style="width:100px;height:100px;background-color:deeppink">div学习</div>
    <div style="width:100px; height:200px; background-color:blue">学习目标</div>

</body>

</html>

div可以创建盒子在网页上

代码结果

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div {
            width: 300px;
            height: 400;
            background-color: yellow;
        }
    </style>
</head>

也可以用<style>更改样式

border是边框

border-style边框风格

1.solid:实线 2.dotted：点状线 3.dashed：虚线 4.double：双线 5.3d凹槽：groove 6.3d陇状 ridge 7. inset：inset 8.outset：outset

border-width 边框大小

border-width:10px;

border-color 边框颜色

border:none;无边框

border复合写法

<head>
    <style>       
     #div1 {
            width: 100px;
            height: 100px;
            background-color:yellow;
            border:5px solid red;
        }
    </style>
</head>

边框的复合写法把属性直接写进border去没有顺序

边框可以选定一条边进行修改：border-top left right bottom

<style>        
        #div2 {
            width: 300px;
            height: 300px;
            border-top: 5px solid red;
            border-bottom: 6px dashed blue;
            border-left: 10px groove aquamarine;
            border-right: 8px dotted orange;
        }
</style>

结果

颜色：

颜色的写法：

1、英文单词（red yellow white pink）

2、十六进制（#778811 和 #781一样）

3、rgb(255,255,255)第一个255是红第二个是绿第三个是蓝

4、rgb(255,255,255,0~1)最后一位范围0~1 alpha（透明度）

div得到三角形

    <style>
        div {
            width: 0px;
            border-top: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid aqua;
            border-right: 50px solid greenyellow;
        }
    </style>

    <style>
        div {
            width: 0px;
            border-top: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid aqua;
            border-right: 50px solid greenyellow;
            border-top: none;
        }
    </style>

可以将上边框取消

    <style>
        div {
            width: 0px;
            border-top: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid aqua;
            border-right: 50px solid greenyellow;
             border-left:50px solid transparent;/*透明的意思 */
             border-right:50px solid transparent;/*透明的意思 */
            border-top: none;
        }
    </style>

transparent透明的先调宽为0 将一部分边框取消再将其他部分变透明这样可以得到三角形

外边距

margin（页边空白）属性在div中使用要加方位

margin-top

margin-right

margin-bottom

margin-left

margin：50px 是全方位的页边空白

margin：50 100 是上下50 左右100

margin：50 100 120 是上左右下

margin：10 20 30 40 是顺时针方向

    <style>
        .div1 {
            margin-right: 100px;
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 5px solid red;
        }
        
        .div2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 5px solid blue;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>