html and css

整体结构

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

初级标签

  1. 标题标签

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

  2. 段落标题

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

  3. 文字标签

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

  4. 符号标签

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

高级标签

  1. 块状标签

    <div></div> ,每一个div占满一整行。 <span></span>，文本信息在一行展示

  2. 空格和换行，尖括号

    <br> 换行标签，&nbsp; 空格符号，&lt左尖括号，&gt; 右尖括号

  3. 有序列表标签

    <ol>     <!--网页显示-->
<li>第一条</li> <!--1.第一-->
<li>第二条</li> <!--2.第二-->
<li>第三条</li> <!--3.第三-->
</ol>

    <ol> 可以增加属性，type，换排序符号；

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

    倒叙 <ol reversed="reversed"> ；

    <ol start="数值">，更换开始符号的数值；

  4. 无序列表标签

    <ul>     
<li>第一条</li> 
<li>第二条</li> 
<li>第三条</li> 
</ul>

    默认每一段文本前面显示小圆点

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

  5. 图片插入

    <img src="图片路径">

    包括：

    1，网上url；

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

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

    属性：

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

    2，<img src="图片路径" title=”图片提示符“>，即鼠标移到图时显示

  6. 链接标签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 点击链接在新页面弹出

  7. 表单

    • 信息输入框

      <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

  1. 行间样式

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

  2. 页面级CSS

    在头部标签 <head> 下加入

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

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

    在头部标签 <head> 下加入

    <link rel="stylesheet" type="text/css" href="CSS文件位置"/>\

CSS选择器

  1. id，在div标签加入id名

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

  2. class，在div标签加入class名

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

  3. 标签选择

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

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

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

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

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

  6. 父子选择器/派生选择器

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

  7. 直接子元素选择器

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

  8. 并列选择器

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

  9. 分组选择器

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

  10. 伪类选择器

    <!--将鼠标悬浮在改标签时的变化，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：属性值1;
     属性名2：属性值2;
     属性名3：属性值3;
}
/*例如定义一个div*/
div{ 
 width:100px; 
 height:100px; 
 background:red; 
}

  2. 文字定义

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;   /*直接所以英文颜色名字*/

  1. 段落文字定义

    /* 段落文字水平居中 */
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; /* 上划线 */

  2. 边框

    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： 在浏览器的整个窗口打开链接，忽略任何框架

引入字体图标

阿里巴巴矢量图标库

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

怪异盒模型

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

以图换字

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

  1. 文字隐藏

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

  2. 负缩进

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

  3. 字体大小

    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;

HTML5 CSS3

HTML5CSS3