关于HTML标签、列表、语义化、超链接的一些知识

标题标签

使用 <h1></h1>---<h6></h6>

特点： 有默认的样式

字体加粗 字号根据 标题的权重依次 变小

标题的内容会自动换行

语义： 代表 标题

有利于 搜索引擎的优化

使用时：

即使在没有css的情况下 也能够 很直观表现页面的结构

注意事项：

h1 标签 一个网页中 只能使用一次， h2-h6 可以多次使用

根据标题的权重依次 按照顺序使用 ，不能跨级使用

应用场景：

信息或者文章类型的页面中 用于 文章或者信息的标题

用于 网页logo部分，

网页中某一个模块的标题

了解：

h1 {
    display: block;  块元素
    font-size: 2em;   设置字体大小
   
    font-weight: bold;  字体加粗
}

# 段落标签

语法：

<p>内容</p>

特点：

默认的样式 有默认的上下间距 块标签

语义： 表示网页中一段文本内容

使用场景：

产品的描述信息，文章的段落

注意：

段落标签是不能嵌套 标题标签的

段落标签不能嵌套段落标签

拓展： br标签 单标签

格式：

<!-- 功能型标签  用来强制换行 -->
<br>

列表

无序列表

语法：

<ul>
    <li></li>
    .....
</ul>

语义： 主要描述 没有顺序数据的 分组

使用场景： 导航栏、新闻列表

特点： 默认有上下间距 默认的表示是 实心圆

可以通过 type属性设置 成其他的形状

disc列表样式实心圆

circle 列表样式空心圆

square列表样式为小方块

有序列表

语法：

<ol>
    <li></li>
    ....
</ol>

语义： 主要描述 有顺序的数据

使用场景： 排行榜、 有步骤的信息

特点： 有默认的上下间距 默认使用数字作为 标识

可以通过type 修改 标识类型 1 a A i I

可以通过start 修改 开始的位置

注意事项

有序和无序的列表 直接子元素 必须 是li

自定义列表

语法：

<dl>
    <dt>标题</dt>
    <dd>描述</dd>
    ....
    <dt>标题</dt>
    <dd>描述</dd>
    ....
</dl>

使用场景： 名词解释 、网页的尾部

特点： dl 有默认上下间距 dd 左侧有间距

div 标签

一般配合css 来取做网页的布局

div主要的功能是 划分网页模块

块标签

内容小结

标题：h1-h6 双标签 有默认样式 块标签

段落： p 双标签 默认样式 块标签

无序列表： ul>li 双标签 默认样式 块标签

有序列表： ol>li 双标签 默认样式 块标签

自定义列表：dl>dt+dd 双标签 默认样式 块标签

div标签： div 双标签 没有默认样式 块标签

图像标签

多张图片会并在一排显示 图片和图片之间会有缝隙

格式：

<img src=""  alt="">

src： 指定图片路径的

alt: 设置 当图片加载失败的 替代信息

了解的属性： title width/height

宽度和高度只设置一个即可，另一个会等比例缩放

路径：

相对：

相对于当前文件本身 去找指定图片文件

./ 当前路径 可以省略不写

<img src="demo.png" alt="">
<img src="./demo.png" alt="">

绝对的：

网络图片： 包含完整地址包括协议和域名

本地的： windows 中从盘符找

linux: / 写在地址的最前面 代表的根路径

如果使用绝对路径 可以忽略当前文件的位置

/Users/zhanghuanyu/Desktop/web0713/day02

|---img

     |--01.jpg

     |--02.jpg

|---代码

     |--demo.html

在demo.html 当中引入 img里面的01.jpg

<!-- 绝对路径 -->
<img src="/Users/zhanghuanyu/Desktop/web0713/day02/img/01.jpg" alt="">
​
<!-- 相对路径 -->
<img src="../img/01.jpg" alt="">

/Users/zhanghuanyu/Desktop/web0713/day02

|---img

     |--01.jpg

     |--02.jpg

     |--demo.html

<img src="./img/02.jpg" alt="">
<img src="img/02.jpg" alt="">

我在哪，我是谁 ，我要找谁

超链接

语法格式：

<a href="">内容</a>

href: 指定跳转的地址

如果是网络地址，必须要带协议

target: 指定连接的打开方式

_self 默认值 当前窗口打开连接的网页

_blank 在新的窗口中打开连接

注意： 空连接 需要在href属性的值中加 #

<a href="#">内容</a>

下载连接： 我们href属性的值 指向的是一个 压缩包或者是一个 可执行的exe 文件

<a href="img.zip">内容</a>

默认样式：

字体默认是蓝色 带下划线 鼠标悬浮到连接上时，变成手的形状

锚点：

在页面内部进行跳转

给目标位置的标签添加id属性

<p id="item" >...</p>

绑定连接

<a href="#item">内容</a>

跳转到指定页面的指定位置

<a href="指定网页的地址#item">内容</a>

文本标签

em: 倾斜 有语义表示 强调

i： 倾斜 无语义

strong：加粗 有语义 表示强调

b: 加粗 无语义

del: 删除线

Span：无语义 无样式 一般配合css使用，给一段文本中的 一部分内容设置样式

语义化

就按照场景 根据标签语义来选择使用标签和属性，让网页的内容能够更好的格式化

优点：

没有css的情况下，我们的页面结构也可以清晰的展示

提升 代码的可读性

有利于搜索引擎的SEO

提升用户的体验

实体字符：

记一些实体字符

 

 

思维导图：