HTML-CSS复习（一）开篇大吉_css返回上一级目录-CSDN博客

本文链接：https://blog.csdn.net/weixin_44730244/article/details/115772252

这是一篇啰嗦的文章，开篇必啰嗦，逃不掉的🤭

网页载体

浏览器对于网页而言是必不可少的。如果没有浏览器，那么整个前端可能就失去了核心。浏览器是整个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基础结构与属性

超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言

超文本：文本内容和非文本内容（图片、视频、音频等）

标记：<单词>也叫做标签分为两种：单表签<hr>、双标签<div></div>，标签可以上下排列，也可以组合嵌套，

语言：编程语言

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 ></p >//段落标签

2.文本修饰标签

<strong></strong> //强调：强调行更强
强调
<em></em> //斜体：强调性稍弱
斜体
<sub></sub> //下标文本
a₂
<sup></sup> //上标文本
10²
<del></del> //删除文本
删除
<ins></ins>//插入文本与删除配合使用（促销价格）
~~原价：100~~ 现价：60

3.图片img

<img src=’’ 路径" title=“鼠标划到图片时的提示” alt=“图片加载失败后的文字” width=“图片宽度” height=“图片高度”/>//单表签
建议图片加上自定义宽高。这样才能保证在网速缓慢的时候，在图片上下的文字不会挤压在一起，能够给图片留一个高度，形成从上至下缓慢加载过程。提升用户体验
src:可填写相对路径，也可以填写绝对路径

排序：从左到右，以底部对齐，当该行宽度无法存储多个图片，就会发生折行。
缩放：要想图片缩小或者放大时，可以只修改宽/高，这样就会等比缩放。如果同时修改宽高，就会有可能出现变形

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

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