html笔记（2021/4/15）

目录

6.html基本语法

6.3标签对空白换行不敏感

6.4文本空白折叠现象

7.1html的常用标签

1.h系列标签

2.p标签

3.img标签

4.相对路径和绝对路径

5.锚点

8.列表

1.无序列表

2.有序列表

3.定义列表

---

6.html基本语法

6.3标签对空白换行不敏感

（例如标签并排放和分行放最后效果都一样）文字并排由标签决定（块级or行内级）可以将代码压缩空白部分，减少内存。

6.4文本空白折叠现象

标签中文字有空格换行缩进造成的空白最后都只以一个空白格显示。

空格：字符实体&nbsp增加空白（多个中间加分号）

换行：br

7.1html的常用标签

1.h系列标签

一共包含6个标签head权重最高，都是双标签，容器级标签。

h&*x（快速调出x个h标签）

h1权重最大，其他依次排序，若设置多个h1，则降低排名

2.p标签

双标签 文本级标签

作用：增加一个完整段落的含义

可以将一整段文字放在p标签中 不用换行符 相当于分段的作用

缩进：p标签中写入 style=“text-indent：2em：”相当于一个tab

3.img标签

单标签，文本级标签，在指定位置插入一张图片

src：引入图片的路径 并没有将图片拿出来

alt：图片加载不出来的替换文本

width：设置图片宽度 height设置图片高度

如果只设置一个属性例如宽度，两者会等比例进行缩放

title：设置鼠标移上图片后的悬停文本 

border：给图片添加边框 单位为像素（但真正加边框的时候是使用css）

（在不同的功能后加一个空格再键入新功能）

4.相对路径和绝对路径

相对路径：从html文件出发 找到所需要找到的图片的路径（有文件夹都要写进去）

如果进入某个文件夹使用“/”

出某个文件夹使用“../”（因为html文件可能在文件夹里 寻找时需要先出html所在的文件夹）

如果需要出多个文件夹就使用多个”../"

src 若在文件夹里 文件夹名称/文件名称来找到图片路径

绝对路径：盘符绝对地址和网站绝对地址

基本使用网站绝对地址

5.锚点<a></a>

双标签 文本级标签

作用：在指定位置添加一个超级链接，从而实现相应的跳转

herf后加入url的链接 同时记住在标签一定要写文字 不然就无法实现跳转功能

target：是否在新标签页打开文件 target=“_blank"

锚点实现在同页面的跳转

方法一：1.设置一个空锚点，然后给这个空锚点设置一个name属性值和锚点的herf属性是一样的，其中herf等号后的属性信息前需要加”#“，否则找不到。

    <h2>周杰伦</h2>
    <a href="#jbxx">基本信息</a>

    <h3>基本信息</h3>
    <a name="jbxx"></a>

方法二：在标题处

例：<h3 id=”jbxx“>基本信息</h3>

id属性的值要和herf一样（herf一样要注意加#）

  <h2>周杰伦</h2>
    <a href="#jbxx">基本信息</a>
 
    <h3 id="jbxx">基本信息</h3>

                                                                                                                         

8.列表

列表都是由多个标签组成

1.无序列表

作用：定义一个没有顺序的列表结构

<ul>

<li>xxx</li>

<li>xxx</li>

<li>xxx</li>

</ul>

ul标签内部嵌套li，它们是父子关系；

规律：ul标签内部必须只能嵌套li，li标签内部可以嵌套任何标签，甚至是ul

无序列表项之间没有先后顺序之分

列表项前的前缀样式是有css去控制的，目前只负责结构的搭建即可

2.有序列表

作用：定义一个有序列表的列表结构

需要两个标签组成ol，li

ol（有序列表）

li（列表项）

ol内部嵌套li，使用了ol的标签可以使列表前是带有数字序号排序的列表

    <h2>111</h2>
    <ol>four
        <li>four
            <ol>
                <li>力</li>
                <li>米</li>
                <li>牛</li>
            </ol>
        </li>
        <li>three</li>
        <li>two</li>
        <li>one</li>
    </ol>

其最大区别一个是使用场景，一个是顺序。

3.定义列表

1.作用：创建一个内容和标题自定义的列表结构

2.由三个标签组成 dl，dt，dd

dl（definition list）：表示创建一个自定义的列表结构

dt（definition term）：定义主题或者定义术语，表示一个列表的主题

dd（definition description）：定义解释项 表示解释和说明前面的主题内容

dl只能存放dt和dd，dt和dd是同级关系

每个dt主题的后面可以跟0-多个解释的dd，每个dd解释的就是上一个最近的dt

dd和dt相当于容器级标签，可以存放其他的多种标签。