HTML&CSS_扩展

目录

标签规范

嵌套问题

格式问题

HTML扩展

CSS扩展

CSS雪碧

最大最小宽高

添加省略号

CSS表格

---

这目录真有毛病。。

 

---

标签规范

嵌套问题

1、固定嵌套规则

（1）<ul>、<ol>只能嵌套<li>标签。

（2）<dl>只能嵌套<dt>、<dd>标签

（3）<table>只能嵌套<tr>、<caption>、<thead>、<tbody>、<tfoot>标签

2、限制嵌套规则

（1）<p>、<dt>、<hn>标签不允许嵌套任何块标签。

（2）<a>不允许嵌套<a>标签。

（3）块标签可以嵌套内联标签，但是内联不能嵌套块标签。

格式问题

斜杠，文件头啥的，不再赘述。

---

HTML扩展

<link>

它可以引入css样式

但还有其他用法：

（1）media属性，针对不同的媒介类型进行样式设定:

screen	计算机屏幕（默认）
tty	电传打字机以及类似的使用等宽字符网格的媒介
tv	电视机类型设备（低分辨率、有限的滚屏能力）
projection	放映机
handheld	手持设备（小屏幕、有限带宽）
print	打印预览模式/打印页面
braille	盲人点字法法反馈设备
aural	语音合成器
all	适用于所有设备

（2）设置网站的缩略标志

        网站标题前面的那个图标：

        <link rel="icon" href="#" type="/image/x-icon">

        注意：href中的图标命名与格式必须是favicon.ico的格式

        在线转换格式网站：制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

<meta>

提供与页面有关的元信息，例如针对搜索引擎和更新频度的描述和关键词。

（1）文档的编码方式，charset="utf-8"

（2）网站的关键词和内容描述：

<meta name="keywords" content="HTML5,UI">
<meta name="description" content="前端语言">

（3）网站的作者和版权信息

<meta name="autor" content="小红">
<meta name="copyright" content="2022-05-05 生菜叶儿"

（4）是否允许被搜索引擎索引

<meta name="robots" content="index.follow">

index是是否允许索引，follow是否跟踪链接。比如还可以是：noindex，nofollow（禁止抓取本页，同时禁止跟踪本页中的链接。）

如果都允许还可以写成“all”，反之“none”

<area>

一些特殊形状区域添加链接。

作用：可单击区域的图像映射。

书上用的DW但我用的VsDode，暂时不学这个。

<pre>

定义预格式化的文本。

常用来表示计算机的源代码。

展示源代码在网页中。

<iframe>

将其他网页内容添加到自己当前的页面中，形成页面嵌套页面的效果。

默认显示边框和滚动条，用frameborder=0，scrolling=“no”可以去掉。

<iframe src="#" width="" height=""></iframe>

<embed>

添加音频和视频文件。

html5专门有，不学这个了。

CSS扩展

CSS雪碧

又称为CSS精灵，图像合并技术。

将小图标和背景图像合并到一张图片上，然后用CSS背景定位来显示需要显示的图片部分。

最大最小宽高

min-

max-

添加省略号

当一段文字超过容器宽度时，可以通过省略号的方式进行展示。

用text-overflow

默认值clip，修剪文本；

ellipsis，显示省略号。

CSS表格

消除单元格之间的空隙：

borde-collapse

默认separate，边框被分开。设置成collapse会被合并为单一的边框。