万字详解Web开发之HTML5，适合快速入门！

一、基本概念

  • 超文本：超越了文本的限制，比普通的文本更强大，除了文字信息还可以定义图片、音频、视频等；有很多的超链接。
  • 标记语言（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/GIFJPG可以很好处理大面积色调的图像，如相片、网页一般的图片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)层叠样式表/级联样式表，简称样式表。其文件名后缀为.cssCSS规则由两个主要部分：选择器+声明（样式），选择器通常是需要改变样式的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和tdborder:边框宽度+边框线的样式(一般只用实线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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/703028.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux7.9环境源码编译安装ffmpeg6.x

Linux7.9环境源码编译安装ffmpeg6.x

1.官网ffmpeg下载源码 https://ffmpeg.org/download.html#build-windows 2.未安装x264库则先安装配置 可以先查询x264库: whereis libx264 安装编译工具和依赖库&#xff1a; sudo yum install gcc make cmake mercurial git yasm pkgconfig autoconf automake libtool sudo…
阅读更多...
GEE数据集——全球无缝高分辨率温度数据集（GSHTD）

GEE数据集——全球无缝高分辨率温度数据集（GSHTD）

全球无缝高分辨率温度数据集&#xff08;GSHTD&#xff09; 本研究中介绍的全球无缝高分辨率温度数据集&#xff08;GSHTD&#xff09;为各领域的研究人员提供了全面而宝贵的资源。该数据集涵盖 2001 年至 2020 年&#xff0c;主要关注陆地表面温度 (Ts) 和近地面气温 (Ta)。GS…
阅读更多...
(每日持续更新）jdk api之ObjectStreamField基础、应用、实战

(每日持续更新）jdk api之ObjectStreamField基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…
阅读更多...
电子印章系统怎么盖骑缝章？

电子印章系统怎么盖骑缝章？

随着数字化时代的不断发展&#xff0c;电子印章系统在各行各业中得到了广泛应用。其中&#xff0c;骑缝章作为一种常见的复杂印章形式&#xff0c;也在电子印章系统&#xff0c;也额外被读者所关注。电子骑缝章的盖章过程相较于传统的纸质印章&#xff0c;更加简便快捷&#xf…
阅读更多...
C++单元测试工具——googletest

C++单元测试工具——googletest

在平常的学习和工作中&#xff0c;单元测试是很重要的一环&#xff0c;用于验证代码中最小的可测试单元&#xff08;通常是函数或方法&#xff09;是否按照预期工作&#xff0c;单元测试可以帮助开发人员验证代码的正确性和提高代码的可维护性&#xff0c;确保代码的稳定性和可…
阅读更多...
综合服务 IntServ

综合服务 IntServ

目录 综合服务 IntServ IntServ 定义的两类服务 IntServ 的四个组成部分 流 (flow) 资源预留协议 RSVP RSVP 协议的工作原理 IntServ 体系结构在路由器中的实现 综合服务 IntServ 体系结构存在的主要问题 综合服务 IntServ 综合服务 IntServ (Integrated Services) 可…
阅读更多...
力扣随笔删除有序数组中的重复项（简单26）

力扣随笔删除有序数组中的重复项（简单26）

思路&#xff1a;根据类似于滑动窗口的思想&#xff0c;定义一个指针&#xff1b;使指针左边的区域全部为不重复元素&#xff08;包括指针所指的数字&#xff09; 以示例2为例&#xff0c;left&#xff1a;红色加粗 遍历指针i&#xff1a;黑色加粗 窗口范围&#xff0c;左边界到…
阅读更多...
【算法题】118. 杨辉三角

【算法题】118. 杨辉三角

题目 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows 1 输出: [[1]] …
阅读更多...
区分服务 DiffServ

区分服务 DiffServ

目录 区分服务 DiffServ 区分服务的基本概念 区分服务 DiffServ 的要点 每跳行为 PHB DiffServ 定义的两种 PHB 区分服务 DiffServ 区分服务的基本概念 由于综合服务 IntServ 和资源预留协议 RSVP 都较复杂&#xff0c;很难在大规模的网络中实现&#xff0c;因此 IET…
阅读更多...
基于Prony算法的系统参数辨识matlab仿真

基于Prony算法的系统参数辨识matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 Prony算法是一种用于信号处理和系统辨识的经典方法&#xff0c;特别适用于线性时不变系统&#xff08;LTI&#xff09;的频率响应分析以及模拟复指数信号序列。其…
阅读更多...
golang通过http访问外部网址

golang通过http访问外部网址

不同项目之前,通过http访问,进行数据沟通 先设定一个接口,确认外部能访问到 PHP写一个接口 public function ceshi_return() {$data $this->request->param();$id $data[id];$res Db::name(user)->field(id,status,price,name)->where([id>$id])->find…
阅读更多...
无人集群试验评估现状及技术方法综述

无人集群试验评估现状及技术方法综述

源自&#xff1a;系统工程与电子技术 作者&#xff1a;赵蕊蕊, 于海跃, 游雅倩, 张涛, 陶敏, 姜江 “人工智能技术与咨询” 发布 摘 要 试验评估是促进装备系统作战能力生成和实战化应用的重要手段。无人集群依靠自组网实现复杂交互, 具备典型的智能性和涌现性, 开展无人集…
阅读更多...
深度学习在过冷沸腾气泡动力学分割中的应用

深度学习在过冷沸腾气泡动力学分割中的应用

Application of deep learning for segmentation of bubble dynamics in subcooled boiling 深度学习在过冷沸腾气泡动力学分割中的应用 期刊信息&#xff1a;International Journal of Multiphase Flow 2023 级别&#xff1a;EI检索 SCI升级版工程技术2区 SCI基础版工程技术3区…
阅读更多...
Flask基础学习4

Flask基础学习4

19-【实战】问答平台项目结构搭建_剪_哔哩哔哩_bilibili 参考如上大佬的视频教程&#xff0c;本博客仅当学习笔记&#xff0c;侵权请联系删除 问答发布的web前端页面实现 register.html {% extends base.html %}{% block head %}<link rel"stylesheet" href&q…
阅读更多...
VSCode远程开发 Windows11 Linux

VSCode远程开发 Windows11 Linux

问题背景 之前一直用JetBrains的Gateway和本地Linux虚拟机开发&#xff0c;不过笔记本配置不够&#xff0c;太卡了。最近租了个国外的便宜服务器&#xff0c;JetBrains的Gateway总断连&#xff0c;也不知道为什么&#xff0c;所以试试VSCode。 本地 Windows 11 &#xff0c;远…
阅读更多...
Java项目学习

Java项目学习

一、Java项目学习 1.1 瑞吉外卖(项目提供的资料没笔记) 视频资源&#xff1a;https://www.bilibili.com/video/BV13a411q753/?p1 本人git项目地址&#xff1a;https://gitee.com/xx-xuxin/reggie_take_out.git 瑞吉外卖Day01~Day06没讲的功能&#xff08;全功能实现&#xf…
阅读更多...
matlab新能源汽车三自由度操纵稳定性分析及优化

matlab新能源汽车三自由度操纵稳定性分析及优化

1、内容简介 略 可以交流、咨询、答疑 55-新能源汽车三自由度操纵稳定性分析及优化 2、内容说明 略 摘 要 电动化是节能减排、寻求替代能源的最佳途径&#xff0c;已成为行业共识&#xff0c;论文基于江西科技学院桑塔纳轿车油改气项目&#xff0c;在拆除发动机、变速…
阅读更多...
洛谷B2096 直方图（java)

洛谷B2096 直方图（java)

题目描述 给定一个非负整数数组&#xff0c;统计里面每一个数的出现次数。我们只统计到数组里最大的数。 假设 Fmax&#xff08;Fmax≤100000&#xff09;是数组里最大的数&#xff0c;那么我们只统计{0,1,2…Fmax} 里每个数出现的次数。 输入格式 第一行 n 是数组的大小。…
阅读更多...
一键生成请求方法的工具 —— OpenAPI Typescript Codegen

一键生成请求方法的工具 —— OpenAPI Typescript Codegen

文章目录 用法自定义请求参数的方法1&#xff09;使用代码生成器提供的全局参数修改对象2&#xff09;直接定义 axios 请求库的全局参数&#xff0c;比如&#xff1a;全局请求响应拦截器 报错解决 用法 首先下载axios npm install axios官网&#xff1a;https://github.com/f…
阅读更多...
Linux运维- FTP服务器

Linux运维- FTP服务器

FTP服务器的配置与管理 项目场景 学院教职工在日常工作中&#xff0c;经常需要传送一些文件和资料。可以使用移动存储设备转存再复制&#xff0c;或者通过共享文件的方式实现&#xff0c;但是两种方法都不是很简单、方便。相对于这两种方法&#xff0c;使用FTP传送文件和资料…
阅读更多...
最新文章

Copyright @ 2022~2023