html知识的查漏补缺2022.9.23

最新推荐文章于 2024-01-12 16:46:30 发布

小鱼儿科技

最新推荐文章于 2024-01-12 16:46:30 发布

阅读量248

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_54284859/article/details/127002682

版权

#html知识的查漏补缺

##文档
官方文档：mdn ,w3c。 mdn官网有很全的html css官方文档

##语义化
html强调语义化，意思是元素（就是标签，html5中称呼为元素）代表了特定的含义，使用哪个标签由具体的语义决定。而样式完全由css决定。
比如： h1元素，表示标题，p表示一个段落，ul表示一个无序列表

另外：也有一些元素是无语义的：比如div表示一个容器没有具体的语义，span

##文本元素
包括h1~h6,span,p,pre,code

pre:预编译格式，即源代码里打出来是什么样子，就展示什么样子，一般用来显示代码，或源代码打出来的画？？比如猪头？星空？

普通的div也可以使用pre元素的样式，由css控制 white-space:pre

<div style="white-space: pre;">       
    <code>
            var a=1;
            console.log("hello js")
        </code>
    </div>

空白折叠：当有多个空白字符（空格，缩进，换行）时，只保留一个空格。除pre元素，对其他任何元素有效。！！请查看如下代码，以下的分页直白的展示了空白折叠现象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .pager a {
            border: 1px solid #e1e2e3;
            text-decoration: none;
            color: #38f;
            width: 34px;
            height: 34px;
            display: inline-block;
            text-align: center;
            line-height: 34px;
        }

        .pager a:hover {
            border-color: #38f;
            background: #f2f8ff;
        }

        .pager a.selected {
            border: none;
            color: #000;
            background: initial;
        }
    </style>
</head>

<body>
    <div class="pager">
        <a href="">1</a>
        <a href="">2</a>
        <a href="" class="selected">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="">10</a>
    </div>
</body>

</html>

！！请注意：pre元素不会出现空白折叠现象

code元素
常用于包含代码,通常与pre标签一起使用

<pre>
        <code>
            var a=1;
            console.log("hello js")
        </code>
    </pre>

##实体字符
实体字符：有特殊含义的字符
html中实体字符有两种写法

&字符;
&#数字;（不常用，数字不好记）

浅列几个实体字符：

大于 >
小于 <
空格
& &
版权 ©

##a超链接
1.锚点 id控制

<a href="#id">跳到某个锚点</a>

2.回到顶部，#后面不跟id

<a href="#">回到顶部</a>

3.target属性有5个取值

_self
_blank
_parent
_parent
framename iframe名

4.功能性

打电话（使用条件：电脑安装拨号软件；移动端可使用）

<a href="tel:15011111111">给我打电话</a>

发邮件（使用条件：安装了邮箱软件）

<a href="mailto:150111111@qq.com">发我邮件</a>

执行js代码

<a href="javascript:alert('你好')">执行js</a>

##img元素
1.alt属性
alt 属性是对图片的说明描述，当图片加载失败时会显示alt属性中的内容

<img src="a.jpg" alt="这是对图片的说明" />

2.usemap属性：使用地图映射map

img的usemap = map的name或id属性(因为各个浏览器支持情况不同，有些usemap = map的id ，有些usemap = map的name。为了兼容性，要同时为map指定id和name属性，且值一致)

<img usemap="mymap" src="a.jpg" alt="这是对图片的说明" />
<map name="mymap" id="mymap">
    <area shape="4个取值（circle,rect,default,poly）" coords="坐标，左上角为原点" href="点击该区域要跳转的链接"></area>
</map>

3.map的area标签

属性 shape:4个取值.
circle:圆
rect：长方形
default：全部区域
poly：多边形
属性：href
coords:坐标点，左上角为原点

4.图片如何进行懒加载
有待学习！！！

音频视频元素 video,audio

这两个元素属性完全相同

src 哈哈，不用写了吧
controls 默认是否显示控件，布尔属性
loop 是否循环播放，布尔属性
muted 是否静音，布尔属性
autoplay 是否自动播放，布尔属性，有些浏览器不支持（担心吓到用户，哈哈）。此时可设置autoplay同时，再设置muted属性静音播放。可以静音自动播放

<video src="a.mp4" controls loop autoplay muted></video>
<audio src="a.mp4" controls loop autoplay muted></audio>

video支持mp4,webm,ogg格式视频
audio支持mp3,wav,ogg格式

**因为不同的浏览器可能支持不同的格式，因此一般会将多个格式写进来，如下：

<video width="320" height="240" controls loop autoplay muted>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

##列表
ol有序列表，表示有确定顺序的列表，不能随意更改序号，比如法律条件（比较少用）
ul无序列表（经常使用

##容器元素
除了div之外，html5定义了一些具有语义化的容器元素（html4中没有的），便于搜索引擎和浏览器理解

header 表示头部
article 表示文章正文
section 段落/章节
aside 附加信息，常用于侧边栏
nav 常用于菜单/工具栏
figure 多用于引用内容
footer 网页脚部

##全局属性

1.title
鼠标悬停几秒，会显示title属性内设定的内容

##补充点
1.h1
h1元素一般一个网页内只有1个h1元素，表示这个网页的主要内容。便于搜索引擎和浏览器理解

一般做法：网站的标题使用logo图片，同时设置h1，将内容设为隐藏。案例：淘宝官网首页

<h1>
    <a href="a.html"></a>
    淘宝网
</h1>
a{
    display:block//很重要，没有的话则text-indent失效
    height:0;//很重要，用于隐藏文字
    padding-top:58px;//很重要，用于显示文字
    overflow:hidden;//很重要，用于隐藏溢出的文字
    text-indent:-9999px;//为了隐藏文字，只适用于块级元素block/inline-block的元素
    background:url(地址)
}