html .2

无序标签、有序标签、自定义标签

无序标签  没有序列的一组内容

语法<ul>

        <li> </li>

         <li> </li>

        。。。

        </ul>

语义：无序标签 是无序列表 将没有数字的一组数据或内容进行分组

默认样式：上下外边距，左内边距  列表前有小圆点

type属性 

disc列表样式 实心圆 （默认样式）

cricle 列表样式  空心圆

square 列表样式  实心小方块

注意：type属性不常用，通常使用css属性代替

有序标签  将有意义的一组内容或数据进行顺序排序

语法 <ol>

        <li> </li>

         <li> </li>

        。。。

        </ol>

默认样式：上下外边距，左内边距  列表前是数字符号（1234...）

 type属性

a：小写字母

A：大写字母

i：小写罗马数字

I：大写罗马数字

<ol type="a"></ol>

自定义列表

语法：<dl>  #定义自定义列表

                <dt></dt> #小标题

                <dd></dd>#小标题的解释

           </dl>

语义  dl自定义列表、dt自定义列表项、dd自定义列表项的注释（描述）

将一组项目及相关一些小元素进行分组

默认样式 dl、dd默认带有间距    dl里dt只能用一个，dd可以由多个

行级标签

图片标签  <img src=" " alt=" " 宽高等>单标签      

 src=source =来源；出处；信息来源；源头

href=hyperlink=超链接 用于a标签

src属性 用于指定图像文件的路径和文件名

注意：是<img>标签的必须属性

alt属性 指定替换文本，默认不显示，当图像不能正常显示时，显示该文字对图像进行替换，有利于用户体验

 width/height 作用指定图片宽度/高度

宽高度单位是px    只指定宽或高属性其中一个，另一个按照原比例等比缩放

默认样式 多张图片可以交列在一行显示  默认产生下间隙

图像路径

页面中的图片会非常多，通常我们会建一个文件夹来存放大量图片而用编译器的时候就需要通过路径来找到图片位置

路径分为  相对路径和绝对路径

相对路径

概述：相对路径是指这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括 当前目录，上级目录，下级目录

当前目录 语法 ./查找当前目录的图片

上级目录  语法  ../查找上一级目录的图片

下级目录   语法  首先找到当前目录 ./ 在选中下级目录的文件夹/再选中图片.后缀。./下级目录的文件夹/图片.后缀

绝对路径它是一个定死的路径，不会根据文件的移动而有所变动，在html中有两种绝对路径：

1.本地磁盘绝对路径   

这种路径写法基本上在程序项目中是明令禁止的，只能在本电脑中使用，移植到其他电脑就不能使用了因为每台电脑的每个盘的每个文件夹及内容创建的不同所以移植过来也无法使用。

2.网址绝对路径

网络绝对位置 语法 包括协议和域名 ：如：https://www.baidu.com

特点：绝对URL始终是同一位置，无论在何处使用

超链接

点击链接跳转到目标位置 超链接可以是网页中任何形式的存在，只要点击，被传送或跳转到目标位置就是超链接。

语法<a href=" "></a>

语义 超链接

默认样式 不独占一行，默认当前窗口打开新网页，默认带有下划线、文字颜色。

超链接属性 href属性 作用：跳转链接的地址。想跳转哪个链接，链接就写哪个网页的地址。

target属性 作用：打开指定链接的打开方式

取值： _blank 新窗口打开 _self当前窗口打开（默认值）

title属性 作用：定义提示文本，鼠标悬停在链接上会显示标题作为同级提示

连接的类型

空连接 描述：没有确定链接的目标时使用空链接

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

外部链接 描述：链接到站外其他 网站的链接（绝对地址）

<a href="https://www.baidu.com"></a>

内部链接 （相对地址）

描述： 网站内部页面之间的相互链接。直接链接内部页面的名称

<a href="up.html"></a>

下载链接

如果href里面的地址是一个文件或压缩包，点击后会下载这个文件或压缩包

<a href="工作流程.txt"></a>

锚点链接 描述：点击锚点链接时，可以快速定位到页面中的某个位置

案例 ：

跳转的目标(跳转到)：<p id="al"></p>

点击跳转到目标的语句：<a href="#al></a>

多页面跳转

两个html文档 一个目标文档（举例为a）a文档里可以写任何标签（举例写个p标签） <p id="a1"></p>

第二个为 点击跳转文档（举例为b）

href里面写 目标文档的地址然后

写#目标文档的id名<a href="./a.html#a1"></a>

文本格式化标签

在日常用语中，我们会常常加重某个字的读音，因为它是重要的。

于此类似，html也提供了相应的标签，用于标记某些文本。

em标签 双标签

语义：用于标记强调内容

默认样式 斜体显示，不独占一行

strong 标签 双标签

语义：用于标记强调内容

默认样式 不独自成行 有加粗效果

del标签 双标签

作用：在文本中生成删除线（中划线）

默认样式：带有中划线，不独占一行

i标签 双标签

无语义 默认样式 字体倾斜 不独占一行

b标签 双标签

无语义 默认样式 加粗 不独占一行

span标签 双标签 无语义 无样式

换行标签 单标签

注意：不应该只为了实现加粗、斜体效果使用strong、em，应该是为了显文本的重要度来使用，加粗、倾斜可以用css来代替

br用于处理文本内容换行，不应用于控制元素间距。

html字符实体

概述：html中有些字符是保留的例如，不能直接在文本中输入大于号或小于号，因为浏览器会误认为它们是标记。

希望浏览器如实显示这些字符，那么我们必须在HTML源代码中插入字符实体

常用的实体字符

注意：实体名称对大小写敏感！

完整实体字符参考手册

HTML ISO-8859-1 参考手册

html语义化（谈谈你对html语义化的理解）

什么是语义化

语义化是指 用合理的HTML标记以及 其特有的属性去格式化文档内容。

例如（标题用 h1-h6 段落用p标签 ）

语义化的好处（为什么要语义化）

在没有css的情况下，页面也能呈现出很好的内容结构。

使代码更具【可读性】便于团队开发和维护

有利于SEO搜索引擎优化（和搜索引擎建立良好沟通，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重）

有利于【用户体验】例如title、lable 标签、alt属性的灵活运用