第二章标签1、字符实体可以去 https://www.w3school.com.cn/html/html_entit

1、字符实体

可以去 www.w3school.com.cn/html/html_e… 自行查看；

HTML当中有一些字符是系统预留的或打印不出来的，为了能在我们受用中能够正常使用，我们需要把使用中的预留字符必须被替换为字符实体

例如：

空格 & nbsp

< & lt

大于号 & gt

2、HTML标签语义化

含义：合理的标签做合理的事情

1、遵循标签语义化的意义：

利用SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
在样式丢失的时候，还是可以比较好的呈现结构

更好的支持各种终端，例如无障碍阅读和有声小说等；
利于团队的开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；

2、日常工作中我们应该怎样去遵守标签语义化

尽量减少使用无意义标签，例如span和div；
尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；

在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
列表搭建时，使用无序列表ul，有序列表ol，自定义列表dl；

3、补充标签

div：

大盒子标签

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

span：

小盒子标签
主要是为了增加额外的结构，方便我们控制样式或者是数据

使用要求：在其他语义化标签不适用的情况下在使用

    <!-- 大盒子标签 -->
    <div>案件四大</div>
    <!-- 小盒子标签 -->
    <span>小盒子标签</span>

注意：小盒子不能包裹大盒子

4、格式化标签

加粗：b/strong
斜体：i/em

删除线：del/s
下划线：u/ins

 <!-- 格式化标签 -->
    <!-- 加粗 -->
    <b>加粗</b>
    <strong>加粗</strong>
    <!-- 斜体 -->
    <i>斜体</i>
    <em>斜体</em>
    <!-- 删除线 -->
    <del>删除线</del>
    <s>删除线</s>
    <!-- 下划线 -->
    <u>下划线</u>
    <ins>下划线</ins>
    
<pre>预格式标签</pre>
<!-- 内联框架元素 -->
    <iframe src="" frameborder="0"></iframe>

5、预格式标签

标签：pre
作用：按照预定设置好的格式进行显示

意思：打出什么形状就是什么形状

6、iframe标签

内联框架元素：iframe
作用：能够将另一个HTML页面嵌入到当前页面中

页面上的每个都会需要包括内存在内的额外计算资源，虽然理论上来说你能够在代码上写出来无限多的，但是你最好还是先看看这样做会不会导致某些性能问题

 <iframe src="" frameborder="0" width="" height="" ></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>

我们在使用时要保证当前页面和目标页面是同级关系

frameborder属性：是否有边框，只会有两个值0是没有边框，1是有边框。

7、三大列表

列表分为

有序列表/ol

<!-- 有序列表 -->
    <ol>
        <li>第一项 </li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

无序列表/ul

 <!-- 无序列表 -->
    <ul>
        <li>实打实</li>
        <li>撒旦</li>

    </ul>

自定义列表/ol

  <!-- 自定义列表 -->
    <dl>
        <dt>早餐</dt>
        <dd>包子</dd>
        <dd>油条</dd>
        <dd>小米粥</dd>
    </dl>

8、总结标签

标题：h1-h6
段落：p
超链接：a
图片：img
div /span
格式化标签：b/strong i/em u/ins s/del
预格式化标签：pre
三大列表：ol li ul dl dt dd
内联框架标签：iframe

块级元素

- 排列方式从上到下，独占一行，可以设置宽度，如果不设置宽度就会导致父级撑满

- 标签：h1-h6 、p、div、三大列表

行内元素

- 排列方式从左到右，共占一行，不可以设置宽度，宽高由内容撑开。

- 标签：a、span、b/strong、i/em、u/ins、s/del

行内块

- 排列方式从左到右，共占一行，可以设置宽度

- 标签：img、iframe、

9、更改显示类型

<style>
        div {
            display: inline-block;
            /* 行内块 */
            display: inline;
            /*行内  */
            display:block;
            /* 块级元素  */
             display: none; 
            /* 隐藏元素 */
             width: 200px; 
        }
    </style>

10、路径

分为相对路径和绝对路径

相对路径就是说：相对于当前路径来说的位置，找到目标文件

绝对路径：线上地址或硬盘寻找地址

如果是同级目录下直接写文件名（./省略了）

返回上一级 ../ 每返回一级就有一个../

11、元素消失方法

display：none；
visibility：hidden；

opacity：0（控制元素透明度）；
通过z-index控制层级（定位元素）

通过margin赋值移动到屏幕的一侧
font-size：0（对文字）

宽高为0，overflow：hidden；

        /* 第一种  位置不在*/
        /* display：none； */
        /* 第二种  位置还在*/
        /* visibility:hidden; */
        /* 第三种  位置还在 */
        /* opacity:0; */
        /* 第四种 */
        /* font-size:0; */
       （ /* 第五种 */
        width:0; height:0;
        /* 溢出部分裁剪 */
        overflow:hidden;）

第二章 标签