系统学习前端之CSS---day02

obsession36

已于 2023-12-24 14:42:07 修改

阅读量866

点赞数 16

分类专栏： CSS 文章标签：学习

于 2023-12-24 14:05:03 首次发布

本文链接：https://blog.csdn.net/weixin_63522291/article/details/135180899

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、HTML字符实体

https://www.w3school.com.cn/html/html_entities.asp

在HTML当中有一些字符是系统预留的或打印不出来的，所以你让这些字符能够正常使用需要用到实体。

HTML 中的预留字符必须被替换为字符实体。

例如：不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

为了正确的显示，要使用字符实体。

二、HTML标签语义化

含义：

合理的标签做合理的事情

为什么要遵循标签语义化

利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
在样式丢失的时候，还是可以比较好的呈现结构；
更好的支持各种终端，例如无障碍阅读和有声小说等；
利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；

日常工作中怎样遵循标签语义化：

尽量减少使用无意义标签，例如span和div；
尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；
在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
列表搭建时，使用<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表；

三、标签

div：

整体页面布局当中最重要的 HTML 元素
没有任何具体的含义，主要用于网页的布局，通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发

span:

没有任何特殊的含义
主要是为了增加额外的结构，方便我们控制样式或者是数据
并且使用要求：在其他语义化标签不适用的情况下再使用

格式化标签：

加粗：b或者strong
斜体：i或者em
删除线：del和s
下划线：ins 和u

预格式化标签---pre：

它会按照预定设置好的格式进行显示

列如：

 <pre>
      00000000     000000000
    000000000000  000000000000
   0000000000000000000000000000
   0000000000000000000000000000
   0000000000000000000000000000
     000000000000000000000000
       00000000000000000000
         0000000000000000
           000000000000
             00000000
               0000 
  </pre>

页面效果：

iframe：

HTML内联框架元素 (<iframe>)它能够将另一个HTML页面嵌入到当前页面中。
页面上每个<iframe>都会需要包括内存在内的额外计算资源，虽然理论上来说你能够在代码中写出来无限多的<iframe>，但是你最好还是先看看这么做会不会导致某些性能问题。

iframe的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8>
    <tItle>Title</tItle>
</head>
<body>
    <!--
        iframe标签：
            1、src是嵌入html的地址  
            2、width和height属性来设置内联框架的宽高
            3、frameborder="1" 的时候显示边框
 						4、frameborder="0" 的时候不显示边框
     -->
    <div>
        <h1>学习iframe标签</h1>
        <div>
            哈哈哈哈
            <iframe src="http://www.baidu.com" width="300"></iframe>
            <iframe src="./01.html" width="300"></iframe>
						<iframe src="http://www.baidu.com" frameborder="1" width="300" height="300">
            </iframe>
        </div>
    </div>

</body>
</html>

三大列表

无序列表：

ul、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。

<ul>
  <li>上班</li>
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ul>

有序列表：

ol 、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。

<ol>
  <li>上班</li>
  <li>吃饭</li>
  <li>打豆豆</li>
</ol>

自定义列表：

dl里面紧邻着的只能是dt或者dd，但是在dt或者是dd里面还可以写其它的标签

<h3>一日三餐</h3>
<dl>
  <dt>早餐</dt>
  <dd>豆浆</dd>
  <dd>包子</dd>
  <dt>午餐</dt>
  <dd>盖饭</dd>
  <dd>鸡蛋面</dd>
  <dt>晚餐</dt>
  <dd>小龙虾</dd>
  <dd>饮料</dd>
</dl>