• 【HTML】元婴篇

    文章目录

    注释标签

    列表标签

    无序列表 ul (unordered list)

    有序列表 ol (ordered list)

    自定义列表

    语义化容器元素

    元素包含关系

    iframe标签

     页面中使用flash元素

    其他标签介绍

    abbr  (缩写词)

    time  (提供给浏览器或搜索引擎阅读的时间)

    q (一小段引用文本);   blockquote (大段引用的文本)

    link 链接外部资源（CSS,图标）

    专栏目录：HTML专栏

    引言

    上文我们讲到了一些标签的使用方法，今天继续介绍新的标签的使用。

    注释标签

    在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，其基本格式如下：

    1. <body>
    2.     <!-- 注释语句 -->
    3. </body>

    注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

    列表标签

    什么是列表？把....制成表，以表显示

    容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐、整洁、有序。

    无序列表 ul (unordered list)

    无序列表的各个列表项之间没有顺序级别之分，是并列的。无序列表常用于制作菜单 或 新闻列表。其基本语法格式如下：

    1. <body>
    2.   xxx美女择偶条件：
    3.   <ul>
    4.     <li>有责任心</li>
    5.     <li>会家务</li>
    6.     <li>会孝敬老人</li>
    7.     <li>年薪30w</li>
    8.   </ul>
    9. </body>

    注意：

    1.  <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

    2.  <li>与</li>之间相当于一个容器，可以容纳所有元素。

    3.  无序列表会带有自己的样式属性，放下那个样式，一会让CSS来！

    有序列表 ol (ordered list)

    有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

    1. <body>
    2.   把大象放进冰箱，总共分几步？
    3.   <ol>
    4.     <li>打开冰箱门</li>
    5.     <li>把大象放进去</li>
    6.     <li>把冰箱门关上</li>
    7.   </ol>
    8. </body>

    自定义列表

    定义列表常用于对术语和名词进行解释和描述，定义列表的列表项前没有任何项目符号，其基本语法如下：

    1. <body>
    2.   HTNL中的术语解释：
    3.   <dl>
    4.     <dt>HTML</dt>
    5.     <dd>
    6.       超文本标记语言，xxxxxxxx
    7.     </dd>
    8.  
    9.     <dt>元素</dt>
    10.     <dd>
    11.       组成HTML文档的单元，每个元素xxxxxxx
    12.     </dd>
    13.   </dl>
    14. </body>

    语义化容器元素

    容器元素：该元素代表一个块区域，内部用于放置其他元素，之前的文章有提到 div 和 span 标签这两者虽然是容器元素但没有语义，现在在学习其它容器元素但是含有语义：

    article：    通常用于表示整篇文章

    header:     通常用于表示页头（表示文章的头部）

    aside:       通常用于表示侧边栏（附加信息）

    section:    通常用于表示文章的章节

    footer：   通常表示页脚（表示文章的尾部）

    元素包含关系

    以前：快级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外；现在元素的包含关系由元素的内容类别决定。

    总结：

    1. 容器元素中可以包含任何元素

    2. a元素中几乎可以包含任何元素

    3. 某些元素有固定的子元素（ul>li, ol>li, dl>dt+dd）

    4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

    iframe标签

    iframe  (框架页) 可替换元素，通常用于在网页中嵌入另一个元素。显示的内容取决于元素的属性

    1.   <title>Document</title>
    2.   <style>
    3.     iframe{
    4.       width: 100%;
    5.       height: 500px;
    6.     }
    7.   </style>
    8. </head>
    9. <body>
    10.   <a href="https://www.baidu.com">百度</a>
    11.   <a href="https://www.douyu.com" target="myframe">斗鱼</a>
    12.   <a href="https://www.taobao.com">淘宝</a>
    13.   <iframe name="myframe" src="https://www.baidu.com">百度</iframe>
    14. </body>

    这就有点像target中_self和_black一样，不过我们设置的iframe是让当前链接在我们设置的窗口打开，而不是当前页面打开。窗口可以自己设置，需要借用CSS样式 (后期也会单独讲)

    当然我们也可以用其他的网站视频来弄到自己的网站上，之前在b站弄的视频，点击分享然后点击嵌入代码即可，刚才打算再在b站弄个测试一下，不过不知道什么情况一直复制不到，可能是Bug吧，复制当前页面的链接中的字都溢出来了，所以我又试了一下西瓜视频，大家看看就好。应该是版权意识提高了。我用以前的展示一下吧

    1.   <style>
    2.     iframe{
    3.       width: 1000px;
    4.       height: 600px;
    5.     }
    6.   </style>
    7. </head>
    8. <body>
    9.   <iframe src="//player.bilibili.com/player.html?aid=212300798&bvid=BV1ja41187B3&cid=549595070&page=1" scrolling="no"  frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    10. </body>

    嵌入代码会自动带这些属性，大家了解一下就行。

     页面中使用flash元素

    播放视频可能都会遇到flash问题，在页面中使用flash，object和embed都是可替换元素；其中MIME是多用途互联网邮件类型，比如，资源是一个jpg图片，MIME:image/jpeg。(了解即可)

    1. <!-- 兼容的写法 -->
    2. <object data="./example.swf" type="application/x-shockwave-flash">
    3.   <param name="qulity" value="high">
    4.   <embed qulity="hight" src="./example.swf" type="application/x-shockwave-flash">
    5. </object>

    其他标签介绍

    abbr  (缩写词)

    1. <body>
    2.     <abbr title="cascading style sheet">CSS</abbr>是用于为页面添加样式
    3. </body>

    time  (提供给浏览器或搜索引擎阅读的时间)

    1. <body>
    2.     <time datetime="2022-7-4">今年7月</time>我学习了HTML
    3. </body>

    q (一小段引用文本);   blockquote (大段引用的文本)

    1. <body>
    2.     最近热播的美剧《权力的游戏》中有一句非常经典的台词：<q>在权力的斗争中，非胜即死，没有中间状态。</q>
    3.     <!-- cite(引用别人网站的内容，加一下对方的网站，给自己和别人看) -->
    4.     <blockquote cite="https://develpr.......">
    5.         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus expedita, nemo itaque tempore maxime magni
    6.         sit autem velit mollitia molestias aspernatur ducimus neque sunt id similique, labore eveniet nostrum
    7.         accusantium.
    8.     </blockquote>
    9. </body>

    link 链接外部资源（CSS,图标）

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <!-- content里面的内容直接在百度能搜索到，要排名靠前得加钱 -->
    6.   <meta name="keywords" content="在线商城，美容，微整形">
    7.   <meta name="author" content="zly,dafafafa@qq.com">
    8.   <title>Document</title>
    9.   <!-- 网站的图标 -->
    10.   <link rel="icon" href="123.ico">
    11. </head>

    rel属性：relation,链接的资源和当前网页的关系; type属性：链接资源的MIME类型

    个人总结：

    今天就到这，下期再见，收藏专栏不迷路！！！

  • 相关阅读:
    第 4 章 串（串采用定长顺序存储结构实现）
    2.4 如何在FlinkSQL使用DataGen(数据生成器)
    C语言——三种方式实现学生信息管理
    如何使用react-router v6快速搭建路由？
    NFT 交易市场社区所有化势不可挡
    差点自闭，京东面试官夺命连环问操作系统，幸好最后拿到了offer
    MySQL实现的一点总结（一）
    关于Python数据分析，这里有一条高效的学习路径
    《web课程设计》基于HTML+CSS+JavaScript典的中医药大学网(11个页面)
    学位论文的引用
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/125592544