html基础、css基础(前端基础知识入门)

html以及css知识点总结

html基础、css基础(前端基础知识入门)_第1张图片

前言:大家好啊,我是小编达闻西。我相信在茫茫的文海之中相遇,这是一份莫大的缘分。在武侠小说中,遇见有缘人都会传你绝世神功,从而你就可以称霸武林,迎娶白富美,走上人生巅峰。而今天你遇到了我,而我就只是一个写代码的,我没有什么绝世神功,要找绝世神功建议你去崖底去找找。所以,我就把我之前在公司实习的时候,学到的html和css基础给你做了一个总结,我的话可能不够官方,都是我自己的大白话、再结合自己的一部分代码。有缘人、希望我的文章能给你的前端之路献上绵薄之力。陌生人、加油。

html总结xmind图

css总结xmind图

html基础、css基础(前端基础知识入门)_第2张图片

文章目录

  • html以及css知识点总结
    • html总结xmind图
    • css总结xmind图
  • html
    • 一、html的相关概念
      • html是什么?
      • html5是什么?
      • w3c是什么?
      • xhtml是什么?
      • html4.01是什么?
    • 二、html的理论基础
      • 2.1 一个基本的html的写法:
      • 2.2 html的路径
      • 2.3 html的文本标记内容
      • 2.4 html的特殊符号
      • 2.5 命名规范
    • 三、元素的分类
      • 3.1 常规分类
      • 3.2 非常规元素
      • 3.3 元素嵌套规则
      • 3.4元素类型的转化
        • 语法:
        • 伪类选择器
        • 注意:
    • 四、html常用标签
      • 4.1 最常用的
      • 4.2 超链接
      • 4.2 锚点链接
      • 4.3 布局标签
    • 五、html5新增标签
      • 5.1 h5新增的结构化的标签
      • 5.2 新增其他标签
      • 5.3新增音影类标签
        • 音频标签
        • 视频标签
        • 多媒体标签
      • 5.4 表单新增的属性和标签
          • 5.4.1表单新增的属性
          • 5.4.2表单新增的标签
    • 六、列表标签
      • 6.1列表的注意事项
      • 6.2无序列表ul
      • 6.3有序列表ol
      • 6.4定义列表
    • 七、表单标签
      • 7.1 表单介绍
      • 7.2 一个表单的基本写法
      • 7.3 在表单中:get和post的区别是什么?
      • 7.4 表单域
      • 7.5 表单按钮
      • 7.6表单字段集
        • 表单字段集
        • lable标签:改善用户的鼠标体验
        • 下拉列表
      • 7.7 表单身上的bug
      • 7.8 表单新增的属性和标签
        • 7.8.1表单新增的属性
    • 八、表格
        • 8.1 表格合并的步骤思想
        • 8.2 表格的具体写法
        • 8.3 表格的属性
        • 8.4 表格的标签
  • css
    • 一、css的基本概念
    • 二、css的三种引入方式
      • 2.1内联式
      • 2.2内部式
      • 2.3 外链式
    • 三、css选择器
      • 3.1基础选择器
      • 注意:id名是唯一的,类名是可以有多个的
      • 3.2 伪类选择器
        • 伪类选择器
      • 3.3 属性选择器
      • 3.4 结构伪类选择器
      • 3.5 UI状态伪类选择器
      • 3.6 目标伪类选择器
      • 3.7 选择器的优先级
            • 计算权重之和,比较大小、越大越优先、一致就后者覆盖前者 (越精确越优先)
      • 3.8 继承
    • 四、浮动
      • 4.1 浮动基础
      • 4.2 清除浮动
        • 清除浮动的三种方式
    • 五、盒子模型
      • 5.1 设置边框
        • 边框线类型
        • 边框线方向
        • 边框示例代码
      • 5.2 内边距
      • 5.3 外边距
      • 5.4 弹性盒子
        • 5.4.1 主轴方向
        • 5.4.2 侧轴方向
        • 5.4.3 多轴
        • 5.4.4 弹性盒子项目身上的属性
      • 5.5 盒子模型的BUG
      • 5.6 标准盒子模型和怪异盒子模型
    • 六、文本相关属性
      • 6.1 文本基础属性
      • 字体大小
      • 颜色的表示方式
      • 字体类型
      • 文字粗细
      • 文字倾斜
      • 文本修饰线
      • 文本水平对齐--水平方向对齐
      • 文本缩进
      • 行高 --一行文本所占据的高度
      • 其他属性
      • 6.2 单行文本溢出
      • 6.3 css3新增的属性
        • 文字的阴影
        • 盒子阴影
        • 圆角边框:以值为半径画圆
        • 背景图大小
    • 七、 背景
      • 7.1背景基础
      • 7.2 背景和图片的选择
      • 7.3 精灵图、雪碧图、sprites
      • 7.4 背景渐变
        • 线性渐变
        • 径向渐变
        • 重复渐变
      • 7.5 透明度和背景图大小
        • 透明度
        • 背景图大小
    • 八、定位
      • 8.1 定位基础
        • 语法:
      • 8.2**定位方式**
        • 小结:
      • 8.3 z轴上的堆叠层次
      • 8.4 盒子完全居中的两种方式
    • 九、自适应
      • 9.1 宽度自适应
      • 9.2 高度自适应
        • 1.不设置高度
        • 2.使用百分比设置高度
        • 3.使用最大最小高
    • 十、移动端
      • 10.1 移动端视口设置
      • 10.2 移动端适配
    • 十一、BFC
          • ==触发、创建BFC的情况:==
    • 十二、兼容性
        • 1、什么是兼容性
    • ==css3提出解决兼容性问题的方式:====添加私有前缀==
      • 2、精灵图、雪碧图、sprites:多张小盒组合
      • 3、常見的的兼容性問題
      • 4、行内块元素水平方向上、元素与元素之间的间隔问题
      • 5、表单元素垂直方向上没有对齐
      • 6、margin的粘连问题
      • 7、margin的塌陷问题
      • 8、鼠标形状
    • 十三、过渡和动画
      • 13.1 过渡:需要碰触到之后触发
      • 13.2 动画
        • 定义动画:自己就可以动的画面
        • 绑定动画、执行动画
    • 十四、扩展知识
      • 14.1 多列布局
      • 14.2 转化、旋转、放缩
        • 1、转换
        • 2、旋转
        • 3、放缩
      • 14.3 三角形
      • 14.4 粘性定位

html

一、html的相关概念

  1. html是什么?

    ​ 超文本标记语言

  2. html5是什么?

    html的最新版本+代指前端的相关技术

  3. w3c是什么?

    万维网联盟:中立非盈利的组织

  4. xhtml是什么?

    ​ 可扩展的html

  5. html4.01是什么?

    ​ 最经典的版本

二、html的理论基础

2.1 一个基本的html的写法:

  • <开始标签 属性=“属性值” 属性=“属性值”>被标记的内容

  • 属性:是对标签进行细节描述的

  • 注意事项

    1. 所有的符号都应该是英文输入状态下的符号

    2. 属性值可以是单引号或者双引号都可以

  • 基础代码示例

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>title>
    	head>
    	<body>
    		内容文字
    	<body>
    html>
    

2.2 html的路径

绝对路径 从盘符或者协议出发得到的路径
相对路径 从当前文件出发得到的路径
同级 直呼其名(默认./自动添加了的)
上级 …/
下级 /文件名

2.3 html的文本标记内容

加粗 < strong> < /strong> 或者< b>< /b>
倾斜 < em>< /em>或者< i>< /i>
变大 < big>< /big> 注意:浏览器默认·字体大小为16px,最小为12px
变小 < small> < /small> 注意:最小不能小于12px
上标 < sup> < /sup> 实例: 42
下标 < sub> < /sub> 实例: H2O

2.4 html的特殊符号

& gt; 大于
& lt; 小于
& nbsp; 小空格
& emsp; 大空格
& copy; 版权符号:
& reg; 商权符号;

2.5 命名规范

命名规范 注意
1 由数字、字母、下划线组成、不能数字开头
2 尽量使用对应内容英文
3 推荐使用驼峰命名(小驼峰命名)

三、元素的分类

3.1 常规分类

  • 块级元素:默认独占一整行、可以设置宽高、内外边距等
  • 行级元素:有多宽设置多宽,不可以设置宽高、垂直方向的内外边距
  • 行内块元素:有多宽占据多宽、可以设置宽高
  • 可变元素:根据周围元素决定自己的类型。

3.2 非常规元素

  • 置换元素:浏览器根据元素的属性和属性值。决定渲染的什么效果【img、button、input】

  • 非置换元素:不是置换元素的元素

3.3 元素嵌套规则

  • 块级元素里面可以有任何元素、行级元素里面只能放行级元素

  • p元素里面就只能有行级元素

  • a元素可以包裹块级元素

  • ol、ul里面只能有li,li外面只能有ol、ul

3.4元素类型的转化

  • 语法:
    • ​ display:block块级元素|inline-block行内块元素|inline行内元素|none隐藏(不占据原位置)
  • 伪类选择器
    • e:hover 鼠标悬停在e身上、并给e做样式
    • e:hover f 鼠标悬停在e身上 给里面f做样式(显示隐藏 隐藏盒子属性)
  • 注意:
    • visibility:visible可见 |hidden隐藏;是会占据原位置的|display:none隐藏(不占据原位置)

四、html常用标签

4.1 最常用的

标题 :hn < hn>标题内容< /hn> n:1-6
段落: < p> < /p>
水平线 < hr>
换行 < br>
图片标签 “故障时显示文字”

4.2 超链接

  • 概念:从一个位置跳到另一个位置

  •   <a href="https:www.jd.com" target="_blank(新窗口页面) | _self(当前页面)">显示到网页的字体或者图片放置处a>
    

4.2 锚点链接

  • 概念:就是实现在本页面的相关跳转

  • 语法

    <a href="#对应区域的id名">链接的内容a>
    <div id="区域的id名">区域内的内容div>
    
  • 代码示例

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <style>
            div{
                height: 300px;
                width: 100%;
                /* background-color: skyblue; */
                border: 1px red solid;
            }
            .right{
                width: 85px;
                height: 150px;
                background-color: pink;
                position: fixed;
                right: 0;
                top: 50%;
                line-height: 30px;
            }
    
    
        style>
    head>
    <body>
            <div id="content1">内容1div>
            <div id="content2">内容2div>
            <div id="content3">内容3div>
            <div id="content4">内容4div>
    
            <div class="right">
                <a  href="#content1">跳到内容1a>
                <a  href="#content2">跳到内容2a>
                <a  href="#content3">跳到内容3a>
                <a  href="#content4">跳到内容4a>
            div>
    body>
    html>
    

4.3 布局标签

  1. div:默认独占整行,可以设置宽高

    <div>块级标签div>
    
  2. span: 有多宽占据多款,无法设置宽高

    <span>行及标签(无意义标签)span>
    
  3. 使用方法:

    • 当一行内容种有某些内容有特殊样式的时候,使用span,其他的时候用div
  4. 盒子模型(扩展)

    1. 概念:是一种思维模型,主要用于实现布局效果。由尺寸大小+内边距+外边距+边框组成

五、html5新增标签

5.1 h5新增的结构化的标签

  • 优点:

    1. 方便SEO
    2. 代码具有可读性、方便更新和维护
    3. 有意义的标签、见名知意。提倡用正确的标签去描述对应的内容。
  • h5新增的结构化的标签

    页头 < header>< /header>
    导航 nav
    主体 main
    侧栏 aside
    文章 article
    页脚 footer
    独立的区域 section

5.2 新增其他标签

  • 图文列表标签

    <figure>
    	<img>
    	<figure>内容figure>
    	figure>
    
  • 高亮标签:

    <mark>黄色mark>
    
  • 标题组:

    <hgroup>hgroup>
    
  • 对话框:

    <dialog open>内容dialog>[有open属性才能实现显示、没有就隐藏]
    
  • 画布:

    <canvas><canvas>
    

5.3新增音影类标签

  • 音频标签
    <audio controls autoplay loop>
    	<source src="放资源的路径">
    audio>
    
    说明:
    controls是播放控件。不添加就没有进度条
    autoplay:自动不妨、谷歌不支持
    loop:循环
    如果没有source标签、可以将src放在audio身上
    多个source、会按顺序解析类型是否支持、支持就播放、不支持就往下解析。。。不支持给提示
    
  • 视频标签
    <video controls width=""	height=""	poster=''>
    	<source	src='路径'>
    video>
    
  • 多媒体标签
    <embed src='图片、视频、音频的路径'>
    

5.4 表单新增的属性和标签

5.4.1表单新增的属性
  1. form

    <form novalidate autocomplete='on / off'>form>
    
    novalidate 设置表单不做验证(提交一次后自动填充)
    autocomplete 设置是否打开提示
  2. input

        <input type=""  name="" value=""  placeholder="占位符"    autofocus   minlength="最小长度" maxlength="最长长度"   multiple required checked>
    
    
    autofocus 自动获取焦点
    minlength 最小长度
    maxlength 最大长度
    multiple 设置多选(选中文件的时候可以多选type=‘file’)
    required 设置为必选(条款选项不看不通过按钮)
    checked 只有单选和复选有该属性、实现默认选项已选中
    readonly 只能读
5.4.2表单新增的标签
  • 数据列表datalist(热搜相关)
<input list="对应的datalist的id值">
            <datalist id="">
                <option value="">内容option>
            datalist>

注意事项;有值就会显示值和内容、没有就会显示内容、但是不可以value值为空;

  • 输出:< output>< /output>

六、列表标签

6.1列表的注意事项

  • ul/ol里面只能由li标签
  • li外面的标签只能是ul、ol包裹
  • li里面可以有任何元素

6.2无序列表ul

  • 代码演示

    <ul>
    	<li>列表项li>
    	<li>列表项li>
    ul>
    

6.3有序列表ol

  • 代码示例

    <ol>
    	<li>列表项目li>
        <li>列表项目li>
    ol>
    

6.4定义列表

  • 用处:商场导航、图文列表时,很少用到

  • 代码示例

    <dl>
    	<dt>零食分区dt>
    	<dd>旺仔小饼干dd>
    	<dd>旺仔果冻dd>
    	
    	<dt>饮料分区dt>
    	<dd>可乐dd>
    	<dd>雪碧dd>
    
    dl>
    

七、表单标签

7.1 表单介绍

名称 概念
表单标签 负责数据提交的地址和方式
表单域 数据填入的部分
表单按钮 负责时间的标识(提交按钮、重置按钮、普通按钮)
表单 页面中负责数据采集功能的

7.2 一个表单的基本写法

<form action='数据提交的地址' method="数据提交的方式 get|post">
	表单域
    表单按钮
form>

7.3 在表单中:get和post的区别是什么?

get post
小,快,不安全(数据量小、不太安全、传输速度快) 大,慢,相对安全
会追加到地址栏上面 不会追加到地址栏上,会以服务器的方式
2Kb 4MB

7.4 表单域

表单域 写法
文本输入框 < input type=‘text’ name=‘名字’>
密码输入框 < input type=‘password’ name=‘password’>
单选输入框 < input type=‘radio’ name=“名字”>
复选输入框 < input type=“checkbox”>
文件 < input type=‘file’>
隐藏域 < input type=‘hidden’ value=‘要提交的值’>
提交 < input type=‘submit’ value=‘按钮上的值’>
重置 < input type=‘reset’ value=‘按钮上的值’>
普通 < input type=‘button’ value=‘按钮上的值’>

7.5 表单按钮

提交按钮 < button type=‘submit’>提交按钮< /button>
重置按钮 < button type=‘reset’>重置按钮< /button>
普通按钮 < button type=‘button’>普通按钮< /button>

7.6表单字段集

  1. 表单字段集
    <fieldset>
    	<legend>字段集的标题< /legend>
    < /fieldset>
    
  2. lable标签:改善用户的鼠标体验
    <input  id="id名">
    <label for="要关联选项的id名">内容< /label>
    

    语法2

    <label>
    	<input>要关联的内容
    <label>
    
  3. 下拉列表
    <select name="" >
            <option value="">内容option>
            <option value="">内容option>
        select>
        提交的时候、先提交value的值、如果没有设置value属性
        提交option的内容option的属性selected代表默认选中该选项
    
  4. 多行文本域

    • 注意:标签之间不能有任何的空格和换行

      <textarea name="" placeholder="">textarea>
      

7.7 表单身上的bug

  • 行内块元素水平方向上、元素与元素之间的间隔问题
    1. 设置浮动
    2. 给表单元素设置vertical-align、属性值不为默认值即可

7.8 表单新增的属性和标签

7.8.1表单新增的属性
  1. form

    <form novalidate autocomplete='on / off'>form>
    
    novalidate 设置表单不做验证(提交一次后自动填充)
    autocomplete 设置是否打开提示
  2. input

        <input type=""  name="" value=""  placeholder="占位符"    autofocus   minlength="最小长度" maxlength="最长长度"   multiple required checked>
    
    
    autofocus 自动获取焦点
    minlength 最小长度
    maxlength 最大长度
    multiple 设置多选(选中文件的时候可以多选type=‘file’)
    required 设置为必选(条款选项不看不通过按钮)
    checked 只有单选和复选有该属性、实现默认选项已选中
    readonly 只能读

7.8.1表单新增的标签

  • 数据列表datalist(热搜相关)
<input list="对应的datalist的id值">
            <datalist id="">
                <option value="">内容option>
            datalist>

注意事项;有值就会显示值和内容、没有就会显示内容、但是不可以value值为空;

八、表格

8.1 表格合并的步骤思想
第一步 实现基本表格
第二步 判定跨行还是跨列,给单元格添加属性(colspan跨列|rowspan跨行)
第三步 属性值是占据的单元格数量,有几格写几个数字
第四步 给对应行多的单元格删除{从后往前删除}
8.2 表格的具体写法
  1. 表格快速生成语法:

    table>tr*3行>td*3列
    
  2. 表格具体写法:

    <table border='边框粗度' cellspacing='双线边框之间的间隔' cellpadding='边框和内容之间的间隔'>
    	<tr>
    		<td>内容(单元格)td>
            <td colspan="2(跨两列)">td>
            <td rowspan="2(跨两行)">td>
    	tr>
    table>
    
8.3 表格的属性
  • border-spacing:*px; 表格双线边框之间的间隔

  • border-collapse:collapse; 表格细边框 【如果要实现真正意义上的细边框,需要td也设置边框】

  • table-layout:fixed; 单元格按价等分

    • 注意事项:必须要给table设置宽度才生效
  • empt-cells:hide|show;空单元格是否显示

  • caption-side:left | right |top |bottom;设置表格标题的位置

8.4 表格的标签
  • < thead> < /thead>头
  • < body>< /body>身体
  • < tfoot>< /tfoot>脚
    • 注意事项:如果没有设置行分组标签、会自动添加tbody包裹所有的tr
      • table>tbody>tr
    • < caption>< /caption>

css

一、css的基本概念

  1. css层叠样式表:多个样式可以叠加在一个元素身上

  2. 语法

    选择器:
    {
    	属性:属性值;
    	属性:属性值;
    
    }
    

二、css的三种引入方式

概念:

内联式、行内式 在标签里面加一个style标签直接写css样式
内部式 就是在head头部里面加一个style标签,在里面写样式
外链式 新建一个.css文件夹,在文件夹里面去写css代码,然后引入进来

2.1内联式

<p style="color: pink;font-size: 40px;">这是一段话p>

2.2内部式

DOCTYPE html>
<html lang="en">
<head>
    <style>
        p{
            color: pink;
            
            font-size: 40px;
        }
    style>
head>
<body>
    <p>使用内部式,变换样式p>
body>
html>

2.3 外链式

  1. 新建一个以,css为后缀的css文件

  2. 在head标签里面写link标签

    <head>
    		<link rel="stylesheet" href="css文件路径">
    head>
    
  3. 在css文件里面写对应代码

  4. 代码示例

    DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="./4、外链.css">
    head>
    <body>
        <p>这是使用外链式的代码p>
    body>
    html>
    

    css代码:

    p{
        color: pink;
        font-size: 40px;
    }
    

三、css选择器

3.1基础选择器

  • 通配符*选中所有的元素

    *{  }
    
  • 标签选择器 --选中所有对应的标签

    标签名(a|P){  }
    
  • id选择器 --选中指定id名

    <head>
    	#id名{
    	
    	}
    head>
    
    <元素 id=“自己取得名字”>内容<元素>
    
  • 类选择器 --选中所有指定类名的元素

    .类名{}
    <元素 class="自己取得类名">内容元素>   --类名就是属性值
    

    注意:id名是唯一的,类名是可以有多个的

    • 项目中给大盒子使用id名,里面的元素使用类名 (id优先级最高)

3.2 伪类选择器

伪类选择器
  • e:hover 鼠标悬停在e身上、并给e做样式
  • e:hover f 鼠标悬停在e身上 给里面f做样式(显示隐藏 隐藏盒子属性)

3.3 属性选择器

选中有attr属性的元素e e[attr]
选中有attr属性的值为val的元素e e[ attr=‘val’]
选中有attr属性的值为val开头的元素e e[ attr^=‘val’]
选中有attr属性的值为val结尾的元素e e[attr$=‘val’]

3.4 结构伪类选择器

child系列

e:first-child 选中第一个元素e
e:last-child 选中最后一个元素e
e:nth-child 选中第n个元素
e:nth-last-child 选中倒数第n个元素
n是一个乘法因子 可以是数字,单词even偶数、odd奇数、可以是带n的数学表达式
e:only-child 选中唯一元素e【场景判定】
注意事项 child系列强调的是元素在父元素的所有子元素中的排序

tupe系列强调的是元素在所有同类型的兄弟元素之间的排序

#search .container div:nth-child(2){
            width: 64px;
            height: 20px;
            background-color: red;

        }

3.5 UI状态伪类选择器

e:enbled 可用的e元素设置样式
e:disabled 不可用的e元素设置样式
e:cheched 给选中的元素e设置样式

3.6 目标伪类选择器

e:target=>当选中e是目标元素的时候

3.7 选择器的优先级

计算权重之和,比较大小、越大越优先、一致就后者覆盖前者 (越精确越优先)
优先级等级 类别
无穷 !important(属性:属性值 !important;
1000 行内样式{内嵌式}
100 id
10 class
1 标签
0 *
-1 继承
-2 默认

3.8 继承

  • 概念:有上下级关系的元素之间、上级元素的样式被下级元素拥有
    1. 文本的相关样式
    2. 列表相关的样式
  • 注意事项:
    • a标签的的自带样式优先级高于继承{所以当需要更改a标签的样式的时候需要去到a标签里面}
  • 可以使用继承的属性(扩展)
    • word-break:break-all;单词是否打断
    • word-wrap:break-word;单词是否换行

四、浮动

4.1 浮动基础

  • 概念:是一种布局属性,实现一行多列的效果

  • 作用:

    1. 实现多个元素横着排列

    2. 实现元素周围有文字环境[ 图文环绕]

  • 三种写法

    float浮动 三种写法
    float(左边) left
    float (右边) right
    float (不浮动) none

4.2 清除浮动

  • 解决问题:当希望高度自适应的时候,不设置高度,但是子元素设置了浮动就会脱离文档流,造成高度塌陷,这个时候我们就可以使用清除浮动
清除浮动的三种方式
清楚浮动、高度塌陷的解决方案:
方案1:
	给浮动元素最后一个添加一个空的兄弟元素div
	给div设置类名clear
	设置样式 .clear{clear:both |left |right;} 
	注意:加的元素不能有任何其他的样式和内容

方案2:(推荐指数:满天星)
	给浮动元素元素的父亲添加类名clearfix;
	设置样式
	.clearfix:after{
		display:block;  设置是一个块元素
		content:'';		设置内容为空
		clear:both;		清除浮动
		height:0;		解决兼容问题
	}

方案3:
	给浮动元素的父亲设置overflow:hidden;

五、盒子模型

概念:是一种思维模型,主要用于实现布局效果。由尺寸大小+内边距+外边距+边框组成

5.1 设置边框

border:*px(线的宽度) solid(线的形状) red(边框的颜色);

边框线类型
solid 实线
dashed 虚线
dotted 点线
double 双线
边框线方向
设置上边框 border-top 线性 边框的颜色
设置下边框 border-bottom
设置左边框 border-left
设置右边框 border-right

复合和单个同时出现,单个效果在复合后面

边框示例代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .size{
            width: 400px;
            height: 300px;
            border-top: 10px dashed green;
            border-left: 10px double red;
            border-right: 10px solid blue;
            border-bottom: 10px dotted blue;
        }
    style>

head>
<body>
    <div class="size">
    div>
body>
html>

5.2 内边距

概念:盒子边框和内容之间的距离

设置上内边距 padding-top: *px;
设置右内边距 padding-right: *px;
设置下内边距 padding-bottom: *px;
设置左内边距 padding-left: *px;
设置四个边的内边距 padding:*px;属性值可以是1-4个,顺时针出发。有缺时取对边

5.3 外边距

设置上外边距 margin-top: *px;
设置右外边距 margin-right: *px;
设置下外边距 margin-bottom: *px;
设置左外边距 margin-left: *px;
设置四个边的外边距 margin:*px;属性值可以是1-4个,顺时针出发。有缺时取对边

5.4 弹性盒子

概念:是一种新的布局模式、主要应用于手机端、让元素有能力控制子元素的排列

5.4.1 主轴方向
  • flex-direction:参数(决定排列的方向)
    1. ​ row
    2. ​ column
    3. ​ row-reverse
    4. ​ column-reverse
  • 项目在主轴身上的排列样式
    • justify-content:参数;
      1. ​ flex-start
      2. ​ center中间
      3. ​ flex-end终点
      4. ​ space-between间隔之间
      5. ​ space-around周围
      6. ​ space-evenly均分
5.4.2 侧轴方向
  • align-items:参数;
    1. stretch拉伸 注意:默认是stretch拉伸铺满整个容器,但是如果项目设置了高度就以高度为准。
    2. flex-start起点
    3. flex-end终点
    4. center中间
    5. baseline基线
5.4.3 多轴

多根轴线侧轴的排列设置【单根无效】

  • ​ align-content:参数;
  1. flex-start
  2. center中间
  3. flex-end终点
  4. space-between间隔之间
  5. space-around周围
  6. space-evenly均分
5.4.4 弹性盒子项目身上的属性
  1. 项目中的排序【了解】

    order:*;
    默认为0,从小到大的顺序排列
    
  2. 项目是否缩小

    flex-shrink:*;
    默认是1,会缩小,设置为0,不缩小。
    如果是其他值,就用需要缩小的值,除以所有项目的flex-shrink的总和,得到一份的值、然后每个项目缩小指定份数
    
  3. 项目是否放大

    flex-grow:*;
    默认是0,不放大,设置为1,会放大
    
  4. 项目的基准尺寸【了解】

    flex-basis:*px;等价于width
    
  5. 项目的复合属性

    flex:flex-grow flex-shrink flex-basis;
    说明:flex:1;代表的含义是1 1 auto;
    
  6. 项目单独的排列方式

    align-self:stretch拉伸	|flex-start	|center	|flex-end	|baseline基线;
    

5.5 盒子模型的BUG

  1. 粘连问题、父岁子动(可内可外,一定用内)

    • 解决方案1:给父元素设置padding来实现(记得修改padding撑大后的值)

    • 解决方案2:给父元素添加一个上边框。

      border:1px solid transparent(透明色);
      
    • 解决方案3:给父元素添加overflow:hidden;

  2. 塌陷问题:在mrgin垂直方向上,边距大的会吃掉小的

    • 解决方案:在一个元素身上设置足够的间隔
  3. 注意事项:在做项目之前先清除所有元素的内外边距

  4. 盒子水平居中

    margin:0 auto;
    

5.6 标准盒子模型和怪异盒子模型

  • 他们都是盒子模型、只是模式不一样、元素实际占据的宽高的计算方式不一致

  • ​ 标准模式下实际占据的宽度= width + border + padding + margin

  • ​ 怪异模式下实际占据的宽度= width + margin

设置盒子模型的语法:

  • box-sizing:border-box怪异盒子 | content-box 标准模式;
  • 【默认情况标准模式、没有文档声明的就是怪异盒子】

六、文本相关属性

6.1 文本基础属性

  1. 字体大小

    • font-size:*px | *em | *rem;
    • px是像素、绝对尺寸
    • em是相对尺寸、是父元素文字大小的倍数
    • rem是相对尺寸、是根元素html文字大小的倍数
    • pc使用px,移动端使用的em、rem
  2. 颜色的表示方式

    • 四种表示方式 颜色表示
      1 英文单词
      2 #16进制
      3 rgb(R,G,B) ;
      4 rgba(R,G,B,a(0-1));
  3. 字体类型

    •   font-family:'类型一','类型二';
      
  4. 文字粗细

    • 注意不带单位

    • 400|normal :正常

    • 700|bold:加粗

      font-weight:100-900;
      
  5. 文字倾斜

    font-style:normal; 正常
    font-style:italic; 倾斜
    font-style:oblique; 倾斜
  6. 文本修饰线

    text-decoration:none; 无修饰线
    text-decoration:through; 删除线
    text-decoration:underline; 下划线
  7. 文本水平对齐–水平方向对齐

    • 注意:行级元素不能使用该元素

      •   text-align:left|center|right|justify两端对齐	
        
  8. 文本缩进

    text-indent:*px |*em;
    
  9. 行高 --一行文本所占据的高度

    • line-height:*px;
    • 应用:单行文本垂直居中
    • ​ 多行文本调整整行间距
  10. 其他属性

    • font:字体的复合属性
    • letter-spacing:*px;字间距
    • word-spacing:*px;词间距

6.2 单行文本溢出

设置宽度 width:*px;
强制不换行 white-sapce:nowrap;
超出隐藏 overflow:hidden;
溢出的标识是省略号 text-overflow:ellipsis;

white-space:参数;

  • normal正常

  • nowrap不换行

  • pre保留空格以及换行

    overflow:参数;

  • hidden:隐藏

  • auto:自动判定是否需要滚动条

  • visible:可见的; 【内容超出的时候的相关设置】

  • scroll 必须有滚动条

text-overflow:参数;

  • clip:裁剪

  • ellipsis:省略号【文本溢出的标识的设置】

6.3 css3新增的属性

  1. 文字的阴影
    • text-shadow:x的偏移、y的偏移 模糊程度 阴影的颜色
  2. 盒子阴影
    • box-shadow:x的偏移、y的偏移 模糊程度 延生半径 阴影的颜色 inset;
    • inset不要,就只有外阴影、要就是内阴影
  3. 圆角边框:以值为半径画圆
    • border-radius:*px | *%;
    • 正圆:保证宽高一样、50%;否则是椭圆
    • 胶囊状:横着的圆角,高度的一半
  4. 背景图大小
    • background-size:宽度 高度;
  5. 英文大小写转换

    • text-transform:lowercase小写 | uppercase大写 | capitalize首字母大写
  6. word-break:break-all; 单词是否打断(继承相关属性)

    • word-wrap:break-word; 单词是否换行

七、 背景

7.1背景基础

背景的复合属性

background:颜色  url(路径) 重复方式  x的位置  y的位置  ;[不分先后以及个数]

背景相关属性

背景颜色 background-color:颜色;
背景图片 background-image:url(图片地址);
背景图的平铺方式【重复】 background-repeat:np-repeat;【不重复】
背景图的起始位置 background-position:x的位置,y的位置;
背景图固定 background-attachment:fixed;[了解]

7.2 背景和图片的选择

使用图片

  • 经常更换的图片、使用img 【 广告】
  • 数据从数据库来的、使用img【产品图等】
  • 网页的结构使用img 【logo】

使用背景

  • 不经常更换、精灵图。使用背景图实现图片

代码示例:

DOCTYPE html>
<html lang="en">
<head>
    <style>
        .banner{
            width: 590px;
            height: 470px;
            border: 3px solid red;
            margin-left: 60px;
            position: relative;
        }
        .banner div{
            width: 20px;
            height: 60px;
            background-color: skyblue;
        }

        .left{
            position: absolute;
            left:0%;
            top: 50%;
            margin-top: -30px;
        }
        .right{
            position: absolute;
            right:0%;
            top: 50%;
            margin-top:-30px;

        }

    style>

head>
<body>
    <div class="banner">
        <a href="https:www.jd.com"><img width="590" height="470" src="https://img20.360buyimg.com/pop/s1180x940_jfs/t1/219820/23/14530/71295/6231376dE48d3177e/3ffd0f997591be3b.jpg.webp" alt="jd">a>
        <div class="left"><div>
        <div class="right">>div>
    div>
body>
html>

7.3 精灵图、雪碧图、sprites

步骤:

  • 1、实现一个指定大小的盒子

  • 2、将精灵图设置成盒子的背景图

  • 3、设置背景图的起始位置、调整出想要的背景图的位置【background-position】

    • 精灵图的优点 精灵图的缺点
      减少请求、提升性能 步骤繁琐
      减少文件数量、降低命名难度 增删图片麻烦
      减少内存占用

7.4 背景渐变

线性渐变
  1. 普通渐变

    background: linear-gradient(颜色1,颜色2);
    
  2. 设置渐变方向

    background: linear-gradient(to 方向,颜色1,颜色2..);
    
  3. 设置对角渐变

    background: linear-gradient(to 方向1,方向2,颜色1,颜色2);
    
  4. 设置渐变角度

    background: linear-gradient(*deg, 颜色1,颜色2);
    
  5. 设置渐变比例

    background: linear-gradient(颜色1,*%,颜色2,*%。。);
    
径向渐变
  1. 设置普通渐变

    background: radial-gradient(颜色1,颜色2...);
    
  2. 设置渐变比例

    background: radial-gradient(颜色1,*%,颜色2 *%..); 
    
  3. 设置渐变图形

    background: radial-gradient(circle圆或者ellipse椭圆,颜色1,*%,颜色2 *%..);
    
重复渐变

注意事项:必须要有比例才能看到效果

  1. 设置重复线性渐变

    background: raepeating-linear-gradient(颜色1,*%,颜色2,*%。。);
    
  2. 设置重复径向渐变

    background:  -linear-gradient(颜色1,*%,颜色2,*%。。);
    

7.5 透明度和背景图大小

透明度
  • opacity:0-1的数字;
  • filter:alpha(opactiy =0-100的数字);【低版本兼容写法】
  • 0代表完全透明
背景图大小
background-size:宽度	高度;

八、定位

8.1 定位基础

概念:将元素放在指定的位置上:以后特指position

语法:
  • position:定位方式;

  • left:*px;或者 right: *px;

  • top:*px;或者bottom: *px;

  • 注意事项

    • 不同的定位方式区别在于;元素的参照不一样;

8.2定位方式

  1. static静态定位。元素自带的定位方式
  2. fixed固定定位:基于浏览器当前屏幕进行定位
    • position:fixed;
    • left:*px;或者 right: *px;
    • top:*px;或者bottom: *px;
  3. relative相对定位:基于元素自身所在的位置进行定位
    • position:relative;
    • left:*px;或者 right: *px;
    • top:*px;或者bottom: *px;

​ 4.absolute绝对定位:基于最近的被设置非静态定位的上级元素进行定位,如果没有就基于浏览器第一屏

  • position:absolute;
  • left:*px;或者 right: *px;
  • top:*px;或者bottom: *px;
  • 常用场景:子绝父相
小结:
  • 绝对定位和固定定位会脱离文档流
  • 如果块级元素没有设置宽度、设置了绝对或者固定定位之后、元素的宽度由内容决定

8.3 z轴上的堆叠层次

  • z-index:数字
  • 元素默认的值为0.值可正可负
  • 大的覆盖小的
  • 注意:该元素要生效、元素身上必须有设置非静态定位

8.4 盒子完全居中的两种方式

  • 第一种

    • position:fixed;
    • top:50%;
    • left:50%;
    • margin-left:-150px;
    • margin-top:-150px;
  • 第二种

    • position:fixed;
    • top:0;
    • bottom: 0;
    • left: 0;
    • right: 0;
    • margin: auto;
DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            height: 3000px;
            background-color: pink;
        }
        .right{
            border:1px red solid;
            background-color: blue;
            height: 300px;
            width: 300px;
            /* 第一种居中方式 */
            /* position: fixed;
            left: 50%;
            margin-left:-150px;
            top: 50%;
            margin-top:-150px; */

            /* 第二种居中方式 */
            position:fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            }

    style>
head>
<body>
    <div class="right">

    div>
body>
html>

九、自适应

概念:

  • 自适应:能够根据设备类型、大小等自动调整元素的大小、以保证得到一个正常的效果
  • 响应式:利用媒体查询、可以根据设备的类型、设备的大小等自动调整样式得到一个正常的效果
    • 原理:媒体查询。关键字是==@media==

9.1 宽度自适应

  • 不设置宽度

  • 使用百分比

  • 使用最大最小宽度

    max-width:*px;   设置最大宽度
    min-width:*px;   设置最小宽度
    
  • 在项目中的整屏 的盒子设置最小宽度为版心的宽度

9.2 高度自适应

1.不设置高度
  • 注意存在问题:

    1. 子元素如果设置了浮动、元素会脱离文档流,造成高度塌陷【清除浮动】
    清楚浮动、高度塌陷的解决方案:
    方案1:
    	给浮动元素最后一个添加一个空的兄弟元素div
    	给div设置类名clear
    	设置样式 .clear{clear:both |left |right;} 
    	注意:加的元素不能有任何其他的样式和内容
    
    方案2:(推荐指数:满天星)
    	给浮动元素元素的父亲添加类名clearfix;
    	设置样式
    	.clearfix:after{
    		display:block;  设置是一个块元素
    		content:'';		设置内容为空
    		clear:both;		清除浮动
    		height:0;		解决兼容问题
    	}
    
    方案3:
    	给浮动元素的父亲设置overflow:hidden;
    
  • 代码示例

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <style>
            .clearfix{
                width: 100%;
                background-color: pink;
            }
            .clearfix .box1{
                border: 1px red solid;
                width: 100px;
                height: 100px;
                float: left;
            }
            /* .wrap .clear{
                clear: both;
            } */
            .clearfix:after{
                display: block;
                content: '';
                clear: both;
                height: 0;
            }
    
        style>
    head>
    <body>
        <div class="clearfix wrap">
            <div class="box1">div>
            <div class="box1">div>
            <div class="box1">div>
            
    
    
        div>
    body>
    html>
    

    html基础、css基础(前端基础知识入门)_第3张图片

注意事项:在项目中给高度可变的盒子不设置高度了,如果遇到浮动、就记得给他的父元素添加类名clearfix,清楚浮动。

2.使用百分比设置高度
  • 如果要实现一整屏的页面,需要设置

    html,body{
    	height:100%;
    }
    
3.使用最大最小高
min-height:*px;  最小高度
max-height:*px;  最大高度

十、移动端

10.1 移动端视口设置

  • css像素:逻辑像素-写代码使用的单位

  • 物理像素:设备像素-屏幕出厂就决定了的像素

  • dpr = 物理像素/ 逻辑像素

  • 视觉视口:看到的区域

  • 布局视口:整个网页区域

  • 理想视口:视觉视口:布局视口 = 1:1

  • 设置移动端视口

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    • width=device-width宽高等于设备宽度
    • initial-scale=1.0 初始比例是1
    • maximum-scale=1.0 可变的最大比例为1
    • minimum-scale=1.0 可变的最小比例为1
    • user-scalable=no 用户不可改变比例
  • 1px边框问题:

    1. 使用图片背景图
    2. 0.5px+transfrom的缩放

10.2 移动端适配

  1. 使用百分比
  2. 使用rem单位+js实现
    1. 750的视口,约定html的文字大小为100px
    2. 1rem=100px;
    3. 获取视口的宽度,然后动态的改变html的文字大小、以达到对应以rem为单位的元素的大小的改变、从而适配
      1. 将插件的html的值改成对应的大小 【750设计稿html文字大小为100】
      2. 将代码中的px转为rem单位
      3. 引入js文件、达到判定不同视口改变对应文字大小的效果,实现适配
        1. < script>< /script>
  3. 使用vw和vh
    • 视口的宽度=100vw
    • 视口的高度=100vh
    • 可以用来实现整屏页面
    • vw是单位、视口的宽度是100vw

十一、BFC

  • ​ 概念:快格式化上下文、是一个独立的区域、区域与区域之间不会互相影响。

  • 触发、创建BFC的情况:
    • 1、浮动
    • 2、定位-position的值威fixed或者absolute
    • 3、overflow的值不为默认值visible的时候都会 【auto|hidden|scroll】
    • 4、dispaly的值为flex |inline-flex |inlin-block;
  • BFC的应用:

    • 解决margin的bug

    • 清除浮动

    • 实现两列的自适应布局

      左边固定宽度,左边左浮动。右边不设置宽度,设置overflow:hidden
      

十二、兼容性

1、什么是兼容性
  • 概念:浏览器厂商不一样、解析不一样、导致页面效果不一样

  • hack:针对特定的浏览器、写特定的代码、以达到页面效果统一

  • ==css3提出解决兼容性问题的方式:==添加私有前缀

    • 前缀 代表浏览器 浏览器内核

    • 前缀 代表浏览器 浏览器内核
      -o- 欧朋 presto
      -ms- IE trident
      -moz- 火狐 gecko
      -webkit- 谷歌safari webkit
      欧朋和谷歌联合开发 blink

2、精灵图、雪碧图、sprites:多张小盒组合

  • 步骤:

    • 1、实现一个指定大小的盒子

    • 2、将精灵图设置成盒子的背景图

    • 3、设置背景图的起始位置、调整出想要的背景图的位置【background-position】

      • 精灵图的优点 精灵图的缺点
        减少请求、提升性能 步骤繁琐
        减少文件数量、降低命名难度 增删图片麻烦
        减少内存占用

3、常見的的兼容性問題

  • 图片3px问题:解决的两种方式

    1. vertical-align:top | middle | bottom
    2. 给图片设置成块元素
  • 图片外面有链接、在低版本浏览器会有边框

    • 给图片设置border:none;
  • 图片是png24格式的时候、子低版本会显示成不透明的样子

    • 保存png8
    • 保存成gif
gif 动图
svg 矢量图、放大缩小不失帧
jpg 可以提高、降低图片压缩级别、会自动填充透明色为白色
png 带透明格式

切图步骤

  • 移动工具状态下、按住alt键盘、鼠标单击右键、可以快速定位到图层
  • 将不相干的图片隐藏掉、直到底色是马赛克为止
  • 带圆角、弧形、不规则的等、保存png其他优先jpeg

4、行内块元素水平方向上、元素与元素之间的间隔问题

  • 设置浮动(float)
  • 将元素与元素代码之间的空白行取消掉{<代码><代码>}

5、表单元素垂直方向上没有对齐

  • 设置浮动
  • 给表单元素设置vertical-align、属性值不为默认值即可

6、margin的粘连问题

  • 使用padding
  • 给父元素添加over-flow:hidden
  • 给父元素添加上边框、transparent透明色

7、margin的塌陷问题

  • 在一个元素上设置足够的间隔

8、鼠标形状

  • cursor:hand;低版本

  • cursor:pointer;高版本

  • cursor:url(.ico);

十三、过渡和动画

13.1 过渡:需要碰触到之后触发

transition:过度的属性1 执行的时间 延迟时间 变化曲线,过度的属性2 执行的时间 延迟的时间 变化的曲线;

变化的曲线-匀速liner

一个盒子100*100 鼠标悬停的时候,先用1秒修改高度为300,然后再修改高度为300,再加背景

.box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: width 1s,height 1s 1s,background 2s 2s ;
        }
        .box1:hover{
            width: 300px;
            height: 300px;
            background-color: blue;
            /* transition: width 1s,height 1s 1s; */
        }

13.2 动画

  1. 定义动画:自己就可以动的画面
    @keyframs 动画名{
    0%{
    	开始状态的形式
    }
    *%{
    	中间状态的形式
    }
    100%{
    	最终状态的形式
    }
    }
    
  2. 绑定动画、执行动画
    • animation:动画名1 动画执行时间 延迟时间 执行次数 变化次数 执行的方向,动画名2 动画执行时间 延迟时间 执行次数 变化次数 执行的方向

    • 执行次数infinite是无穷次

    • 执行方向 alternate交叉

    • 动画的执行状态

      animation-play-state:paused暂停 | running选择;
      

十四、扩展知识

14.1 多列布局

列数 column-count:*;
列宽 column-width:*;
列间宽 column-gap:*px;
列边框 column-rule:*px 线性 颜色;

14.2 转化、旋转、放缩

1、转换
  1. 位移:位置变化
    • transform:translate(x距离,y距离);
    • transform:translateX(x);
    • transform:translateY(y);
    • transform:translateZ(z);
    • transform:translate3d(x,y,z);
2、旋转
  • transform:rotate(*deg) 平面旋转

  • transform:rotateX(*deg)x平面旋转

  • transform:rotateY(*deg)y平面旋转

  • transform:rotateZ(*deg)z平面旋转

  • transform:rotate3d(x,y,z,*deg) 前面3个值为0/1代表不旋转或旋转

3、放缩
  • transform:scale(宽度的倍数,高度的倍数)
  • transform:scaleX(x)
  • transform:scaleY(y)
  • transform:scaleZ(z)
  • transform:scale3d(x,y,z)

14.3 三角形

  1. 实现一个盒子宽高为0
  2. 给四边设置为透明色 border:transparent
  3. 给想要方向的边框设置成对应的颜色

14.4 粘性定位

position:sticky:当元素移动到父元素的指定位置时 会固定下来

top:*px; | bottom :*px;

你可能感兴趣的:(css,html,css,前端,html)