HTML333

最新推荐文章于 2024-10-19 15:55:42 发布

初闻女人香

最新推荐文章于 2024-10-19 15:55:42 发布

阅读量38

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_70251011/article/details/134552214

版权

本文介绍了HTML中的基本元素，包括无序列表、有序列表、定义列表的用法，以及div和span元素在布局中的应用。同时涵盖了多列布局示例和iframe的使用，包括设置高度、宽度、边框以及嵌入外部链接。还提到了字符实体在处理特殊字符的重要性。

摘要由CSDN通过智能技术生成

HTML列表

html支持有序列表、无序列表、以及定义列表。

1.首先是无序列表:

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 < ul > 标签

2.然后是有序列表：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 < ol> 标签。每个列表项始于 < li > 标签。

列表项使用数字来标记。

最后是定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 < dl> 标签开始。每个自定义列表项以 < dt> 开始。每个自定义列表项的定义以 < dd> 开始。

html区块

HTML 可以通过 < div > 和 < span >将元素组合起来。

HTML < div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
< div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。
< div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

HTML < span> 元素是内联元素，可用作文本的容器
< span> 元素也没有特定的含义。
当与 CSS 一同使用时，< span> 元素可用于为部分文本设置样式属性。

使用五个div元素实现多列布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
</head>
<body>

<div id="11" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

</div>
 
</body>
</html>

框架

iframe语法：该URL指向不同的网页

<iframe src="URL"></iframe>

iframe -设置高度与宽度：
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)：

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe - 移除边框：
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

iframe 来显示目标链接页面：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

字符实体

HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：