H5课上笔记篇

HTML基础
H5 微信小程序开发
从规范的角度来讲，（标题）标签是不能放入

（段落）标签里边的
Body里边设置的属性 会让全部居中

div 标签没有实质性的功能，用于布局，是一个语义标签，又称为容器标签
插件vim的使用 j是向下移动 k是向上移动 h是向左移动 l是向右移动
Y 复制 p 粘贴 dd剪贴行 gg跳到文件开头 G 跳到文件结尾
命令行界面直接 定位到当前行 例如 5 yy（从本行之后的5行将会被复制），到目的地的时候直接p
e跳到下一个单词的结尾 w跳到下一个单词的开头
按shift+v 进入可视模式，然后在jk上下移动选择需要复制的东西
img标签 src表示图片的位置，alt当图片无法加载的时候，提示信息
代表音频标签，这里必须带上controls属性才可以控制播放，如果属性名字和属性值是一样的可以省略，muted进入界面静音

<video src=”.//22.mp4”width=600px” height=”400px” controls autoplay muted>
文本级的容器标签，
background-position:right top;
margin-right:200px;
超链接

当页面浏览到下边的时候，点击下边的抛出的猫就可以回到指定的锚点
回到顶端
Block和inline
块级元素特点：1.独占一行
2.可以设置其宽度、高度、内外边距
3.在不手动设置宽度的情况下，宽度默认为所在容器的100%
4.可以容纳行内元素和其他块级元素
常见的块级元素：

/

/

/

/,其中div最常用
行内元素特点：1.不能独占一行
2.设置宽高无效。水平方向的padding和margin属性可以设置，但是 垂直方向上的无效；
3.默认宽度是他自身的宽度
4.行内元素只能容纳其他行内元素或者文本
行内块元素特点：1.和相邻行内元素在同一行，但是之间会有空白缝隙
2.默认宽度是他本身内容的宽度
3.宽度、高度、行高、外边距以及内边距都可以手动设置

无序列表嵌套

• 部门管理
  • 添加员工
  • 删除员工
  • 修改员工
• 资源管理

Table标签合并单元格
行合并：是在垂直界面上，rowspan=”3”在最初开始定义的下边开始，之后每一行的相同位置就需要都删去；
列合并：是在水平界面上，colspan=”3”在定义的那一行开始往下，之后的td里边内容可以直接放入事先预想合并的里边，依次。

//注意规范

7.13.2019

1. form表单
   

用户名： 密码：
男 女
苹果
橘子
菠萝

    <br>
    <input type="checkbox" name="fruit" value="apple" id="d"><label for=d>苹果</label><br>
    <input type="checkbox" name="fruit" value="banana" id="e"><label for="e">香蕉</label><br>
    <input type="checkbox" name="fruit" value="boluo" id="f" checked><label for="f">菠萝</label>

    <input type="submit" value="提交">
    <input type="reset" value="重置"><br>
    <!--当看到id的时候 知道id都是唯一的-->
    <!--下拉列表,size当前可选择的界面的内容-->
    <select name="学历" id="xl" size="3">
        <option value="xiaoxue"> 小学</option>
        <option value="chuzhong"> 初中</option>
        <option value="gaozhong"> 高中</option>
        <option value="daxue"> 大学</option>
        <option value="yanjiusheng"> 研究生</option>
    </select>
    <input type="file" value="">
    <input type="image" src="../20190712/3.jpg">
    <!--文本框-->
    <textarea name="text" id="x" cols="30" rows="10">练以新gai死你</textarea>
</form>

CSS
1.样式中display:block;
是让对象成为块级元素，一般都是用display:none和display:block来控制层的显示
2.padding 12px 14px;
第一个是定义上下 第二个是定义左右

3. :link :visited :hover :active
   :link 表示鼠标点击之前，也称为原始状态
   :visited:表示鼠标点击之后的状态
   :hover表示鼠标悬停状态
   :active:表示鼠标点击状态
   4.css对齐
   要让图片居中对齐，可以使用margin:auto；并将他放到块元素中。
   左右对齐-使用定位方式：position:absolute; 属性来对齐元素
   当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding。 这样可以避免在不同的浏览器中出现可见的差异。
   左右对齐-使用float方式：当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
   如果子元素的高度大于父元素，且子元素设置了浮动，name子元素将溢出，这时候你可以使用“clearfix”（清除浮动）来解决该问题
   垂直居中对齐-使用padding：如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
   垂直居中-使用line-height：除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
   5.选择器
   元素选择器：
   属性选择器：

[title~=“divgreen”] {
/* 选择元素的属性，名为title，并且属性值包含divgreen这个单词的元素 */
background-color: green;
}

</div>

<div title="div2 divgreen">

</div>

<div title="div3-divgreen">

组合选择器：实现为多个选择器选择的元素设置统一的样式（多个选择器以逗号隔开）

元素选择器
ID选择器：根据元素的id名称来选择目标
类选择器：根据元素的class属性来选择目标
属性选择器：根据属性的特征来选择应用样式的目标，所以从这个意义上来讲，他包含了id选择器，书写格式为：[title]：选择设置了title属性的元素；
[title=”tt”]：选择title属性等于tt的元素；
[title^=”tt”]：选择以指定值tt开头的元素；
[title~=”tt”]：选择属性值中包含tt指定词汇的每个元素；
[title$=”tt”]：选择以指定值tt结尾的每个元素；
[title*=”tt”]：选择包含指定值tt的每个元素
关系选择器：根据元素间的家族关系来选择目标
子代选择器.div1 > p {
color: yellowgreen;
background-color: rgb(14, 10, 10);
width: 600px;
height: 40px;
}
后代选择器.div1 p {
color: red;
width: 600px;
height: 40px;
}

E F：在选择器中E选中的目标中再去选中后代满足F选择器的目标；
E>F：选择直接后代；
E+F：选择E的相邻兄弟元素（相邻的元素，只能是下面的）；
伪类、伪元素选择器（例如超链接a:link a:visited a:hover a:active）
伪类：其效果与增加一个类来实现的效果等价，所以称之为伪类。
伪元素：其效果与增加一个元素来实现的效果等价，所以称之为伪元素
组合选择器：多个选择器使用同一个样式描述，以逗号隔开

选择器优先级
内联样式 ，优先级1000；
Id选择器，优先级100；
类和伪类，优先级10；
元素选择器，优先级1；
如果选择器的优先级一样，用靠后边的

Css优先级
同一个样式表 id选择器 > 类选择器 > 元素选择器
不同样式表：内联样式表（） > 内部样式表 > 外部样式表
不同样式方式：id选择器 > 类选择器 > 元素选择器
（

）
Border的属性设置（要为一个元素设置边框必须指定三个样式）
Border-width:边框的宽度
Border-color：边框的颜色
Border-style：边框的样式（solid 实线 dotted 虚线）

Css
继承性:
层叠性：

在垂直区域的盒子设置margin。只会取值最大的那一个 不会叠加
设置上和左外边距时，会导致盒子自身的位置发生改变
设置右和下外边距会改变其他盒子的位置，

浮动
1 设置浮动的元素不占用空间
2 设置浮动的元素层级高于普通元素
3 在同一行中的元素要横向排列，将元素都添加浮动属性，float:left; 向左浮动，float:right;向右浮动;
4 只有块级元素才能设置宽和高，行内元素没有宽和高，行内元素的宽和高是有内容决定的，无论之前是否是块级元素，设置浮动后一定是块级元素
5 盒子设置浮动属性后不属于正常的文档流；
清除浮动
如果父盒子没有设置固定高度，而子盒子设置了浮动，父盒子将会受到影响无法正常计算，如何让父盒子得到一个自然高度
方法①：在父盒子里面的最下面添加一个空盒子，

；
方法②：解决浏览器的bug，在父盒子的样式中添加一条样式，overflow:hidden;

在容器里边想要实现垂直居中。将行高（line-height）设置为何盒子高度一致，