html and css

整体结构

<html> <!--开始标签-->
<html>
 <head>
  <meta charset="utf-8" />  <!--字符编码避免网页文字乱码-->
  <title>网页的标题</title>
 </head>
 <body>
 <!--网页的基本内容-->
 </body>
</html> <!--结束标签-->

初级标签

标题标签

H1，H2，…，H6。（1–>6）大标题–>小标题，成对出现，开始标签 <H1> ，一个结束标签 </H1> 。
段落标题

段落是通过 <p> 标签进行定义的，成对出现，开始标签 <p> ，一个结束标签 </p> 。
文字标签

<strong></strong>，加粗文字标签；<em></em> 斜体文字标签，可嵌套
符号标签

<del></del>，在文字上添加删除线，如：文字

高级标签

块状标签

<div></div> ,每一个div占满一整行。 <span></span>，文本信息在一行展示
空格和换行，尖括号

<br> 换行标签，  空格符号，&lt左尖括号，> 右尖括号
有序列表标签
```
<ol>     
<li>第一条</li> 
<li>第二条</li> 
<li>第三条</li> 
</ol>
```
<ol> 可以增加属性，type，换排序符号；

如 <ol type="A"> ，就从A，B顺序排列；符号可以换 A,a,1,i I ，不填默认数值1；

倒叙 <ol reversed="reversed"> ；

<ol start="数值">，更换开始符号的数值；
无序列表标签
```
<ul>     
<li>第一条</li> 
<li>第二条</li> 
<li>第三条</li> 
</ul>
```
默认每一段文本前面显示小圆点

属性：<ul type=disc> 默认值实心小圆点，circle 空心小圆点，square 小方块
图片插入

<img src="图片路径">

包括：

1，网上url；

2，本地的绝对路径(同一个文件夹下，直接写图片文件名)；

3，本地的相对路径(不同一个文件夹下，写完整图片路径)；

属性：

1，<img src="图片路径" alt="图片占位符">，即图没有加载出来时显示

2，<img src="图片路径" title=”图片提示符“>，即鼠标移到图时显示
链接标签a
1. 超链接：<a href="网址">网站名</a>
2. 锚点：<a href="#id">文字</a>；id指某个标签的id名字，运用于：页面目录，回到顶部
3. 打电话或发邮件：<a href="tel:电话号码">文字</a>；<a href="mailto:邮箱地址">文字</a>
4. 协议限定符：使用js
属性：target=_blank 点击链接在新页面弹出

表单

信息输入框

<form method="get" action="" >  <!--action：发送出去的地址-->
 name: <input type="text" name="name" />   <!--文本输入框，name：数值内容-->
 password: <input type="password" name="password" /> <!--密码输入框，name：数值内容-->
<input type="submit" value="Submit" />     <!--提交按键，value：数据值-->
</form>

单选框

<form method="get" action="" >  <!--action：发送出去的地址-->
 <p> 选择其中一个 </p>
1.第一个<input type="radio" name="name" value:"one"> <!--name相同表示同个选择问题-->
1.第二个<input type="radio" name="name" value:"two">
1.第三个<input type="radio" name="name" value:"three">
<input type="submit" value="Submit" />    <!--提交按键，	value：数据值-->
</form>

副选框

<input type="checkobx" name="题目" value:"提交的数值">   <!--大致与上面相同-->

选项下拉菜单

<select name="">
<option>选项一</option>
<option>选项二</option>
</select>

表单添加默认选项：标签后加入 checked="checked"

引入CSS

行间样式

<div style="css定义内容">   
</div>

页面级CSS

在头部标签 <head> 下加入

<style type="text/css">
   <!--css定义内容--> 
</style>

外部CSS文件
新加一个文件后缀为.CSS

在头部标签 <head> 下加入
```
<link rel="stylesheet" type="text/css" href="CSS文件位置"/>\
```

CSS选择器

id，在div标签加入id名

<!--id创建-->
<div id="填id名"></div>
<!--下面css定义,引入css页面填写-->
#id名{   "css定义内容"   }

class，在div标签加入class名

<!--class创建-->
<div class="填calss名"></div>
<!--下面css定义,引入css页面填写-->
#id名{  "css定义内容"   }

标签选择

<!--下面css定义,引入css页面填写-->
标签名{   "css定义内容"  }

属性，如[id]，[class]，[id=“123”]…

<!--下面css定义,引入css页面填写-->
[属性]{  "css定义内容"  }

通配符，对所以标签都生效

<!--css定义,引入css页面填写-->
*{ "css定义内容" }

父子选择器/派生选择器

<div>
<span>1</span>  <!--对 1 进行css定义-->
</div>
<!--下面css定义,引入css页面填写-->
div span{
 "css定义内容"
}

直接子元素选择器

<div>
<span>1</span>  <!--对 1 进行css定义-->
<span>2</span>
</div>
<!--下面css定义,引入css页面填写-->
div > span{
 "css定义内容"
}

并列选择器

<div> 1 </div>
<div calss="demo"> 2 </div>  <!--对 2 进行css定义-->
<p calss="demo"> 3 </p>
<!--下面css定义,引入css页面填写-->
div.demo{
 "css定义内容"
}

分组选择器

<!--对 1,2,3 进行css定义-->
<em> 1 </em>   
<strong> 2 </strong>
<span> 3 </span>
<!--下面css定义,引入css页面填写-->
em,strong,span{
 "css定义内容"
}

伪类选择器

<!--将鼠标悬浮在改标签时的变化，css定义-->
<a href="链接地址">链接文本</a>
<!--下面css定义,引入css页面填写-->
a:hover{
 "css定义内容"
}

CSS选择器的优先级

!import> 行间样式 > id > class =属性 > 标签选择 > 通配符

!import 在CSS定义内容后可加上

优先级是根据各个选择器的权重大小比较的

选择器	权重
!import	Infinity (无穷大)
行间样式	1000
id	100
class 属性伪类	10
标签伪元素	1
通配符	0

注：权重之间是256进制

CSS语法

基本样式

选择器{
     属性名1：属性值1;
     属性名2：属性值2;
     属性名3：属性值3;
}
/*例如定义一个div*/
div{ 
 width:100px; 
 height:100px; 
 background:red; 
}

文字定义

font-size:16px;     /* 调整文字大小 */
font-weight:bold; /* 调整文字粗细  可选属性，默认是 "normal"，"bold" 是加粗，可直接写数值: "100-900" 之间。*/
font-style:normal; /* 属性值："italic" 斜体的字体样式, "oblique" 倾斜的字体样式*/
font-family:字体名称; /* 可以修改显示的字体  */
/*字体颜色定义，三种方法*/
color:rgb(0,0,0); /* 红，绿，蓝 三个颜色的值 0-255*/
color:#000000;  /* 可以分开00-00-00，代表红，绿，蓝的值，用16进制数表示  */
color:red;   /*直接所以英文颜色名字*/

段落文字定义

/* 段落文字水平居中 */
text-align:center; /* 可以选属性，靠左 "left"，靠右："right" */
line-height:10px; /* 行高，行间距 */
text-indent:2em; /* 首行缩进两个字符大小；1 em= 1 font-size   */
text-decoration:line-through; /* 删除线 */
text-decoration:underline; /* 下划线 */
text-decoration:overline; /* 上划线 */

边框

borde(边框)

/* 边框宽度 | 边框样式 | 边框颜色 */
border:1px dashed green; /* "dashed" 虚线；"solid" 实线 */
/*可以分开4个边角定义*/
/* 例如左边left,可选 tiop，right，bottom */
border-left:1px dashed green;

margin(外边距) padding（填充）

margin/padding:1px ，margin/padding:30%；

对应四个上，下，左，右位置大小的值

可拆开， margin/padding-top，依此类推

元素的类型

每一个元素都有默认的 display 属性值；

行类元素

特点：内容决定元素所占位置，不可以通过css改变宽高

行内元素标签：span strong a em del

CSS默认：display: inline;

凡是带有 inline 的元素，都有文字特征
块类元素

特点：独占一行，可以通过css改变宽高

块内元素标签：div p ul li ol form address

CSS默认：disply: block;
行级块元素

特点：内容决定改变大小，可以通过css改变宽高

行级块元素标签：img

CSS默认：disply: inline-block;

盒子模型

内容

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
结构图
说明
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像
宽度和高度的计算

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距;

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

定位

absolute 定位

脱离原来位置进行定位
位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>；
absolute 定位使元素的位置与文档流无关，因此不占据空间

relative 定位

保留原来的位置进行定位
相对自己原来的位置进行定位
元素虽然偏移某个距离，但仍然占据原来的空间

fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

CSS定位属性

top bottom left right
分别对应上，下，左，右位置的值，可用数值与百分比 top:1px ，top:30%；

利用绝对定位居中

.conter{
    with:100px;
    higth:200px;
     /* 方法一 */
    position:absolute;
    left:50%;
    top:50%;
    margin-top: -100px;    /* ⾼度的⼀半 */
    margin-left: -50px;    /* 宽度的⼀半 *
    /* 方法二 */
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    margin:auto; /*实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)*/
 /* 子绝父相的居中*/
    left:50%;
    top:50%;
    transform：translate(-50%，-50%); /* 让子盒子往左+往上走自己的一半 */
}

伪元素

伪元素：不存在文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

::after和::beore

/*标签前面*/
.item::before {
content: ''; /* 内容 ，不需要可以空，但是必定写上*/
color: red  /* 和其他正常元素一样都可以定义其他属性*/
}
/*标签后面*/
.item::after {
content: '';
color: red
}

margin塌陷，合并

BFC

块级格式化上下文，它是一个独立的渲染区域，让处于BFC内外的元素相互隔离，使内外元素的布局不会相互影响。

触发方法：1. position:absolute; 2. disply:inline-block; 3. float:left/right; 4. overflow:hidden;

注意： position:absolute; float:left/right; 把内部元素转换成inline-block

margin塌陷

父子关系的子元素里，让子元素距离父元素的顶部50px,如果直接只给子元素margin-top：50px;子元素并没有距离父元素顶部50px，而是让父元素距离顶部有了50px的距离，也就是父元素的顶棚对子元素来说没有作用，相当于塌陷下来了，这就是所谓的margin塌陷。

解决方式

方案1：子元素的margin-top改为padding-top
方案2：给父元素添加样式触发BFC

margin合并

两个兄弟元素，一个设置下边距为50px,一个设置上边距为30px；

结果：两个元素之间的间距是50px,也就是它们的margin-top和margin-bottom合并了，显示的是较大值。

解决方案

方案1：给其中一个兄弟元素套一个父元素，并且设置为overflow:hidden

方案2：只给其中一个元素margin-top或margin-bottom设置想要的间距

CSS float 属性

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性;

div{
float:right; /* 向右浮动 */
}
div{
float:left;  /* 向左浮动 */
}

浮动元素会产生浮动流

浮动流元素，块级元素（block）看不见，会覆盖浮动流元素
产生BFC的元素和文本类属性（inline）的元素看得到浮动元素，不会覆盖

解决方法

方法一

给浮动的父级元素设置高度来占位，这样后面的元素就不会向上补齐。
方法二
在浮动元素的后面添加一个元素，并添加一个clear:both 的属性来清除浮动
方法三

利用 overflow: hidden/auto清除浮动。子元素可以撑开父级的高度

方法四

利用伪元素清除浮动，给父级添加伪元素

.item::after {
 content: '';
 display: block;
   clear:both;
}

CSS补充

单行文本超出容器截断文字用...省略

white-space: nowrap;  /* 文本强制在一行上显示 */
overflow: hidden; /*对超出内容进行裁减 */
text-overflow:ellipsis; /*  显示省略符号...来代表被修剪的文本*/

背景图片

div{
    background-image:url(图片路径);  /* 插入背景图片 */
    background-repeat:no-repeat; /* 如果图片小，默认下，铺满容器，no-repeat取消重复 */
    background-position:center;  /* 图片位置 */
    /*
    图片位置可用值：
 left top
    left top
    ....
    =====
    x% y%
    水平垂直位置
    */
}

嵌套问题

行级元素只能嵌套行级元素

块级元素可以嵌套任何元素

特殊注意：

p标签不能嵌套div标签

a标签不能嵌套a标签

仿写淘宝静态网页笔记

重置样式

写网页时，新建一个reset.css，用来重置HTML页面的样式，因为许多标签默认有padding和margin

CSS@用法

/* 
    @charset    设置样式表的编码
    @import     引入其他样式文件
    @media      媒体查询
    @font-face  自定义字体
*/

设置网页图标

<link rel="icon" href="favicon.ico">
/* ico的图标的格式 其他格式需要转换成ico格式才可设置网页图标篇 */

效果图

网页的logo图片通常用H标签

base标签的作用

一个单标签，位于网页头部文件的head标签内，一个页面最多只能使用一个base元素，用来提供一个指定的默认目标，也算是一种表达路径和连接网址的标记

base target属性

/* 例如 */
<base target="_blank">

target属性是网页窗口的打开方式，在base标签中设置该属性，那么页面中所有的链接都将遵循这个方式来打开网页，分别有如下几种选择：

_blank ：在新窗口打开链接页面
_parent：在上一级窗口中打开链接。
_self ：在当前窗口打开链接,此为默认值，可以省略。
_top：在浏览器的整个窗口打开链接，忽略任何框架

引入字体图标

阿里巴巴矢量图标库

选择想要的图标加入购物车
然后进入购物车点击下载代码，解压
项目目录下新建了个fonts目录来放iconfont.ttf文件
在index.css通过@引入字体和css

怪异盒模型

盒模型：
1）标准盒模型
    总宽度 = border(左右) + width + padding(左右)
    总高度 = border(上下) + height + padding(上下)
2）IE混杂模型（怪异盒模型  -->  box-sizing: border-box）
    总宽度 = width
    总高度 = height

以图换字

网速不够的时，浏览器就会采用默认的加载策略，也就是去掉网页的css和javaScript.但这时仍需保证网站的可用性，所以采用以图换字方法

文字隐藏

/* 文字放span标签 设置display隐藏 */
h1 {
width: 66px;
height: 66px;
background: url(...);
font-size: 12px;
}
span {
display: none;
}

负缩进

h1 {
width: 66px;
height: 66px;
background: url(...);
font-size: 12px;
text-indent:-9999px;
}

字体大小

h1 {
width: 66px;
height: 66px;
background: url(...);
font-size: 0;
}

渐变颜色

线性渐变

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
/* 方向(可省略，默认：to bottom), 起始颜色, 结束颜色*/

从上到下（默认情况下）

 background-image: linear-gradient(#e66465, #9198e5);

效果图

角度渐变

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);
/* 与上类似*/

实例

background-image: linear-gradient(-90deg, red, yellow);

效果图

使 ul 列表元素居中对齐

当ul列表中的所有li元素需要在父级盒子内部居中显示时，不能用 float: left;
直接在ul中设置"text-align: center;", 再将li元素的display设置为inline-block，就可以实现居中显示。

表格布局

table标签

/* 表头为th；普通单元格为td；行为tr */
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>80</td>
  </tr>

效果图：

淘宝实用

/* 边框模式---合并的模式：即两个单元格之间的的边框只需要显示一个就行 */
table {
    border-collapse: collapse;  
}
th,td {
    padding: 0;
}

.webp（图片格式）

.webp 是谷歌开发的一种图片格式，只能用于在网站中显示，其体积相较于普通的图片格式小得多，且图片的清晰度不变，目前 IE不支持、火狐在65以上的版本支持，谷歌支持。

词强制换行

/* 在空格的地方强制换行 */
word-break: keep-all;