【HTML】元婴篇

🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：HTML专栏

🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

文章目录

注释标签

列表标签

无序列表 ul (unordered list)

有序列表 ol (ordered list)

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

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

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

引言

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

注释标签

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

<body>
    <!-- 注释语句 -->
</body>

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

列表标签

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

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

无序列表 ul (unordered list)

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

<body>
  xxx美女择偶条件：
  <ul>
    <li>有责任心</li>
    <li>会家务</li>
    <li>会孝敬老人</li>
    <li>年薪30w</li>
  </ul>
</body>

注意：

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

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

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

有序列表 ol (ordered list)

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

<body>
  把大象放进冰箱，总共分几步？
  <ol>
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
  </ol>
</body>

自定义列表

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

<body>
  HTNL中的术语解释：
  <dl>
    <dt>HTML</dt>
    <dd>
      超文本标记语言，xxxxxxxx
    </dd>

    <dt>元素</dt>
    <dd>
      组成HTML文档的单元，每个元素xxxxxxx
    </dd>
  </dl>
</body>

语义化容器元素

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

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

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

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

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

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

元素包含关系

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

总结：

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

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

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

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

iframe标签

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

  <title>Document</title>
  <style>
    iframe{
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <a href="https://www.baidu.com">百度</a>
  <a href="https://www.douyu.com" target="myframe">斗鱼</a>
  <a href="https://www.taobao.com">淘宝</a>
  <iframe name="myframe" src="https://www.baidu.com">百度</iframe>
</body>

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

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

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

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