正文

千峰html5+css3学习笔记(代码片段)

李英俊小朋友  李英俊小朋友  2022-12-02  248

关键词：

千峰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的logo——web前端系列学习笔记(代码片段)
文章目录页面展示技术要点代码实现html代码CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo，页面效果如下所示。技术要点HTML5新特性HTML5基本语法CSS3新特性在HTML中引入样式代码实现html代码<!DOCTYPEhtml&g... 查看详情

html5+css3学习笔记

打开一个网页，看源代码，会发现，html大部分的内容还是文本，何况html本身就是叫超文本标记语言，所以大部分的标签，针对的都是文本。这些标签非常的多，而且有些，我是感觉语义上界限比较模糊，咱们一个一个的来看。... 查看详情

html5+css3学习笔记

前段时间一直在学Python，不仅仅只是学Python的基础语法，还有科学计算，主要是Numpy和Matplotlib，爬虫，暂时还没有用到Scrapy那么高端的库，还停留在Python自带的urrllib模块，还有BeautifulSoup解析器，我发现，Web的问题，始终绕不过... 查看详情

浏览器工作原理学习笔记(代码片段)

浏览器工作原理学习笔记浏览器的工作原理：新式网络浏览器幕后揭秘HowBrowsersWork:Behindthescenesofmodernwebbrowsershttps://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/https://www.html5rocks.com/en/tutorials/intern 查看详情

html5学习笔记

标准被广泛支持RIA的利器。已经代替了flash和flex功能非常强大html+css3+javascriptapi支持audio播放。video播放支持动画，2D游戏等等；支持语音识别，图像识别查看详情

css3秘笈第三版涵盖html5学习笔记13~17章

第13章，构建基于浮动的布局使用的是float（浮动）属性注：float:none值将取消所有浮动，通常只用来取消元素中已经应用的浮动。切记：不需要给正文的div设计宽度，即使设计成固定宽度也不用用浮动进行布局LayoutGala网站（http:/... 查看详情

html5_css3学习笔记(代码片段)

HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的IE支持HTML5新标签HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成。新特性：语义特性：HTML5增加了许多新标签，... 查看详情

读书笔记之《html5与css3基础教程》

...的任务，最好先理清任务的逻辑结构，然后有目的地逐步学习。为实现我们的需求和设计，必须要学习前端、后端、服务器等一系列暂时陌生的知识，在此，我首先疑问的是，我们理想的功能如何以网页内容和交互的形式体现。... 查看详情

移动web开发笔记(代码片段)

移动web开发笔记移动web开发笔记基础概念像素单位CSSpixels与devicepixelsCSSpixelsPPIDPIdevicePiexelRatio文字大小控制viewport响应式布局原则实现方式布局方案百分比布局流体布局弹性flexible布局flex-box布局图片处理普通设置响应式图片媒体... 查看详情

css小笔记(代码片段)

记录个人css3学习…CSS小笔记Tips颜色渐变背景颜色渐变字体颜色渐变背景图片Tips学习CSSLayout添加PageIcon<header> <linkrel="shortcuticon"href="images/favicon.ico"type="image/x-icon"></head 查看详情

csscss3学习笔记——选择器(代码片段)

...说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili✨学习笔记——选择器我的第一个CSSh1c 查看详情

numpy学习笔记

...的代码也都敲了一遍，还是发现了一些问题，因为这样的学习方式，总感觉太被动，紧紧跟着示例代码，缺少了整体观，即使你现在问我Numpy可以处理什么问题，我还是回答不出。所以，有必要回头重来一遍，再一次审视代码背... 查看详情

html入门学习笔记(代码片段)

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏... 查看详情

html入门学习笔记(代码片段)

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏... 查看详情

linux网络编程——千峰物联网笔记(代码片段)

B站视频：千峰物联网学科linux网络编程网址：https://www.bilibili.com/video/BV1RJ411B761?p=1目录第一章：计算机网络概述1.1计算机网络发展简史1.1.1最早的广域网1.1.2电路交换网特点1.1.3计算机网络的要求1.1.4分组交换1.1.5交... 查看详情

前端学习html+css进阶(代码片段)

目录引言初识HTML5基本概念具体内涵拓展内容HTML5新增标签语义化多媒体新增的input标签新增的表单标签CSS3新增CSS3属性选择器结构伪类选择器伪元素选择器2D转换之translate2D转换之rotate2D转换之scale2D转换综合写法（顺序）... 查看详情

html5新增属性(代码片段)

...缓存课程导学课程特点：少逻辑多语义简单易学高效学习方法固定标签、属性、语法需要记忆勤加练习，善于总结，归纳易错点本章目标了解什么是HTML5及其应用场景掌握HTML 查看详情

html5新增属性(代码片段)

...缓存课程导学课程特点：少逻辑多语义简单易学高效学习方法固定标签、属性、语法需要记忆勤加练习，善于总结，归纳易错点本章目标了解什么是HTML5及其应用场景掌握HTML 查看详情

正文

千峰html5+css3学习笔记(代码片段)

千峰HTML5+CSS3学习笔记

文章目录

写在前面

1. 前言

2. HTML

3. CSS

3.1 选择器

3.2 CSS属性

4. 盒子模型

4.1 溢出属性

4.2 元素显示类型

4.3 定位

4.4 精灵图

4.5 宽高自适应

4.6 窗口自适应

5. 表单进阶

6. HTML5新特性

html5+css3学习笔记

html5+css3学习笔记

浏览器工作原理学习笔记(代码片段)

html5学习笔记

css3秘笈第三版涵盖html5学习笔记13~17章

html5_css3学习笔记(代码片段)

读书笔记之《html5与css3基础教程》

移动web开发笔记(代码片段)

css小笔记(代码片段)

csscss3学习笔记——选择器(代码片段)

numpy学习笔记

html入门学习笔记(代码片段)

html入门学习笔记(代码片段)

linux网络编程——千峰物联网笔记(代码片段)

前端学习html+css进阶(代码片段)

html5新增属性(代码片段)

html5新增属性(代码片段)