网页载体

HTML标签的属性：来修饰标签，设置当前标签的一些功能

HTML注释

注释的代码，只有在文件中看得到，但是浏览器显示不出来

写法：

意义：把暂时用不到的代码注释起来，留给以后使用 ；代码说明，给开发人员提示。

ctrl+/ (整行注释)和 ctrl+shift+a （块注释）

HTML语义化

概念：根据网页中内容的结构，选择适合HTML标签进行编写

好处：

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

2.有利于SEO（搜索引擎优化），让搜索引擎爬虫更好的理解网页

3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）（屏幕阅读器：能够将每一个网页的每一个标题提取出来，可以直接点击提取的标题跳到相应的位置，方便浏览）

4.便于团队开发与维护

语义化标签 1.标题和段落

< h1>< /h1>//标题标签：变大加粗 h1~h6

在一个网页中，h1标题是非常重要的，整个网页只能存在一个h1,虽然多个h1网页也会解析出来，但是为了符合语法规范，尽量每一个网页只使用一个h1标签

< p >

//段落标签

2.文本修饰标签

//强调：强调行更强

强调

//斜体：强调性稍弱

斜体

//下标文本

a2

//上标文本

102

//删除文本

删除

//插入文本 与删除配合使用（促销价格）

原价：100 现价：60

3.图片img

//单表签

建议图片加上自定义宽高。这样才能保证在网速缓慢的时候，在图片上下的文字不会挤压在一起，能够给图片留一个高度，形成从上至下缓慢加载过程。提升用户体验

src:可填写相对路径，也可以填写绝对路径

排序：从左到右，以底部对齐，当该行宽度无法存储多个图片，就会发生折行。

缩放：要想图片缩小或者放大时，可以只修改宽/高，这样就会等比缩放。如果同时修改宽高，就会有可能出现变形

网页图片下载

方式一：右键->图片另存为

方式二：f12 ->->（左上角箭头点击->再点击到你要获取的图片）找到目标所在的标签->（没有对应img那么就有可能是背景图片）查看style->找到对应的-image->右键open in new tab->右键另存为（下载的图片可能是多个小图片的合集，使用自行裁剪）

工具

裁剪图片：切片工具->alt+鼠标滚轮（放大）->ctrl+shift+alt+s(保存)->预设下面选择png-24->透明度勾上->存储->选择存储位置->切片：选择所有用户切片（存储成功

路径详解

绝对路径：非常完整准确的地址。从根目录开始查找。在任何情况下，都可以找得到的地址 例如D:/web笔记/img/dog.jpg(盘符可以忽视 /web笔记/img/dog.jpg)

相对地址：必须知道当前所在，才能定位目标。相对自己向上查找 …/返回上一级目录 ./返回当前路径，建议使用该方法，因为盘符很容易改变

本地路径的地址斜线/,也可以是反斜线\，但是网络地址就必须是斜线了/

代码美观

在书写代码时，记得一定要保持美观！！！！！

不仅是为了让别人看得舒服，也是让自己以后复盘的时候，能够看起来不那么烦躁，所以记得一定要记得缩进！缩进！缩进！（重要事情重复三遍）