html的头部
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
title></title>
<link rel="shortcut icon" href="favicon.ico" />
head内部为一些配置文件，UTF-8国际编码第三行为为字符集，相当于字典！title为当前网页的标题 ,link标签的 href书写的是ico地址 favicon一般名字不需要修改，服务器自动请求该图片
href="favicon.icoh这里引入的是网站标题的小图标， https://www.bitbug.net这个网站是免费在线制作小图标的网站
常用标签
img 加载图片的标签
h1,h2，h3...为分别为一级标题 ，二级标题。三级标题
段落文字p：一般用来保存文字，此外，当用户把鼠标移到图像上方，最新的浏览器会在一个文本框中显示描述性文本。下面的代码在 alt 属性中为图像添加了描述性文本
<a href="https://www.w3school.com.cn/tags/att_img_alt.asp" target="_blank">w3school</a>
1.a标签 点击之后会跳转到href内的网址中去，加target=“blank”会在新页面打开a中的网页，默认在当前页面打开。
2.ul >li标签和ol >li标签：ul>li实现列表无序 结构类似的布局。ul的子级只能是li li的父级只能是ul、ol .
3.div标签:一般用来实现大区板块标签，做盒子模型
.span b u i用来实现小元素，这些为行内标签
不同标签对阅览器的意义不同，所以开发中最好不要随便用标签。
css
css常用样式：
文字类
color 文字颜色；
font-size:文字大小默认16px 小于12px之后再减小变化不大；
font-family:楷体；
font-weight:normal;不加粗；
text-indent:2em首行缩进2个文字大小的长度
font-style:italic；文字倾斜；
text-decoration:underline;添加文字下划线 none是去除下划线；
text-align:center;文本类元素水平居中 让文本类元素在他的父级内部居中；
块标签的水平居中为margin-left: auto;margin-right: auto;
line-height：上下居中:当前容器的高，
盒子模型：
width：盒子宽度 height：盒子高度
border：外框
margin：外留白
padding：内留白
padding: 上下 左右；可以一起设置
br换行 空格
border/margin/padding都可以加left/right/top/bottom来分别设定；
标签所占位置由标签内容加内留白+边框+外留白
（我们在设置留白的时候一定要考虑到留白是占位的，留白有多少里面的空间也需要根据需求来减少）
border-radius:圆角设置为50%正方形彻底变圆
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
让长方体的直角变圆，当等于高的一半时将出现以高直径的半圆；
标签分类
单标签和双标签：
双标签 <标签></标签>
单标签 <标签>
行内标签和块级标签
块级标签：独占一行。不和其他标签并排排列 div ul li ol p h1-h6
行内标签：和其他标签并排。设置宽高无效 上下外边距无效左右无有效 内边距有效，
上下内边距不占位,左右内边距占位 span b u i a
行内块：一行排列设置宽高有效
Css布局
注意事项
网站布局的时候，一定要有高度。没有高度的标签。结构不稳定；
正常情况下(不浮动、不定位),父级的高度可以由子级决定
子级浮动，父级检测不到高度 称为浮动塌陷
给父级增加overflow:hidden清除浮动塌陷
一个标签浮动，同级标签必须浮动
网站布局标准流：行内标签水平排列，块级标签垂直排列
浮动以后标签脱离标准流，变成行内块
css三种书写方式
内联样式：书写style 标签对内部
外链样式：link 工作项目中使用（一般选择这种）
行内样式：直接书写在标签上面 不推荐使用
background: linear-gradient(to bottom,#454545,#454545);
渐变色，从上到下颜色逐渐由#454545 变成#454545
渐变色
选择器
选择器：
标签选择器:通过标签名选择标签
类名选择器:通过类名获取标签 .类名
id选择器：通过id名获取标签 #id名
后代选择器:通过空格隔开
并集选择器：使用逗号 并集选择器只能叠加每一个单一的选择器 div,div p,.one
子代选择器：使用> div>p选择div第一层包裹的p
选择器权重
选择器的权重可以叠加
权重不一样的时候，取决于权重比较大的
同样的样式，后写的生效
如标签选择1g<类名选择器1kg<id名选择1吨<行内样式<!important(提升的是一个样式，而不是一个选择器)
nth-of-type(n)选择到具体的某一个标签 也可以限制选择某一类标签2n 4n ；2n为选择2的倍数的同一父级同类型标签
外边距塌陷
a、父级内部包裹子级，子级设置margin-top的时候，父级跟着一起下来
解决方法：
1、不加margin 给父级加padding
2、给父级加overflow:hidden
b、上下外边距的值不会叠加，值取决于最大的(如果浮动以后，会叠加)
左右外边距可以叠加
浏览器有空白折叠现象，即不管有多少空格，都只能识别一个
, 如 br换行 （ ）空格
固定定位、相对定位、绝对定位
fixed固定定位：实现的效果是不会随着窗口的滚动而滚动
固定定位不占位，脱离标准流。变成行内块
固定定位的参照物是当前的窗口 left right bottom top left和right只能同时存在一个
relative相对定位：一般实现的效果是相对自身位移。一般用来实现微调
left top bottom right参照物是自身
占位，占的是原来的位置
相对定位不改变标签的性质
absolute绝对定位，一般实现的效果是一个标签在另外一个标签的上面
子级绝对定位，父级相对定位。可以把子级放置在父级的任何位置 left top right bottom
参照物是父级
脱离标准流，变成行内块。
不占位
伪对象
获取标签:hover{
此处的样式，鼠标移入生效
书写css样式
before默认放在内容之前 after默认放在内容之后 */ content决定伪对象是否存在 ，content必须增加的样式 内部书写内容
/* 伪对象 相当于在标签内部增加了一个行内标签(用法和普通标签一样)
display: inline-block; 把块标签转为行内块标签
表单元素
table标签实现表格 其内部tr标签代表每一行 td代表每一列；
border-collapse: collapse;可以合并相邻边框;
<form action="" method="get">
<!-- 通过取name值，把数据发送给后台 -->
用户名<input type="text" name="user" placeholder="请输入用户名" maxlength="4" autofocus>
<br><br>
<!-- label的for值和input的id值一致，可以把文字和输入框联系起来 -->
<label for="pass">密码</label><input type="password" name="pass" id="pass">
<br><br>
手机号<input type="number" name="" id="">
<br><br>
<!-- 单选框如何成为真正的单选框，加一个相同的name值 选框的value值需要自己限定-->
性别<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman" checked>女
<br><br>
爱好<input type="checkbox">代码 <input type="checkbox" checked>游戏
<br><br>
<label for="intro">自我介绍</label>
<!-- 文本域 -->
<textarea name="" cols="30" rows="10" id="intro"></textarea>
<br><br>
地址
<!-- 下拉选框 -->
<select name="" id="">
<option value="">广州</option>
<option value="" selected>上海</option>
<option value="">北京</option>
</select>
<br><br>
<input type="submit" >
<input type="reset">
</form>
text类型为用户名类型中文英文符号皆可 placeholder为在没有输入时显示的文字
pass为密码类型，只支持数字英文和符号默认为黑点形式，不会显示输入的内容
number为纯数字类型，只能输入数字
radio单选框，只要name值相同就同时只能有一个被选中（默认样式为圆点）
checkbox多选框 默认样式为正方形
<label for="intro">自我介绍</label>
textarea标签为文本域可以输入一大段文字也可以加 minlength限制输入字数
resize:none为文本框进制拉伸
select下拉选框中间内容为显示选择的内容，提交给后台的时value值.
submit提交当前表单数据
reset重置表单数据
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
3244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
