HTML-CSS复习（一）开篇大吉
这是一篇啰嗦的文章，开篇必啰嗦，逃不掉的🤭
网页载体
浏览器对于网页而言是必不可少的。如果没有浏览器，那么整个前端可能就失去了核心。浏览器是整个HTML的载体，也是将html划分成了用户可见部分，也就是浏览器上面的可以看到部分，还有不可见的标签。
主流的网页浏览器分为：opra(欧朋)、firefox（火狐）、IE、safari（苹果自带）、谷歌（chorme）、QQ浏览器
opra：现在已经很少人使用了，使用率相对于上述其他的浏览器而言是最低的
chorme：安卓的主要浏览器，也是全世界使用率最高的
手机浏览器主要有三种：苹果手机自带的safari、安卓系统chrome、还有微信经常使用的简易qq浏览器插件。
HTML5规范
万维网 www.w3.org:可以说万维网就是前端的规则，也是由于万维网对于HTML的规范所在，才能让HTML5整个代码，才能看起来井然有序。
说到万维网，也不得不提一下OpenSSL：全世界80%以上都在使用的网络通信加密工具。主要是还是免费！！！！，而且也是来自全世界的IT技术人员一直在维护的。
什么是html、css，网站
html、css它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。网站是浏览器解析代码之后呈现出来的效果。一个网站由n多个网页组成，每一个网页就是一个html文件。
网站开发人员主要有UI设计师负责设计端、web前端设计师（H5开发）负责将UI设计师传过来的设计稿转成代码，或者将数据库里的数据显示到页面
前端核心技术：html（结构）、css（样式、布局）、JavaScript：交互、事件行为
HTML基础结构与属性
超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言
超文本：文本内容和非文本内容（图片、视频、音频等）
标记：<单词>也叫做标签 分为两种：单表签，标签可以上下排列，也可以组合嵌套，
语言：编程语言
HTML初始代码
每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，符合html规范写法
<!DOCTYPE html> //告诉浏览器，使用HTML5的标准来解析这个网页
<html lang='en'>//html文件的最外层标签，包裹着所有html标签代码 lang='en'表示一个英文网站 lang='zh-CN' 表示一个中文网站<head> //表示网页的头部，这里的信息都是对网页的整体说明，一般是网页头部URL地址那部分，都是在head内部编写的。比如 网页的前进后退按钮，网页标题，网页的刷新等等<meta charset="utf-8" /> //元信息 是编写网页的 辅助信息 utf-8 采用国际编码<title> 网页标题 </title> //显示在网页标题</head><body> //网页的主要内容都存在这个标签内你好</body>
</html>
head头部内容划分：
HTML标签与属性
html5标签元素周期表可以点击查看详细的标签信息
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 ->element->（左上角箭头点击->再点击到你要获取的图片）找到目标所在的标签->（没有对应img那么就有可能是背景图片）查看style->找到对应的backgro-image->右键open in new tab->右键另存为（下载的图片可能是多个小图片的合集，使用Photoshop自行裁剪）
工具photoshop
裁剪图片：切片工具->alt+鼠标滚轮（放大）->ctrl+shift+alt+s(保存)->预设下面选择png-24->透明度勾上->存储->选择存储位置->切片：选择所有用户切片（存储成功
路径详解
绝对路径：非常完整准确的地址。从根目录开始查找。在任何情况下，都可以找得到的地址 例如D:/web笔记/img/dog.jpg(盘符可以忽视 /web笔记/img/dog.jpg)
相对地址：必须知道当前所在，才能定位目标。相对自己向上查找 …/返回上一级目录 ./返回当前路径，建议使用该方法，因为盘符很容易改变
本地路径的地址斜线/,也可以是反斜线\，但是网络地址就必须是斜线了/
代码美观
在书写代码时，记得一定要保持美观！！！！！
不仅是为了让别人看得舒服，也是让自己以后复盘的时候，能够看起来不那么烦躁，所以记得一定要记得缩进！缩进！缩进！（重要事情重复三遍）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！