2.HTML_2

1. 换行与空格

HTML不认识空格和换行。变成一个空格。

  空格

<br /> 换行

<pre>

转义字符：> > < < " "

2. DIV: 标准块

只有一个样式：display:block;

3 A标签

3.1 链接

href: 必须属性。链接到的地址
- wei访问是蓝色
- 访问过是紫的
- 点中的时候是红色
target: 目标，链接页面的方式
- _self ：默认，自己开自己
- _blank：新开一个选项卡
- _parent: 框架集frameset: 父框架
- _top: 直接到顶
- name; 指向frame的name

样式特有

    1<a href="http://www.baidu.com">百度</a>2
    <a href="http://www.jd.com">京东</a>3
    <a href="afaa">京东</a>3
    <style>
        /* 悬停 */
        a:hover {
            font-weight: bold;
        }
        /* css 
        a:伪类 : 顺序必须固定
        :link 默认颜色
        :visited 访问过的颜色
        :active  点中时颜色
         */
        a:link { 
            color:green;
        }
        a:visited {
            color: gray   
        }
        a:active {
            color: hotpink
        }

        a {
            /* 取消下划线 */
            text-decoration: none;
        }
    </style>

3.2 锚点

href属性值#某个标签的ID ,浏览器直接滚动到id的元素位置

3.3 a标签无效hua

    <a href="javascript:void(0)" onclick="alert(this.innerHTML)">百度111</a>
        innerHTML标签的内容

4. 注释

5. 图片：img

格式： jpg png bit webp svg base64

src属性关联资源地址，或者base64字符串
alt: 图片不存在时的显示的文字
title: 悬停的popup
width: 宽度
height: 高度
align: left/ right

<body>
    23
    <img src="https://img1.baidu.com/it/u=3692141318,1265614680&fm=26&fmt=auto&gp=0.jpg" width="400px" height="400px" />
    234
    <img src="data:image/webp;base64,。。。。。1szIALFS3gAA==" width="400px" height="400px" />
234234
    <div style="height: 700px;border: 1px solid black;width: 700px;">
      <img src="https://img1.baidu.com/it/u=3692141318,1265614680&fm=26&fmt=auto&gp=0.jpg" alt="图片不存在"
        title="标题美女"
        align="left"
        width="400px" height="400px" />
件本身不会有任何影响。严格来讲，JPEG的文件扩展名应该为.jpeg，但由于DOS时代的8.3文件名命名原则，PC机使用了.jpg的扩展名，而由于Mac并不限制扩展名的长度，因此当时苹果机上都使用了.jpeg的后缀名。虽然现在windows也可以支持任意长度的扩展名了，但大家已经习惯了.jpg的叫法，因此也就没有强制修正。这种情况类似于.htm和.html的区别。
    3、gif：区别与png与jpg以及其他图像格式的，是gif可以支持动画，类似于png8的布尔透明类型，只有全透明跟全不透明，没有半透明，是无损耗的图像格式。

    4、webp：是谷歌2010年推出的一种旨在加快图片加载速度的图片格式，图片的体积只有jpg的2/3，美中不足的是，webp是一种有损压缩，而且目前支持这种图片格式的，只有谷歌以及Opera11.10之后的版本，火狐以及IE暂不支持。并且这种图片格式的编码时间是jpg的8倍。因此在使用时也应结合自己的实际情况。

    5、base64：是网络上最常见的用于传输8bit字节码的编码方式之一。
    可用于在http环境下传递较长信息，使用base64编码格式存储图片在网页上传输图片的优缺点如下：

   （1）优点： ①减少http请求；②某些文件可避免跨域问题；

    （2）缺点：①浏览器的支持问题（IE6/IE7不支持，但是IE9版本的IE7模式下又是支持的）；②增加css的尺寸；③增加编码成本。

二、实际运用（前端切图）
（1）色彩丰富的、比较大的图片切成jpg格式，例如一些网站
    </div>

6 无序列表： ul > li

ul {
    display: block;    --块
    list-style-type: disc;   -- disc实心圆
    margin-block-start: 1em; -- 上边距
    margin-block-end: 1em;   
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;  -- 左内边距，左填充 40px
}
    111
    <ul style="list-style: url(../imgs/cd.png);">
        <li>中国</li>
        <li>日本</li>
        <li>美国</li>
    </ul>
    2222
    <ul style="list-style: circle;">
        <li>中国</li>
        <li>日本</li>
        <li>美国</li>
    </ul>
    3333

list-style: 类型或者图片复合样式

场景：

常用取消点和panddinglist-style:none; padding-left:0px

！float:left: 左浮动也有右浮动。浮动一定要清除掉！

 横过来
    <style>
        .aaa {
            display: none;
        }
        .bbb:hover > .aaa {
            display: block;
            background-color: white;
        }
    </style>
    <ul style="list-style: none;padding-left: 10px">
        <li style="width: 100px;float:left" class="bbb">
            <a href="#">中国</a>
            <ul class="aaa">
                <li>大连</li>
                <li>北京</li>
                <li>上海</li>
            </ul>
        </li>
        <li style="width: 100px;float:left"><a href="#">日本</a></li>
        <li style="width: 100px;float:left"><a href="#">美国</a></li>
    </ul>
    <div style="clear: left"></div>
    <div style="width: 100px;height:100px;background-color: red;display: none;"></div>

posted @ 2021-05-16 11:39 剑心空明阅读(6) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

zxyhj