h5(html5)+css3+移动端前端

   <div>division 分区一个大盒子，单独占一行</div>
   <span>盒子一行显示多个，跨度、跨距</span>
   <img src= "图像url" alt="替换文本，图片显示不出来用文字替换"
       title="提示文本，鼠标放到图像上提示的文字"
       width="图像宽度"
       height="图像高度"
       border="图像边框"/>

1.目录文件夹

就是普通文件夹，存放素材，文件，
   根目录：打开目录文件夹的第一层就是根目录
   <img src="images/img.jpg" 下一级符号/ />
   <img src="../img.jpg" 上一级符号../ />

2.超链接

<a href="跳转目标" target="_self默认值，_blank新窗口打开">文本或图像</a>

3.特殊字符

空格&nbsp <小于号&lt >大于号&gt &和号&amp

人民币&yen 版权&copy 注册商标&reg 摄氏度 &deg

正负号&plusmn 乘号&times 除号&divide 平方2&sup2 立方3&sup3

4.锚点链接

href="#标签名" id="标签名"

5.表格标签

<table>表格
<thead> 头部必须有<tr></tr> </thead>
<tbody> </tbody>

           <tr>一行
           <th>表头单元格加粗居中</th>
           <td>单元格内的文字</td>
           ...几列
           </tr>
   </table>

6.表格属性

<table align="left\center\right"对齐方式
   border="1\"""有边框或默认没有边框
   cellpadding="像素值px默认1" 规定单元边沿与其内容之间的空白
   cellspacing="像素值px默认2" 规定单元格之间的空白
   width="像素值或百分比" 表格的宽度

7.合并单元格

跨行合并 <td rowspan="最上侧为目标单元格，单元格个数3" > </td>
跨列合并 <td colspan="最左侧单元格为目标单元格，单元格个数2"> </td>
删除多余单元格

8.列表标签

ol有序 ul无序 dl自定义

有序
   <ol>
       <li> </li>
       <li> </li>
   </ol>

   无序
   <ul>
       <li> </li>
       <li> </li>
   </ul>

   自定义
   <dl>
       <dt> </dt>
       <dd> </dd>
       <dd> </dd>
   </dl>

9.表单标签

<form action ="url地址" method="提交方式get/post" name="表单域名称">
   各种表单元素控件

   用户名:<input type="text" name="username" value="请输入用户名，用户自己写，点击会提交"
       maxlength="6,用户最多可以输入的字符数量"> <br>
   密码:<input type="password" name="password"> password会隐藏
   性别: 男 <input type ="radio" name="sex" value="男">
   女<input type ="radio" name="sex" value="女'> 单选
   复选框：<input type = "checkbox多选" checked="checked页面初次加载时默认被选中某个元素" >
   提交按钮：<input type ="submit提交/reset重置/button获取短信验证码/file上传文件"
           value="注册">

<lable>标注标签，需要选的图标小，鼠标点上自动对焦，扩大了范围
<lable for="text"> 用户名：</lable> <input type="text" id="text"> for和id中内容一样

   <select>下拉表单元素，很多选项下拉显示，例如选择省份
   <select>
       <option>河北省</option>至少这一对
       <option>北京市</option>
       <option selected="selected"默认选中项>山东省</option>
   </select>

   <textarea>文本域，输入很多信息，例如留言板评论反馈
   <textarea rows="3显示行数" cols="20每行的字符数">
       文本内容
   </textarea>在浏览器中可以自动填充
</from>

二、css基础

1.字体属性字体复合属性

font-family：'Microsoft yahei'; //字体样式-微软雅黑
   font-size：10px; //字体大小10像素标题标签比较特殊需要单独指定文字大小
   font-weight：bold;//字体加粗
   font-weight: 700; //700等价于bold加粗。实际开发中我们更提倡数   字加粗或变细
   font-weight：400；等价于 font-weight：normal；//标题正常显示，不加粗
   font-style：normal;//正常，倾斜的字体不倾斜
   font-style: italic;//斜体 <em>字体是斜体显示的</em>

字体复合属性（节约代码）：

是有严格的语法形式的，不可打乱顺序，
size和family不可省略
font：font-style font-weight font-size/line-height font-family;

2.css文本属性

div{
   color：red; //预定义的颜色值
   color: #ff0000; //十六进制红色
   color: rgb(200,0,0); //rgb格式红色
   text-align: center; //居中对齐 right右对齐，left左对齐
   text-decoration: underline;//下划线 overline上划线
       line-through;删除线 none默认，用来取消链接文本下划线
   text-indent: 20px; //首行缩进，段落缩进，可正可负
   }

3.css引入方式

    内部样式表单独在<style></style>可以放在任何地方，一般放在head中
   行内样式表单独写在元素标签内部style=“color：pink；”
   外部样式表单独写到后缀.css文件中，再引入到html中
       <link rel="stylesheet" href="路径"

文章怎么写css ？

4.emmet语法

通过缩写来快速编写代码 div*10 十个div
   如果有父子级关系的标签div>span div包含span
   兄弟关系 div+p
   .nav 类回车输出<div class="nav"></div>
   #banner id 回车<div id="banner"></div>
   默认是div输出加约束就可以 span.gray p.one
   .demo$*5 生成5个demo $自增符号
   生成的标签里面默认显示几个文字 div{我喜欢男人}回车
   也可以div{$}*5 <div>1</div>...

快速格式化代码 vscode 右键格式化文档

5.css复合选择器

后代选择器 ol li{ } 父级子级孙级{} 改最后一级
   子选择器必须是亲儿子元素改子级
   并集选择器 div，p{} 逗号分隔两者都修改并集选择器竖着写
   伪类选择器链接伪类选择器未访问的链接 a：link{}
           已访问的链接 a：visited{}
           鼠标经过 a：hover{}
           鼠标按下没有松开 a：active{}
   ：focus伪类选择器用于选取获得焦点的表单元素
   input：focus{} 把获得光标的input标签元素选取出来

6.css的元素显示模式

块元素 <h1>~<h6> <p> <div> <ul> <ol> <li>
   特点：独占一行宽高外边距内边距可以控制默认%100 是一个容器
   行内元素 <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
   特点：一行可以显示多个宽高设置无效容纳文本或其他行内元素
   行内块元素 <img图像> <input表单> <td单元格>
   特点：一行显示多个之间有空白缝隙高宽内边距外边距都可以控制

7.css的元素显示模式的转换

a是个链接标签行内元素但是没办法设置宽高，所以就需要转换为块级元素怎么写呢，就是在style中写 display：block；
div是块级元素一人独占一行，可以设置宽高，转换为行内元素怎么写呢一样在style中编写 display：inline；宽高无效了
转换为行内块元素 display：inline-block；比如span行内元素转换为行内块元素

8.截图工具 snipaste

截图工具 snipaste截图工具，非常好用，可以取色，贴图，等

小技巧

单行文字垂直居中 line-height等于height
文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中 line-height等于height就可以了

9.css背景属性

background-color：transparent；默认是这个，透明颜色
   background-image：none|url（url）；背景图片，平铺满盒子
   background-repeat：repeat|no-repeat|repeat-x|repeat-y；
           平铺不平铺横向x轴平铺纵向y轴平铺
   background-position：x y；位置方位名词顺序无关center top 中上显示
   如果只写一个方位名词，第二个参数省略y轴是居中显示的水平或垂直
   background-attachment ：scroll|fixed；默认滚动，fixed固定视差滚动效果
   背景复合写法 background：背景颜色图片地址平铺滚动图片位置
   背景色半透明 background：rgba（0，0，0，0.3）第四个参数透明度0.3

10.css三大特性

层叠性：就近原则
   继承性：子元素可以继承父元素的样式 text- font- line-开头和color
   行高的继承子元素继承了父元素的1.5倍行高
   优先级：当同一个元素指定多个选择器，就有了优先级
1-如果选择器相同，则执行层叠性，哪个近用哪个
2-选择器不同有权重继承或* 0，0，0，0
               元素选择器 0，0，0，1
               类选择器，class 伪类选择器 0，0，1，0
               ID选择器是# 0，1，0，0
               行内样式style 1，0，0，0
               ！important 重要的优先执行最高级无穷大
3-继承权中为0，标签单独拎出来写样式，执行标签
   权重的叠加，复合选择器会有权重叠加的问题例如 ul li和li的权重
           0，0，0，1 + 0，0，0，1 = 0，0，0，2
           2大于1所以执行ul li
       权重虽然有叠加以四组为一个单位，不会有进位的问题

三、css盒子模型

1.网页布局过程：

1先准备好相关网页元素box

2设置样式

3装内容

2.组成部分

border边框 content内容图片 padding 内边距 margin外边距
           margin-top
           border-top
           padding-top
      -left -right
           padding-bottom
           border-bottom
           margin-bottom

3.属性

border：border-width border-style border-color；没有顺序
       border-width 边框粗细 px像素
       border-style 边框样式 solid实线 dashed虚线 dotted点线
       border-color 边框颜色
       border-collapse：collapse；合并相邻的边框
   padding：5px；上下左右都是5像素内边距
   padding：5px 10px；上下5像素左右10像素
   padding：5px 10px 20px；上5 左右10 下20
   padding：5px 10px 20px 30px；上5 右10 下20 左30 顺时针
   margin：外边距简写方式与padding一样
   margin：0 auto；或margin：auto；或margin-left：auto；或margin-right：auto；上下0px 左右auto 水平居中

4.外边距合并，塌陷

对于两个嵌套的父子关系的块元素，想要修改margin-top时，子元素并没有改变，父元素会出现塌陷问题，
   解决办法：可以为父元素定义上边框
       可以为父元素定义上内边距
       可以为父元素添加overflow：hidden
   还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

5.css的第一行代码

css的第一行代码清除内外边距 *通配符选择器 *{padding：0； margin：0；}
行内边距尽量只设置左右内外边距要设置上下就转换为行内块元素再设置
*通配符选择器 *{padding：0； margin：0；}

6.总结

1.标签都是有语义的，合理的地方用合理的标签，比如产品标题就用h，大量文字段落就用p
   2.类名就是给每个盒子起了一个名字，可以更好的找到这个盒子
   3.margin和padding 上面的距离用margin，都差不多，怎么简单怎么来
   4.布局有很多实现方法，要总结出自己的风格，慢慢摸索，先搞清楚结构
   5.多利用辅助工具，去实现更好的效果

7.圆角边框

border-radius：length；length是像素px、百分比数值越大，弧度越强
   一个值，四个角全部改变
   两个值，对角线关系
   三个值
   四个值顺时针四个角 border-radius：10px 20px 30px 40px；
   分开写：border-top-left-radius左上角，其他类推

8.盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset;
   h-shadow必须有，水平阴影，可以有负 v-shadow必须垂直阴影可以有负
   可选：blur模糊距离，虚的还是实的 spread阴影尺寸 color阴影颜色 inset内部阴影默认外阴影，默认outset 不用写
   盒子阴影不占用空间，不影响其他盒子

9.文字阴影

text-shadow：h-shadow v-shadow blur color；

10.css浮动

1-传统网页布局的三种方式

普通流(标准流)：默认排列，浮动，定位

2-浮动

选择器{float：属性值；} 属性值 none left right
行内块元素并列盒子时，中间会有缝隙，不好控制，所以就需要浮动
多个块级元素横向排列就找浮动

3-浮动特性：

浮动元素会脱离标准流（脱标）移动到指定位置，浮动的盒子不再保留原先的位置
浮动元素会一行内显示并且元素顶部对齐，如果浏览器页面缩小会自动换行，另起一行显示
浮动的元素会具有行内块元素的特性
先用标准流的父元素排列上下位置，之后内部元素采取浮动排列左右位置，符合网页布局第一准则

4-清除浮动：

1.额外标签法会在浮动末尾添加一个空的标签<div style="clear:both"></div> 必须是块级元素
2.父元素overflow，属性值hidden、auto、scroll
3.父级：after伪元素法 clearfix

四、案例一总结知识点

1.css属性书写顺序（重点）

1.布局定位属性：display position float clear visibility overflow
2.自身属性：width height margin padding border background
3.文本属性：color font text-decoration text-align vertical-align white-space break-word

2.页面布局整体思路

1.必须确定页面的版心（可视区），我们测量可得知
   2.分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则
   3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，第二准则
   4.制作HTML结构，遵循先有结构，后有样式的原则，结构永远最重要
   5.所以，先要理清布局结构，再写代码尤为重要，需要多积累

3.HTML

1.导航栏部分固定写法
   <div class="nav">
       <ul>
           <li><a href="#">首页</a></li>
           <li><a href="#">课程</a></li>
           <li><a href="#">职业规划</a></li>
       </ul>
   </div>
       给li加,都要浮动,就在同一行啦 .nav ul li{float：left；}
   2.按钮有固定边框，手动去除 border：0；