Web前端学习（三）HTML Element

HTML元素查找的一些网站

HTML元素周期表
https://www.xuanfengge.com/funny/html5/element/

fishc速查手册
https://man.ilovefishc.com/html5/

<span>[无语义]

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）

到了HTML5标准，该说法已被弃用，已被更复杂的内容类别代替(Content Category)

<pre>

预格式化文本

pre元素内部：不进行空白折叠，会按照内部源代码的格式显示到页面上。

该元素通常用于在网页中显示代码，常见的显示代码的使用：

    <code>
        <pre>
            var i = 2;
            for (var j = 0; j < i; j++){
                console.log(i);
            }
        </pre>
    </code>

HTML实体字符

实体字符, HTML Entity

实体字符通常用于在页面中显示一些特殊符号，其表示方法是：

1. & + 单词缩写
2. &# + 数字

具体的字符实体参考下列官方文档
MDN HTML Entity Reference
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

常用的几个实体字符

小于符号	大于符号	版权符号	空格符号
&lt	&gt	&copy	&nbsp

<a>

• href 属性:
  1. 跳转地址
  2. 锚链接
  3. 功能链接

  (点击后触发某个功能：执行JS代码、发送邮件mailto、拨号tel)

    <a href="https://www.baidu.com" target="_parent" title="百度搜索引擎">百度</a>

    <!-- 锚链接尝试 -->
    <a href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    <a href="#chapter4">章节4</a>
    <a href="#chapter5">章节5</a>
    <a href="#chapter6">章节6</a>
    <h2 id="chapter1">章节1</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid, enim?</p>
    <h2 id="chapter2">章节2</h2>
    <p>Magnam suscipit aliquid recusandae atque laborum accusamus repudiandae odio optio!</p>
    <h2 id="chapter3">章节3</h2>
    <p>Quia nisi maxime enim doloremque quam assumenda quisquam obcaecati reiciendis!</p>
    <h2 id="chapter4">章节4</h2>
    <p>Numquam adipisci id voluptatum rem maiores aspernatur ad rerum blanditiis!</p>
    <h2 id="chapter5">章节5</h2>
    <p>Ex ducimus possimus illum accusamus quos. Quibusdam nesciunt illum non.</p>
    <h2 id="chapter6">章节6</h2>
    <p>Ullam maxime itaque ab quaerat quibusdam! Porro hic officiis debitis?</p>
    <a href="" style="position:fixed;right:0;bottom:10%;">回到顶部</a>   <!--使得该按钮固定在某个位置，增加用户使用体验感-->

• target属性：表示跳转窗口的位置

target = “_blank” ：在新窗口中打开
target = “_self” : 在当前窗口打开，默认值是这个

• title属性：鼠标移上去的时候显示的提示文字，是一个全局属性

<img>

    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Baidu_Logo">

• src属性 : source
• alt属性 : 当图片资源失效时所显示的图片代替文字

和<a>元素联用

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

以上代码表达的是点击该百度图片的时候，在一个新的窗口打开百度搜索引擎。

和<map>地图元素联用

map : 地图元素

内部只能有一个子元素area

    <a href="https://www.baidu.com" target="_blank">
        <img usemap="#baidu-foot" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Baidu_Logo">
    </a> 
    <map name="baidu-foot">
        <area shape="rect" coords="200,95,331,240" href="https://baike.baidu.com/item/%E8%84%9A%E7%88%AA/18760412?fr=aladdin" target="_blank">
    </map>

• 当点击这个Logo中间的脚爪形状的时候,会在新的窗口打开有关"脚爪"的百度百科词条.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lV6bGo3F-1657785835514)(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png “Baidu-Logo”)]

• 点击其他位置会在一个新的窗口打开百度搜索引擎。

和<figure>元素联用

更好的语义化，增强浏览器的搜索引擎优化(SEO)

    <figure>
        <a href="https://www.baidu.com" target="_blank">
            <img usemap="#baidu-foot" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Baidu_Logo">
        </a> 
        <figcaption>
            <h2>百度</h2>
        </figcaption>
        <p>百度公司是一家以搜索引擎为主打产品的互联网科技公司</p>
    </figure>
    <map name="baidu-foot">
        <area shape="rect" coords="200,95,331,240" href="https://baike.baidu.com/item/%E8%84%9A%E7%88%AA/18760412?fr=aladdin" target="_blank">
    </map>

多媒体元素

<video>

<video controls=“controls” autoplay=“autoplay” muted loop>

• controls : 控制控件的显示,取值只能为controls
• autoplay : 布尔属性,自动播放
• muted : 布尔属性,静音播放
• loop : 布尔属性,循环播放

布尔属性 : 只有两种状态(1.不写 2.写了取值只能为属性名)

<audio>

<audio controls=“controls” autoplay=“autoplay” muted loop>

用法同video元素完全相同

兼容性

1. 旧版本的浏览器不支持这两个元素
2. 不同的浏览器支持的音视频格式可能不同

常用的写法

    <video controls="controls" autoplay muted loop>
        <source src="media/open.mp4">  <!--一般的使用方法，并不兼容一些低级浏览器-->
        <source src="media/open.webm">  <!--为了适配其他的一些浏览器，当上面无法识别时就可以识别此-->
        <p>
            对不起,您的浏览器不支持video元素,请点击这里下载最新版本的浏览器。
        </p>
    </video>

列表元素

有序列表

• <ol> : 父元素，ordered list
• <li> : 子元素

    <ol type="a" reversed>  <!--一般不用type属性,都是在CSS中进行样式控制(list-style-type:xxxx)-->
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ol>

revered 倒序显示

无序列表

• <ul> : 父元素,unordered list
• <li> : 子元素

    <ul> <!--无序列表-->
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>

定义列表

通常用于一些术语的描述

• <dl> : definition list
• <dt> : definition title
• <dd> : definition description

    <dl> 
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>元素</dt>
        <dd>组成HTML的每个单元</dd>
    </dl>

容器元素!!!

该元素代表一个块区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素

• header : 通常用于表示页头,也可以用来表示文章的头部
• footer : 通常用于表示页脚,也可以用来表示文章我尾部
• article : 通常用于表示文章正文
• section : 通常用于表示文章的章节
• aside : 通常用于表示网页的附加信息，额外的信息,或侧边栏

    <header>
        <div>
            <img src="" alt="">
        </div>
        <div>
            <ul>
                <li>Lorem.</li>
                <li>Dolorum!</li>
                <li>Nesciunt!</li>
                <li>Fugit.</li>
            </ul>
        </div>
    </header>
    <article>
        <div>
            <div></div>
            <div></div>
        </div>
    </article>
    <footer>
        <div>
            <div></div>
            <div></div>
        </div>
    </footer>