HTML&CSS

  • 1、 什么是HTML、CSS？
    • 如何看到网站的原始代码呢？
    • 如何去写代码？写到哪里呢？
  • 2、VSCode编辑器？
    • 下载？
    • 如何安装插件？
    • 学习编辑器基本使用？
  • 3、Chrome浏览器
  • 4、深入了解网站开发
  • 5、HTML基本结构和属性
    • HTML：超文本 标记 语言
  • 6、HTML初始代码
  • 7、HTML中的注释
  • 8、HTML语义化
  • 9、简单的HTML标签
    • 标题与段落
    • 文本修饰标签
    • 图片标签
    • 路径的引入
    • 链接标签
    • 锚点
    • 特殊符号
    • 列表
    • 表格标签
    • 表单标签
    • div与span标签
    • 自定义标签与浏览器支持
  • 10、CSS基础
    • CSS基础语法
    • CSS样式引入方式
    • CSS中的颜色表示法
    • CSS背景样式
    • CSS边框样式
    • CSS 文字样式
    • CSS段落样式（与文字样式一样针对文字）
    • CSS复合样式
    • CSS选择器
      • ID选择器
      • CLASS选择器
      • 标签选择器
      • 群组选择器（分组选择器）
      • 通配选择器
      • 层次选择器
      • 属性选择器
      • 伪类选择器
    • CSS继承
    • CSS优先级
    • CSS盒子模型
      • 组成：
      • box-sizing
      • 盒子模型的一些问题
      • 扩展
    • 标签分类
      • 按类型
      • 按内容
      • 按显示
      • 显示框类型
    • 标签嵌套规范
    • 溢出隐藏
    • 透明度与手势
    • 最大、最小宽高
    • CSS默认样式
    • <font color="red">float
      • 写法：float：left、right、none
      • float注意点
      • 清除float浮动
    • <font color="red">position定位
      • position特性
      • position取值
    • 几个CSS技术
      • CSS添加省略号
      • CSS sprite
      • border-radius圆角
      • PC端布局
  • 11、HTML与CSS进阶
    • HTML进阶
      • HTML与XHTML的区别
      • strong与b、em与i？
      • 引用标签
      • iframe标签
      • br与wbr标签
      • pre与code标签
      • map与area标签
      • embed与object标签
      • audio与video
      • 文字注解与文字方向
      • 头部标签
      • h5新语义化标签
      • 表格扩展
      • 表单扩展
      • BFC规范
    • CSS进阶
      • 浏览器
      • Transition过渡
      • transform变形
      • animation动画
      • CSS3背景图片扩展
      • 渐变
      • 矢量图标文字
      • 阴影效果
      • 遮罩
      • 倒影
      • 模糊与计算
      • 分栏布局
      • 伪元素个概念和意义
      • CSS Hack
      • IE浏览器BUG
      • 渐进增强与优雅降级
      • 布局扩展
    • Flex弹性盒模型
      • 概念
      • 常见的属性
      • 属性详解
    • Grid网格布局
      • 概念：
      • 常见属性
      • 属性详解
        • grid-template-columns和gird-template-rows
        • grid-template-areas和grid-template
        • grid-column-gap和grid-row-gap
        • justify-items和align-items
        • justify-content和align-content
      • 作用在grid子项上的CSS属性
    • 响应式布局
    • Sass和Less
      • 注释
      • 变量、插值、作用域
      • 嵌套操作
      • 运算、单位转换、颜色
      • 函数
      • 混入、命名空间、继承
      • 合并、媒体查询
      • 条件、循环、导入
    • PostCss
      • 安装
      • 常见插件
        • 使用步骤
        • 具体使用
    • CSS架构与文件组织
      • CSS架构
      • 文件组织
    • CSS新特性
      • 自定义属性
      • shapes
      • scrollbar
      • scrollsnap
    • 其他

1、 什么是HTML、CSS？

是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站

如何看到网站的原始代码呢？

通过鼠标右键选择查看网页源代码。

如何去写代码？写到哪里呢？

一个网站是由N多个网页组成的。–>每个网页.html文件
一部电视剧–>.mp4文件

2、VSCode编辑器？

下载？

VS code下载地址：https://code.visualstudio.com/

如何安装插件？

语言包、open in browser、view in browser

学习编辑器基本使用？

  1. 设置：文件–>首选项–>设置（大小、是否换行Word wrap）
  2. 创建文件夹，创建文件，重命名，删除
  3. Ctrl+s：保存
  4. Ctrl+a:全选
  5. Ctrl+x、Ctrl+c、Ctrl+ v：剪切、复制、粘贴
  6. Ctrl+z、Ctrl+y：撤销、前进
  7. Shift+end：从头选中一行
  8. Shift+home：从尾选中一行
  9. Shift+Alt+↓：快速复制一行
  10. Alt+↑或↓：快速移动一行
  11. Tab：向后缩进
  12. Tab+Shift：向前缩进
  13. 多光标：Alt+鼠标左键点击多行
  14. Ctrl+d：选择相同元素的下一个

3、Chrome浏览器

下载地址：https://www.google.cn/intl/zh-CN/chrome/

4、深入了解网站开发

  • UI设计师
  • web前端开发工程师（H5开发）
    设计稿–>代码
    数据库的数据–>显示到页面
    HTML+CSS+JavaScript

    • HTML：结构
    • CSS：样式
    • JavaScript：行为
  • web后端开发工程师

5、HTML基本结构和属性

HTML：超文本 标记 语言

  • 超文本：文本内容+非文本内容（图片、视频、音频。。。）
  • 标记<单词>
  • 语言：编程语言
  • 标记语言也叫做标签：
    <header>
    <footer>
    写法分两种：

    • 单标签：<header>
    • 双标签：<header></header>
  • 创建标签的快捷键：Tab+单词–>生成单词对应的标签
  • HTMl5标签含义之元素周期表http://www.html5star.com/manual/html5label-meaning/
  • 标签可以上下排列，也可以组合嵌套使用
  • 标签的属性：来修饰标签的，设置当前标签的一些功能
    <标签 属性=“值” 属性2=“值2”。。。>

6、HTML初始代码

每个.html文件都有的代码叫做初始代码，要符合HTML文件的规范写法。
！+Tab：快捷键创建HTML的初始代码

<!doctype html> 文档声明，告诉浏览器是一个HTML文件
<html lang="en"> HTML文件的最外层标签，包裹所有的HTML标签代码 lang="en"表示是一个个英文网站 lang="zh-CH"表示一个中文网站
<head><base href="url" target="_blank"/>定义所有连接的url<meta charset="UTF-8"> 元信息：是编写网页中的一些辅助信息charset="UTF-8"，国际编码，为了不让网页出现乱码<meta name="keywords" content="html,css,xml">定义搜索引擎关键词<meta name="description" content="免费 web">网页描述内容<meta name="author" content="">定义网页作者<meta http-equiv="refresh" content="30;url=newurl">每30秒刷新当前页面，可以定义url，表示指定时间后跳转到指定网页,不定义表示刷新当前页面<meta http-equiv="expires" content="时间">定义当前页面有效时间到指定时间<meta http-equiv="set-cookie" content="">设置当前页面的cookie<meta http-equiv="content-type" content="text/css;charset=utf8">设置页面类型，字符集类型<meta http-equiv="charset" content="iso-8859-1">定义页面字符集<title>Document</title> 设置网页的标题<link rel="icon" href="url" type="image/ico">定义标题图标<link rel="stylesheet" type="text/css" href="mystyle.css"/>连接到样式表<style type="text/css">p {color:blue}</style>定义内部样式
</head>
<body>
显示网页内容区域
</body>
</html>

7、HTML中的注释

  • 写法：<!-- 注释内容 --> 在浏览器中看不到，只能在代码中看到注释的内容
  • 意义：
    1. 把暂时不用的代码注释起来，方便以后使用
    2. 对开发人员进行提示
  • 快捷添加注释与删除注释：
    1. Ctrl+/
    2. Shif+Alt+a

8、HTML语义化

  • 定义：所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写
  • 好处：
    1. 在没有css的情况下，页面也能呈现出很好的内容结构
    2. 有利于SEO，让搜索引擎爬虫更好的理解网页
    3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）（https://h5o.github.io/）
    4. 便于团队开发与维护

9、简单的HTML标签

标题与段落

  • 标题–>双标签：<h1></h1>…<h6></h6>
    在一个网页中，h1标题是最重要的，并且一个.html文件中只能有一个h1标题标签
    h5、h6标签在网页中不经常使用
  • 段落–>双标签：<p></p>

文本修饰标签

  • 强调–>双标签：<strong></strong>、<em></em>
  • 区别：
    1. 写法和展示效果不同，一个加粗，一个斜体
    2. strong的强调性更强，em强调性稍弱。
  • 下标：<sub></sub>
  • 上标：<sup></sup>
  • 删除文本：<del></del>
  • 插入文本：<ins></ins>
  • 放大字体：<big></big>
  • 缩小字体：<small></small>
  • 预格式文本：<pre></pre>
  • 定义变量：<var></var>
  • 键盘码：<kbd></kbd>
  • 文字方向：<dbo dir=“rtl/ltr”></dbo>
  • 短引用：<q></q>
  • 长引用：<blockquote></blockquote>
  • 缩写：<abbr title=“世卫组织”>www</abbr>
  • 定义地址：<address></address>
    注：一般情况下，删除文本与插入文本是配合使用的
  • 文本显示单行，超出部分用省略号表示
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:120px;
  • 文本显示多行，超出部分用省略号表示
  display:-webkit-box;text-overflow:ellipsis;overflow:hidden;width:100px;-webkit-line-clamp: 2;<!--显示行数-->-webkit-box-orient:vertical;

图片标签

img–>单标签

  • src：引入图片的地址。
  • alt：当图片出现问题的时候，可以显示一段友好的提示文字。
  • title：提示信息，所有标签都有的一个属性，鼠标悬停时提示文字
  • width、height：图片的大小，建议都加上
  • usemap：图片映射id
  • map：定义图形地图，即映射
  • area：定义图像地图中可点击区域
<img src=“img.gif” alt="img" width="300" height="500" title="img" usemap="planetmap">
<map name="planetmap">
<!--矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))--><area shape="rect" coords="x1,y1,x2,y2" href=url><!--圆形：(圆心坐标为(X1,y1)，半径为r)--><area shape="circle" coords="x1,y1,r" href=url><!--多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)--><area shape="poly" coords="x1,y1,x2,y2 ......" href=url><!--该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）-->
</map>

路径的引入

  • 相对路径
  • 绝对路径

链接标签

a–>双标签 <a></a>

  • href属性：链接的地址
  • target属性：可以改变链接打开的方式，默认情况下是在当前页面打开_self，修改为在新窗口中打开_blank，除了_self外，写任意值都是在新窗口中打开。
  • rel=“nofollow”:指示搜索引擎不要追踪(即抓取)网页上的任何出站链接，rel属性表示源文件到目标文件的关系，rev表示目标文件到原文件的关系，两者都可以在a标签中使用。如rel=“next”,rev=“prev”;
    base–> 单标签：写在head中，作用就是改变链接的默认行为的，作用于全局链接

锚点

两种做法

  1. #+id属性（a标签href直接跳转到对应id标签处）
  2. #+name属性（name属性加给一个单独的a标签，跳转到name对应的a标签处，也就是在需要跳转的地方添加一个只有name属性的a标签即可）

特殊符号

  • 在编写一些文本时，经常会遇到输入无法输入的字符，还有往一段文字中加入多个空格时，页面并不会解析出多个空格，这些无法输入和空格符都是特殊符号，在HTML中，为这些特殊字符准备了专门的代码。
HTML原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; “ 引号
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&ensp; 半个空白位
&emsp; 一个空白位
&nbsp; 不断行的空白

列表

  • 无序列表–>ul li 符合嵌套规范，中间不能有其他标签，但是li里面可以嵌套其他标签，只是ul跟li质检不能有其他标签

    <!--一般会用list-style去掉列表样式，无序列表默认是黑色实心圆点，可以替换其他样式-->
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点/默认</h4>
<ul style="list-style-type:disc"><h4>圆圈列表：</h4><ul style="list-style-type:circle"><h4>正方形列表：</h4><ul style="list-style-type:square">
  • 有序列表–>ol li 有序列表用的非常少，经常用无序列表代替有序列表 
    <!--type可以选择a，A，i，I。reversed表示顺序翻转-->
<ol type="a" start="3" reversed>
<li>HTML</li>
<li>Java</li>
<li>python</li>
<li>JavaScript</li>
</ol>
  • 定义列表–>dl dt dd 列表项需要添加标题和对标题进行解释的情况 
    自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
  • 嵌套列表
    注：列表之间可以嵌套，形成多层列表
    输入ul>li*N,嗯Tab可以快速生成N条小结的列表

表格标签

  • table、tr、th、td、caption：表格最外层容器、定义表格行，表格表头，表格列，表格标题
    注：之前是有嵌套关系的，要符合嵌套规范
  • 语义化标签：tHead、tBody、tFood
    注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
  • 表格属性
  1. border：表格边框
  2. cellpadding：单元格内的空间
  3. cellspacing：单元格之间的空间
  4. rowspan：合并行
  5. colspan：合并列
  6. align：左右对齐方式
    left：左对齐
    center：居中对齐
    right：右对齐
  7. valign：上下对齐方式
    top：上对齐
    middle：居中对齐
    bottom：下对齐
  • table常用属性
border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色
  • tr常用属性
bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)
  • td常用属性
width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top)
  • **注意：**table中设置height无效，主要取决于浏览器的工作模式。一般对于div或者body或者table都是默认没有高度的，是由里面的内容决定的。所以设置并不会起作用，可以尝试在style也就是css中进行设置。
  • frame属性
<!--在table中设置frame，只针对的是表格整体外部边框，指那些边框可见-->
<p>Table with frame="above":</p> # 显示上边的外部边框
<p>Table with frame="below":</p> # 显示下边的外边框
<p>Table with frame="hsides":</p>
<p>Table with frame="vsides":</p>

表单标签

  • form–>表单的最外层容器
    form中的属性action是指定表单提交地址
    input–>单标签。标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框
    input中的属性：
  1. disable：禁用，比如复选或者输入框均可使用
  2. placeholder：默认的提示信息
  3. checked：默认选中状态，可以写值，可以直接就写一个属性
  • 几种常见的input类型
type属性值 input含义
text 普通文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮
tel 电话号码
file 文件上传
email 邮箱
week 周
time 时间
date 日期
datetime-local 时间日期
color 颜色
month 月
number 数值
search 搜索框
hidden 隐藏域
range 调节条
  • texttarea–>多行文本框
  • select–>下拉菜单
    selected，默认选中的选项，option为个选项
    select标签中的size表示默认显示的项数
    multiple：该属性表示多选，在file类型的input中也可用，表示一次可上传多个文件
  • label：辅助标签,label中的for要跟前面的id对应，此时点击前面单选框跟点击后面label中的内容效果一样
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
<!--optgroup标签，定义选项组--><select><optgroup label="蔬菜"><option>白菜</option><option>鲁菜</option><option>花菜</option></optgroup><optgroup label="水果"><option>橘子</option><option>香蕉</option><option>榴莲</option></optgroup>
<!--datalist定义输入预选值--><input list="mylist"><datalist id="mylist"><option>abc</option><option>bce</option><option>lji</option><option>iea</option></datalist>
<!--定义输出值组件,将计算结果放在output中-->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>

div与span标签

  • div（块）：
    div全称division，“分割，分区”的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落，标题，表格，图像等各种网页元素，即HTML汇总大多数的标签都可以嵌套在div中，div总还可以继续嵌套多层div，用来将网页分割成独立的，不同的部分，来实现网页的规划和布局。
  • span（内联）
    用来修饰文字的，div与span都是没有任何默认样式的，需要配合css才行。

自定义标签与浏览器支持

  • 自定义标签
<!--通过JavaScript创建标签-->
<script>document.createElement("zhangsan");</script>
<!--通过css定义标签样式-->
<style>zhangsan {display:block;color:#ff0000;text-decoration:none;background-color:#0000ff;font-family:宋体,楷体;font-size:50px;line-height:100px;text-align:center;}</style>
<body>
<!--正常使用标签--><zhangsan>我是一个自定义元素</zhangsan>
</body>
  • 浏览器支持
<!--必须放在head中，因为浏览器加载body前要提前加载资源，是的不支持html5的浏览器支持h5-->
<!--[if lt IE 9]<script crc="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

10、CSS基础

CSS基础语法

  • 选择器 { 属性1：值1 ；属性2：值2 }
    width：宽
    height：高
    background-color：背景色

  • 长度单位：

  1. px–>像素
  2. %–>百分比
    外容器（父容器）–>600px 当前容器 50%–>300px

CSS样式引入方式

  1. 内联样式（行内样式）
    style属性
<div style="width: 20%;height: 30px;background-color: chartreuse">这是一个块级元素
</div>
  1. 内部样式
    style标签
    <style>div { width: 30px;height: 50%;background-color: red}</style>

区别：
内部样式的代码可以复用，符合w3c的规范标准，进行让结构和样式分开处理。
3. 外部样式
引入一个单独的css文件name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href是指定资源的路径。

<link rel="stylesheet" href="资源地址">

通过@import方式引入外部样式,这种方式有很多问题，不建议使用(https://www.cnblogs.com/my–sunshine/p/6872224.html)

    <style>@import url('资源地址');</style>

CSS中的颜色表示法

  1. 单词表示法：
    red，blue，green，yellow。。。
    <style>div { width: 30px;height: 50%;background-color: red}</style>
  1. 十六进制表示法：
    0 1 2 3 4 5 6 7 8 9 a b c d e f
    #000000 黑色
    #ffffff 白色
    #ff0000 红色
    <style>div { width: 30px;height: 50%;background-color: #ffffff}</style>
  1. rgb三原色表示法：
    rgb(255,255,255)
    取值范围 0~255
    <style>div { width: 30px;height: 50%;background-color: rgb(255,255,255)}</style>
  1. rgba（255,255,255,0.5）：a表示透明度，取值范围0 ~ 1之间。
  2. 获取颜色的工具
    提取颜色的工具下载地址：https://baidufe.com/fehelper
    photoshop工具

CSS背景样式

  • background-color：背景色
  • background-image：背景图
    url(背景图地址)
    默认：会水平垂直都铺满
  • background-repeat：平铺方式
    repeat-x：x轴平铺
    repeat-y：y轴平铺
    repeat：x，y都进行平铺，默认值
    no-repeat：都不平铺
  • background-position：背景位置
    x y ：number（px，%） | 单词
    x：left，center，right
    y：top，center，bottom
  • background-attachment：背景图随滚动条移动的方式
    scroll：默认值（背景随容器而动，此时背景图位置是按照当前元素进行偏移的）
    fixed：（背景图不会随滚动条而动，此时背景位置的偏移是按照浏览器进行的）

CSS边框样式

  • border-style：边框样式
    solid：实线
    dashed：虚线
    dotted：点线
  • border-width：边框粗细
    px。。。
  • border-color：边框颜色
    red #f00 。。。
  • 边框也可以针对某一条边框进行单独设置：
    border-left-style：中间单词是方向 left、right、top、bottom
  • 颜色：透明颜色 transparent

CSS 文字样式

  • font-family：字体类型
  1. 英文、中文
  2. 衬线体、非衬线体
  3. 注意：
    a. 多个字体类型的设置目的（用逗号隔开，对一个样式设置字体样式时可以同时设置多个字体类型，这样做的目的在于识别时是从前往后识别，遇到第一个计算机中有的字体就显示，如果只设置一个类型，刚好计算机中没有这个类型，就只会显示计算机默认字体，与设置无关）
    b. 引号的添加的原因（在设置字体时有些类型需要用到引号，有些不需要，主要原因是在于有些字体类型是多个单词组成，当一个字体类型中存在空格时，就必须要加上引号，如果没有，则不用加）
  • font-size：字体大小
    默认：16px大小（建议写偶数，因为设置对齐时是根据长度来的，偶数取中符合规范）
    写法：number（px）| 单词（small、large。。。不推荐）
  • font-weight：字体粗细
    模式：正常（normal） 、加粗（bold）
    写法：单词（normal、bold）| number（100、200.。。900，其中100–500都是正常，600–900都是加粗）
  • font-style：字体样式
    模式：正常（normal）、斜体（italic）
    写法：单词（normal、italic）
    注：oblique也表示斜体，用的比较少，一般了解即可
    区别：
  1. italic 带有斜体属性的字体类型才可以设置倾斜操作
  2. oblique 没有倾斜属性的字体类型也可以设置，一般没用该属性的字体类型不宜强行使其倾斜，故而不推荐使用
  • color：字体颜色

CSS段落样式（与文字样式一样针对文字）

  • text-decoration：文本装饰
    下划线：underline
    中划线：line-through
    上划线：overline
    不添加任何装饰：none
    注：添加多个文本装饰：line-through underline overline（用空格隔开）
  • text-transform：文本大小写（针对英文段落）
    小写：lowercase
    大写：uppercase
    只针对首字母大写：capitalize
  • text-indent：文本缩进（针对段落首行）
  1. number（px）：首行缩进number个px，但是此时会根据字体大小有偏差，一般缩进两个字的大小就要手动设置两个font-size大小
  2. em段位：相对单位，1 em永远都是跟字体大小相同，所有缩进可以写成2em，但是是根据中文字体缩进，如果穿插有英文单词，则没有办法保证缩进大小
  • text-align：文本对齐方式
    左对齐：left
    右对齐：right
    居中对齐：center
    两端对齐：justify（自动调节中间间距达到两端对齐效果）
  • line-height：定义行高
  1. 行高：指一行文字的高度，上边距和下边距是等价关系。
  2. 默认行高：不是一个固定值，而是变化的，随着当前文字的大小在不断的变化。
  3. 取值：number（px）| scale（比例值，跟文字大小成比例，直接写number，不带单位表示，带了px以后就是具体的大小，不带单位表示number倍的font-size大小）
  • letter-spacing：字之间的间距
    中文：每个字之间的间距
    英文：每个字母之间的间距
  • word-spacing：词之间的间距（针对英文）
  • 长英文和长整形数字不自动折行问题：
  1. word-break：break-all；（非常强烈的折行）
  2. word-wrap：break-word；（不那么强烈的折行，会产生一些空白区域）

CSS复合样式

  • 复合的写法，是通过空格的方式实现的，复合写法有的是不需要关心顺序的，例如background、border，有的则是需要关心顺序的，例如font
  • background：red url() repeat 0 0；（写number表示具体的距离）
  • background：red url() repeat left top；(可以写英文单词表示靠左，靠上)
  • border：1px red solid；
  • font：
    注：最少要有两个值 size family
  1. weight style size family √
  2. style weight size family √
  3. weight style size/line-height family √（字体大小与行高用/隔开）
  • 一般不建议同意样式用复合跟单一样式混合使用，如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉，负责复合样式中的属性会将单一样式的属性复合，而先写复合样式，实际是用单一样式替换复合样式中对应的属性

CSS选择器

ID选择器

  • 写法：css中：# elem{}---->HTML中：id=“elem”
  • 注：
    ID是在一个HTML中是唯一值，在一个HTML中只能出现一次，出现多次是不符合规范的
    命名的规范：由字母，下划线，中划线，数字（第一个不能是数字）
    驼峰写法：searchButton（小驼峰）、SearchButton（大驼峰）
    短线写法：search-small-button
    下划线写法：search_small_button

CLASS选择器

  • 写法：css中：.elem{}---->HTML中：class=“elem”
  • 注：
    class选择器是可以复用的，也是跟ID最大的不同
    可以添加多个class样式，也就是同一个标签的class可以是多个不同的值，用空格隔开
    多个class的时候，样式的优先级根据css优先级决定，而不是class属性中的顺序，也就是根据引入方式跟选择器的优先级决定，而不是根据多个class的顺序决定
    标签+类的写法：p.elem表示只有p标签下的类选择器值为elem的标签才会生效

标签选择器

  • 写法：css中div{}----><div></div>
  • 使用场景：
    去掉某些标签的默认样式时
    复杂的选择器中，如 层次选择器

群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码复用。
如：#elem,div,.elem{}

通配选择器

*{}---->所有标签（body，div，ul，li，p，h1。。。）
注：
尽量避免使用，因为会给所有的标签添加样式，慎用。
使用场景：去掉所有标签的默认样式。

层次选择器

后代 M N {} ：M下面的所有N
父子 M>N{}：M下面的N
兄弟 M ~ N{}：当前M 后面的所有兄弟N，不包括前面的兄弟
相邻 M + N{}：当前M后面相邻的N，不包括前面的一个相邻

属性选择器

M[attr] {}：attr属性
= ：完全匹配–> div[class=aaa],class属性的值是aaa的
*=：部分匹配–>div[id*=aa],class属性的值中包含有aa字母的
^=：起始匹配，类似正则的起始匹配
$=：结束匹配，类似正则的结束匹配
[][][]：组合匹配，div[class=aaa][id=aa],div中class完全匹配aaa且id完全匹配aa的标签

伪类选择器

  1. 写法：M:伪类{}
    :link–>访问前的样式（只能添加给a标签）
    :visited–>访问后的样式（只能添加给a标签）
    :hover–>鼠标移入时的样式（可以添加给所有标签）
    :activer–>鼠标按下时的样式（可以添加给所有标签）
    注：
    如果四个伪类都生效，必须有一定的顺序：L、V、H、A
    一般的网站值设置a{}，a:link{}
  2. 其他一些常用伪类选择器：
  • :after、:bifore 通过伪类的方式给元素添加一段文本内容，使用content属性，如div:after{content:‘aaa’}
  • :checked、:disabled\focus 都是针对表单元素的 分别表示被选中的，禁用的和聚焦的，用此来修改一个表单中符合条件的元素的样式
  1. 结构性伪类选择器：
  • nth-of-type()、nth-child()
    括号中写角标，可以从1开始，如列表中，有五个li元素，则可以写1到5，如li:nth-of-type(3){},表示第三个li元素的样式，还可以写字母n，表示从第一个到无穷大，可以写2n，表示偶数个的样式，用2n+1表示奇数个，以此实现隔行变色，child则表示子元素，type是根据类型来分，两个的效果类似。
  • first-of-type 第一个，效果同上
  • last-of-type 最后一个，同上
  • only-of-type 唯一的，当只有一个时，实现此样式

CSS继承

  • 文字相关的样式可以被继承
  • 布局相关的样式不能被继承
  • 对于默认不能被继承的样式，一般可以通过设置inherit 值的属性来设置让其可以被继承如下,p元素的边框属性便可继承与父标签div
    <style>div { width: 30px;height: 50%;background-color: rgb(255,255,255)border:1px red}p {border: inherit}</style>
<div><p>这是一个段落</p>
</div>

CSS优先级

  • 相同样式优先级
    当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
  • 内部样式与外部样式
    内部样式与外部样式优先级相同，但如果都设置了相同的样式，那么后面写入的引入方式优先级高
  • 单一样式优先级
    style行间>id>class>tag>*(通配符)>继承
  • 注：
    style行间 权重        1000
    id             权重        100
    class        权重        10
    tag           权重        1
  • !important
    提升优先级。非常规方式，不建议使用，不能针对继承的属性进行优先级的提升如：.aa{color:red !important}，这样一来这个class选择器中的字体颜色属性的优先级将提升为最高，比行内选择器的依然要高。
  • 标签+类与单类
    标签+类>单类
  • 群组优先级
    群组选择器与单一选择器的优先级相同，按照顺序执行，后面的覆盖前面的样式。
  • 层次优先级
  1. 权重比较
    ul li .box p input{} -> 权重为：1+1+10+1+1
    .hello span #elem{} -> 权重为：10+1+100
    相加以后得知下面的权重高于上面的，注意的是及时一百个标签选择器相加也没有一个id选择器高，这里数字仅仅是等级，并不是严格的大小
  2. 约分比较（去掉相同的）
    ul li .box p input{} ->去掉相同的，类似公约数 li p input{}
    .htllo span #elem{} -> 去掉之后 #elem
    去掉以后下面剩余一个id选择器，上面都是标签选择器，所有下面优先级高

CSS盒子模型

组成：

content -> padding -> border -> margin
物品 -> 填充物 -> 包装盒 -> 盒子与盒子之间的间距

  • content：内容区域，width和height组
  • padding：内边距（内填充）
    只写一个值：30px（上下左右）
    写两个值：30px 40px（上下、左右）
    写四个值：30px 40px 50px 60px（上、下、左、右）
  • 单一样式只能写一个值
    padding-left、padding-right、padding-top、padding-bottom
  • margin：外边距（外填充）
    只写一个值：30px（上下左右）
    写两个值：30px 40px（上下、左右）
    写四个值：写四个值：30px 40px 50px 60px（上、下、左、右）
  • 单一样式只写一个值：
    margin-left
    margin-right
    margin-top
    margin-bottom
    注：
  1. 背景色填充到margin以内的区域，包括border，不包括margin
  2. 文字在content区域添加
  3. padding不能为负数，而margin可以为负数

box-sizing

  • 盒尺寸，可以改变黑子模型的展示形态，
  • 默认值：content-box：width、height --作用于–> content
  • border-box：width、height --作用–> content padding border
  • 使用场景：
  1. 不用再计算一些值
  2. 解决一些100%的问题

盒子模型的一些问题

  1. margin叠加问题。出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。
  2. margin传递问题，出现嵌套的结构总，只是针对margin-top的问题。

扩展

  1. margin左右自适应是可以的，但是上下自适应不行。margin：0 auto；
  2. width、height不设置的时候，对盒子模型的影响。会自动去计算容器的大小，节省代码。

标签分类

按类型

  • block（块）：div、p、ul、li、h1。。。
  1. 独占一行
  2. 支持所有样式
  3. 不写宽的时候，跟父元素的宽相同
  4. 所占区域是一个矩形
  • inline（内联）：span、a、em、strong、img。。。
  1. 挨在一起
  2. 有些样式不支持，例如：width、height、某些方向的margin与pudding等
  3. 不写宽的时候，宽度由内容决定
  4. 所占区域不一定是矩形，会折行
  5. 内联样式之间会有空隙，是由于换行产生的，可以给其父元素设置font-size为0来解决
  • inline-block（内联块）：input、select。。。
  1. 挨在一起，但是支持宽高
  • 注：布局一般用块标签，修饰文本一般用内联标签

按内容

  • Flow：流内容
  • Metadata：元数据
  • Sectioning：分区
  • Heading：标题
  • Phrasing：措辞
  • Embedded：嵌入
  • Interactive：互动
    详情查看网址https://www.w3.org/TR/html5/dom.html

按显示

  • 替换元素：浏览器根据元素的标签和属性，类决定元素的具体显示内容
    img、input。。。
  • 非替换元素：将内容直接告诉浏览器，将其显示出来
    div、h1、p。。。

显示框类型

display：block、inline、inline-block、none。。。

  • 隐藏标签
    display：none 不占空间的隐藏
    visibility：hidden 占用空间的隐藏

标签嵌套规范

  • 块能够嵌套内联
<div><span></span><a href="#"></a>
</div>
  • 块嵌套块
<div><div></div>
</div>

特殊：
错误的写法：

<p><div></div>
</p>
  • 内联不能嵌套块
    错误的写法：
<span><div></div>
</span>

特殊：
正确的写法：

<a href="#"><div></div>
</a>

溢出隐藏

overflow：
visible:默认，多出内容会溢出
hidden：多出内容直接切割掉
scroll：加滚动条，x、y都会加，内容多少都会加
auto：自适应，当内容超出时加滚动条
x轴、y轴：overflow-x、overflow-y：针对两个轴分别设置

透明度与手势

  • 透明度
  1. opacity：0（透明）~1（不透明）
    0.5（半透明）
    注：占空间、所有子内容也会透明
    rgba（）：0~1
    注：可以让指定的样式透明，而不影响其他样式
    background：rgb（255,0，0） 红色背景
    background：rgba（255,0，0,0.5） 红色半透明背景
  • 手势cursor
    default：默认箭头
    pointer：手形状
    help：帮助手势，箭头带问号
    move：可移动手势
  • 实现自定义手势
  1. 准备图片：必须是.cur、.ico格式的
  2. cursor:url(./img/cursor.ico),auto;通过定位找到图片，注意后面写auto

最大、最小宽高

min-width、min-height
max-width、max-height
设置最大、最小宽高后，样式宽高会根据内容多少在最大、最小区间内自适应
%百分比单位：换算–>以父容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加height：100%；body：100%；html：100%；
html，body{height：100%}
div{height：100%}

CSS默认样式

  • 没有默认样式的标签
    div、span
  • 有默认样式的标签
    body–>margin：8px
    h1–>margin：上下21.440px；font-weight：bold
    p–>margin：上下16px
    ul–>margin：上下16px；padding：左 40px；默认的点：list-style：disc
    a–>text-decoration：underline下划线
  • CSS reset（样式重置，去掉默认样式）
  1. *{margin：0；padding：0}
    优点：不用考虑哪些标签有默认的margin和padding
    缺点：稍微的影响性能
  2. ul，ol{list-style：none}
  3. a{text-decoration：none；color：#999}
  4. img{display：block}
    问题的现象：图片跟容器底部有一些空隙
    内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
    vertical-align：baseline； 基线方式，默认值
    vertical-align：bottom；底线方式，解决问题
    display：block：转换为块元素，解决问题
  5. CSS样式重置参考https://blog.csdn.net/weixin_41986726/article/details/84140543
  • 写具体页面的时候或一个布局效果的时候：
  1. 写结构
  2. css样式重置
  3. 写具体样式

float

脱离文本流，沿着父容器靠左靠右进行排列。

写法：float：left、right、none

float注意点

  1. 只会影响后面的元素（对于浮动元素前面的元素没有影响）
  2. 容器默认提升半层（后面容器中的文字则会环绕到浮动元素的周围）
  3. 默认宽根据内容决定（块级元素默认宽是父容器宽，但是浮动之后默认是由内容决定的）
  4. 换行排列（浮动元素会依次靠左或靠右排列，超出父容器部分会换行）
  5. 主要给快元素添加，但也可以给内联元素添加

清除float浮动

  • 上下排列：利用clear属性，clear：left、right、both
  • 嵌套排列：
  1. 固定宽高：不推荐，不能把高度固定死，不适合做自适应效果
  2. 父元素浮动：不推荐，因为父容器浮动也会影响到后面元素
  3. overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
  4. display：inline-block（BFC规范），不推荐，父元素会影响到后面的元素
  5. 设置空标签：不推荐，会多添加一个标签（空标签跟浮动标签这时就作为上下排列，然后给空标签设置clear属性清除浮动）
  6. after伪类：推荐，是空标签的加强版，目前各大公司的做法。实际就是空标签的加强版，利用after写一个内容，可以看做就是写一个空标签（#父容器：after{content：‘空内容’;clear:both;display:block;}）,由于after写的东西是一个内联标签，而clear只对块标签起作用，所有用display属性修改为块标签，再利用clear属性清除浮动。

position定位

position特性

CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置

position取值

  1. static（默认）：静态定位（没有定位）
  2. relative：相对定位
  • 如果没有定位偏移量，对元素本身没有任何影响
  • 不是元素脱离文档流
  • 不影响其他元素的布局
  • left、top、right、bottom是相对于当前元素自身进行偏移的
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box1 {width: 100px; height: 100px; background: red}#box2 {width: 100px; height: 100px; background: blue; position: relative; left: 100px; top: 100px}#box3 {width: 100px; height: 100px; background: yellow}</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
  1. absolute：绝对定位
  • 使元素脱离文档流
  • 使内联元素支持宽高
  • 使块元素默认宽高根据内容决定
  • 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（祖先可以是绝对、相对、固定）
  1. fixed：固定定位
  • 使元素完全脱离文档流
  • 使内联元素支持宽高
  • 使块元素默认宽高根据内容决定
  • 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
  1. sticky：粘性定位
  • 在指定的位置进行粘性操作，不指定上下左右位置时没有任何影响
  • 设置某个标签为粘性定位后，如果不做操作则没有影响
  • 当滚动条向下拖拽时，所设置的标签滚动到粘性定位设置的上、下、左、右的位置后不再发生变化，如果设置的上下左右位置超过本章的位置后首先会向下或向右等变化到该位置
  1. z-index：定位层级，写正负整数（-2、-1、0、1、2等等）
  • 兄弟元素都用了定位后，后面的元素定位层级较高，如都设置相对定位后，脱离文档流，类似漂浮，此时后面设置的元素会在前面元素的上面，此时可以通过z-index属性调整层级
  • 如果有嵌套关系时，首先比较的是父元素的兄弟之间的层级，此时其子元素都符合父元素比较的结果，例如父元素比后面元素层级低，则其下面的所有子元素都同样比人家低。如果父元素没有设置定位，则其子元素直接跟父元素的兄弟元素进行比较

几个CSS技术

CSS添加省略号

  • width：number --> 必须有一个固定的宽
  • white-space：nowarp --> 不让内容折行
  • overflow：hidden --> 切割溢出内容
  • text-overflow：ellipsis --> 添加省内号
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box2 {width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}</style>
</head>
<body>
<div id="box2">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
</body>
</html>

CSS sprite

  • 特性：CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
  • 好处：
  1. 可以减少图片的质量，网页的图片加载速度快
  2. 减少图片的请求次数，加快网页的打开
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box1 {width: 20px;height: 20px ;background: url(./sprite_icon.png) no-repeat left -596px}#box2 {width: 300px;height: 20px; border: 1px black solid; line-height: 50px; padding-left: 30px;background: url(./sprite_icon.png) no-repeat right -516px/*通过上面方式截取一个大图中的一个小图标*/}</style>
</head>
<body>
<div id="box1"></div>
<div id="box2">产品中心</div>
</body>
</html>

border-radius圆角

  • border-radius：number px；number为具体数值像素，此时圆角是一个以number为半径的圆的弧形
  • border-radius：number%；为number百分比，此时容器上下弧形是以容器宽的百分比数值为半径的圆，左右是以容器高为半径的圆的弧形为角度，当容器宽高不一致时，设置为50%可以形成一个椭圆
  • 以上两种方式都可以设置两个值，分别是第一个值代表左上和右下两个角，第二个值表示右上和左下连个角
  • 可以设置四个值，分别按照顺时针对应，为左上角，右上角，右下角，左下角四个值
  • border-radius：number px / number px；中间用斜线分开，第一个值表示椭圆的x半径，第二个值表示椭圆的y半径
  • 下面几种设置方式效果类似
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box1 {width: 100px; height: 300px; border-radius: 50%; border: 2px red solid;}#box1 {width: 100px; height: 300px; border-radius: 50% 50%; border: 2px red solid;}#box1 {width: 100px; height: 300px; border-radius: 50% / 50%; border: 2px red solid;}#box1 {width: 100px; height: 300px; border-radius: 48px 148px; border: 2px red solid;}#box1 {width: 100px; height: 300px; border-radius: 48px / 148px; border: 2px red solid;}</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>

PC端布局

通栏：自适应浏览器的宽高。
版心：固定一个宽高，并且让容器居中。

11、HTML与CSS进阶

HTML进阶

HTML与XHTML的区别

  • DOCTYPE文档编码
  1. html：
<!doctype html>
  1. xhtml：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 元素大小写
  1. html：标签可以大写或者小写
  2. xhtml：标签必须都用小写
  • 属性布尔值
  1. html：例如checked属性如果默认选中的话值也是checked，此时可以不写值，默认就是true
  2. xhtml：在上面的例子中必须写上值，checked=“checked”
  • 属性引号
  1. html：属性的值可以不用双引号
  2. xhtml：属性的值必须用双引号写
  • 图片的alt属性
  1. html：图片可以只写一个路径，不用写alt属性
  2. xhtml：图片元素必须要写alt属性
  • 单标签写法
  1. html：单标签可以自闭合，也可以不用闭合
  2. xhtml：单标签必须自己闭合
  • 双标签闭合
  1. html：双标签元素可以只写一个起始标签，不用写闭合标签
  2. xhtml：双标签必须要有对应的闭合标签

strong与b、em与i？

区别在于strong和em是具有语义化的，而b和i是不具备语义化的。
运用不同的元素可以减少class的使用，也就是选择器的使用。

引用标签

  • blockquote：引用大段的段落解释
  • q：引用小段的短语解释
  • abbr：缩写或首字母缩略词
  • address：引用文档地址信息
  • cite：引用著作的标题

iframe标签

可以引用其他的HTML到当前的HTML中显示。
主要是利用iframe的属性进行样式的调节。

属性 含义
frameborder 规定是否显示框架周围的边框
wider 定义iframe的宽度
height 定义iframe的高度
scrolling 规定是否在iframe中显示滚动条（取值可以是no/yes）
src 规定在iframe中引入的url（当src与srcdoc同时存在时，后面一个会失效）
srcdoc 规定在iframe中显示的页面内容（可以直接写需要显示的内容或者是写其他标签）
应用场景：数据传输（如关联QQ关联登录）、共享代码（页面共同部分写为独立文件引入）、局部刷新、第三方介入（如在页面固定位置插入广告）等。

br与wbr标签

br是强制换行，遇到br标签时直接换行
wbr是软换行，比如在一个长单词中，如果不添加任何标签或样式，会自动的换行，当后面距离不够显示一个单词时候直接换行，会导致后面有大片的空白，如果在长单词的某个位置添加了软换行，则会将一个单词分开，在软换行的地方进行换行。

pre与code标签

  • 针对网页中的程序代码的显示，通常是嵌套使用，外层使用pre标签，内层用code标签，再在里面嵌套span抱歉等等的用来显示代码
  • pre是用来显示文本，它会保留文本中的空格以及换行等等，而code是会显示等宽字体，也就是代码的字体，同时告诉浏览器此处显示的是程序代码，因此两者嵌套使用用来在浏览器显示代码

map与area标签

给特殊图形添加链接，area能添加的热区的图形有矩形，圆形以及多边形。

embed与object标签

  • embed和object都表示能够嵌入一些多媒体，如flash动画，插件等。基本使用没有太多的区别，主要是为了兼容不同的浏览器而已。
  • embed能够独立完成，而object是需要配合Parma元素完成。
<embed src="flash地址" type="可以不用写">
<boject><param name="move"move表示动画，可以写其他的 value="flash地址">
</boject>

audio与video

  • audio标签表示嵌入音频文件，video表示嵌入视频文件。默认控件是不显示的。可以通过controls属性类显示控件。
  • 为了能够支持多个备选文件的兼容支持，可以配合source标签。
<audio src="音频地址" controls是否显示控件 loop是否循环播放 autoplay是否自动播放></audio>
<video src="视频地址" controls></video>
<video controls autoplay><source src="视频地址"><source src="备选视频地址">
</video>
  • 如果是要设置视频显示的大小，则需要通过套一层div来设置大小，同时视频显示会自动调节宽高比例，如果要将一个宽高等于浏览器宽高的视频宽100%显示，高按照固定大小显示，则需要设置父容器宽为100%，高为固定大小，同时设置video宽高的最小显示为100%，同时要设置父容器为溢出隐藏，否则视频自动调节宽高按照100%显示，高度大于的部分会溢出父容器。若是不设置video的最小显示宽高，而是直接设置宽高，则会根据宽高中较小的一方自动调整宽高来显示。其次就是对于文件较大且有声音的视频文件，设置自动播放后没有起到作用，此时用muted来进行静音操作后自动播放会起作用，主要原因一个是浏览器版本问题，一个是视频文件格式问题，以及视频文件大小问题。示例：
<div style="width:100%;height:250px;overflow: hidden"><video loop controls autoplay muted style="min-width: 100%;min-height: 100%"><source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.mp4"></video>
</div>

文字注解与文字方向

  • ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。一般两者配合使用。
<ruby>寒<rt>hán</rt>冷<rt>lěng</rt>
</ruby>
<!--为寒冷两个字添加拼音-->
  • bdo标签可覆盖默认的文本方向
<div><span><bdo dir="rtl"><!--rtl就是right to left，默认为ltr，即从左到右，此处展示输入的文字从右到左显示，即为rtl-->好的符号和法尔啊</bdo></span>
</div>

头部标签

  • meta标签
<meta name="description" content="网页描述">
<meta name="keywords" content="搜索引擎关键字">
<meta name="author" content="网页作者">
<!--规定时间自动刷新或跳转到指定页面-->
<meta http-equiv="refresh" content="3;url=www.baidu.com">
  • link标签
<link rel="stylesheet" type="text/css" href="css地址">
<link rel="icon" type="image/x-icon" href="xxx.ico图标地址">
<link rel="dsn-prefetch" href="资源地址"><!--dsn解析，提前解析为IP，通过IP访问资源，提高页面效率-->

h5新语义化标签

  • header：页眉
  • footer：页脚
  • main：主体
  • hgroup：标题组
  • nav：导航
  • article：独立的内容
  • aside：辅助信息的内容
  • section：区域
  • figure：描述图像或视频
  • figcaption：描述图像或视频的标题
  • datalist：选项列表
  • details / summary ：文档细节 / 文档标题
  • progress / meter ：定义进度条 / 定义度量范围
  • time：定义日期或时间
  • mark：带有标记的文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="key,key"><meta name="description" content="desc"><meta name="author" content="master"><title>Title</title><link rel="shortcut icon" href="http://static.zhizuobiao.com/favicon.ico?v=1567389893000"/><link rel="stylesheet" type="text/css" href="xxx.css"/><style type="text/css">* {padding: 0;margin: 0;}li {list-style: none;display: inline-block;margin-left: 70px;font-size: 20px;font-family: 微软雅黑;}nav {background-color: coral;border: 1px solid white;margin-bottom: 20px;margin-top: 10px;}ul {margin-left: 50px;margin-right: 100px;display: inline;line-height: 70px;}#ul2 {margin-left: 180px;}a {text-decoration: none;}hgroup {text-align: left;margin-left: 200px;}footer {text-align: center;}article,aside {display: inline-block;}article {width: auto;height: auto;float: left;margin-left: 130px;}aside {width: 300px;height: 500px;text-align: center;float: right;}img {display: block;float: left;margin-top: 25px;margin-left: 130px;margin-right: 300px;}#main:after{content: '';clear: both;display: block;}</style>
</head>
<body><!--头部，主要有标题以及导航--><header><!--标题组，包含多个标题，如主标题副标题等--><a href="http://www.zhizuobiao.com" target="_blank"><img src="http://static.zhizuobiao.com/images/logo.jpg" alt="职坐标" title="职坐标"></a><hgroup><h1>这是一个个人学习网站</h1><h2>为了学习HTML创建的网站</h2></hgroup><!--网站导航栏部分，可以头部出现或者主体部分出现，可以出现多次--><nav><ul id="ul1"><li>首页</li><li>论坛</li><li>个人</li><li>支付</li><li>关于</li></ul><ul id="ul2"><li>个人信息</li><li>网站介绍</li><li>登录/注册</li></ul></nav></header><!--主体部分，出来页眉页脚，都属于主体部分--><main id="main"><!--网页独立部分，就是整个主体内容部分，可以出现多次--><article><section><form action="#"><input list="names"><datalist id="names"><option>abc</option><option>ab</option><option>acde</option><option>bdc</option><option>hjgv</option></datalist></form><p>今天是<time title="2-14">情人节</time>，本应该是一个欢乐的节日，只是与你无关而已。</p></section><section><ul></ul></section></article><!--网页辅助信息部分，如右侧广告或者相关博客介绍或个人信息介绍等。属于网页辅助信息--><aside>我是一个风骚的广告</aside></main><!--页脚，包含网站版权等信息--><footer><p>联系客服 开放平台 法律声明 廉正举报 Taobao.com版权所有 2003-现在 增值电信业务经营许可证：浙B2-20070195 浙公网安备 33010002000075号</p><br/><p>阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 飞猪 | 阿里云计算 | AliOS | 阿里通信 | 高德 | UC</p><br/><p>友盟 | 虾米 | 阿里星球 | 钉钉 | 支付宝 | 达摩院</p></footer>
</body>
</html>

表格扩展

  • 添加单线：border-collapse:collspse
  • 隐藏空单元格：empty-cells:hide
  • 斜线分类：border/rotate
  • 列分组：colgroup/col
<!--设置表格单线显示/空单元格隐藏-->
<table border-collapse="collspse" empty-cells="hide"><colgroup><!--前两列红色，后两列黄色--><col backgroud="red"><col backgroud="yellow"></colgroup><tr><th></th><th></th><th></th><th></th></tr><tr><td></td><td></td><td></td><td></td></tr>
</table>

表单扩展

  • 美化表单控件：

    1. label + :checked
    2. position + opacity
  • 新的input类型：
    1. email：电子邮件地址输入框
    2. url：网址输入框
    3. number：数值输入框
    4. range：滑动条
    5. date / month / week：日期控件
    6. search：搜索框
    7. color：颜色控件
    8. tel：电话号码输入框（在移动端会默认调起数字键盘）
    9. time：时间控件
  • 表单属性：
    1. autocoplete：自动完成，默认值on，可以off关闭，就是输入框的自动提示之前输入的值。
    2. autofocus：获取焦点
    3. required：不能为空
    4. pattern：正则验证
    5. method：数据传输方式
    6. enctype：数据传输类型
    7. name / value：数据的键值对
  • 扩展标签
    1. fieldset：表单内元素分组
    2. legend：为fieldset元素定义标题
    3. optgroup：定义选项组，通过label属性定义分组名

BFC规范

  • Formatting context
    格式化上下文，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系相互作用
  • Block Formatting Contexts
    块级格式化上下文（BFC），它属于上述中的其中一种规范，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
  • 触发BFC
    1. 浮动元素：float除none外的值
    2. 绝对定位元素：position（absolute|、flex）
    3. display为inline-block、table-cells、flex
    4. overflow除了visible以为的值（hidden、auto、scroll）

CSS进阶

浏览器

  • 浏览器前缀
    浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准，为此，当有一些css样式语法还在波动的时候，他们提出了针对浏览器的前缀。
  • 内核、前缀
浏览器 内核 前缀
IE Trident -ms-
Firefox Gecko -moz-
Opera Presto -o-
Chrome Webkit -webkit
Safarl Webktit -webkit
Opera、Chrome Blink

Transition过渡

  • transition-property：规定设置过渡效果的CSS属性名称（width/color/all【所有属性】）
  • transition-duration：规定完成过渡效果需要多少秒或毫秒
  • transition-delay：定义过渡效果何时开始，即延迟时间，正数延迟，负数提前
  • transition-timing-function：规定速度效果的速度曲线
    1. linear:匀速
    2. ease（默认值）：逐渐变慢
    3. ease-in：加速
    4. ease-out：减速
    5. ease-in-out：先加速后减速
    6. cubic-bezier：数值可从网站复制（http://cubic-bezier.com）
  • transition：复合样式
<style>div {width:100px;height:100px;background:red;transition-property:all;transition-duration:1s;transition-delay:2s;transition-timing-function:cubic-bezier(.49,-0.75,.88,1.74);}div:hover {width:200px;height:200px;backgroud:blue;}</style>
<body><div></div>
</body>

transform变形

  • translate：位移（综合写法）

    translateX:x轴位移
    translateY：y轴位移
    translateZ：z轴位移（3d）

  • scale：缩放（值是一个比例，正常大小就是1，会以当前元素中心进行缩放）

    scaleX：x轴缩放
    scaleY：y轴缩放
    scaleZ：z轴缩放（3d）

  • rotate：旋转（旋转的值，单位是角度deg，弧度rad）

    rotateX（x轴旋转，3d）
    rotateY（y轴旋转，3d）
    rotateZ（z轴旋转，和rotate是等级关系，正值是顺时针旋转，负值逆时针）

  • skew：斜切

    skewX：单位也是角度，正值向左倾斜，负值向右倾斜
    skewY
    没有z轴

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="key,key"><meta name="description" content="desc"><meta name="author" content="master"><title>Title</title><link rel="shortcut icon" href="favicon.ico"/><link rel="stylesheet" type="text/css" href="xxx.css"/><style type="text/css">* {padding: 0;margin: 0;}#box1 {margin: 30px auto;width: 300px;height: 300px;background-color: white;border: 1px red solid;}#box2 {width: 100px;height: 100px;background-color: red;transition: all 3s 2s;}#box1:hover #box2 {transform: translate(100px,100px) scale(2,.5) rotate(45deg) skew(25deg,25deg);}</style><!--复合写法，从后往前执行-->
</head>
<body>
<nav><div id="box1"><div id="box2"></div></div>
</nav>
</body>
</html>
  • 注意事项：

    1. 变形操作不会影响其他元素
    2. 变形操作只能添加给块元素，但是不能添加给内联元素
    3. 复合写法，可以同时添加多个变形操作。
    4. 复合写法中是从后往前执行的，translate移动会受到rotate、scale、skew的影响，一般将translate放在第一个，也就是最后一个执行，不会有影响
  • transform-origin：基准点
    1. 值有x，y，z（3d）
    2. 默认是元素的中心，也就是center，center或者是50,50
    3. 设置左上角可以写0,0或者left，top
    4. 所有的变性都是以基准点为准心操作，如果设置的基准点超过元素本身，则依然变心且会移动到基准点去。
    5. 基准点是设置在将要操作的元素上的。
#box2 {width: 100px;height: 100px;background-color: red;transition: all 3s 2s;transform-origin: left top;}#box1:hover #box2 {transform: translate(100px,100px) scale(2,.5) rotate(45deg) skew(25deg,25deg);}

animation动画

  • animation-name：设置动画的名字（自定义）
  • animation-duration：动画的持续时间
  • animation-delay：动画的延迟时间
  • animation-iteration-count：动画的重复次数，默认是1，infinite无限次
  • animation-timing-function：动画的运动形式
  • 注意
    1. 运动结束后，默认情况下会停留在其实位置
    2. @keyframes:from->0%，to->100%;可以在1-100之间设置每一帧的动画。也是跟transform最大的区别之处
  • animation-fill-mode:规定动画播放之前或之后，其动画效果是否可见。

    none（默认值）：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
    backwards：在延迟情况下，让0%在延迟前生效
    forwards：在运动结束之后，停到结束的位置
    both：backwards和forwards同时生效。

  • animation-direction：属性定义是否应该轮流反向播放动画

    alternate：一次正向（0% ~ 100%），一次反向（100% ~ 0%）
    reverse：永远都是反向，从100% ~ 0%
    normal（默认值）：永远都是正向，从0% ~ 100%

  • animate.css

    一款强大的预设css3动画库
    官网地址：https://daneden.github.io/animate.css/
    基本使用（添加class）

    animated:基类（基础的样式，每个动画效果都需要添加）
    name:动画样式
    infinite：动画无限次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="key,key"><meta name="description" content="desc"><meta name="author" content="master"><title>Title</title><link rel="shortcut icon" href="favicon.ico"/><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/><style type="text/css">div {width: 100px;height: 100px;background-color: red;}</style>
</head>
<body>
<img class="animate__animated animate__bounce animate__infinite" src="../../img/1.jpg">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="key,key"><meta name="description" content="desc"><meta name="author" content="master"><title>Title</title><link rel="shortcut icon" href="favicon.ico"/><link rel="stylesheet" type="text/css" href="xxx.css"/><style type="text/css">* {padding: 0;margin: 0;}#box1,#box2{margin-top: 20px;top: 10px;width: 100px;height: 100px;position: relative;left: 50%;}.box2:nth-child(1) {}.box2:nth-child(2) {right: 0px}.box2:nth-child(3) {right: 0px;bottom: 0px}.box2:nth-child(4) {bottom: 0px}#box2 {transform: rotate(45deg);top: -110px;}.box1,.box2{width: 10px;height: 10px;background-color: #02aaf1;border: #02aaf1 5px solid;border-radius: 50px;position: absolute;}.box1:nth-child(1) {}.box1:nth-child(2) {right: 0px}.box1:nth-child(3) {right: 0px;bottom: 0px}.box1:nth-child(4) {bottom: 0px}.box2,.box1 {animation: move 1.5s infinite linear;}@keyframes move {20%{transform: scale(.7) }40%{transform: scale(.4)}60%{transform: scale(0)}80%{transform: scale(.5)}100%{transform: scale(1)}}.box1:nth-child(1) {animation-delay: 0s;}.box2:nth-child(1) {animation-delay: .2s;}.box1:nth-child(2) {animation-delay: .4s;}.box2:nth-child(2) {animation-delay: .6s;}.box1:nth-child(3) {animation-delay: .8s;}.box2:nth-child(3) {animation-delay: 1s;}.box1:nth-child(4) {animation-delay: 1.2s;}.box2:nth-child(4) {animation-delay: 1.4s;}</style>
</head>
<body>
<div id="box1"><div class="box1"></div><div class="box1"></div><div class="box1"></div><div class="box1"></div>
</div>
<div id="box2"><div class="box2"></div><div class="box2"></div><div class="box2"></div><div class="box2"></div>
</div>
</body>
</html>
  • 3d操作

    1. transform3D相关属性

      rotateX()：正值向上翻转
      rotateY()：正值向右翻转
      translateZ()：正值向前，负值向后
      scaleZ()：立体元素的厚度

    2. 3d相关属性

      perspective：离屏幕多元的距离去观察，值越大幅度越小，一般设置父元素
      perspective-origin:景深-基点位置，观察元素的角度
      transform-origin：X Y Z（z轴只能写数值，不能写单词）
      transform-style：3D空间，一般设置自身元素

      flat(默认值2d)
      preserve-3d(3d，产生一个三维空间)
      backface-visibility：背面隐藏
      hidden：隐藏背面
      visible(默认值)

    3. 3d写法

      scale3d()：三个值x y z
      translate3d()：三个值 x y z
      rotate3d()：四个值0|1(x轴是否添加旋转) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) number deg(旋转的角度)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="key,key"><meta name="description" content="desc"><meta name="author" content="master"><title>Title</title><link rel="shortcut icon" href="favicon.ico"/><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/><style type="text/css">* {margin: 0;padding: 0;}#box1 {width: 300px;height: 300px;border: black 1px solid;margin: 30px auto;perspective: 300px;}#box2 {width: 300px;height: 300px;margin: 50px;background-color: red;box-shadow: 10px 10px 5px #888888;animation: 2s move linear infinite;}@keyframes move {0%{transform: rotateX(0deg) rotateY(-45deg);background-color: green}20%{transform: rotateX(-70deg) rotateY(-45deg);background-color:blue}40%{transform: rotateX(-130deg) rotateY(-45deg);background-color: yellow}60%{transform: rotateX(-190deg) rotateY(-45deg);background-color: fuchsia}80%{transform: rotateX(-250deg) rotateY(-45deg);background-color: darkblue}100%{transform: rotateX(-360deg) rotateY(-45deg);background-color: greenyellow}}</style>
</head>
<body>
<div id="box1"><div id="box2"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="key,key"><meta name="description" content="desc"><meta name="author" content="master"><meta http-equiv="refresh" content="5"><title>Title</title><link rel="shortcut icon" href="favicon.ico"/><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/><style type="text/css">* {margin: 0;padding: 0;}#u1 {list-style: none;width: 100px;height: 100px;margin: 200px;position: relative;transform-style: preserve-3d;animation: 4s move linear infinite;transform-origin: center center -150px;}#u2 {list-style: none;width: 100px;height: 100px;margin: 200px;position: absolute;top: 150px;transform-style: preserve-3d;transform: translateZ(-300px);animation: 4s mveoa linear infinite;transform-origin: center center -50px;}#box1 {width: 900px;height: 900px;border: black 1px solid;margin: 50px auto;perspective: 1000px;perspective-origin: right top;}li {width: 300px;height: 300px;position: absolute;text-align: center;line-height: 100px;font-size: 50px;color: white;opacity: 0.2;background-repeat: no-repeat;background-size: 100px 100px;/*backface-visibility: hidden;*/}#u1 li:nth-child(1) {background-image: url("../../img/wallhaven-666475.jpg");background-repeat: no-repeat;background-size: 300px 300px;}#u1 li:nth-child(2) {background-image: url("../../img/wallhaven-593633.png");background-repeat: no-repeat;background-size: 300px 300px;left: 300px;transform-origin: left;transform: rotateY(90deg)}#u1 li:nth-child(3) {background-image: url("../../img/wallhaven-669703.jpg");background-repeat: no-repeat;background-size: 300px 300px;right: 100px;transform-origin: right;transform: rotateY(-90deg)}#u1 li:nth-child(4) {background-image: url("../../img/wallhaven-682689.png");background-repeat: no-repeat;background-size: 300px 300px;bottom: 100px;transform-origin: bottom;transform: rotateX(90deg)}#u1 li:nth-child(5) {background-image: url("../../img/wallhaven-689039.png");background-repeat: no-repeat;background-size: 300px 300px;top: 300px;transform-origin: top;transform: rotateX(-90deg)}#u1 li:nth-child(6) {background-image: url("../../img/wallhaven-714544.png");background-repeat: no-repeat;background-size: 300px 300px;transform: translateZ(-300px) rotateY(180deg);}#u1 li:nth-child(7) {background-image: url("http://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302");background-repeat: no-repeat;background-size: 100px 100px;width: 100px;height: 100px;top: 100px;left: 100px;transform: translateZ(-90px);border-radius: 50px;opacity: 0.8;}#u1 li:nth-child(8) {background-color: red;width: 100px;height: 100px;background-image: url("http://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302");top: 100px;left: 100px;transform-origin: right;transform:  translateZ(-200px) translateX(10px) rotateY(90deg);border-radius: 50px;opacity: 0.8;}#u1 li:nth-child(9) {background-color: red;width: 100px;height: 100px;background-image: url("http://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302");top: 100px;left: 100px;transform-origin: left;transform: translateZ(-200px) translateX(-10px) rotateY(-90deg);border-radius: 50px;opacity: 0.8;}#u1 li:nth-child(10) {background-color: red;width: 100px;height: 100px;background-image: url("http://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302");top: 100px;left: 100px;transform-origin: top;transform: translateZ(-200px) translateY(-10px)  rotateX(90deg);border-radius: 50px;opacity: 0.8;}#u1 li:nth-child(11) {background-color: red;width: 100px;height: 100px;background-image: url("http://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302");top: 100px;left: 100px;transform-origin: bottom;transform: translateZ(-200px) translateY(10px) rotateX(-90deg);border-radius: 50px;opacity: 0.8;}#u1 li:nth-child(12) {background-color: red;width: 100px;height: 100px;background-image: url("http://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302");top: 100px;left: 100px;transform: translateZ(-210px) rotateY(180deg);border-radius: 50px;opacity: 0.8;}@keyframes move {to {transform: rotate3d(1,1,0,-360deg)}}</style>
</head>
<body>
<div id="box1"><ul id="u1"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="key,key"><meta name="description" content="desc"><meta name="author" content="master"><title>旋转木马</title><link rel="shortcut icon" href="favicon.ico"/><link rel="stylesheet" type="text/css" href="xxx.css"/><style type="text/css">* {padding: 0;margin: 0;}img {display: block}#box {width: 1500px;height: 700px;margin: 100px auto;border: black 1px solid;perspective: 2500px;/*perspective-origin:top;*/}ul {list-style: none;width: 500px;height: 400px;position: relative;margin: 100px auto;transform-style: preserve-3d;animation: move 60s linear infinite;}li {width: 500px;height: 400px;position: absolute;top: 0;left: 0;opacity: 0.5;}li:nth-child(1){transform: rotateY(0) translateZ(550px)}li:nth-child(2){transform: rotateY(60deg) translateZ(550px)}li:nth-child(3){transform: rotateY(120deg) translateZ(550px)}li:nth-child(4){transform: rotateY(180deg) translateZ(550px)}li:nth-child(5){transform: rotateY(240deg) translateZ(550px)}li:nth-child(6){transform: rotateY(300deg) translateZ(550px)}@keyframes move {to {transform: rotateY(-360deg)}}</style>
</head>
<body>
<div id="box"><ul><li><img src="../../img/2.jpg" alt="美女图片" title="清纯"></li><li><img src="../../img/3.jpg" alt="美女图片" title="清纯"></li><li><img src="../../img/4.jpg" alt="美女图片" title="清纯"></li><li><img src="../../img/5.jpg" alt="美女图片" title="清纯"></li><li><img src="../../img/6.jpg" alt="美女图片" title="清纯"></li><li><img src="../../img/7.jpg" alt="美女图片" title="清纯"></li></ul>
</div>
</body>
</html>

CSS3背景图片扩展

  • background-size：背景图的尺寸大小

    cover:覆盖
    contain:包含
    nubpx nubpx:宽nubpx，高px

  • background-origin：背景图的填充位置

    padding-box:(默认，填充至padding以内区域)
    border-box:边框以内区域
    content-box:内容区域

  • background-clip：背景图的裁切方式

    padding-box:padding区域裁切
    border-box:border区域裁切
    content-box:内容区域裁切

  • 注：在复合样式中，第一个是填充位置，第二个是裁切方式。

渐变

  1. 线性渐变–> linear-gradient是值，需要添加到background-image属性上
  2. 径向渐变–>radial-gradient;从中心点像四周渐变
<style>/*to 单词：向哪边渐变，默认是从上到下，left指从右向左不写to，直接写角度，如45deg，0度是左下角，45指左下角，从右上向左下渐变red，yellow是渐变颜色，可以有多个number%，指从百分之多少开始渐变，如写50%，则前面一半是纯红色*/background-image: linear-gradient(to left,red 30%,yellow 75%);</style>

矢量图标文字

  • font-face是CSS3中的一个模块，它主要是把自己定义的web字体嵌入到你的网页中。
  • 好处
    1. 可以非常方便的改变大小和颜色
    2. 放大后不会失真
    3. 减少请求次数和提高加载速度
    4. 简化网页布局
    5. 减少设计师和前端工程师的工作量
    6. 可使用计算机么有提供的字体
  • 简单使用
<head><!--引入字体格式，font-family自定义，下面要使用的地方引入-->@font-face {font-family:mui-global-iconfont;src:url(https://at.alicdn.com/t/font_1401963178_8135476.eot);src:url(https://at.alicdn.com/t/font_1401963178_8135476.eot?#iefix) format('embedded-opentype'),url(https://at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'),url(https://at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'),url(https://at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')}<!--span中使用，按照定义的font-family使用即可，但是span中的符号要对应起来-->span {font-family: mui-global-iconfont;font-size: 14px;color: red;}
</head>
<body><div><span>												


											

Lesson32_HTMLCSS相关推荐
	

    
				


					

最新文章
	

    
						
  1. 封装 localStorage 缓存，兼容网页，微信小程序，uni-app
		
    2. 
						
  2. 系统设计规范化攻克了什么问题
		
    3. 
						
  3. 会计的疑惑--BigDecimal的秘密
		
    4. 
						
  4. unity 4种实现动态障碍方法
		
    5. 
						
  5. 给大家介绍一个日期输入控件javascript实现，我修改了下，符合我的习惯了，^_^！...
		
    6. 
						
  6. oracle 查询表里信息_oracle查询表信息
		
    7. 
						
  7. python123电脑登录不了_python（14）- 简单练习：登录账户失败三次，账户自动锁定...
		
    8. 
						
  8. 如何准备Java初级和高级的技术面试
		
    9. 
						
  9. Android 开机logo支持的格式
		
    10. 
						
  10. mx350显卡天梯图_2020年显卡天梯图（2020.04月更新）
		
    11. 
						
  11. python ipad 微信_用Python玩微信（非常详细）
		
    12. 
						
  12. java输出罗马数字_java工具类——罗马数字和阿拉伯数字相互转换
		
    13. 
						
  13. java学习第114天，p699-706（05/12），完成QQ群发
		
    14. 
						
  14. 不努力做事，隔壁老王 可想而知您将来必然是艰难的
		
    15. 
						
  15. 环信开发的坑（环信客户互动云）
		
    16. 
						
  16. android平板电脑怎么才能连接电脑,平板电脑怎么连接电脑 最有效方法【图解】...
		
    17. 
						
  17. linux切换网口,linux多网口绑定
		
    18. 
						
  18. andorid开发关键技术
		
    19. 
						
  19. Resin 配置与使用
		
    20. 
						
  20. Map体系结构特点概述
		
    21. 
		

	


热门文章
	

    
									
  1. 模板 31 ： 并查集（围棋棋子连通）
			
    2. 
						
  2. 《P2P技术详解》系列文章目录
			
    3. 
						
  3. php返回302,php使用curl请求返回302（30x）
			
    4. 
						
  4. 虚拟磁带库备份方案或成企业存储首选
			
    5. 
						
  5. 网易云音乐在港交所上市：市值达到425.9亿港元，不知何日能扭亏
			
    6. 
						
  6. 根据输入的年份、产品类型和随机数产生固定资产编号 即：固定资产编号=年份+0+产品类型+3位随机数   程序运行流程：请输入年份：                ……                请
			
    7. 
						
  7. UCOSIII总结（3）——在C28x中任务切换
			
    8. 
						
  8. 【ALGO】基础算法(1)
			
    9. 
						
  9. linux如何使用cd命令进入目录,cd命令 – 切换目录
			
    10. 
						
  10. CTFHub-PHPINFO
			
    11.