HTML5+CSS3
思维导图
网页的基本描述：
<!DOCTYPE html>
<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息-->
<meta charset="UTF-8">
<title>网页</title>
</head>
<!--body标签代表网页主体-->
<body>
网页内容测试
</body>
</html>
- 声明为 HTML5 文档（<!DOCTYPE>声明有助于浏览器能正确显示网页。（这里的声明不区分大小写））
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
</strong> 元素描述了文档的标题</li> <li><strong><body></strong> 元素包含了可见的页面内容</li> <li><strong><h1></strong> 元素定义一个大标题</li> <li><strong><p></strong> 元素定义一个段落</li> </ul> <p><strong>注：</strong>在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p> </blockquote> <h4 id="网页的基本标签">网页的基本标签：</h4> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"><!-- 个人理解：这里的lang代表语言,en表示英文,zh-cn表示中文。虽然不知具体效果但可能是用与浏览器识别是否翻译该网页的一个作用--> <head> <meta charset="UTF-8"> <title>基本标签</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签 </h2> <!--段落标签--> <p>这是一个段落</p> <!--换行标签--> 这是换行<br/> 换行成功<br/> <!--水平线标签--> <hr/> <!--粗体、斜体标签--> <h1>字体样式标签</h1> 粗体：<strong>这是粗体</strong> 斜体：<em>这是斜体</em> </body> </html> </code></pre> <blockquote> <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul> <li>HTML 标签是由尖括号包围的关键词，比如 <html></li> <li>HTML 标签通常是成对出现的，比如 <body> 和 </body></li> <li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li> <li>开始和结束标签也被称为开放标签和闭合标签</li> </ul> <blockquote> <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p> <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签</p> </blockquote> <blockquote> <p>web浏览器通过查看标签来决定展现html页面的内容</p> </blockquote> <blockquote> <p>注意只有<body>中的内容才会在浏览器中显示出来</p> </blockquote> </blockquote> <p>html文本格式化标签：</p> <pre><code class="language-html"><!--文本--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Drmo01</title> </head> <body> <b>加粗文本</b><br><br> <i>斜体文本</i><br><br> <code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup> </body> </html> <hr> <!--文本方向--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo01</title> </head> <body> <p>该段落文字从左到右显示。</p> <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> </body> </html> <hr> <!--格式化标签--> 标签 描述 <b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字 <hr> <!--计算机输出标签--> 标签 描述 <em> 呈现为被强调的文本。 <strong> 定义重要的文本。 <dfn> 定义一个定义项目。 <code> 定义计算机代码文本。 <samp> 定义样本文本。 <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 <var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 <!--引文，引用，及标签定义--> 标签 描述 <abbr> 定义缩写 <address> 定义地址 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 <cite> 定义引用、引证 <dfn> 定义一个定义项目。 </code></pre> <h4 id="特殊符号">特殊符号</h4> <pre><code class="language-html"><!--特殊符号--> 空 格： 空 格 空 格 end <br/> >大于 <br/> <小于 <br/> ©版权符号 </code></pre> <blockquote> <p><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a></p> </blockquote> <h4 id="图像标签">图像标签</h4> <p><img>标签基本语法格式如下：</p> <pre><code class="language-html"><img src="path"alt="text"title="text"width="x"height="y"/> <!-- src: 图像地址 alt: 图像的替代文字 title: 鼠标悬停提示文字 width: 图像的宽度 height: 图像的高度 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图像标签学习</title> </head> <body> <!-- img src:图片地址 相对路径，绝对路径 ../ --上一级目录 --> <img src="" alt="图像替代文字" title="悬停文字"> <!-- src找不到路径时，就会直接使用alt替代图片（必填内容） --> <!-- title在鼠标悬停放置在图片上时，就会出现悬停文字 --> <!-- 通过width和height可以设置图片的大小 --> </body> </html> </code></pre> <h4 id="链接标签">链接标签</h4> <blockquote> <p>HTML使用标签 <a>来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。</p> <pre><code class="language-html"><a href="path"target="目标窗口位置">链接文本或图像</a> href:链接路径 targe:链接在哪个窗口打开 </code></pre> <p>在标签<a> 中使用了href属性来描述链接的地址</p> <pre><code class="language-html"><a href="url">链接文本</a> </code></pre> <h3> target 属性 <pre><code class="language-html">使用 target 属性，你可以定义被链接的文档在何处显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>链接学习</title> </head> <body> <a href="https://www.baidu.com/" target="_blank">访问百度!</a> <!--target常用值： _self、_blank --> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> </body> </html> <a href="https://www.百度.com/" target="_blank" rel="noopener noreferrer">访问百度!</a> <!-- rel="noopener noreferrer"属性是一种新特性，它能让网站更安全，超链接添加rel="noopener errer"来防止钓鱼网站，因为它获取的window.opener的值为null。 --> <!-- 超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果你在链接上使用 target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。 --> </code></pre> <blockquote> <p>id 属性可用于创建一个 HTML 文档书签。</p> <p>提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。</p> </blockquote> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>链接标签学习</title> </head> <body> <!-- a标签 href:必填，表示要跳转到哪个页面 target: 表示窗口在哪里打开 _blank 在新窗口中打开 _self 在此窗口打开 --> <a href="要跳转的链接"target="_blank">点击跳转到页面</a> <a href="www.baidu.com"target="_self">点击跳转到百度页面</a> <!--锚链接 1、需要一个锚标记 2、跳转到标记 # 标记的写法 <a name="top">顶部</a> --> <a href="#top">回到顶部</a> <!-- 功能性链接 邮件链接：mailto: --> <a href="mailto:2641123591@qq.com">点击联系我</a> </body> </html> </code></pre> </blockquote> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body> <!--a标签 herf:必填，表示要跳转到哪个界面 --> <a href="图像标签.html">点击跳转到指定界面</a> <a href="http://www.baidu.com">点击跳转到百度</a> </body> </html> </code></pre> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body> <!--使用name作为标记--> <a name="top">顶部</a> <!--a标签 herf:必填，表示要跳转到哪个界面 target:表示窗口在哪里打开 _blank:在新窗口打开 _self:在自己的网页中打开 --> <a href="图像标签.html"target="_blank">点击跳转到指定界面</a> <a href="http://www.baidu.com"target="_self">点击跳转到百度</a> <br/> <!--图片超链接--> <a href="http://www.csdn.net"> <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400"> </a> <p> <a href="http://www.csdn.net"> <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400"> </a> </p> <p> <a href="http://www.csdn.net"> <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400"> </a> </p> <p> <a href="http://www.csdn.net"> <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400"> </a> </p> <p> <a href="http://www.csdn.net"> <img src="resources/image/1.jpg"alt="测试"title="悬停文字"width="600"height="400"> </a> </p> <!--锚链接 1. 需要一个锚标记 2. 跳转到标记 #：通过#跳转到标记 --> <a href="#top">回到顶部</a> <a name="down">down</a> <!--功能性链接 邮件链接：maito; QQ链接：来自于腾讯（在QQ推广官方可以生成网页推广链接（加QQ） --> <a href="mailto:2641123591@qq.com">点击联系我</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="在这里通过QQ沟通" title="在这里通过QQ沟通"/></a> </body> </html> </code></pre> <h4 id="行内元素和块元素">行内元素和块元素</h4> <p>块元素：</p> <ul> <li>无论内容多少，该元素独占一行</li> <li>（p、h1-h6...)</li> </ul> <p>行内元素：</p> <ul> <li>内容撑开宽度，左右都是行内元素的可以排在一行</li> <li>（a,strong,em...)</li> </ul> <h4 id="列表">列表</h4> <p>列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览器者能更快捷地获得相应的信息</p> <p>列表的分类：</p> <ul> <li>无序列表</li> <li>有序列表</li> <li>定义列表</li> </ul> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签学习</title> </head> <body> <!--有序列表--> <ol> <li>java</li> <li>python</li> <li>运维</li> <li>前端</li> <li>C/C++</li> </ol> <hr/> <!--无序列表--> <ul> <li>java</li> <li>python</li> <li>运维</li> <li>前端</li> <li>C/C++</li> </ul> <hr> <!--定义列表--> <dl> <dt>学科</dt> <dd>java</dd> <dd>python</dd> <dd>linux</dd> <dd>C/C++</dd> <hr> <dt>位置</dt> <dd>四川</dd> <dd>重庆</dd> <dd>西安</dd> </dl> </body> </html> </code></pre> <h4 id="表格">表格</h4> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签学习</title> </head> <body> <!--表格table 行： tr 列： td border:为表格加上边框=宽度 --> <table border="1px"> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </body> </html> </code></pre> <h4 id="视频和音频">视频和音频</h4> <p>视频元素：</p> <ul> <li>vidio</li> </ul> <p>音频元素：</p> <ul> <li>audio</li> </ul> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body> <!--音频和视频 src:资源路径 controls:控制条 autoplay:自动播放 --> <video src="resources/vidio/target_video.mp4" controls autoplay></video> <!--controls可以为视频增加控制元素--> <audio src="resources/audio/测试.mp3" controls="controls" autoplay="autoplay"></audio> </body> </html> </code></pre> <h4 id="页面结构分析">页面结构分析</h4> <table> <thead> <tr> <th>元素名</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>header</td> <td>标题头部区域的内容（用于页面或页面中的一块区域</td> </tr> <tr> <td>footer</td> <td>标记脚步区域的内容（用于整个页面中的一块区域）</td> </tr> <tr> <td>section</td> <td>web页面中的一块独立区域</td> </tr> <tr> <td>article</td> <td>独立的文章内容</td> </tr> <tr> <td>aside</td> <td>相关内容或应用（常用于侧边栏）</td> </tr> <tr> <td>nav</td> <td>导航类型辅助内容</td> </tr> </tbody> </table> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构学习</title> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚部</h2> </footer> </body> </html> </code></pre> <h5 id="iframe内联框架">iframe内联框架</h5> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe内联框架</title> </head> <body> <!--iframe内联框架 src:地址 width:宽度高度 --> <!--<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800"></iframe>--> <!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>--> <!--内联框架--> <iframe src="" name="hello" frameborder="0" width="1000px" height="800"></iframe> <a href="媒体元素.html" target="hello">点击跳转</a> </body> </html> </code></pre> <h5 id="表单标签">表单标签</h5> <pre><code class="language-html"><form action="URL地址"method="提交方式"name="表单名称"> 各种表单控件 </form> </code></pre> <blockquote> <p>action属性用于指定表单提交的地址，例如action="login.jsp",表示表单数据会提交到名为login.jsp的页面去处理。method属性用于设置表单数据的提交方式，它有GET和POST两个值。其中GET为默认值，但是保密性差且具有数据量的限制。POST提交方式不但保密性好，而且可以提交大量的数据，所以开发中通常使用POST方式提交表单</p> </blockquote> <p>表单控件：</p> <pre><code class="language-html"><input/> <input type="控件类型"/> </code></pre> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单注册 action :表单提交的位置，可以是网站，也可以是一个请求地址 method:post, get 提交方式 get：提交方式：可以在url中看到提交的信息（不安全） post：提交方式，比较安全，可以传输大文件 --> <form action="媒体元素.html"method="get"> <!--文本输入框：input type="txt"--> <p>名字:<input type="text" name="username"></p> <!--密码输入框：input type="password"--> <p>密码:<input type="password" name="pwd"></p> <p> <input type="submit"> <!--submit表示提交--> <input type="reset"> <!--reset表示重置--> </p> </form> </body> </html> </code></pre> <h4 id="表单元素格式">表单元素格式</h4> <table> <thead> <tr> <th><strong>属性</strong></th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><strong>type</strong></td> <td>指定元素类型。text、password、checkbox、radio、submit、resrt、file、hidden、image和button，默认为text</td> </tr> <tr> <td><strong>name</strong></td> <td>指定表单元素的名称</td> </tr> <tr> <td><strong>value</strong></td> <td>元素的初始值。type为radio时必须指定一个值</td> </tr> <tr> <td>size</td> <td>指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位</td> </tr> <tr> <td>maxlength</td> <td>type为text或password时，输入的最大字符数</td> </tr> <tr> <td>checked</td> <td>type为radio或checkbox时,指定按钮是否是被选中</td> </tr> </tbody> </table> <h4 id="文本框和单选框">文本框和单选框</h4> <pre><code class="language-html"><form action="媒体元素.html"method="get"> <!--文本输入框：input type="txt"--> <!-- {value="输入内容" maxlength="8" size="30"}--> <!-- value="输入内容"——默认初始值 maxlength="8"——最长能写几个字符 size="30"——文本框的长度 name——代表属性（每一个input表单中都要带有name属性） --> <p>名字:<input type="text" name="username" value="输入内容" maxlength="8" size="30"></p> <!--密码输入框：input type="password"--> <p>密码:<input type="password" name="pwd"></p> <p> <input type="submit"> <!--submit表示提交--> <input type="reset"> <!--reset表示重置--> </p> </form> </code></pre> <p>单选框：</p> <pre><code class="language-html"><!--单选框标签 input type="radio" value : 单选框的值 name : 表示组（如果组不同，那么一组的内容就可以同时选中） --> <p>性别 <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p> </code></pre> <h4 id="按钮和多选框">按钮和多选框</h4> <p>多选框：</p> <pre><code class="language-html"></p> <!--多选框 input type="checkbox" name——代表属性（每一个input表单中都要带有name属性） --> <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby">敲代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 </p> </code></pre> <p>按钮：</p> <pre><code class="language-html"><!--按钮 input type="button"——普通按钮 input type="image"——图像按钮 input type="submit"——提交按钮 input type="reset"——重置按钮 --> <p>按钮: <input type="button" name="btn1" value="点击变长"> <input type="image" src="resources/image/头像3.gif"> </p> <p> <input type="submit"> <!--submit表示提交--> <input type="reset"> <!--reset表示重置--> </p> </code></pre> <h4 id="列表框文本域和文件域">列表框文本域和文件域</h4> <p>下拉框：</p> <pre><code class="language-html"><!--下拉框 ， 列表框 selected默认选择 checked默认选中（勾选） --> <P>下拉框 <select name="列表名称"> <option value="china">中国</option> <option value="选项的值">美国</option> <option value="ger"selected>德国</option> <option value="ch">瑞士</option> </select> </P> </code></pre> <p>文本域：</p> <pre><code class="language-html"><!--文本域 textarea name="textarea" cols="30" rows="10"——行和列 --> <p>反馈 <textarea name="textarea" cols="30" rows="10">文本内容</textarea> </p> </code></pre> <p>文件域：</p> <pre><code class="language-html"><!--文件域 input type="file" name="files" --> <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> </code></pre> <h4 id="搜索框滑块和简单验证">搜索框滑块和简单验证</h4> <p>滑块：</p> <pre><code class="language-html"><!--滑块--> <p>滑块： <input type="range" min="0" max="100" step="5"> </p> </code></pre> <p>搜索框：</p> <pre><code class="language-html"><!--搜索框--> <p>搜索 <input type="search" name="search"> </p> </code></pre> <p>验证：</p> <pre><code class="language-html"><!--邮件验证--> <p>邮箱 <input type="email" name="email"> </p> <!--URL--> <p>URL <input type="url" name="url"> </p> <!--数字验证 step="10"——表示一次调整10个数字 max;min表示最大值和最小值 --> <p>数字 <input type="number" name="num" max="100" min="0" step="10"> </p> </code></pre> <h4 id="表单的应用">表单的应用</h4> <p><strong>隐藏域</strong>hidden</p> <p><strong>只读</strong>readonly</p> <p><strong>禁用</strong>disabled</p> <pre><code class="language-html">readonly（可以将内容设定为只读，无法修改 disabled（可以将选择内容禁用，然后该选项无法选中） hidden（可以把内容隐藏起来，但是属性还在） </code></pre> <pre><code class="language-html"><!--增强鼠标可用性--> <p> <label for="mark">点击试试</label> <input type="text"> </p> </code></pre> <h4 id="表单初级验证">表单初级验证</h4> <p>常用方式：</p> <ul> <li>placeholder——提示信息</li> <li>required——非空判断</li> <li>pattern——正则表达式（较复杂，网络搜索相关的正则表达式</li> </ul> <p>placeholder:默认信息提示用户输入</p> <pre><code class="language-HTML"><p>名字:<input type="text" name="username" placeholder="请输入用户名"></p> </code></pre> <p>required:表示此处内容不能为空（必须输入有内容才能提交）</p> <p>pattern：正则表达式的验证</p> <pre><code class="language-HTML"><!--正则表达式列子 正则表达式网站：https://www.jb51.net/tools/regex.htm --> <p>自定义邮箱： <input type="text" name="dymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p> </code></pre> <h1 id="css">CSS</h1> <h2 id="一什么是css">一、什么是CSS</h2> <p>CSS 是 Cascading Style Sheet的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS定义的规则具体如下：</p> <blockquote> <p>选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…}<br> 选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性:属性值”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。<br> 通过CSS样式对<div>标签进行设置<br> div{ border: 1px solid red; width: 600px; height: 400px;}<br> div为选择器，表示CSS样式作用的HTML对象，border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值“1px solid red;”分别表示该边框为1像素、实心边框线、红色。</p> </blockquote> <p>CSS样式的引用方式</p> <p>行内式：<br> 行内式也被称为内联式，是通过标签的style属性设置标签的样式。行内式基本语法格式如下：</p> <blockquote> <blockquote> <p><标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</ 标签名><br> style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。</p> </blockquote> </blockquote> <p>行内式是写在<html>根标签中，例如下面的示例代码</p> <blockquote> <h1 style="font- size:20px; color :blue; "> </blockquote> <p>使用CSS行内式修饰一级标题的字体大小和颜色</p> </h1> 使用<h1>标签的style属性设置行内式CSS样式，用来修饰一级标题的字体和颜色。 需要注意的是：行内式是通过标签的属性来控制样式的，这样并没有做到结构域样式分离，所以不推荐使用。 <p>内嵌式：<br> 内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并用<style>标签定义，其基本语法格式如下：</p> <pre><code class="language-html"><head> <style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> </code></pre> <style>标签一般位于<head>标签中的<title>标签之后，因为浏览器是从上到下解析代码的，把CSS代码放在头部便于提前被加载和解析，以避免网页内容加载后没有样式修饰带来的问题。在<style>标签中，只有设置type的属性值为“text/css”，这样浏览器才知道<style>标签包含的是CSS代码。 内嵌式引入CSS只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。 <h2>外链式 外链式也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文件中。外链式引用CSS的基本语法格式如下： ```html <head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head> href：定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。 type：定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。 rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 ``` <font color ="red">注意</font>：在实际开发中，链入式是使用频率最高、最实用的引入方式，它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，同一个CSS文件可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link />标签链接多个CSS样式表，大大提高了网页开发的工作效率。 导入式： 导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用<style>标签，并在<style>标签内的开头处使用@import语句，即可导入外部样式表文件。导入式引用CSS的基本语法格式如下： ```html <style type="text/css" > @import url (CSS文件路径);或@import "CSS文件路径"; /*在此还可以存放其他CSS样式*/ </sty1e> ``` <style> 标签内还可以存放其他的内嵌样式，@import 语句需要位于其他内嵌样式的上面。 <font color = red>注意</font>虽然导入式和链入式功能基本相同，但是大多数网站都是采用链入式引入外部样式表的，主要原因是两者的加载时间和顺序不同。当一个页面被加载时，<link />标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等到页面全部下载完后才被加载。因此，当用户的网速比较慢时，会先显示没有CSS修饰的网页，这样会造成不好的用户体验，所以大多数网站采用链入式。 ```html <head> <meta charset="UTF-8"> <title>Title ```<!--外部样式--> <link rel="stylesheet" href="style.css"> </head> <body> <!--CSS样式的优先级：采用就近原则，距离代码近的先采用--> <h1>这是标题</h1> <h2>这是第二个测试</h2> <!--行内样式，在标签元素中，编写一个style属性，编写样式即可--> <h3 style="color:red">这是行内样式</h3> </body> </html>link属于html标签。@import在css中使用表示导入外部样式表；
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重 高于@import的权重；
link 支持使用javascript改变样式 （document.styleSheets），后者不可
本质上区别不大，但是为了软件中编辑布局网页html代码，一般使用link较多。二、选择器
基本选择器
作用：选择页面上的某一个或者某一类元素
标签选择器：选择一类标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择到页面上所有的这个标签元素 */ h1{ color: #f8be2c; background: #06eea4; border-radius:24px; } p{ font-size:60px; } </style> </head> <body> <h1>学习Java</h1> <h1>学习Java</h1> <p>听狂神说</p> </body> </html>
类 选择器class：选择所有class属性一致的标签，跨标签，.类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> /*类选择器的格式 .class的名称{} 好处：可以多个标签归类，同一个class，可以复用 class可以全局复用 */ .qinjiang{ color:#06eea4; } .kuangshen{ color:#ec760c; } </style> </head> <body> <h1 class="qinjiang">标题1</h1> <h1 class="kuangshen">标题2</h1> <h1>标题3</h1> <p class="qinjiang">P标签</p> </body> </html>
id选择器：全局唯一！！ #id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id选择器</title> <style> /* id选择器——id必须保证全局唯一！！！ #id名称{} 不遵循就近原则，固定的 id选择器》class选择器》标签选择器 */ #qingjiang{ color:#f8be2c; } </style> </head> <body> <h1 id="qingjiang">标题1</h1> <h1>标题2</h1> <h1>标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html>优先级：id > class >标签
层次选择器
- 后代选择器：在某个元素的后面 ——祖爷爷 爷爷 爸爸 你
/*后代选择器*/ body p{ background: red; }
- 子选择器，一代，儿子
/*子选择器*/ body>p{ background: #06eea4; }
- 相邻兄弟选择器-同辈
/*相邻兄弟选择器，只有一个，相邻（向下衍生）*/ .active + p{ background: #f8be2c; }
- 通用选择器
/*通用兄弟选择器 ,当前选中元素的向下的所有兄弟元素*/ .active~p{ background: #feec85; }层次选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*background背景颜色*/ /* p{ background: #ec760c; } */ /*后代选择器*/ /*body p{ background: red; }*/ /*子选择器*/ /*body>p{ background: #06eea4; }*/ /*相邻兄弟选择器，只有一个，相邻（向下衍生）*/ /*.active + p{ background: #f8be2c; }*/ /*通用兄弟选择器 ,当前选中元素的向下的所有兄弟元素*/ .active~p{ background: #feec85; } </style> </head> <body> <p>p0</p> <p class="active">p01</p> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> </body> </html>后代选择器：
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
因此，ul em 将会选择以下标记中的所有 em 元素：
这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul>
结构伪类选择器
伪类：
/*ul的第一个子元素*/ ul li:first-child{ background: #f8be2c; } /*ul的最后一个子元素*/ ul li:last-child{ background: #f35626; } /*选中p1:定位到父元素，选择当前的第一个元素 选中当前p元素的父级元素，选中父级元素的第一个 */ p:nth-child(1){ background: chocolate; } /*选中父元素，下的p元素的第二个，类型*/ p:nth-of-type(2){ background: yellow; }
属性选择器
属性选择器（常用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ display: block; height: 50px; width: 50px; float:left; border-radius: 10px; background: blue; text-align: center; color: beige; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /*属性名，属性名=属性值（正则） =表示绝对等于 *=表示包含 ^=表示以...开头 $=表示以...结尾 存在id属性的元素 a[]{} */ /* a[id]{ background: red; }*/ /*id=first的元素*/ /* a[id=first]{ background: aqua; }*/ /*class中有links元素*/ /* a[class = "links item2 first2"]{ background: orange; }*/ /*a[class*="links"]{ background: black ; }*/ /*选中href中以http开头的元素*/ a[href^="http"]{ background: orange; } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="/adad/faf" class="links item2 first2" >2</a> <a href="qwe123" class="links item3 first3" >3</a> <a href="eweqe" class="links item4 first4" >4</a> <a href="rrrrr" class="links item5 first5" >5</a> <a href="ttt" class="links item6 first6" >6</a> <a href="yyy" class="links item7 first7" >7</a> </p> </body> </html>简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
/*把包含标题（title）的所有元素变为红色，可以写作：*/ *[title] {color:red;} /*可以只对有 href 属性的锚（a 元素）应用样式：*/ a[href] {color:red;} /*可以根据多个属性进行选择，只需将属性选择器链接在一起即可。 例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，*/ a[href][title] {color:red;} /*可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像*/ img[alt] {border: 5px solid red;} /*想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：*/ planet[moons] {color:red;} /*让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：*/ <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> /*根据具体属性值选择 除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。*/ /*例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：*/ a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} /*与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。*/ a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} /*这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：*/ <a href="http://www.w3school.com.cn/" title="W3School">W3School</a> <a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a> <a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a> /**/三、美化网页元素
字体样式
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title{ font-size:50px; } </style> </head> <body> 欢迎学习<span id="title">Java</span> </body> </html>/* font-family:字体 font-size:字体大小 font-weight:字体粗细 color:字体颜色 */ <style> body{ font-family: 楷体; color:#f8be2c; } h1{ font-size: 50; } p1{ font-weight: bold; } </style>字体风格：
通过 font-family 属性设置更具体的字体 h1 {font-family: Georgia;} 如果用户没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。 我们可以通过结合特定字体名和通用字体系列来解决这个问题： h1 {font-family: Georgia, serif;} 如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明： body {font-family: sans-serif;} font-style 属性最常用于规定斜体文本。 该属性有三个值： normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}字体变形：
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
p {font-variant:small-caps;}字体加粗：
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}<html> <head> <style type="text/css"> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="thick">This is a paragraph</p> <p class="thicker">This is a paragraph</p> </body> </html>字体大小
font-size 属性设置文本的大小。
通过像素设置文本大小，可以对文本大小进行完全控制：
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}使用em来设置字体大小：
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */CSS 字体属性
属性 描述 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。 font-family 设置字体系列。 font-size 设置字体的尺寸。 font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。 文本样式
- 颜色 color rgb rgba
- 文本对齐方式 text-align = center
- 首行缩进 text-indent:2em
- 行高:line-height: 单行文字上下居中！ line-height = height
- 装饰 text-decoration;
- 文本图片水平对齐：vertical-align:middle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本的装饰</title> <!-- 颜色： 单词 RGB 0~f RGBA a:0-1 text-align：排版，居中 text-indent:首行缩进；段落首行缩进 height:300px; line-height:50px; 行高 和 块的高度一致，就可以上下居中 --> <style> h1{ color:rgba(0,255,255,0.8); /*这是文本居中*/ text-align:center; } /*这是首行缩进，段落缩进*/ .p1{ text-indent: 2em; } /*这里设置行高*/ .p3{ background: royalblue; height:300px; line-height:50px; } </style> </head> <body> <h1>这是一个测试文本</h1> <p class="p1"> 嘉峪关城，城墙高9米，还要在城墙之上修建数十座大小不同的楼阁和众多的垛墙，用砖数量之大是非常惊人的，当时，施工条件很差，没有吊运设备，全靠人工搬运。</p> <p class="p3">而当时修关城所用的砖，都是在40里以外的地方烧制而成。砖烧好后，用牛车拉到关城之下，再用人工往上背。</p> <p>由于城高，唯一能上下的马道坡度大，上下很困难，尽管派了许多人往城墙上背砖，个个累得要死，但背上去的砖却仍然供不应求，工程进展受到了严重影响。</p> <p>一天，一个放羊的孩子来到这里放羊玩耍，看到这个情景，灵机一动，解下腰带，两头各捆上一块砖，搭在山羊身上，然后，用手拍一下羊背，身子轻巧的山羊，驮着砖一溜小跑就爬上了城墙。</p> <p> 人们看了又惊又喜，纷纷仿效，大量的砖头很快就运上了城墙。</p> </body> </html>text-indent:2em;//段落首行缩进 background://颜色 line-height://行高文本阴影和超链接伪类
阴影
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径 */ #price{ text-shadow: #3d98e9 10px 10px 2px; }伪类
正常情况下，a,a:hover
a{ /*Default color*/ 默认颜色 text-decoration: none; color:#000000; } /*鼠标悬浮的状态（只需记住：hover)*/ a:hover{ color:orange; font-size;50px; }列表
/*ul li*/ /* list-style: none 去掉圆点 circle 空心圆 decimal 数字 square 正方形 */ ul{ background: #929090; } ul li{ height: 30px; list-style:none ; text-indent: 1em ; }背景
background-image:url("");/*默认是全部平铺的*/ background-repeat:repeat-x/*水平平铺*/ background-repeat:repeat-y/*垂直平铺*/ background-repeat:no-repeat/*不平铺*/背景颜色
背景图片
background:red url("图片相对路劲") 270px 10px no-repeat background-position：/*定位：背景位置*/<style> div{ width:1000px; height:700px; border:1px solid red; background-image: url("images/mao1.jpg"); /* 默认全部平铺*/ } div1{ background-repeat: repeat-x; } div2{ background-repeat: repeat-y; } div3{ background-repeat: no-repeat; } </style>渐变
网址：https://www.grablent.com
径向渐变、圆形渐变渐变 background-color: #4158D0; background-image: linear-gradient(225deg, #4158D0 0%, #C850C0 5%, #FFCC70 12%, #56d9cc 75%, #e38bb9 100%); /*https://www.grabient.com/*/盒子模型
- margin：外边距
- padding：内边距
- border：边框
边框
用户登录框
<div id="box"> <h2>会员登录</h2> <from action="#"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="text"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </from> </div> </from> </body><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*body:总有一个默认的外边距margin:0*/ /*h1,ul,li,a,body{*/ /* margin:0;*/ /* padding:0;*/ /* text-decoration: none;*/ /*}*/ /*border:粗细，样式，颜色*/ #box{ width:300px; border:1px solid red; } h2{ font-size:16px; background-color:#63a35c; line-height:30px ; margin:0; } form{ background:#63a35c; } div:nth-of-type(1)>input{ border:3px solid black; /*border”参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。 边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），*/ } div:nth-of-type(2)>input{ border:3px dashed #f9ef74;/*dashed，用来形成虚框*/ } </style> </head> <body> <div id="box"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="text"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form> </div> </from> </body> </html>border：粗细 样式 颜色
- 边框的粗细
- 边框的样式
- 边框的颜色
外边距----妙用：居中
margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下
margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/ /*例1：居中*/ margin:0 auto /*auto表示左右自动*/ /*例2：*/ margin:4px/*表示上、右、下、左都为4px*/ /*例3*/ margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/盒子的计算方式：
margin+border+padding+内容的大小
总结：
body总有一个默认的外边距 margin:0
常见操作：初始化margin:0; padding:0; text-decoration:none;圆角边框----border-radius
border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径<style> div{ width:100px; height:100px; border:10px solid red;/*边框,solid:实线*/ border-radius:100px; /* 圆圈： 圆角 = 半径！*/ /* 左上，右上，右下，z下，顺时针*/ } </style>盒子阴影
浮动
标准文档流
块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong行内元素可以包含在块级元素中，反之则不可以
display
- block：块元素
- inline：行内元素
- inline-block：是块元素，但是可以内联，在一行
- none：消失
这也是一种行内元素排列的方式，但是我们很多情况用float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联 ，在一行 --> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div>div块元素</div> <span>span行内元素</span> </body> </html>
