千峰HTML5+CSS3学习笔记

Posted 2022-10-16 李英俊小朋友

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了千峰HTML5+CSS3学习笔记相关的知识，希望对你有一定的参考价值。

千峰html5+CSS3学习笔记

文章目录

千峰HTML5+CSS3学习笔记

写在前面

学习链接：千锋HTML5前端开发教程1000集：[1集: 183集]，共183集
感想 | 摘抄
1. 查询标签在各大浏览器中的兼容问题：caniuse
2. 费曼学习技巧：以教促学
3. 行内元素转块元素的方法：
  1. display: block;
  2. position: absolute;
  3. float: left;
4. 浮动和绝对定位的区别：
  - float：半脱离，文字环绕
  - absolute：全脱离，不会出现文字环绕效果
5. 伪类和伪元素的区别（:和::的区别）
6. Animate.css动画演示
学习时遇到的问题

1. 前言

居中：<center>居中文字</center>
WEB（网页）的组成部分
1. HTML结构：W3C制定了机构HTML的语法、标准
2. CSS表现：W3C制定了表现CSS的语法、标准
3. JS行为：W3C、ECMA制定了行为标准（W3C DOM，ECMAScript）

2. HTML

标记
1. 常规标记，双标记
2. 空标记，单标记
<!DOCTYPE html>：特殊切固定的文档声明标签
hr：水平线
特殊符号
div标签
- 没有具体含义，用来划分页面的区域，独占一行。
- 输入div*3 可以直接键入三行div
span标签
- 没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
li标签
- li里面可以随意放标签，但是ol里面只能放置li
- 数字是自动生成的
- params：
  - type：1，a，A，i，I
  - start：取值只能是一个数字
ul标签
- 快捷创建：ul>liaaa*3
- ul里面只能放li，li里面可以放其他标签
- 默认是黑色的实心圆
- params：
  - type：disc、circle、square、none（用得最多）
dl标签
- 自定义列表
- 主要用于图文混排
- dl > dt+dd
图片标签
- 同级目录
  - 相对路径
    - code.gif
    - ./code.gif
  - 绝对路径
- 返回上一级后查找路径
  - ../code.gif
- 图片标签的属性
- 宽高设置
  - 只设置一个属性：等比例缩放
  - 设置两个属性：按设置缩放
超链接标签
- 能够实现不同页面的跳转
- target="_self"：默认值，当前窗口打开
- target="_blank"：新窗口打开
表格：
- 表格创建快捷键：table>tr*3>td*3
- 表格属性：
- 行tr的属性，table row
- 单元格td属性：table data
  - 如果一个单元格的设置宽度，影响的是这一整列的宽度
  - 如果一个单元格的设置宽度，影响的是这一整行的高度
- 表格合并
  - 合并列：Colspan = 所要合并的单元格的列数必须给td
  - 合并行：Rowspan = 所要合并的单元格的行数必须给td
表单标签
- form中method的post和get的区别

3. CSS

cascading style sheets，层叠样式表
作用：修饰网页信息的显式样式

CSS语法：

<style>
        h1 
            color: red;
        
        h2 
            color: blue;
        
</style>

内部样式表、外部样式表、行内样式表
- 外部样式的创建
- 外部css导入
```
<style>
        @import url(index.css);
</style>
```
- 行内
- 就近原则：!important >行内>内部>外部

3.1 选择器

为什么要用选择器：

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
元素选择器/类型选择器（element选择器），如：divwidth:100px; height: 100px; background:red;
class选择器/类选择器
- 优先级也是就近原则，这里就近只的是style定义的顺序，而不是class的继承顺序
id选择器
- 不能给一个标签用上多个id
* 通配符/通配符选择器

群组选择器：提出公共代码，节约代码量

div, p, h1, box1 
            background-color: yellow;

后代选择器
```
div p 
            background-color: aqua;
        
```
- 底层查找逻辑：从右到左，先找子类，再找父类

伪类选择器

需要遵循顺序编写

<style>
        a:link 
            color: red;
        

        a:visited 
            color: aqua;
        

        a:hover 
            color: blue;
        

        a:active 
            color: coral;
        
</style>

link-visited-hover-active

选择器的权重
- 当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生了冲选择器的权重
- 包含选择器：子类选择器（嵌套的）的权重要大于普通元素的选择器

3.2 CSS属性

文本属性
- 100：细体，lighter
- 400：正常，normal
- 700：加粗，bold
- 900：更粗，bolder
文本间距
- 词间距，word-spacing：针对英文的词之间的间距
- 字符间距，letter-spacing：字符与字符之间，文字与文字之间
首行缩进，text-indent
- 只对首行生效
- 2em，指当前字体大小的2个字符
文字装饰：
- 下划线、上划线、删除线
- 如果想要多条线
```
text-decoration: line-through underline overline;
```
文本转换：text-transform，大写、小写，首字母大写

font：

.p_font 
            font: italic bold 20px/1em 微软雅黑;

列表属性
- 设置图片的话，需要对每一个li定义类，每个类设置不同的图片
- list-style：合并写法
背景属性
- 背景图片小于盒子大小：默认平铺效果
- 背景图片大于盒子大小：裁剪显示左上角的部分
- background-repeat：
  - repeat：默认平铺
  - repeat-x：x轴平铺
  - repeat-y：y轴平铺
  - no-repeat：不平铺
- background-size：
  - 100px 100px
  - 100% 100%
  - cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，有一部分会被裁掉
  - contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，有一部分背景无法铺满
- background-attachment：
  - 默认是scroll
  - 设置fixed可以制作视差效果
- 背景属性的符合写法：
  1. 用空格隔开
  2. 顺序可以换
  3. 可以只取一个值，放在后面能覆盖前面的值
  4. background-size属性只能单独用
  5. 顺序可以随便换
  6. 位置的顺序要贴着写，不能随便换
```
div 
            width: 600px;
            height: 600px;
            /* background-color: yellow;
            background-image: url(pics/马卡龙.png);
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed; */

            background: yellow url(pics/马卡龙.png) no-repeat center fixed;
        
```
浮动属性
- 作用：
  - 让竖着的东西横着来
  - 定义网页中的其他文本如何绕着该元素显示
- 浮动是见缝插针的，能往下排就往下排，其次才会换行
清浮动
1. 写固定高度
2. 清浮动的clear用法
3. 当前浮动元素后面补一个盒子，不设置宽高，clear:both
4. overflow: hidden
  - 通过隐藏的bfc让浮动的元素计算高度

4. 盒子模型

什么是盒子模型
padding：内边距
1. 一个值，四个方向都一样
2. 两个值，上下，左右
3. 三个值，上左右下
4. 四个值，上右下做
5. 单独设置某一个方向的padding：padding-left，类似的，top、bottom、left、right
6. padding不支持负数
border：边框
1. 样式：
  - solid
  - double
  - dashed
  - dotted
2. 背景色也能蔓延到边框，即boder压在bg-color上的
3. boder属性拆分：
  - border-width
  - border-style
  - border-color
margin：外边距
1. 支持多个方向一起写：margin: 10px 20px 30px 40px;
2. 也支持属性拆分：
  - margin-top
  - margin-left
  - …
3. 很多标签自带margin值，所以有时候会需要将margin设置为0
4. 外边距支持设置负值，盒子往反方向移动
5. 最快屏幕居中方案：margin: 0 auto;，上下为0，左右自动；上下auto是没有意义的
6. 外边距的特性：
  - 兄弟关系，两个盒子垂直外边距与水平外边距的问题
    - 垂直方向上，外边距取最大值。
    - 水平方向上，外边距合并处理。
  - 父子关系，给子加外边距，但作用于父身上了，怎么解决
    - 方案1：子margin-top ==> 父的padding-top，注意高度计算
    - 方案2：给父盒子设置边框，transparent：透明
    - 方案3：加浮动，子和父都可以
    - 方案4：overflow:hidden，BFC

4.1 溢出属性

溢出属性（容器的）
空余空间
- nowrap：不换行
- pre：显示空格、回车，不换行
- pre-wrap：显示空格，回车，换行
- pre-line：显示回车，不显示空格，换行
省略号显示

4.2 元素显示类型

元素显示类型
块元素：
- display: block
- display: list-item
- 独占一行显示
- p标签放文本可以，不能放块级元素
行内：
- display: inline
- 不能设置长宽
- padding和margin只有左右有用，上下没用
行内块:
- 既能设置宽高，又能跟其他标签一起分享空间
- display: inline-block
- img、input
元素类型互相转换：设置display属性
- display: none，隐藏属性
- 空格：子代选择器，.item li：子代中有li的都选中
- > ：亲代选择器，.item>li：只选择自己的亲儿子
安利首页设计
1. 版心
2. 通栏
3. 留白

4.3 定位

定位 position
1. 粘性定位：导航栏粘住顶部
2. 固定定位：广告永远显示在右下角
3. 相对定位：自己的位置进行偏移，但是不改变原位置的占位
4. 绝对定位：常用于基于父类的定位，一般box为相对定位，子类pic为绝对定位。
5. 绝对定位属性的设置会使得行内元素改为块元素。
层级
1. z-index：层级
2. z-index越大，层级越大，越靠顶层显示（负值也可）
3. 需要配合定位使用
4. 绝对定位在层级上的表示
  1. 父子关系：设置子盒子的z-index为负值，可以让父盒子顶层显示
  2. 兄弟关系：如果都是绝对定位，根据z-index的值显示谁在顶层
锚点
- 锚点作用：页面不同区域的跳转，使用a链接
  - <a href="#锚点名字"></a>
  - <div id="锚点名字"></div>

4.4 精灵图

CSS Sprites
图片整合的优势：
1. 通过图片整合来减少对服务器的请求次数，从而提高面的加载速度。
2. 通过整合图片来减少图片的体积。

4.5 宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
width不设置或者auto就是自适应

使用场景：
- 导航栏
- 通栏布局
高度自适应：
- 元素高度的默认值：height: auto;
- 设置最小高度：min-height
浮动元素的高度自适应
- 父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
- 方法1：给父元素添加声明 overflow:hidden（缺点：会隐藏溢出的元素）
- 方法2：在浮动元素下方添加空块元素，并给该元素添加声明：clear:both; height:0;overflow:hidden; （缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）
- 方法3：万能清除浮动法
  - 选择符：aftercontent:" "; clear:both; display:block; height:0; visibility:hidden;/overflow:hidden;
伪元素
隐藏的区别：
- display:none：不占位的隐藏
- visibility:hidden：占位的隐藏

4.6 窗口自适应

盒子根据窗口的大小进行改变

设置方法：html, bodyheight:100%;
calc() 函数的使用
- cal() 函数：用于动态计算长度值；
- 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
- 任何长度值都可以使用 calc() 函数进行计算；
- calc() 函数支持加减乘除的运算；
- calc() 函数使用标准的数学运算优先级规则；

多栏复杂布局

<!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>Document</title>
    <style>
        * 
            margin: 0;
            padding: 0;
        

        html,
        body 
            height: 100%;
        

        .top,
        .bottom 
            width: 100%;
            height: 50px;
            background: #ccc;
        

        .middle 
            height: calc(100% - 100px);
            background: yellow;
        

        .left,
        .right 
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        

        .center 
            width: calc(100% - 200px);
            height: 100%;
            background: blue;
            float: left;
        
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>

    </div>
    <div class="bottom"></div>
</body>

</html>

5. 表单进阶

单选框
```
<input type="radio" name="sex" id="woman" checked>
<label for="woman">女</label>
```
- name：表示单选框所在的组，该组下所有的radio都要设置同样的name
- input.id + label.for：使文字部分可以点击选中
复选框
- 基本跟单选框一样，就是 type="checkbox"
上传文件
- <input type="file">

图片按钮-代替提交按钮

<form action="">
    <input type="image" src="imgs/search_pic_green.png">
</form>

隐藏按钮
- <input type="hidden" value="带给后端的个人信息">
禁用和只读属性
- <input type="radio" disabled>
- <input type="radio" readonly>
下拉菜单
- 格式
```
<select size="3" multiple>
    <option value="ln">辽宁</option>
    <option selected>山东</option>
    <option>山西</option>
    <option>湖北</option>
</select>
```
- select支持的属性
  - size：下拉菜单显示的个数，多的话就增加滚动条
  - multiple：支持多项选择
- option支持的属性
  - value：提供给后端需要用的value值
  - selected：默认选中
文本域
- <textarea name="" id="" cols="30" rows="10">提前设置好的value</textarea>
- 一般通过css来控制宽和高
- placeholder：预置文本，提示文字
- textarea默认的value值是写在双标签内部的，注意空格问题，所以写的时候，不要进行换行啊啥的
- 通过在css中设置resize：重新设置大小
  - vertical：垂直方向
  - horizontal：水平方向
  - both：两个方向
  - none：两个方向都不能resize

字段集

fieldset

<fieldset>
    <legend>皮卡丘</legend>
    <input type="radio" name="a">男
    <br>
    <input type="radio" name="a">女
</fieldset>

6. HTML5新特性

HTML5发展史
HTML5的浏览器兼容
HTML5语法

HTML5新增语义化标签

新增的语义化标签没有实际性的作用，跟div没啥区别，就说做一个名字的参考，使用的时候还是要结合css使用

比如制作一个盒子模型的界面

<!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>Document</title>
    <style>
        * 
            margin: 0;
            padding: 0;
        

        html,
        body 
            height: 100%;
        

        header,
        footer 
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: orange;
        

        section 
            height: calc(100% - 100px);
        

        nav,
        aside 
            width: 100px;
            height: 100%;
            background: #ccc;
            float: left;
        

        main 
            float: left;
            width: calc(100% - 200px);
            height: 100%;
            background: white;
        

        aside p 
             font-style: 12px;
             color: white;
        

        main .article1 
            height: 60%;
        

        main .article2 
            height: 40%;
        
    </style>
</head>

<body>
    <header>Header</header>
    <section>
        <nav>
            <figure>nav</figure>
            <ul>
                <li>111</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
            </ul>
        </nav>
        <main>
            <article class="article1">
                <header>article-header</header>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate nihil tempore quibusdam sequi ab, nemo repellat ipsa nobis sit eius est. Voluptas quam nisi repellat est fugiat explicabo rerum quod.</p>
                <footer>article-footer</footer>
            </article>
            <article class="article2">
                <header>article-header</header>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate nihil tempore quibusdam sequi ab, nemo repellat ipsa nobis sit eius est. Voluptas quam nisi repellat est fugiat explicabo rerum quod.</p>
                <footer>article-footer</footer>
            </article>
        </main>
        <aside class="aside_p">
            <figure>aside</figure>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus repellat perspiciatis ea nobis
                dolore cupiditate tempore quidem eius, modi eveniet fuga enim beatae quibusdam earum fugit in, iure aut.
                Quaerat?</p>
        </aside>
    </section>
    <footer>Footer</footer>
</body>

</html>

效果：

以上是关于千峰HTML5+CSS3学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

千峰HTML5+CSS3学习笔记

附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记

《HTML5与CSS3基础教程》学习笔记 ——补充

html5+css3学习笔记|绘制一个安卓机器人

CSS3秘笈第三版涵盖HTML5学习笔记13~17章