web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
浏览器不同，网页显示画面或者排版就有些许差异。遵循统一的标准使得内容可以被更广泛的设备访问，使得网站更容易维护，提高页面浏览速度。
html不是编程语言，而是 超文本的标记语言（Hyper Text Markup Language），标记语言由一套标签组成，可以是图片标签，链接标签，文字标签，标题段落标签……
html标签通常是成对出现的，例如，称为双标签，但也有单标签，例如
或者等等。
标签直接分两种关系：
<html>里包含<body>，<body>里又包含着<h1><head>和<body>每个页面都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写
lang语言种类 （属于<html>的属性）
·en : 英文
·zh-CN ：中文
<meta>标签是HTML中的元标记（meta tag），用于提供关于网页的元数据（metadata）。它不会直接显示在网页上，而是提供有关网页的信息给浏览器和搜索引擎等程序使用。（为<head>中的子元素）
<meta>标签的作用包括：
1.描述网页的内容：通过<meta name="description" content="网页描述">可以提供网页的描述信息，这些描述信息通常会在搜索引擎结果页中显示，帮助用户了解网页内容。
2.指定关键词：通过<meta name="keywords" content="关键词1, 关键词2, ...">可以指定与网页相关的关键词，帮助搜索引擎更好地理解和索引网页。
3.指定字符编码：通过<meta charset="字符编码">可以指定网页所使用的字符编码，确保浏览器正确解析和显示网页的文本内容。
4.控制网页的缓存行为：通过<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">等属性，可以控制浏览器缓存网页的方式，确保用户获取最新的网页内容。
5.指定视口设置：如前面提到的<meta name="viewport" content="width=device-width, initial-scale=1.0">，可以指定网页在移动设备上的视口设置，以适应不同尺寸的屏幕并提供更好的用户体验。
根据标签的语义，在合适的地方给一个最合适的标签，可以让页面结构更清晰。
标题标签
<h1>一级标题</h1> <h2>二级标题</h2>……<h6>六级标题<h6>，大小从左到右依次减小
段落和换行标签
<p></p>段落标签 <br/>换行标签，单标签，强制换行
文本格式化标签
<strong>粗体</strong> <em>斜体</em> <del>删除线</del> <ins>下划线</ins>
容器标签
<div>块类</div> <span>行内</span>，容器即用于装各种标签，内部可放所有类型的标签，容器标签无语义
图片标签
单标签<img src=""/>其中src是必写属性，填写图片路径
> 路径分<strong>相对路径</strong>和<strong>绝对路径</strong>
相对路径分三种：上一级，下一级，同级
·上一级：../图片名称
·下一级：文件名称/图片名称
·同级：直接图片名称
绝对路径：在主机中的位置
常用属性：
width：设定宽度（单位px） height：设定高度（单位px） 一般两者设一个即可，会自适应
title：提示文本（鼠标放在图片上显示的文字） alt：替换文本（当图片显示不出来，显示的文字）
链接标签
<a href=""></a>其中href是必写属性，填写链接地址，空地址填#即可，a标签内可放图片标签
锚点标签：先给跳转目标的标签加id，href中填写“#id名”
常用属性：
target=“目标窗口的弹出方式”
_self:默认，不新建窗口
_blank:在新建窗口打开
注解
<!--内容--!>内容不会被游览器解析
特殊字符
 :空格符 &It:小于号 >:大于号
表格标签
**用于展示数据，可读性高，特别是后台展示数据的时候。**
格式：
<table>
<th> ---表头元素，在单元行的基础上文字加粗居中显示，用于突出重要性
<td> </td> <td> </td> <td> </td> ---单元格
</th>
<tr> ---单元行
<td> </td> <td> </td> <td> </td> ---td中可放任何元素
</tr>
<tr>
<td> </td> <td> </td> <td> </td>
</tr>
</table> ---上面建了一个三行三列的表格
常用属性
align：对齐方式，有left，center，right
表格宽高：
·cellpadding：宽度
·cellspacing：高度
合并单元格：
·rowspan（跨行合并）：“合并单元格的个数”
·colspan（跨列合并）：“合并单元格的个数”
注：合并完记得删除多余的单元格
列表标签
**用来布局，整齐、整洁、有序，作为布局会更加自由和方便。列表分三种：
无序列表：
<ul>
<li>列表列1</li> <li>列表列1</li> <li>列表列1</li> ---li中可以放任何元素
</ul>
有序列表：
<ol>
<li>列表列1</li> <li>列表列1</li> <li>列表列1</li>
</ol>
自由列表：
<dl>
<dt>对象
<dd>对象的描述
</dl>
表单
**用来收集用户信息**
组成
·表单域：用<form></form>标签定义，实现信息收集与传递
属性：action：“url地址” method=“提交方式” name=“表单域名称”
-等到学习服务器编程阶段再进一步了解
·表单控件：表单元素
·提示信息：
**表单元素**
<input>单标签，**必写属性：type=“属性值”。**
<input>常用属性：value=“默认显示内容”，name=“”，主要给后台人员使用
id=“”---配合<lable>标签使用，check=“checked”---默认勾选状态，主要针对单选、多选按钮
maxlength=“用户可输入的最大字符数”---针对text。
type常用属性值：
·text---文本框，password---密码（掩码），radio---按钮（圆，单选），checkbox---复选框（方块）
submit---提交按钮，reset---重置，button---普通可点击按钮（后期结合js搭配使用），file---上传文件按钮。
注意：要实现单选需要radio中name值相同才行。
补充：<lable></lable>不属于表单标签，但常与表单标签一起使用，用于增强用户体验。
属性：for=“……” ……对应input里的id=“”
**其它表单元素**
<select></select>下拉表单，包含一堆<option></option>元素，<option>属性---selected=“selected”（默认状态），只设一个。
<textarea></textarea>多行文本框
属性：rows=“多行”，cols=“单行字数”
css是层叠样式表（Cassading Style Sheets），是一种标记语言，主要用于设置html页面中的文本内容（字体、大小、对齐、方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。css让我们网页更加丰富多彩、布局更加灵活自如。
简单理解：html专注去做结构呈现，样式交给css去做。
css规则
两部分组成：选择器以及一条或多条声明。
css语法规范
同类选择器用空格隔开，属性与属性间用分号隔开，属性和属性值用冒号（键值对
eg：h1 p{color：blue；text-deroration：underline}
基础选择器
包括：标签选择器、类选择器、id选择器（#）、通配符选择器（*）—指定全部
多类名选择器
即class=“写多个选择器”，使得这些选择器对应样式全部生效
css字体属性
font-family=“字体名” ---常用“Microsoft Yahei”微软雅黑
各种字体之间必须用英文状态下的逗号隔开
font-size: px
font-weight：normal（400）、bold（700）、bolder、lighter；number
font-style：italic斜体、normal默认
font:font-style font-weight font-size/line-height font-family
必须保留font-size和font-family，不然不起作用！
css文本属性
颜色color：颜色对应英文；
开发常用十六进制，即#xxxxxx
也可用rgb（number，number，number）；
对齐方式：text-align：center、letf、right
（小知识点：要让图片居中对齐，将图片放在容器中，再在容器中加入text-align：center样式）
修饰文本：text-decoration：underline、none、overline、line-through
文本缩进：text-indent：px（可正可负）；em（相对单位，即当前元素——font-size一个文字的大小）
行间距：line-height：px；注意：行高等于容器高的时候，文字垂直居中（一个字默认16px）
行高包括：上间距，下间距，文本高度
css引入方式
chrome调试工具
F12或者右击检查，帮助我们找排版哪里出错，或者帮我们排版
Emmet语法
使用缩写，提高html/css编写速度
·p*10 生成10个<p></p>标签
·ul>li 生成<ul><li></li></ul>
·.demo或者#id名 生成带有类名或者id名的标签
·自增符号$
·标签内部的内容用{}生成
复合选择器
包括：后代选择器、子选择器、伪类选择器……
后代选择器：外层标签写前面 后代标签写后面 中间空格分隔
子选择器：外层标签>内层标签 只是父子生效，爷孙不生效
并集选择器：各个选择器用英文逗号隔开，任何形式选择器都可以成为并集选择器的一部分
伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或者选择第一个，第n个
语法：选择器+冒号，eg：a：hover或者div：first-child
focus伪类选择器
用于选取获得焦点的表单元素，焦点就是光标，一般情况<input>类表单元素才能获取
css显示模式
定义元素以什么方式显示，块内，行内还是行内块……
常见块内元素：<h1~h6>、<p>、<div>、<ul ol li>……
其特点：独占一行，宽度默认父级宽度百分百，高度宽度、内外边距可以控制，内部可放各种元素
常见行内元素：<a>、<strong>、<i>、<span>
其特点：一行可以显示多个，宽高设置无效，内部只能容纳文本或者其它行内元素，默认宽度是本身内容宽度
注意：链接里面不能放链接，链接里面可以放块级元素，但是给<a>转块内元素最安全
常见行内块元素：<img/>、<input/>、<td>
其特点：相邻行内块/行内元素在一行上，默认宽度是它本身的宽度，宽高、行高、外边距以及内边距都可以控制
显示模式的转换：
·转换为块内元素：display：block；
·转换为行内元素：display：inline；
·转换为行内块元素：display：inline-block；
css的背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等……
背景颜色：background-color：transparent（默认透明）
背景图片：background-image：url（图片地址）
背景平铺：background-repeat：no-repeat、repeat、repeat-x、repeat-y
背景图片位置：background-position：length或者position
需要指定两个值分别对应x轴和y轴，如果只指定一个值，则y轴为center
背景图片固定：background-attachment：scroll（背景滚动）、fixed（固定）
背景简写：颜色、图片、平铺、滚动、位置
其它：
背景颜色-半透明：rgba（，，，0.x）x越小越淡，务必是四个值
背景填充整个屏幕：width：100vw；height：100vh，background-size：cover
背景图片透明：background-image：linear-gradient（rgba（），rgba（）），url（）
css三大特性
样式冲突，遵循就近原则，样式不冲突，不会层叠
子标签会继承父标签的某些样式，如文字颜色和字号，text-，font-，line-这些元素开头的可以继承
行高的继承性：font-size：12px/1.5，解释为：如果子元素没有设置行高，则子元素的行高是当前子元素文字大小*1.5，这样设置的优势是子元素可以根据自身文字大小调整行高
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
选择性权重：通配符<元素选择<类选择<id选择<行内样式<！important—秒杀一切
注意：继承的权重是0，使用复合选择器会权重叠加
盒子模型
**边框**
语法-border：border-width： border-style： border-color：
其中border-style可以设置为none（默认）、solid，dashed，dotted
边框可以分边书写 eg：border-top：1px solid red；
合并边框
语法-border-collapse：collapse；解释：相邻边框合并在一起
边框会影响盒子的实际大小，测量盒子大小时候不量边框，如歌测量边框，需要宽和高都减去边框宽度
**内边框**
padding-控制盒子内容与边框的距离
设置不同个数值对应解释如下:
1个值 --- 上下左右
2个值 --- 上下 左右
3个值 --- 上 左右 下
4个值 --- 上 右 下 左
注意：padding会影响盒子大小（如果盒子指定了宽高，没有则不会影响，此时宽高是继承上一级的宽高）
**外边框**
margin-控制盒子间的距离，简写方式与padding一致
外边距的典型应用：让块级盒子水平居中
前提条件--盒子必须指定了宽度，并且左右的外边距都设置了auto；
常见写法：margin：auto /margin：0 auto /margin-left：auto；margin-right：auto
行内元素或者行内块元素水平居中直接给盒子加text-align:center即可
使用margin定义块元素的垂直外边距时，会出现外边距的合并
主要为两种情况：
1.相邻块元素垂直外边距的合并
如果上下相邻两个块内元素（兄弟关系）相遇时，上元素有下边距，下元素有上边距，他们的垂直间距将不是margin-bottom加margin-top，而是取最大值
2.嵌套块元素垂直外边距的塌陷---常见
对于两个嵌套关系（父子关系）的块元素，父元素有上边距的同时子元素也有上边距，此时父元素会塌陷较大的外边距值
解决方法：
·给父元素定义上边框
·给父元素定义上内边距
·给父元素添加overflow：hidden标签
圆角边框
border-radius（半径）：50%（圆）/length---高度的一半
可分开写，如border-top-left-radius……
盒子阴影
box-shadow：6个数值如下
h-shadow->x轴移动（往右）
v-shadow->y轴移动（往下）
blur->虚实，越大越虚
spread->阴影的尺寸
color->常用rbga（，，，0.x）x越小越淡
inset->常用外阴影（默认），inset（内阴影）
搭配过渡和div：hover更好看
文字阴影
text-shadow：h-shadow v-shadow blur color
标准流
所谓的标准流，就是标签按照规定好默认方式排序
·块级元素独占一行
·行内元素按顺序从左到右排序，碰到父元素边缘则自动换行
浮动–基本不用了
定位
组成：定位模式+边偏移
定位模式：
static 静态定位：按照标准流特性
relative相对定位：相对于自己本身位置移动，原来在标准流的位置继续占有，没有脱标
absolute绝对定位：相对于祖先元素位置移动，完全脱标，如果祖先元素没用定位，则以游览器为准定位
--记住：子绝父相，即子元素要用绝对定位的话，父级元素要用相对定位
fixed固定定位：固定定位是元素固定于游览器可视区位置，在游览器滚动时，元素的位置不会改变，跟父元素没用任何的关系，完全脱标
sticky粘性定位--了解即可
不脱标，必须添加边偏移（top、left、right、bottom至少一个），兼容性较差
**堆叠顺序**
处理盒子重叠情况，使用z-index，其特性如下：
·属性值默认是0，数值越大盒子越靠上
·如果属性值相同，后来者居上
·数字后不加单位！
注意：z-index只用于相对定位，绝对定位和固定定位的元素
**定位的扩展**
注意：加了绝对定位/固定定位的盒子不能通过设置margin：auto设置水平居中
可以通过“left：50%；margin-left：自身宽度的一半
·行内元素添加绝对/固定定位后可以直接设置高度和宽度
·块级元素添加绝对/固定定位，如果不给宽高，默认大小是内容的大小
隐藏对象
display：none ---隐藏后不再占原有的位置
后面应用及其管饭，搭配js可以做：原先没显示，鼠标经过，显示下拉菜单
visibility：hidden ---隐藏后继续占有原来的位置，默认visible
overflow溢出
·visible：不剪切内容也不添加滚动条
·hidden：不显示超过对象尺寸的内容，超出部分隐藏掉
·scroll：不管超出内容否，总是显示滚动条】
·auto：超出自动显示滚动条，不超出不显示滚动条
注意：如果有定位的盒子，请慎用overflow：hidden，因为它会隐藏多余的部分
精灵图
为什么要用精灵图？
-有效减少服务器的接收和发送请求的次数，实现一次访问可获取多个图片（在一张大图中），从而提高页面的加载速度。
核心原理：将网页中的一些小背景图像整合到一张大图中
使用：通过background-position移动背景图片的位置，移动距离就是目标图片x和y轴坐标，一般数值都是负的，使用精灵图需要精确测量
总结：主要针对小的背景图片，借助背景位置来实现，一般情况都是负值
字体图标
使用场景：主要用于显示页面中通用、常用的一些小图标
优势：
1.轻量级：加载速度块，占用空间小
2.灵活性：可以随意改变颜色、产生阴影、透明度
3.兼容性：几乎支持所有游览器
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升与优化
总结：结构和样式简单的小图标就用字体图标，结构和样式复杂一点的小图标就用精灵图
使用：
1.下载 2.引入到html页面中（通过css） 3.追加
css三角
俗称“弹性盒子”，移动端应用广泛。
·采用flex布局的元素称flex容器，子元素称flex项目
·任何容器都可以指定flex布局
**父项属性**
·flex-direction ---设置主轴方向 row->行为主轴 column->列为主轴
·justify-content ---主轴上子元素排列方式。
可设属性值flex-start、flex-end、center、space-around、spance-between
·flex-wrap ---子元素是否换行，默认nowrap
·align-content ---侧轴上子元素排列方式（多行），即前提：flex-wrap：wrap。
可设属性值：center，flex-start，flex-end，space-around，space-between，strtch
·align-items ---侧轴上子元素排列方式（单行）。
可设属性值：center，flex-start，flex-end，baseline，stretch
·flex-flow ---复合属性，相当于flex-direction + flex-wrap
stretch使用前提：子元素没有高度；作用：沿着侧轴拉伸
**子项常见属性**
·flex：x ---占剩余空间的x份，前提是别设置子元素的宽高
·align-self ---控制子项自己在侧轴上的排列方式
·order：默认是0，如果是-1，则该子元素与上一个交换位置，实现不改变结构地调换位置
子项属性，常常搭配伪元素 ：nth-child（x）一齐使用。
网格布局，由于兼容性，可能有前缀。
flex：一维布局/轴线布局 grid：二维布局/行列布局
**父项属性**
grid-template-rows：x x x …… 分行
grid-template-columns： x x x …… 分列
赋值取值：
1.具体数值（px），写n份且每份相同则可以repeat（n，_px）
2._fr（取剩余空间的_份） ---最常用，写n份且每份相同则可以repeat（n，_fr）
3.百分比取值
4.auto（根据内容自动调整大小）
grid-row-gap： 行间距
grid-column-gap： 列间距
grid-gap：复合属性 先行后列
赋值取值：
1.具体数值（px）
2.百分比取值
在布局中添加项目，项目默认从左到右显示，一行换一行
如何更换项目显示方式呢？
·grid-auto-flow：row（默认）
·grid-auto-flow：column（纵向显示）
eg：3*3表格
1 2 3 1 4 7
4 5 6 2 5 8
7 8 9 （默认） 3 6 9 （column）
项目对齐：justify-items：（水平）
align-items：（垂直）
可设属性值：start、center、end、stretch、baseline
place-items： （复合属性）
网格对齐
justify-content： （水平）
align-content： （垂直）
可设属性值：start end center stretch space-between space-around
其中space-between ---子元素平均分布在网格容器内，两侧不留空白
space-around ---同上，但两端和子元素之间留有相等的空白
place-content： （复合属性）
合并项目
·grid-column-start、grid-column-end 纵向网格开始/结束占位
·grid-row-start、grid-row-end 横向网格开始/结束占位
简化代码
·grid-row：x/y； 合并行
·grid-column：x/y； 合并列