doctype：告诉我们使用什么规范 doctype
head ： 头部标签 head
title ： 文字。又代表悬停文字在img标签中，也表示网页标题 title
body ： 网页主体，大家好多东西。页面要显示的内容都可以写到body内包括html标签包括vue中的{{ }}中括号：浏览器要显示的内容等 body
* meat ： 描述性标签。meat描述性标签，meat描述性标签后面跟name。meat-name-content（内容，目录。英文满意的) content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content\content
<meat name=" " countent="目录、内容“></meat>
img：图像格式标签，img图像、img图像、img图像、img图像--图像格式 里面前两个是必填项 img-src（图像路径）-alt（图像的替代文字）alt、alt、alt、alt、alt、alt、alt、alt、alt、-title（鼠标悬停文字）title、title、title、title、（鼠标悬停文字title、-width（宽度）widthwidth-height（gaodu）height高度
<img src="图片路径 " alt="图片替代文字” title=“悬停文字” width=“宽度” height=“高度”></img>
* a ： 标签是链接标签，可以跳转，可以回到顶部，还可以打开新的一个网页_shelf _blank. <a 必须跟上herf=“链接路径”herf、herf、herf、herf、herf、herf、链接路径链接路径herf、herf、path：路径 path路径。target：目标窗口位置。targettargettarget=“_shelf或者_blank blank\blank\blank\blank\blank\blank\blank\blank\blank\blank\blank\blankblank\blank\blank]blank\blank\blank
<a herf="链接路径“ target=”_shelf或者_blank">链接或者文本图像，要在浏览器凸显的字</a> <a herf="链接地址“ _shelf或者_bland>此处填写浏览器突出的文字
*** 回到头部时，开头最顶部写<a name="top">顶部</a> 最下边写<a herf="链接路径#top">回到头部</a>
***** 跳转底部时， <a herf="链接路径，可以是另一个html标签#down" 在代码最下面写<a name="down">down</a> 点击哪里哪里用hherf，跳转到哪哪里用name
h1 : 基本标签。大到小。h1\h2\h3\h4\h5\h6\。这些标签都可以被选择器选择！比如img{ css字体、盒子模型、内外边距....}，meat{css也可以}，body{css也可以}，h1\h2\h3\h4\h5\h6{css也都可以}，下面还有p{css也可以，属于段落标签，对这一段进行css渲染}。
p ： 段落标签，特别简单，但很实用一般只是形成自闭和标签中间填充内容。<p1></p>
hr ：换行标签----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML标签小类：>大于号&沟通、&沟通、&沟通、&沟通、大于&聊天、小于号&聊天、&聊天、&聊天、小于号&聊天、&聊天、>\<\>\<\>\<\,strong粗体strong、strong，em斜体em、em、em、em、em、em、em、em、em、em、em、em、em、em、strong、strongstrong粗体
** ol ： 有序列表标签。ol{<li>有序标签内容</li>}， ol{<li>有序标签内容</li> }----有序标记123456789，ol有序标签提示，<li>提示一行中的内容</li>
** ul ： 无序标签。常用导航侧边栏 ul{<li>无序标签内容</li>,<li>无序标签内容</li>,<li>无序标签内容</li>,<li>无序标签内容</li>,<li>无序标签内容</li>,<li>无序标签内容</li>}
** dl : 自定义标签
*** at : 列表名称
*** dd ： 列表内容
---------------------------------------------------------------------------------------------------------------------------------------------------------------
*块：p、hi、div 行：（a、strong、em、span、img一行以内）
****************************************************************************************************************表格结构放到下次去记忆和书写。容易和有序无序标签混淆！
HTML中的媒体元素 格式<video src="路径">
video : 视频元素，想添加视屏就用它。虽是元素但是和标签的格式相同。<video src="路径" controls（必填）autoplay：自动转长，循环播放。 autoplay
audio ：音频元素 。想添加音乐就用它。与视屏同样的方式。<audio src=" " controls autoplay width=" " height=" "></audio>
*header : 页面结构中的页眉 <header>网页头部</header>
section ： 部分，网页主体 <section>同上</section>
*footer ： 网页脚部 <footer>网页脚部</footer>
section web : 独立区域
article ： 独立的文章呢日荣
aside ：侧边栏，相关内容或应用
*nav侧边栏
iframe : 内联框架。套引用页面地址 <ifrime src="引用页面地址"name=“框架标识名”></iframe> iframe\iframe\iframe\iframe\iframe\iframe\iframe\iframe\ src="引用页面地址“ name=”框架标识名“></iframe> <iframe src=“引用页面地址” name="框架表示名“></iframe> <iframe src=="引用页面地址" name=”框架表示名“></iframe> <iframe src="引用网页地址” name=“框架标识名”> action=“”
<iframe src="引用网页地址" name="框架标识名" width=" " height=" "></iframe>
<iframe src=“ “ name=”hello“framborder=”0“ width=”100px“ height="800px"></iframe>
<a herf="1.我的第一个网页.html“ target=”hello“>点击跳转</a>
---------------------------------------------------------------------------------------------------------------------------
form：表单。必填name属性 type必须跟value值。记住：表单中的input是在form中的一定要先写form
<form method="(post)规定如何发送表单数据。常用值get/post" action="（result.html）表示向何处发送表单数据"> -----------------form method="规定如何发送表单数据常用get或者post" action=”表示向何处发送表单数据“
写完form再写input <p>名字：<input name="name" type="text"></p> <p>密码：<input name="password" type="pws"></p> post提交密码安全并且能够提交大文件
提交和重置不用p标签包裹也可以 <input type="submit" name="Button" value="提交"> <input type="reset" name="reset" value="重置"> </form>
*********就是说form标签包含以上所有内容 input默认选中用check
记住我用checkbox使用方法：<p><input type="checkbox" name="Checkbox" value="box"></p> 当type取值为radio时注意：必须为一个组sex。 <input type="radio" name="sex" value="boy">男 <input type="radio" name="sex" value="gil">女 name都必须同为sex一组这样才能进行二选一
*type:还有radio小圆点、submit提交按钮、reset重置 file文件、hidden隐藏、image图片按钮、button普通按钮、password密码最后一个text文本
多选框：写多个input，并且type=“类型一样” name=“取值不同” value=“设为同一类，取值相同”
按钮：属于input标签 <input type="button" name="btn1" value="显示"
记忆：图片点击效果 <input type="image" src="图片路径"> 也可以用于跳转提交action内的值
下拉框：select-子选项option
---------------------------------------------------------------------------------------------------------------------------------------------
规范：一般是在header里面编写CSS代码<style>标签
整理盒子模型：包含CSS表单设计
margin：外边距。就是border的外边距 padding是border内边距 边框主要是：粗细，样式和颜色。------外边距妙用就是居中元素------margin:0 auto表示上下左右对齐 margin：0px；1px;2px;3px;表示上下左右的边距。在图像中显示为顺时针方向显示-----内外边距同理
盒子大小：margin+border+padding+内容的宽度
盒子边框设置：border：1px solid red
CSS书写顺序：优先级第一定位属性：position、display、float、left、top、right、button、overflow、clear、z-index。优先级第二自身属性：width、height、padding、border、margin、background
优先级第三文字样式：font-family、font-size、font-style、font-weight、font-variant、color.优先级第四文本属性：text-align vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow
优先级第五Css中的新增属性：content、box-shadow、border-radius、transform
边框样式border-radius：左上，右上、右下、左下，顺时针方向
width:388
height:548
行内样式：<h1 style="">我是标题</h1> 导入式写在head中为内部样式 外部link标签导入 优先级就近原则 行内样式>内部>外部
属性选择器 如a[id属性/class属性]
积累:
position:relative;表示位置相对。
display：inline-block;表示及时行内元素也是块元素
display:none;表示div标签隐藏，不显示
min-width: __px;设置元素的最小宽度
box-shadow：0px 8px 16px 0px rgba(0,0,0,0.2);属性让下拉菜单看起来像一个卡片
padding：12px，16px;内边距
.dropdown:hover .dropdown-content {
display: block;
} :hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
浮动：一般用来切换页面布局 使用float：left就是向左移动，使用float：right就是向右浮动，不要节省div，盒子是有必要纯在的，（比如：一个界面向左移动一个盒子，向右移动一个盒子，高度一样的情况下，右边的盒子可以进行再次拆分此时不需要浮动，因为盒子本身就是纵向排列，
在右侧的下方盒子内，还可以进行排列左浮动的三个小盒子，此时用float：left。
padding-top:上内边距
padding-right：右内边距 如padding：10px 20px 30px 表示：上 左右 下
padding-bottom：下内边距
padding-left：左内边距
margin塌陷的问题：就是margin不会叠加，以大数为准，防止塌陷的方法有四种即BFC的方法
1、float的只不是none
2、position的值不是static或者relative常用
3、display的值是inline-block、flex或者inline-flex
4、overflow：hidden常用
注意：不并排的盒子不用写浮动！！！
清除浮动：要放到一个盒子中间，不然会对后序的元素产生影响。比如两个div中各自两个p标签 并不是两行；两列！实际显示一行中，父盒子没有高度，高度都为0，后序元素都追上去了
了。清除margin和padding。1、添加高度但是用户发帖子没有准确的高度，浮动应该怎么清除？
1、让内部有浮动的盒子形BFC使用overflow hidden，上下盒子都使用形成BFC，浮动将会关闭在盒子内。
2、给后面的父盒子设置clear：both。（第二个div盒子设置属性class=“box2”，设置box2{clear：both}）缺点：margin会失效，不建议使用
3、使用伪元素：：after给盒子最后添加一个子元素，并给：：after设置clear：both；（两个div都添加）
两个div起一个相同的类名class=“clearfix". clearfix{content:" "; clear:both; display:block;}
注意一定要转为块级元素！一定要写content和clear
4、在两个父盒子之间“隔墙“，隔一个携带clear：both的div盒子 设置div类名class=”cl“ cl{clear：both;}
不足之处：margin还是会失效。解决办法单独设置类名.h1{height：20px};将h1插入到cl中 <div class="cl h20"></div>此时也非常适用！
用墙的高度来充当margin属性
相对定位有点忘记了
position：relative； position：位置定位 relative：相对的 top：向下移动 left：向右移动 right向左移动 bottom：向上移动
比如div{
position：relative；
top：100px；表示向下移动100px
left：100px；表示向右移动100px
}
这样理解一旦使用来了position：relative。那么位置就变成相对移动了。可以单独设置上下左右的值（反向设置），值是负数也可以，与规定方向反向移动（就是说left设置负值了就想左移动呗~）
上下左右可以随意排列组合，但是不能一左一右。矛盾无法显示效果。
本质还是原来的位置，会渲染到别别的位置，类似于“影子”，相对定位不脱离标准文档流。会在老家“留坑”。适合微调
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
position：absolute；
top：100px;
left:100px;
绝对定位不是相对于自己进行移动，而是直接在网页中拥有一个绝对的位置。位置描述词和相对定位一样
left是到左边的距离，right是到右边的距离，top是到上边的距离，bottom是到下边的距离
！重点记忆。绝对定位是脱离标准文档流的！就是不会留坑，它离开后别的盒子也可以占据它之前的位置。
可以理解为它彻底的从原文档流中飘浮了起来，比原来网页所处的平面要高，的位置---就是脱离标准文档流的意思
脱离标准文档流的方法有三种，1、浮动。2、绝对定位。3、固定定位
绝对定位不是一直以浏览器作为基准点，会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子是相对定位的，所以这个性质也叫做“子绝父相”
就是说在书写的时候，写绝对定位一定要写坐标轴，position：absolute top_px left_px. 当相对定位在哪个盒子里，绝对定位就会以哪个盒子作为参考，当两个或者两个以上盒子都有相对定位，此时p的绝对定位会以离它最近的相对定位为准
给绝对定位的盒子垂直居中，1.position：absolute；2.top：50%；3.margin-top：-自己高度的一半
绝对定位的用途：1、绝对定位用来制作“压盖”和“遮罩”的效果。2、绝对定位用来结合CSS精灵使用 3、绝对定位可以结合Js实现动画
a标签8等行内标签，设置绝对定位后是可以设置宽度和高度的！
下面是国定定位：不过页面如何卷动，它永远固定在哪里------就是position：fixed； top：100px； left：100px；无论滚轮如何滚动它永远固定在哪里
固定定位只能是浏览器（我的理解，原文是页面）作为参考点。没有绝对定位和相对定位中的子固父相这个性质。2、固定定位脱离标准文档流 理解：就是能够浮动起来脱离标准文档流，参考只能是浏览器
固定定位的作用“返回顶部”和”流程导航“
去掉所有超链接的下划线使用 a{ text-decoration： none；
使用继承性给body标签设置字体 body{font：normal 14px/25px '软微雅黑'；
overflow :hidden 表示溢出隐藏，相当于给盒子加上了高度，将内容和文字锁定在盒子内部，超出盒子外部的就会隐藏掉。使盒子形成BFC，规范盒子，使盒子成为独立的个体。
BFC的其他作用：1、BFC可以取消盒子的margin塌陷问题 2、BFC可以阻止元素被浮动元素覆盖
layout：表示布局的意思，如果兼容IE6、IE7浏览器还是要写上height
浙公网安备 33010602011771号