一、基本概念
- 超文本：超越了文本的限制，比普通的文本更强大，除了文字信息还可以定义图片、音频、视频等；有很多的超链接。
- 标记语言（Markup Language）：标记语言是一种将文本以及其元数据（数据的数据）编码的方法，用于显示和存储数据。HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。
- Word/Latex也是标记语言，对文本的格式调整就是一种标记的过程！
- 简而言之，就是由标签构成的语言 ，将来由浏览器解析HTML标签！
- HTML5：HTML的第五个版本，支持所有的互联网设备，包括计算机、手机和平板。HTML5引入了新的元素和API，使得开发更加丰富的网页和应用成为可能。
HTML5文档的基本结构
HTML5文档的基本结构包括以下几个部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。<html>：根元素，包含了整个HTML文档。<head>：包含了文档的元（meta）数据，如字符集声明、网页标题、引用样式表和脚本等。<body>：包含了网页的可见内容，如文本、图片、视频、表单等。
基本语法和常用标签
HTML元素通常由开始标签、内容和结束标签组成。例如，<p>This is a paragraph.</p>。
常用标签包括：
<h1>到<h6>：标题标签，<h1>是最高级标题。<p>：段落标签。<a>：链接标签。<img>：图像标签。<ul>、<ol>、<li>：无序和有序列表标签。<div>和<span>：用于布局和样式的容器标签。
重难点：HTML5中的表单标签
HTML5对表单进行了显著的增强，引入了新的输入类型和元素，使得表单更加用户友好和功能丰富。
- 输入类型（Input Types）：HTML5引入了多种新的
<input>类型，如email、date、range、color等，可以提供更合适的键盘和验证。 - 新元素：包括
<datalist>（提供输入建议）、<output>（表示不同类型的输出）、<progress>（进度条）和<meter>（度量衡）。 - 表单属性：HTML5增加了许多新的表单属性，如
placeholder（占位符）、required（必填项）、autocomplete（自动完成）、autofocus（自动聚焦）等，进一步增强了表单的用户体验。
二、完整代码及笔记
<!-- 超文本：超越了文本的限制，比普通的文本更强大，除了文字信息还可以定义图片、音频、视频等 -->
<!-- 标记语言：有标签构成的语言 ，将来由浏览器解析HTML标签-->
<!DOCTYPE html>
<!-- 文档开始标记 -->
<html lang="en">
<!-- 头部开始标记，文件头 -->
<head>
<!-- base 涉及到URL -->
<!-- 标记网页数据meta，元数据：一共两类元数据描述，一个是关于HTTP头的描述，另一类是关于页面内容的描述，用于SEO -->
<meta charset="UTF-8">
<!-- http-equiv 关于HTTP头的描述-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- name 关于页面内容的描述，主要便于SEO搜索 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--content:使用当前设备的宽度作为视图的宽度、禁止初始缩放（意思就是当页面的宽度改变时，页面里的内容的宽度不能随之缩放，该多大还是多大）-->
<title>我的网站</title>
<!-- CSS内部方式 -->
<style>
h4{
color:rgb(145, 229, 19);
font-size: 30px;
}
h3{
font-size: medium;
}
table{
border-collapse: collapse;
}
</style>
<!--元素选择器，所有的标签都可以是选择器，优先级较高-->
<!--span用的很多！-->
<style>
*{
color: navy;
font-weight: 380;
}
</style>
<!--全局选择器，*是通配符可以与任何元素相匹配，但优先级最低，一般用作样式的初始化-->
<style>
.Cred{
color: red;
}
</style>
<!--类选择器，可以应用于任意的标签，只要你想。具有强烈的灵活性
class的名字(如Cred)由字母、数字（少用）、下划线组成-->
<style>
#mytitle{
font-size: 50px;
}
</style>
<!--id选择器，针对某一特定的标签使用，只能使用一次，也不能以数字开头
这个id和主键有点像，名字唯一标识选择器，使用时不能有重复的名字，所以只能使用一次-->
<style>
h3,h5{
color: brown;
}
</style>
<!--合并选择器：提取共同的样式，减少重复的代码，用个“，”就行-->
<!-- rel属性值表示被引文件和当前文件的关系，也可以有左边显示的图标icon -->
<link rel="stylesheet" href="../css/CSS文件.css">
<!--CSS样式看起来像JSON,h4等括号前面的被称为选择器-->
<!--css文件路径尤其注意！实在不行就复制路径-->
</head>
<body>
<p>我的第一个快捷网站：<br />按一个英文符号!+enter快速生成HTML格式</p>
<p><h1 align="center">快捷键</h1></p>
<p>shift+alt+F 代码格式化</p>
<p>shift+alt+向上向下键 快速复制粘贴</p>
<p>alt+向上向下键快速上下移动</p>
<p>ctrl+F 快速搜索</p>
<p>ctrl+H 快速替换 </p></p>
<!-- <hr>下划线：不能设置文本内容，只能设置线的宽度长度和位置 -->
<hr>
<hr color="green" width="300px" size="20px" align="left">
<hr color="green" width="300px" size="20px">
<hr color="green" width="300px" size="20px" align="right">
<!--主要掌握三种图片格式：JPG/PNG/GIF
JPG可以很好处理大面积色调的图像，如相片、网页一般的图片
PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
GIF格式图片图像效果很差，但是可以制作动画。-->
<p>图片的绝对路径、相对路径、网络路径</p>
<!-- <img src="C:\大一暑假\前端\html\图片\1.webp" alt="帅气的我" width="500px" title="帅气的我"> -->
<!--alt是给 搜索引擎 提供的，如果加载不出照片就显示破损图像和alt的内容-->
<!--绝对路径与盘符有关，上面的就是绝对路径，而相对路径是在左边资源管理器中的父兄子关系，网络路径是在网上的完整地址-->
<h4>链接</h4>
<p>超链接根据链接对象的不同分为外部链接和内部链接</p>
<!--外部链接就是连接着外部的网站，内部链接是指在同一个界面下某些部分的链接，点完链接之后滚动条就会滚动到相应的版块-->
<br><a href="https://cn.bing.com/" target="_blank">这里是必应超链接，这里超链接部分可以是任何内容</a>
<!--a是anchor锚点/超链接，href属性描述链接的完整地址，还有一个属性是target表示目标窗口的打开方式,_self默认在当前窗口打开链接,_blank在全新的空白窗口打开链接-->
<br>文本标签可以嵌套在p标签中
<em>着重文字</em>
<i>斜体</i>
<strong>加粗、加重语气？这个好像没什么用</strong>
<b>加粗</b>
<span>没有什么效果，用于CSS添加多样的效果</span>
<sub>下标</sub>
<sup>上标</sup>
<cite>引用，斜体效果</cite>
<p>
<ol><li>just do your best</li></ol>
列表标签之有序列表
<ol type="I">//ol是容器标签
<!-- type指定标签的类型，I表示罗马类型 -->
<li>item li是list item列表项
<ol><li>id</li><li>order</li></ol>
</li>
<!-- 列表标签可以嵌套 -->
<li>customer</li>
</ol>
</p>
<p>
列表标签之无序列表（使用频率更高，需求很多）
常用于网站最上面一行的导航
<ul type="disc">
<li>实心圆id</li><li>order</li>
</ul>
<ul type="circle">
<li>空心圆id</li><li>order</li>
</ul>
<ul type="square">
<li>小方格id</li><li>order</li>
</ul>
<ul type="none">
<li>id</li><li>order</li>
</ul>
快捷键：ul>li*2
</p>
标签之表格
table是承载表格的容器，tr是行，td是列（单元格）行内嵌套多个列。
<!-- 从结构上看，表格可以分为<thead> <tbody> <tfoot>，表头、主体和表尾：加快表格的显示速度-->
<!-- 这个其实就是让表格的构建更加结构化，到时候方便阅读，也方便渲染。但是没有这种格式的话，也可以用原本的构建方法构建不规则表格 -->
<table border="1" width="400" height="300">
<caption>表格标题</caption>
<!-- <tr>
<th>单元格表头</th><th>单元格表头</th>
</tr> -->
<tr>
<td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
</table>
<table border="1" width="400" height="300">
<caption>表格标题</caption>
<thead>
<tr>
<th>单元格</th><th>单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾单元格</td><td>表尾单元格</td>
</tr>
</tfoot>
</table>
快速生成表格：table>tr*3>td*3{内容}
<!-- table>tr*5>td*6{快捷表格} -->
<p>合并单元格，水平colspan/垂直rowspan
用法就是在靠前单元格td写col/rowspan
再把之后需要合并的单元格删除
水平合并：保留左边删除右边
垂直合并：保留上边删除右边（通常都是先生成表格）
</p>
<table border="1">
<tr>
<td>快捷</td>
<td colspan="3" align="center">快捷</td>
<td>快捷</td>
<td>快捷</td>
</tr>
<tr>
<td rowspan="2" align="center">快捷</td>
<td>快捷</td>
<td>快捷</td>
<td>快捷</td>
<td>快捷</td>
<td>快捷</td>
</tr>
<tr>
<td>快捷</td>
<td>快捷</td>
<td>快捷</td>
<td>快捷</td>
<td>快捷</td>
</tr>
</table>
<h4>Form表单：</h4>
<p>给用户创建一个输入信息的方式，从而能采集用户信息，
比如登录注册、搜索框，有用户输入的地方一定会有表单，让网站具有交互性</p>
表单由容器和控件组成，像输入框、按钮等叫做控件
<form action=""></form>
<p>action表示服务器地址，在用户输入时，数据会从前端输送到后台的服务器。服务器端是哪个程序来相应</p>
<p>name表单名称，现在都用id</p>
<span>method：get/post表示提交表单数据的方式</span>
<p><b>完整的表单的三个基本组成部分：表单标签、表单域、表单按钮</b>（域就是输入框）</p>
表单域：<input>
按钮：<ol>
<li><input type="submit"></li>
<li><button>提交</button></li>
</ol>
<form name="你喜欢现在的生活吗？">
<textarea rows="2" cols="5"></textarea>
<!--textarea多行（较大）文本框，也称为滚动文本框-->
<input type="submit">
<select>king.out</select>
</form>
<p>回答：喜欢/尝试去喜欢/我可以学</p>
<p>表单元素</p>
<form name="你喜欢现在的生活吗？">
用户名：<input type="text"> <span>单行文本框</span>
密码：<input type="password"><span>密码文本框</span>
<input type="submit" value="登录"><span>按钮</span>
<!-- 往往是若干radio为一组，同一组的radio取同一个名字name，这样单选的时候就可以产生互斥！checked表示默认勾选 -->
<br>性别：<input type="radio" name="gender">男<input type="radio" name="gender">女
<!-- 复选框checkbox的name都不同，其他的和radio一样 -->
</form>
<!--input的type种类：reset重置按钮，image图像形式的提交按钮，radio单选按钮，checkbox复选框，file文件上传-->
<h2>标签：<br></h2>
<p class="Cbold">html标签分为两种，一种是<b>一般标签</b>，一种是<b>自闭合标签</b></p>
<p>一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号，如br和hr。</p>
<h2>元素：<br></h2>
<p class="Cbold">html(html.4.01)元素根据浏览器表现形式分为两类：①块元素；②行内元素(内联元素)</p>
<p>块元素独占一行，可以设置width/height属性，排斥其他元素与其同行，但内部可以涵盖所有元素，如h1~h6、p、hr、form、table、 div</p>
<p>行内元素：行内元素只占自身的大小左右排列，内部可以容纳行内元素但是不能容纳块元素，如strong,em,span。但有些行内元素可以设置宽高，称为行内块级元素button/img/input</p>
<!--HTML5中，元素按照内容模型来区分，但对初学者不友好，所以仍然用行块-->
<p>h5新增标签：利用SEO<br>W3C：万维网联盟 </p>
<p>div容器元素，也是页面中最多的标签，一是使整个页面分成许多部分增加了清晰度，二是便于后续CSS的添加</p>
<div>
<span>h5新标签：头部<header></header>，导航<nav></nav>
章节、页眉、页脚<section></section>，侧边栏<aside></aside>
脚部<footer></footer>，完整的文章内容<article></article></span>
<span>h5新标签具有兼容问题，对于浏览器的要求比较高，需要14年之后的</span>
</div>
<div>
<h1>CSS：网页的变美指南</h1>
<p>CSS(Cascading Style Sheets)层叠样式表/级联样式表，简称样式表。
其文件名后缀为.css
CSS规则由两个主要部分：选择器+声明（样式），选择器通常是需要改变样式的html元素，每条声明都是由一个属性和一个值组成。
</p>
<p>CSS像开头head中说明style只是方式之一（内部方式），还有内联样式、外部样式</p>
<span style="color:rgb(80, 18, 161);">内联/行内样式，缺点是缺乏整体性、规划性，不利于维护，维护成本高</span>
<br><span style="background-color: pink;">内部方式，用于单个文档，所有选择器都会生效，但是多个页面会出现混乱</span>
<!--上面两行用的是内联方式，内联方式一次只用于一句
而内部样式也是只能用于一个文档，应用站点所有文档时还是推荐外部样式-->
<br><span>外部样式就是，新建一个.css文件，里面是对于所有文档的修改，然后在所有文档的head中都声明链接link（尤其是修改内容多了，这个就更好用了，和包含头文件异曲同工）</span>
<!--需要修改样式时只需要修改一个，不用写style直接开始写选择器-->
</div>
<br><span class="Cred">这里用到了类选择器灵活设置格式</span>
<!--class属性可以被所有标签使用，类名不能以数字开头，同一个标签可以使用多个类选择器，都在一个class里，用空格隔开-->
<br><span id="mytitle">这里是id选择器</span>
<br>如果用数字表示权重，那么内联/行内样式为1000，id为100，class为10，元素选择器为1。如果是同种类型，则会出现覆盖
<h2>字体属性</h2>
<div>
<span>包括颜色、大小、加粗、文字样式</span>
<span class="Cbold"><br>颜色：单词名称、十六进制(#+6位十六进制数)、rgb三原色（每个值由0~255组成）、rgba多了一位a表示透明度（0~1）</span>
<span><br>字体大小：font-size:后面跟px像素单位，chrome最小字体为12px</span>
<!--其中工作常用十六进制，不需要知道，由别的岗位提供-->
<span class="Cbold"><br>粗细：font-weight + bold（粗体）/bolder（更粗）/lighter（细体）/100~900之间的值，默认400，粗体700</span>
<span><br>字体样式font-style：常见的由normal默认值，italic斜体字，也就是之前学的<i>斜体格式</i></span>
<span><br>字体font-family后面有很多选项，不过大多时候都在用微软雅黑</span>
</div>
<h2>字体属性示例</h2>
<div>
<span>这是一段普通文本。</span><br>
<span class="Cbold">这是一段加粗文本。</span><br>
<span style="color: red;">这是一段红色文本。</span><br>
<span style="color: #008000;">这是一段绿色文本。</span><br>
<span style="color: rgb(0, 0, 255);">这是一段蓝色文本。</span><br>
<span style="color: rgba(255, 0, 0, 0.5);">这是一段半透明红色文本。</span><br>
<span style="font-size: 24px;">这是一段字体大小为24px的文本。</span><br>
<span style="font-weight: bolder;">这是一段更粗的文本。</span><br>
<span style="font-weight: lighter;">这是一段细体文本。</span><br>
</div>
<h2>背景属性</h2>
<div>
<span>包括背景颜色、背景图片、背景图片显示位置、背景图片填充、背景图片大小</span>
<span class="Cbold"><br>背景颜色：background-color。注意设置背景颜色时，同时要重新设置该环境的宽和高，默认状态下的宽高都为0，如果不重新设置则该环境就无法显示背景颜色</span>
<span class="Cbold"><br>背景图片：background-image:url("图片路径")</span>
<span><br>图像平铺方式：background-repeat + repeat默认值，如果图片比块元素小，那么图片会向水平和竖直方向平铺
/repeat-x只水平平铺，竖直方向超过图片的部分为空白
/repeat-y只竖直平铺 /no-repeat不平铺</span>
<span><br>设置背景图像的大小background-size + 数值/百分比/cover(最常用，锁定图片纵横比，尽可能填充整个块区域，可能会有图片的裁剪)
/contain(锁定后纵横比，在保证图片完整的情况之下尽可能覆盖块区域，可能不会完全覆盖，但图片的内容一定是完整的)</span>
<span><br>设置背景图像的起始位置background-position，其默认值为0%，0%
一般是center center中中位置，所有的位置组合为：左left中center右right 上top中ceter下bottom</span>
</div>
<h2>背景属性示例</h2>
<div style="width: 300px; height: 200px; background-color: #f2f2f2; background-repeat: no-repeat; background-size: cover; background-position: center center;">
这是一个带有背景属性的示例块区域。
</div>
<h3>文本属性</h3>
<div>
<span class="Cbold"><br>text-align指定元素文本的水平对齐方式：center/left/right</span>
<span><br>text-decoration添加文本修饰：underline下划线、overline上划线、line-through删除线</span>
<span><br>text-transform控制文本的大小写：captialize每个单词开头大写、uppercase全部大写、lowercase全部小写</span>
<span><br>text-indent首行文本缩进：+像素值30px？</span>
<!--indent可以为负值，负时表示向左缩进-->
</div>
<h3>文本属性示例</h3>
<div>
<span style="text-align: center;">这是居中对齐的文本。</span><br>
<span style="text-align: left;">这是左对齐的文本。</span><br>
<span style="text-align: right;">这是右对齐的文本。</span><br>
<span style="text-decoration: underline;">这是带有下划线的文本。</span><br>
<span style="text-decoration: overline;">这是带有上划线的文本。</span><br>
<span style="text-decoration: line-through;">这是带有删除线的文本。</span><br>
<span style="text-transform: capitalize;">这是每个单词首字母大写的文本。</span><br>
<span style="text-transform: uppercase;">这是全部大写的文本。</span><br>
<span style="text-transform: lowercase;">这是全部小写的文本。</span><br>
<span style="text-indent: 30px;">这是首行缩进30px的文本。</span><br>
</div>
<h3>表格属性</h3>
<div>
<span><br>border属性，如果table用那么只有外边框，所以最好要同时设置table和td
border:边框宽度+边框线的样式(一般只用实线solid)+颜色</span>
<span class="Cbold"><br>border-collapse:collapse;折叠边框，用于table</span>
<span><br>width宽度/height高度</span>
<span><br>td单元格文本水平对齐：修改td，text-align:right/left/center
竖直对齐：修改td，vertical-align:top/center/bottom</span>
<span><br>td{padding:..px;}表格填充，相当于单元格格边距</span>
<span><br>设置表格背景颜色：td{background-color...}</span>
</div>
<h3>表格属性示例</h3>
<table style="border: 1px solid black; border-collapse: collapse; width: 100%;">
<tr>
<td style="border: 1px solid black; text-align: center; vertical-align: middle; padding: 10px; background-color: #f2f2f2;">单元格1</td>
<td style="border: 1px solid black; text-align: left; vertical-align: top; padding: 10px; background-color: #ffffff;">单元格2</td>
<td style="border: 1px solid black; text-align: right; vertical-align: bottom; padding: 10px; background-color: #f2f2f2;">单元格3</td>
</tr>
<tr>
<td style="border: 1px solid black; text-align: center; vertical-align: middle; padding: 10px; background-color: #ffffff;">单元格4</td>
<td style="border: 1px solid black; text-align: left; vertical-align: top; padding: 10px; background-color: #f2f2f2;">单元格5</td>
<td style="border: 1px solid black; text-align: right; vertical-align: bottom; padding: 10px; background-color: #ffffff;">单元格6</td>
</tr>
</table>
<div>
<h3>关系选择器</h3>
<span><br>后代选择器：选择所有被E包含的F选择器，E F{}，比如ul li{}
经过修改后，所有的后代（不仅仅是子代）都会生效</span>
<span><br>子代选择器：E>F{}选择直接子元素，深层次的元素不生效</span>
<span><br>相邻兄弟选择器：E+F{}选择紧跟E元素后面的兄弟F元素（选一个，向下选，选兄弟关系）</span>
<span><br>通用兄弟选择器：E~F{}选择E之后的所有兄弟元素F</span>
</div>
<!-- 通过使用这些关系选择器，可以更精确地选择需要样式化的元素，使得样式的应用更具灵活性和准确性。 用在<style>中-->
<div>
<h2 class="Cbold">CSS盒子模型(BOX MODEL)</h2>
<span><br>本质就是一个封装HTML元素的模型，用于设计和布局，包括实际内容(content)、内边距(padding)、边框(border)、外边距(margin)</span>
<span><br>实际内容，如果在div中，那么设置div的宽度和高度就是设置实际内容的大小</span>
<span><br>内边距就是在实际内容外边继续扩大填充，给元素四周一些空隙，是实际内容排版更加好看</span>
<!--如果只写一个px值，就是四周填充。也可以写两个值，第一个是上下内边距，第二个是左右。也可以写成padding-left/right/top/bottom分别设置宽度-->
<span><br>边框border和表格的一样，第一个值是宽度px，第二个是solid，第三个是颜色</span>
<span><br>外边距：完全透明，是元素之间的距离</span>
<!--浏览器的外边距默认是8px-->
<!--margin也可以分四个方向设置宽度-->
<span><br></span>
</div>
<div>
<h2 class="Cbold">CSS3弹性盒子模型(Flex Box)</h2>
<span><br>弹性盒子模型是CSS3的一种新的布局，使页面适应不同屏幕的大小</span>
<!--弹性盒子常用于移动端小程序-->
<span><br>弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成</span>
<!--弹性盒子就是针对在一个大容器中对子元素的设置，这点与盒子模型有很大不同，盒子模型就仅仅针对一个元素对单个元素进行设置-->
<!--在父类选择器中加入display:flex就嫩设置弹性盒-->
<span style="color: #555;"><br>看，设置十六进制的颜色时如果六位数都一样那写三位就好啦</span>
<span class="Cbold"><br>弹性盒子默认盒内内容横向摆放</span>
<span><br><b>对父类flex-direction</b>指定弹性子元素的排列方式：row(左对齐从左到右横向)、row-reverse(右对齐从右向左横向)、column(上对齐从上到下)、column-reverse(与column对称)</span>
<!--父类排列就是把内部的子元素进行不断的轴对称变化，关于中间轴对称就是reverse，关于对角线对称就是换名称-->
<span><br><b>对子类justify-content</b>内容在竖直方向的对齐方式(上下移动)</span>
<span><br><b>对子类align-items</b>内容在水平方向的对齐方式(左右移动)</span>
<!--子类排序就是平移！都分为flex-start|flex-end|center三种，面试常考块元素的居中嵌套，其实就是弹性盒子的子元素设置两个居中对齐-->
<span class="Cbold">注意，上面三个属性都是作用于父类</span>
<span><br>作用在子元素方向上的<b>权重属性flex</b>，声明该元素所占整体容器的比值，也叫做权重，比值越大权重越大。
在子元素中直接flex:数值，注意这样分配之后容器的某一方向会全部被填充</span>
<!--如果是水平排列row，那就充满整个水平方向，如果是column竖直排列，就充满整个竖直方向-->
<!--flex权重属性分配后之前的width或者height其中之一就不生效了，因为flex的优先级高于二者-->
</div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<!--style位于css文件中-->
<h4>文档流</h4>
<div>
<span><br>文档流是指页面上的元素摆放时所占用的空间，也泛指元素在页面的位置</span>
<!---标准文档流指的是我们不做任何修改，默认的元素摆放-->
<span><br><b>标准文档流具有的问题：</b></span>
<ol>
<li>高矮不齐，底边对齐（常见于span行内文本与图片在一起时）</li>
<li>空格折叠：在标签内文本之间不论写多少个空格，到最后html只显示一个空格</li>
<li>连续图片元素空隙问题：如果我们横着写插入图片的代码，那么图片之间是没有空隙的。如果我们换行竖着插入图片，那么图片之间会有一段小空隙</li>
<!--这样不符合我们的代码规范，因为我们横向代码的长度不宜过长-->
</ol>
<span><br>如何解决？——<b>脱离文档流:浮动、绝对定位、固定定位</b></span>
<!--使一个元素脱离标准文档流的三种方式-->
</div>
<div>
<h4>浮动:增加一个浮层来放置内容</h4>
<span><br>float属性定义元素在哪个方向移动<br></span>
<!--任何元素都可以浮动，浮动只能向左或向右-->
<!-- 在float1中会设置float属性为left -->
<div class="float1"></div>
<div class="container1"></div>
<!--如图，我们蓝色的小盒子处于脱离标准流的状态，也就是说，它会自己新建一个浮层，我们看到的页面有两层。一层在下面为黑标准流，一层为蓝在浮层
所以原本块元素上下排列变成现在两个层的重叠，并且浮层是覆盖标准层的-->
<span><br><b>在连续图片空隙问题中就可以设置img格式，添加浮动属性，这样横向代码插入的图片就不会再有空隙</b></span>
<!--遇到问题再去脱离文档流，没有问题的话不要随意设置-->
<span><br><b>浮动的应用点之二：设置水平对齐格式，这一点常用于ol/ul li标签来设置横向的导航！</b></span>
<!--将所有的图层设置为float，共同产生一个浮动层，一起脱离标准流横向排列-->
<!--此时底层就是我们原来的标准流，它啥也没有，元素全都浮出去了-->
<ul>
<li style="float: left;margin:20px">1</li>
<li style="float: left;margin:20px">2</li>
<li style="float: left;margin:20px">3</li>
</ul>
<span><br>如果横向摆放容器宽度不够，则元素会在下一行接着摆</span>
<span><br>浮动的副作用：<b>浮动元素会造成父元素高度坍塌，后续元素也会受到影响，所以我们要尽可能清楚浮动的副作用</b></span>
<!--高度塌陷是指父元素高度默认为0时父元素会因为浮动而消失，高度是名词不是程度词-->
<!--后续元素如果没有设置为float，那可能会被遮挡-->
<span><br>对于父元素高度的坍塌：父元素设置高度就行</span>
<span><br>对于受影响的元素：在受影响元素中增加clear属性，有left/right/both一般咱不能区分是要清除左浮动还是右浮动所以建议选择both</span>
<!--在真实的开发环境中，设置父元素高度很有可能不能解决问题，有时候的父元素高度是动态的，不是固定的-->
<!--如果有父级塌陷，并且同级元素也受到了影响，我们就再父级中用overflow清除浮动-->
<span><br>在父级标签的样式里添加overflow:hidden; 同时增加clear:both;</span>
<!--如果仍有子元素出现问题，那就在出问题的子元素中增加clear:both;-->
<!--.container::after{content:"";display:block;clear:both;}伪对象形式-->
</div>
<div>
<h4>定位</h4>
<span><br><b>position属性：relative相对定位、absolute绝对定位、fixed固定定位</b></span>
<!--设置position之后，可以使用left/right/top/bottom:px来调整位置-->
<!--其中，绝对定位和固定定位会脱离文档流-->
<span><br><b>绝对定位每设置一次，就会多设置一层</b>，新的元素可能会不断覆盖之前的元素，这与浮动不一样。浮动就设置一层浮动层，浮动元素都在一层里不会相互覆盖</span>
<!--如果需要做元素之间相互压盖的效果，选择绝对定位-->
<div class="box4"></div>
<!--absolute只会在开始部分页面显示-->
<div class="box5"></div>
<!--而fixed会随着页面滚动固定在某一个位置，应用的比较少，但很酷-->
<span><br><b>注意，relative/absolute是相对于有定位属性的父级元素进行位置调整，如果父级元素不存在，则继续向上逐级寻找，直到顶层文档</b></span>
<span><br>效果就是，在父级设置relative子级设置absolute时，子级就会随着父级的移动而移动</span>
<span><br>z-index属性：设置元素的堆叠顺序，元素的堆叠顺序更高，那么元素就越喜欢压在别人身上</span>
</div>
<div>
<!--CSS的两个版本：CSS2/CSS3-->
<h3>CSS3新特性</h3>
<span><br><b>圆角border-radius</b>+px，作用就是让我们的块元素的棱角磨成小圆弧，px值越大越接近于圆，如果想设为圆形就写50%以上</span>
<!--大部分情况之下我们只用一个值，树叶型可以尝试两个值，也有3、4个值，不怎么用，有需要再说-->
<span><br>阴影效果box-shadow四个值：h-shadow水平阴影的设置/v-shadow竖直阴影/blur模糊距离/color阴影颜色</span>
<!--前两个值为必填，如果都为0px，那么阴影会在边框的四周产生阴影(不是很明显)-->
<!--前两个值如果为正，那么阴影会在右侧和下侧（一般情况）。如果为负，那么阴影会在左侧和上侧-->
<div class="box6"></div> <!--这里的box6运用margin:0 auto;的方法，使其水平两侧平均分配空间，效果就是居中对齐-->
</div>
<div>
<h3>动画：使元素从一种样式变成另一种样式</h3>
<div>
<span><br>@keyframes创建动画：@keyframes name{0%{css}50%{css}100%{css}}</span>
<span><br>animation执行动画animation:name duration timing-function（动画速率，一般使用匀速linear） delay（延迟时间，不延时那直接写0s） iteration-count（循环次数，infinite无限循环） direction（可选、播放方向）、animation-play-state（动画的播放状态，running播放，paused停止播放，必须要设置才会有动画）</span>
<!--timing-function速率：ease逐渐变慢（默认）linear匀速 ease-in加速 ease-out减速 ease-in-out先加速后减速-->
<!--direction:normal默认向前播放 alternate第偶数次向前播放，第奇数次反方向播放-->
<span><br>设置鼠标移动到元素元素的动画就暂停的效果用:hover{animation-play-state: paused;}</span>
<!--具体步骤看css文件-->
<span><br>呼吸效果：给动画添加透明度opacity，使透明度越来越大最后是1。最好再添加一个阴影使其透明度（rgba）越来越大。</span>
</div>
</div>
<div>
<h3>媒体查询</h3>
<span><br>用于响应式页面的设置，这种页面能随着屏幕的大小发生变化，自动缩放比例或者显示隐藏内容。前端框架bootstrap响应式设计的原理就是媒体查询</span>
<span><br>设置meta标签：content: width=device-width宽度等于当前设备宽度 initial-scale初始的缩放比例，默认为1.0不缩放 user</span>
<span><br>媒体查询：@media screen and (max/min-width最大最小宽度){css样式}</span>
</div>
<div>
<h3>雪碧图</h3>
<span><br>CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式，允许将一个页面涉及到的所有零星图片包含到一张大图中去</span>
<!--这样我们所有的图片不用分别请求，而是放在一张图片上让大图请求服务器一次，需要什么小图就加载什么小图即可。减少了图片的字节和网页的http请求，从而大大提高页面的性能-->
<span><br>其中的原理：background-image引入背景图片，在background-position移动背景图片</span>
<span><br>当我们想让<span></span>中的元素变成块元素时，增加display:block;</span>
<span><br>大体步骤：选好小图片的大小，b-image:url(1.png)导入大图片</span>
<span><br>在b-position:左右px 上下px</span>
<!--不断调试position中的px位置，直到能够显示出我们的小图片-->
</div>
<div>
<h4>字体图标</h4>
<span><br>字体图标不是图，没有失真问题，占用资源也少。轻量、可以用css调整、支持所有现代浏览器</span>
<span><br>去网页找、将图标添加到购物车、下载代码、解压并复制到vscode资源管理器、打开解压后的html学习怎么引用</span>
<span><br>link、class="iconfont icon-name"</span>
<span><br>可以用设置字体的样式设置字体图片</span>
</div>
<script src="C:\Users\26498\Desktop\前端复习\JavaScript\JS文件.js"></script>
</body>
</html>
593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
