yyds_it_huo

使用HTML语言和CSS开发商业站点

学习目标

学习完本课程后，能够：

使用HTML进行网页布局
使用CSS3美化网页
制作精美的商业网站

一、HTML5基础

1.1 HTML简介

什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

中文名：超文本标记语言	阅读方式：网页浏览器
外文名： Hyper Text Markup Language	外语缩写： HTML
类型：标记语言	文件扩展名： html 或 htm

HTML发展史

HTML历史上有如下版本：

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML5优势

世界知名浏览器厂商对HTML5的支持（微软，Google，苹果）
市场的需求
跨平台

W3C标准

W3C
     World Wide Web Consortium（万维网联盟）
    成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
    http://www.w3.org/
    http://www.chinaw3c.org/
W3C标准包括
     结构化标准语言（HTML 、XML）
     表现标准语言（CSS3）
     行为标准（DOM 、ECMAScript）

1.2 HTML基本结构

入门案例

doctype html>  
<html>
	<head>
	    <title>hellotitle>
	    <meta charset="UTF-8" />
	head>
	<body>
	    hello html ~
	body>
html>

标签</h4> <a href="http://img.e-com-net.com/image/info8/38c3f9496f2e45238fccd137c2774617.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/38c3f9496f2e45238fccd137c2774617.jpg" alt="使用HTML语言和CSS开发商业站点_第2张图片" width="650" height="252" style="border:1px solid black;"></a> <h4><meta>标签</h4> <a href="http://img.e-com-net.com/image/info8/ded177de51734b989db8e7058e76a20c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ded177de51734b989db8e7058e76a20c.jpg" alt="使用HTML语言和CSS开发商业站点_第3张图片" width="565" height="283" style="border:1px solid black;"></a> 注：gb2312 包含全部中文字符 utf-8 包含全世界所有国家需要用到的字符 页面编码应与页面文件保存时的编码一致 <h3>1.3 网页基本标签</h3> <h5>标题标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/225c10fa19984a3b8febde526965ec75.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/225c10fa19984a3b8febde526965ec75.jpg" alt="使用HTML语言和CSS开发商业站点_第4张图片" width="495" height="559" style="border:1px solid black;"></a> <h5>段落标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>北京欢迎你</h1> <p>北京欢迎你，有梦想谁都了不起</p> <p>有勇气就会有奇迹</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/1e410d2be6a746559e60cb9b9c2592ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1e410d2be6a746559e60cb9b9c2592ed.jpg" alt="使用HTML语言和CSS开发商业站点_第5张图片" width="536" height="338" style="border:1px solid black;"></a> <h5>换行标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>北京欢迎你</h1> <p> 北京欢迎你，有梦想谁都了不起 <br /> 有勇气就会有奇迹 </p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/f54ee558ae2f4c749395cae6c9d77cda.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f54ee558ae2f4c749395cae6c9d77cda.jpg" alt="使用HTML语言和CSS开发商业站点_第6张图片" width="434" height="319" style="border:1px solid black;"></a> <h5>水平线标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>北京欢迎你</h1> <hr /> <p> 北京欢迎你，有梦想谁都了不起!<br /> 有勇气就会有奇迹。 </p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/ddd5fd037af14b5d9df37fe9f033135b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ddd5fd037af14b5d9df37fe9f033135b.jpg" alt="使用HTML语言和CSS开发商业站点_第7张图片" width="439" height="346" style="border:1px solid black;"></a> <h5>字体样式标签</h5> 加粗：… 或 … 斜体：… 或 … <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <strong>霍世元简介</strong> <p> <em>年龄: </em>24<br /> <em>性别: </em>男<br /> </p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/e93d80f495904476b5398294e5b5396e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e93d80f495904476b5398294e5b5396e.jpg" alt="使用HTML语言和CSS开发商业站点_第8张图片" width="436" height="272" style="border:1px solid black;"></a> <h5>注释和特殊符号</h5> <a href="http://img.e-com-net.com/image/info8/e7b1e05964a544ad9397a4d93e7fb058.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e7b1e05964a544ad9397a4d93e7fb058.jpg" alt="使用HTML语言和CSS开发商业站点_第9张图片" width="650" height="248" style="border:1px solid black;"></a> <h3>1.4 插入图像标签</h3> 常见的图像格式：JPG ,GIF , PNG , BMP <pre><code class="prism language-html"><!doctype html> <html> <head> <title>图像标签</title> <meta charset="UTF-8" /> </head> <body>  <img src="image/hetao.jpg" alt="text" title="哈哈哈" width="300px" height="350px" /> <p>好吃不贵的核桃</p> <p>10元3斤</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/98f60c21558b40e182cd973a6d93e23d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98f60c21558b40e182cd973a6d93e23d.jpg" alt="使用HTML语言和CSS开发商业站点_第10张图片" width="522" height="768" style="border:1px solid black;"></a> <h3>练习</h3> 练习1：使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作自我介绍。 <h3>1.5 超链接标签</h3> <h4>超链接基本用法</h4> <a href="http://img.e-com-net.com/image/info8/4c67f2e0ddd44b8384e3ddec7f2a2547.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4c67f2e0ddd44b8384e3ddec7f2a2547.jpg" alt="使用HTML语言和CSS开发商业站点_第11张图片" width="650" height="124" style="border:1px solid black;"></a> _blank：新建空白页打开 _self：默认样式，更改当前页面的访问路径，不会打开新的页面 <h4>超链接应用场合</h4> <ul> <li>页面间连接</li> </ul> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>页面间链接</title> <meta charset="UTF-8" /> </head> <body> <a href="demo03.html" target="_blank">链接到demo03图像标签案例</a><br/> <a href="demo04.html" target="_self"> <img src="image/hetao.jpg" alt="核桃图片" title="买核桃吗？走过路过不要错过" /> </a> </body> </html> </code></pre> <ul> <li>锚链接</li> </ul> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>锚链接</title> <meta charset="UTF-8" /> </head> <body> <a name="_top">HTML从入门到精通</a> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <a href="#_top">回到顶部</a> <br><br><br><br> </body> </html> </code></pre> <ul> <li>外部链接</li> </ul> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>外部链接</title> <meta charset="UTF-8" /> </head> <body> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="http://www.csdn.com" target="_self">CSDN</a> <a href="mailto:1691655063@qq.com">点击联系我</a> </body> </html> </code></pre> <h3>1.6 行内元素和块元素的特性</h3> 块元素：无论内容多少，该元素独占一行（p、h1-h6 …） 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a，strong，em、img …） <pre><code class="prism language-html"> <!doctype html> <html> <head> <title>行内元素和块元素</title> <meta charset="UTF-8" /> </head> <body> <p>我是P元素</p> <h1>我是标题1</h1> <a href="#">我是超链接a元素</a> <strong>我是strong元素--加粗</strong> <em>我是em元素--斜体</em> </body> </html> </code></pre> <h3>练习</h3> 练习2：超链接 <h2>二、列表、表格与媒体元素</h2> <h3>2.1 列表</h3> 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。 <h4>无序列表</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <ul type="disc"> <li>山西省</li> <li>河北省</li> <li>山东省</li> <li>陕西省</li> <li>......</li> </ul> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/d5db7f18d1964e078700b2d4f2bdb457.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d5db7f18d1964e078700b2d4f2bdb457.jpg" alt="使用HTML语言和CSS开发商业站点_第12张图片" width="364" height="359" style="border:1px solid black;"></a> 一般用于无序类型的列表，如导航，侧边栏新闻、有规律的图文组合模块等 <h4>有序列表</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <ol type="1" start="1"> <li>太原市</li> <li>长治市</li> <li>晋城市</li> <li>运城市</li> <li>......</li> </ol> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c041c42784b847a3b2b076d9e390284d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c041c42784b847a3b2b076d9e390284d.jpg" alt="使用HTML语言和CSS开发商业站点_第13张图片" width="396" height="324" style="border:1px solid black;"></a> 一般用于排序类型的列表，如试卷、问卷选项等 <h4>定义列表</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <dl> <dt>山西省</dt> <dd>太原市</dd> <dd>长治市</dd> <dd>晋城市</dd> <dd>......</dd> <dt>河北省</dt> <dd>石家庄市</dd> <dd>邢台市</dd> <dd>邯郸市</dd> <dd>......</dd> </dl> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/165028d433cc4b4eb2944d8976394b1f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/165028d433cc4b4eb2944d8976394b1f.jpg" alt="使用HTML语言和CSS开发商业站点_第14张图片" width="463" height="474" style="border:1px solid black;"></a> 一般用于一个标题下有一个或多个列表项的情况 <h4>小结</h4> <a href="http://img.e-com-net.com/image/info8/7e96c3ad53b548cfa815cd80a8ebc4a5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e96c3ad53b548cfa815cd80a8ebc4a5.jpg" alt="使用HTML语言和CSS开发商业站点_第15张图片" width="650" height="362" style="border:1px solid black;"></a> <h4>练习</h4> 练习1：热门活动 练习2：制作音乐排行榜 <h3>2.2 表格</h3> <h4>表格基本使用方法</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body>  <table border="1px"> <tr> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> <td> 23 </td> </tr> <tr> <td> 31 </td> <td> 32 </td> <td> 33 </td> </tr> </table> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/4fc55962f8a14c9fb163387282f41336.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fc55962f8a14c9fb163387282f41336.jpg" alt="使用HTML语言和CSS开发商业站点_第16张图片" width="288" height="263" style="border:1px solid black;"></a> <h4>跨行、跨列</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <table border="1px"> <tr> <td colspan="2">11</td>  <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td rowspan="2">23</td>  </tr> <tr> <td>31</td> <td>32</td> </tr> </table> </body> </html> </code></pre> <h4>练习</h4> 练习3：学生成绩表 <h3>2.3 媒体元素</h3> <h4>视频元素</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <video src="video/html.mp4" controls></video> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/09ce52fac1524d429f5ce4053d573d67.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/09ce52fac1524d429f5ce4053d573d67.jpg" alt="使用HTML语言和CSS开发商业站点_第17张图片" width="650" height="427" style="border:1px solid black;"></a> <h4>音频元素</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>音频</title> <meta charset="UTF-8" /> </head> <body>  <audio src="video/music.mp3" controls></audio> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/e54db930a8004a82a4bbc8da23b2cd6a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e54db930a8004a82a4bbc8da23b2cd6a.jpg" alt="使用HTML语言和CSS开发商业站点_第18张图片" width="527" height="257" style="border:1px solid black;"></a> loop属性可以实现视频的循环播放 <h3>2.4 结构元素</h3> 页面结构 <a href="http://img.e-com-net.com/image/info8/aa46eedfe99b4a949303e358c76f2637.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aa46eedfe99b4a949303e358c76f2637.jpg" alt="使用HTML语言和CSS开发商业站点_第19张图片" width="650" height="432" style="border:1px solid black;"></a> 结构元素 <a href="http://img.e-com-net.com/image/info8/1058e52aded1420497d2bf1984263008.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1058e52aded1420497d2bf1984263008.jpg" alt="使用HTML语言和CSS开发商业站点_第20张图片" width="650" height="309" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>布局</title> <meta charset="UTF-8" /> <style> header, section, footer { height: 200px; border: 1px solid red; } </style> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体部分</h2> </section> <footer> <h2>网页底部</h2> </footer> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/d305520f9b7d4bd39517452cab0a991a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d305520f9b7d4bd39517452cab0a991a.jpg" alt="使用HTML语言和CSS开发商业站点_第21张图片" width="650" height="818" style="border:1px solid black;"></a> <h3>2.5 内联框架的使用</h3> <h4>iframe用法</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>iframe</title> <meta charset="UTF-8" /> </head> <body>  <iframe src="demo04.html" name="mainFrame"></iframe> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/88833bad00fa4cef832b45e5d8badbba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/88833bad00fa4cef832b45e5d8badbba.jpg" alt="使用HTML语言和CSS开发商业站点_第22张图片" width="650" height="459" style="border:1px solid black;"></a> 设置src的属性值为 http://www.bdqn.cn 在这个页面中也可以打开一个线上的网页 <h4><iframe>属性实现页面间的相互跳转</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>iframe</title> <meta charset="UTF-8" /> </head> <body>  <a href="demo04.html" target="mainFrame">下边显示demo04页面</a> <br /> <a href="demo03.html" target="mainFrame">下边显示demo03页面</a> <br /> <a href="demo02.html" target="mainFrame">下边显示demo02页面</a> <br />  <iframe src="demo01.html" name="mainFrame"></iframe> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/1c222cf8c73844d09fb9ed881e7941cf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c222cf8c73844d09fb9ed881e7941cf.jpg" alt="使用HTML语言和CSS开发商业站点_第23张图片" width="640" height="501" style="border:1px solid black;"></a> <h2>三、表单（重点）</h2> <h3>3.1 常用的表单元素</h3> <h4>案例1</h4> 表单基本结构 <pre><code class="prism language-html"><!doctype html> <html> <head> <title>表单</title> <meta charset="UTF-8" /> </head> <body>  <form method="get" action="#">  名字：<input name="name" type="text" value="霍" /> <br /> 密码：<input name="pass" type="password"> <br /> <input type="submit" name="Button" value="提交" /> <input type="reset" name="Reset" value="重填" /> <br /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/6675c80483854d6abed24479d6042a3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6675c80483854d6abed24479d6042a3f.jpg" alt="使用HTML语言和CSS开发商业站点_第24张图片" width="610" height="311" style="border:1px solid black;"></a> <h4>input 常用属性说明</h4> <a href="http://img.e-com-net.com/image/info8/300d98fe3d524bd592fd719690d47f8c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/300d98fe3d524bd592fd719690d47f8c.jpg" alt="使用HTML语言和CSS开发商业站点_第25张图片" width="650" height="336" style="border:1px solid black;"></a> <h4>案例2</h4> 常用属性与属性值 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="post" action="#"> <h3>注册表单</h3>  用户名：<input type="text" name="user" size="8" maxlength="8" /> <br /> 密码：<input type="password" name="pwd" /> <br />  爱好： <input type="checkbox" name="like" value="1" />篮球 <input type="checkbox" name="like" value="2" />足球 <input type="checkbox" name="like" value="3" checked />排球 <br />  性别：  <input type="radio" name="sex" value="1" checked />男 <input type="radio" name="sex" value="2" />女 <br />  城市: <select name="city"> <option value="1">北京</option> <option value="2" selected>上海</option> </select> <br />  自我描述： <textarea name="text" cols="20" rows="3">文本内容</textarea> <br />  头像: <input type="file" name="path" /> <br />  <input type="submit" name="butSubmit" value="提交" />  <input type="reset" name="butReset" value="重填" />  <input type="button" name="butButton" value="按钮" /> <br />  <input type="image" src="image/login.gif" /> <br /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/eb669c9976194d6d9483651f9961ea3a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb669c9976194d6d9483651f9961ea3a.jpg" alt="使用HTML语言和CSS开发商业站点_第26张图片" width="650" height="855" style="border:1px solid black;"></a> <h4>案例3</h4> 输入框格式校验 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get" action="#">  邮箱：<input type="email" name="email" /> <br />  输入网址：<input type="url" name="userUrl" /> <br />  输入数字：<input type="number" name="num" min="0" max="100" step="10"> <br />  输入数字：<input type="range" name="num" min="0" max="100" step="10"> <br />  输入关键词：<input type="search" name="sousou" /> <br /> <input type="submit" value="提交" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/9526133bbe2242e1b8d947355b17e2ec.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9526133bbe2242e1b8d947355b17e2ec.jpg" alt="使用HTML语言和CSS开发商业站点_第27张图片" width="497" height="352" style="border:1px solid black;"></a> <h4>练习</h4> 练习1：注册表单 <h3>3.2 表单的高级应用</h3> <h4>案例4</h4> 隐藏域；只读；禁用相关属性 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get">  <input type="hidden" value="666" name="userid" /> <br />  <input name="name" type="text" value="张三" readonly /> <br />  <input type="button" disabled value="保存" /> <br /> <input type="submit" value="提交" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/973deea2dc4e47babad7c96f861cc735.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/973deea2dc4e47babad7c96f861cc735.jpg" alt="使用HTML语言和CSS开发商业站点_第28张图片" width="513" height="308" style="border:1px solid black;"></a> <h4>案例5</h4> 表单元素的标注 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get">  性别： <label for="man">男</label> <input type="radio" name="sex" id="man" value="1" /> <label for="woman">女</label> <input type="radio" name="sex" id="woman" value="0" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c0531c6432d44d958ce798c65ee07067.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c0531c6432d44d958ce798c65ee07067.jpg" alt="使用HTML语言和CSS开发商业站点_第29张图片" width="571" height="212" style="border:1px solid black;"></a> <h4>练习</h4> 练习2要求： <ol> <li>邮箱文本框中默认文本为“student@bdqn.cn “ ，且文本框不可修改</li> <li>单击文字“电子邮箱”、“设置密码”、“真实姓名”、“验证”时鼠标的光标焦点移动到对应的文本框里</li> <li>单击“男”选中其对应的单选按钮，单击“女”选中其对应的单选按钮</li> <li>选择身份的下拉列表框被禁止使用</li> </ol> <h3>3.3 表单的初级验证</h3> 表单验证的好处：减轻服务器的压力；保证数据的可行性和安全性； <h4>案例6</h4> placeholder ；required ； pattern 用法 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get">  搜索：<input type="text" name="name" placeholder="请输入要搜索的关键字" /><br>  <input type="text" name="username" required /> <br>  手机号: <input type="text" name="phone" required pattern="1[3578]\d{9}" /><br> <input type="submit" value="提交" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/4fe729adb4dd4656a195a90c6a4bc689.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fe729adb4dd4656a195a90c6a4bc689.jpg" alt="使用HTML语言和CSS开发商业站点_第30张图片" width="494" height="274" style="border:1px solid black;"></a> <h2>四、初识CSS3（重点）</h2> <h3>4.1 CSS概念</h3> <h4>简介</h4> 层叠样式表: 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 <table> <tbody> <tr> <td>中文名：层叠样式表</td> <td>外语缩写：CSS（也作文件扩展名）</td> </tr> <tr> <td>外文名： Cascading Style Sheets</td> <td>其他称呼：级联样式表</td> </tr> </tbody> </table> <h4>CSS发展史</h4> <a href="http://img.e-com-net.com/image/info8/c91d53bcdc434a48adcecd0e3d6fbf35.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c91d53bcdc434a48adcecd0e3d6fbf35.jpg" alt="使用HTML语言和CSS开发商业站点_第31张图片" width="650" height="306" style="border:1px solid black;"></a> <h4>css优势</h4> <ul> <li>内容与表现分离</li> <li>网页的表现统一，容易修改</li> <li>丰富的样式，使得页面布局更加灵活</li> <li>减少网页的代码量，增加网页的浏览速度，节省网络带宽</li> <li>运用独立于页面的CSS，有利于网页被搜索引擎收录</li> </ul> <h3>4.2 CSS语法规则</h3> <h4>CSS基本语法结构</h4> <a href="http://img.e-com-net.com/image/info8/6220d2a52ade4761a4e35c45edab3c3d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6220d2a52ade4761a4e35c45edab3c3d.jpg" alt="使用HTML语言和CSS开发商业站点_第32张图片" width="650" height="319" style="border:1px solid black;"></a> CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上 <h4>style标签</h4> <a href="http://img.e-com-net.com/image/info8/360cf3bcd2d94503b748e05ae7b951a1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/360cf3bcd2d94503b748e05ae7b951a1.jpg" alt="使用HTML语言和CSS开发商业站点_第33张图片" width="650" height="354" style="border:1px solid black;"></a> <h3>4.3 HTML中引入CSS样式</h3> <h4>行内样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> </head> <body> <h1 style="color: red;">style属性的应用</h1> <p style="font-size: 14px; color:green">style行内样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/3900b711d83a40ca82795bbe0f0c003d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3900b711d83a40ca82795bbe0f0c003d.jpg" alt="使用HTML语言和CSS开发商业站点_第34张图片" width="545" height="332" style="border:1px solid black;"></a> <h4>内部样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <style> h1 { color: red; } p { font-size: 14px; color: green } </style> </head> <body> <h1>style标签的应用</h1> <p>style内部样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/872183634a304f8488fc4ecb4f105dd2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/872183634a304f8488fc4ecb4f105dd2.jpg" alt="使用HTML语言和CSS开发商业站点_第35张图片" width="527" height="314" style="border:1px solid black;"></a> 优点：方便在同页面中修改样式 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 <h4>外部样式</h4> 链接外部样式 <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>link标签引入css样式</h1> <p>外部样式--链接外部样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c2f5e62a01c841839211c42fed20082c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c2f5e62a01c841839211c42fed20082c.jpg" alt="使用HTML语言和CSS开发商业站点_第36张图片" width="571" height="314" style="border:1px solid black;"></a> 导入外部样式表 <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <h1>style标签引入css样式</h1> <p>外部样式--导入外部样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/3a47dfbf5d354a328c3a07832514b0db.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3a47dfbf5d354a328c3a07832514b0db.jpg" alt="使用HTML语言和CSS开发商业站点_第37张图片" width="650" height="310" style="border:1px solid black;"></a> 链接式与导入式的区别 <ul> <li> 标签属于XHTML，@import是属于CSS2.1 </li> <li>使用链接的CSS文件先加载到网页当中，再进行编译显示</li> <li>使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中</li> <li>@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的</li> </ul> <h4>3种样式的优先级</h4> 就近原则行内样式>内部样式表/外部样式表（谁后加载使用谁） <h3>4.4 CSS3的选择器</h3> <h4>基本选择器</h4> 标签选择器；类选择器； ID选择器； <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <style type="text/css"> /* 标签选择器：h1 p img a ..... 直接应用于HTML标签/ h2 { color: blue; } / 类选择器可在页面中多次使用/ .name { color: aqua; } / id选择器同一个页面中只能使用一次（自觉遵守）/ #gc { color: yellow; } </style> </head> <body> <h2>童话</h2> <h3 class="name">光良</h3> <p id="gc">我愿变成童话里你爱的那个天使</p> <p>张开双手变成翅膀守护你</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/708200e1d69a45a8b6688972f36d48aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/708200e1d69a45a8b6688972f36d48aa.jpg" alt="使用HTML语言和CSS开发商业站点_第38张图片" width="535" height="428" style="border:1px solid black;"></a> 优先级：ID选择器>类选择器>标签选择器 <h5>练习</h5> 练习一要求： <ul> <li>制作影视简介，标题使用<h2>标签，其他文本均放在段落标签中，超链接使用<a>，图片使用<img></li> <li>使用外部引入CSS样式的方式为网页设置样式</li> <li>使用标签选择器设置标题h2的字体颜色为#003580</li> <li>使用ID选择器设置p段落的文字，字体为14px，颜色为#000033</li> <li>使用类选择器设置p段落文字中的不同颜色值，从左到右颜色值分别为#F00、#1F87CC、#FAA53B、#0D7114</li> <li>使用类选择器设置第一张图片的宽度为100px，高度为160px</li> <li>使用类选择器设置最后两张图片的宽度为200px，高度为130px <a href="http://img.e-com-net.com/image/info8/957663e84f084a328bdbfca362e6be3d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/957663e84f084a328bdbfca362e6be3d.jpg" alt="使用HTML语言和CSS开发商业站点_第39张图片" width="650" height="562" style="border:1px solid black;"></a></li> </ul> <h4>高级选择器</h4> <h5>层次选择器</h5> 后代选择器；子选择器；相邻兄弟选择器；通用兄弟选择器 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>层次选择器</title> <style type="text/css"> p, ul { border: 1px solid red; /边框属性/ } /后代选择器/ / body p { background: red; } / /子选择器/ / body>p { background: pink; } / /相邻兄弟选择器只有一个，相邻（向下）/ / .active+p { background: green; } / / 通用兄弟选择器 / / .active~p { background: yellow; } / </style> </head> <body> <p class="active">1</p> <p>2</p> <p>3</p> <ul class="c4"> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> </body> </html> </code></pre> <h5>结构伪类选择器</h5> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>结构伪类选择器</title> <style> /ul的第一个子元素/ / ul li:first-child { background: red; } / /ul的最后一个子元素/ / ul li:last-child { background: green; } / / 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效顺序/ / p:nth-child(1) { background: yellow; } / /父元素里第2个类型为p的元素类型/ / p:nth-of-type(2) { background: blue; } / </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html> </code></pre> 使用F:nth-child(n)和F:nth-of-type(n)的关键点 <ul> <li>F:nth-child(n)在父级里从一个元素开始查找，不分类型</li> <li>F:nth-of-type(n)在父级里先看类型，再看位置</li> </ul> <h5>属性选择器</h5> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> .demo a { float: left; display: block; height: 50px; width: 50px; border-radius: 10px; text-align: center; background: #aac; color: blue; font: bold 20px/50px Arial; margin-right: 5px; text-decoration: none; margin: 5px; } / 存在属性id的元素 / / a[id] { background: yellow; } / / 属性id=first的元素 / / a[id=first] { background: red; } / / 属性class="links"的元素 / / a[class="links"] { background: red; } / / 属性class里包含links字符串的元素 / / a[class=links] { background: red; } / /* 属性href里以http开头的元素 / / a[href^=http] { background: red; } / / 属性href里以png结尾的元素 / / a[href$=png] { background: red; } / </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links active item" title="test website" target="_blank">2</a> <a href="sites/file/test.html" class="links item">3</a> <a href="sites/file/test.png" class="links item"> 4</a> <a href="sites/file/image.jpg" class="links item">5</a> <a href="efc" class="links item" title="website link">6</a> <a href="/a.pdf" class="links item">7</a> <a href="/abc.pdf" class="links item">8</a> <a href="abcdef.doc" class="links">9</a> <a href="abd.doc" class="linksitem last" id="last">10</a> </p> </body> </html> </code></pre> = 绝对等于 =包含这个元素 ^=以这个开头 $=以这个结尾 <h2>五、CSS3美化网页元素（重点）</h2> css优点： <ul> <li>有效的传递页面信息</li> <li>使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户</li> <li>可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容</li> <li>具有良好的用户体验</li> </ul> <h3>5.1 编辑网页文本</h3> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 字体样式</title> <meta charset="UTF-8" /> <style> #title1 { color: aqua; font-size: 20px; } </style> </head> <body>  我喜欢学习，<span id="title1">学习使我快乐</span> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/e98264ea628b486e9ebbb6a557ceb8f3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e98264ea628b486e9ebbb6a557ceb8f3.jpg" alt="使用HTML语言和CSS开发商业站点_第40张图片" width="568" height="225" style="border:1px solid black;"></a> <h4>字体样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 字体样式</title> <meta charset="UTF-8" /> <style> body { /* 字体类型 Times New Roman/ font-family: "Times New Roman", "楷体"; } h1 { / 字体大小 px em rem / font-size: 30px; } .p1 { / 字体粗细 bold(加粗) bolder(更粗) lighter(更细) normal(默认标准)/ font-weight: bold; / 字体风格 italic(斜体) normal(默认正常) oblique(倾斜) / font-style: oblique; } h3 { / 斜体加粗字号字体 / font: italic bold 20px "微软雅黑"; } </style> </head> <body> <h1>京东商城――全部商品分类</h1> <h3>图书、音像、电子书刊</h3> <p class="p1"> 电子书刊电子书网络原创数字杂志多媒体图书目音像音乐影视教育音像经管励志经济金融与投资管理励志与成功 </p> </body> </html> </code></pre> <h4>文本样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 文本样式</title> <meta charset="UTF-8" /> <style> body { / 文本颜色十六进制方法表示颜色（红绿蓝）/ color: blue; color: #EEFF66; / 控制alpha透明度的参数值0-1 越小越模糊 / color: rgba(0, 0, 255, 0.5); } h1 { / 元素水平对齐方式 left right center justify(两端对齐)/ text-align: right; } .p1 { / 首行文本缩进 em px / text-indent: 20px; / 文本行高 px / line-height: 25px; / 文本装饰 none(默认) underline(下划线) overline(上划线) / text-decoration: underline; } img, #align { / 垂直对齐方式 middle(中) top(上) bootom(下) / vertical-align: middle; } h3 { / text-shadow: 阴影颜色 x轴水平位移量 y轴垂直位移量模糊半径 / text-shadow: aqua 10px 10px 10px; } </style> </head> <body> <h1>京东商城――全部商品分类</h1> <h3>图书、音像、电子书刊</h3> <p class="p1"> 电子书刊电子书网络原创数字杂志多媒体图书目音像音乐影视教育音像经管励志经济金融与投资管理励志与成功 </p> <img src="image/icon.gif" /> <span id="align"> 图片与文本垂直对齐方式 </span> </body> </html> </code></pre> <h4>练习</h4> 练习一： <ul> <li>使用外部样式表创建页面样式（链接式引用）</li> <li>标题 18px 、楷体、加粗显示</li> <li>正文 12px 、行高 20px 、英文字体：Times New Roman 或 Times 中文字体：宋体</li> <li>序号颜色为红色 <a href="http://img.e-com-net.com/image/info8/d4861742d39e426298d6378888f8775a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d4861742d39e426298d6378888f8775a.jpg" alt="使用HTML语言和CSS开发商业站点_第41张图片" width="650" height="338" style="border:1px solid black;"></a></li> </ul> 练习二： <ul> <li>使用外部样式表创建页面样式</li> <li>标题行距40px，加粗显示</li> <li>正文大小12px，行距20px</li> <li>图片与文本居中对齐</li> <li>标题字体添加文字阴影</li> <li>设置一级标题水平居中对齐 <a href="http://img.e-com-net.com/image/info8/5bec13842447402d972d18af20dc2a50.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5bec13842447402d972d18af20dc2a50.jpg" alt="使用HTML语言和CSS开发商业站点_第42张图片" width="650" height="445" style="border:1px solid black;"></a></li> </ul> <h3>5.2 超链接伪类</h3> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 超链接伪类 </title> <meta charset="UTF-8" /> <style> / 未单击访问时超链接样式 / a:link { color: red; } / 单击访问后超链接样式 / a:visited { color: yellow; } / 鼠标悬浮其上的超链接样式 / a:hover { color: black; } / 鼠标单击未释放的超链接样式 / a:active { color: aqua; } </style> </head> <body> <a href="http://www.baidu.com" target="_blank"> 百度 </a> </body> </html> </code></pre> <h3>5.3 列表list-style</h3> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 项目符号 </title> <meta charset="UTF-8" /> <style> li { / list-style-type 设置项目符号类型 disc：默认实心圆 circle：空心圆 square：方块 none：没有 / list-style-type: circle; } </style> </head> <body> <h3>喜欢的歌手</h3> <ul> <li>薛之谦</li> <li>周杰伦</li> <li>邓紫棋</li> </ul> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/09cddf25aa1145e68d26b9752cb36642.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/09cddf25aa1145e68d26b9752cb36642.jpg" alt="使用HTML语言和CSS开发商业站点_第43张图片" width="561" height="351" style="border:1px solid black;"></a> <h3>5.3 背景样式</h3> <h4>背景颜色</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 背景颜色 </title> <meta charset="UTF-8" /> <style> li { list-style-type: circle; } div { width: 120px; / 背景颜色 / background-color: aqua; } h3 { width: 120px; background-color: salmon; } </style> </head> <body> <div> <h3>喜欢的歌手</h3> <ul> <li>薛之谦</li> <li>周杰伦</li> <li>邓紫棋</li> </ul> </div> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/5484d5ebe2b6476695be012cddc902b2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5484d5ebe2b6476695be012cddc902b2.jpg" alt="使用HTML语言和CSS开发商业站点_第44张图片" width="528" height="424" style="border:1px solid black;"></a> <h4>背景图像</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 背景图像 </title> <meta charset="UTF-8" /> <style> div { width: 400px; height: 400px; border: 1px solid red; / 设置背景图像 / background-image: url("image/1.jpg"); } .div1 { / 背景图像重复方式 repeat(沿水平垂直两个方向平铺) no-repeat(不平铺) repeat-x(只沿水平方向平铺) repeat-y(只沿垂直方向平铺) / background-repeat: no-repeat; / 背景定位 background-position / / 1. s y 坐标表示位置单位px x(水平) y(垂直) / / background-position: 10px 30px; / / 2. 百分比表示位置 / / background-position: 10% 50%; / / 3.x y 方向关键词水平(left center right) 垂直(top center bottom) / / background-position: right bottom; / } .div2 { / background: 背景颜色背景图像图像位置是否重复显示/ background: #c00 url(image/icon.gif) left center no-repeat; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html> </code></pre> <h4>背景尺寸</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景尺寸</title> <style> div { width: 200px; height: 130px; border: 1px solid red; background: url("image/1.jpg") no-repeat; / background-size(背景图片尺寸设置) auto(默认保持图片原样)/ / background-size: auto; / / background-size: 120px 60px; / / background-size: 120px; / / background-size: 50% 80%; / / cover(整个背景图片放大填充了整个元素) / / background-size: cover; / / contain 保持原图像尺寸比例，最大限度显示整张图片 / background-size: contain; } </style> </head> <body> <div></div> </body> </html> </code></pre> <h3>5.4 CSS3渐变</h3> <h4>线性渐变</h4> 颜色沿着一条直线过渡：从左到右，从右到左，从上到下等 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3线性渐变</title> <style> div { width: 100px; height: 100px; /to top/ background: linear-gradient(to top, orange, blue); / background: -webkit-linear-gradient(to top, orange, blue); / /-webkit-/ /to bottom/ / background: linear-gradient(to bottom, orange, blue); / /background: -webkit-linear-gradient(to bottom, orange, blue);/ /to left/ / background: linear-gradient(to left, orange, blue); / /background: -webkit-linear-gradient(to left, orange, blue);/ /to right/ / background: linear-gradient(to right, orange, blue); / /background: -webkit-linear-gradient(to right, orange, blue);/ /to top left/ / background: linear-gradient(to top left, orange, blue); / /background: -webkit-linear-gradient(to top left, orange, blue);/ /to top right/ / background: linear-gradient(to top right, orange, blue); / /background: -webkit-linear-gradient(to top right, orange, blue);/ /to bottom left/ / background: linear-gradient(to bottom left, orange, blue); / /background: -webkit-linear-gradient(to bottom left, orange, blue);/ /to bottom right/ / background: linear-gradient(to bottom right, orange, blue); / /background: -webkit-linear-gradient(to bottom right, orange, blue);/ } </style> </head> <body> <div></div> </body> </html> </code></pre> <h4>径向渐变</h4> 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合 <h3>练习</h3> 练习三： <ul> <li>页面总宽度300px</li> <li>一级题字体大小为18px、白色、加粗显示、行距为35px，背景使用线性渐变</li> <li>二级标题字体大小为14px、加粗显示、行距为30px，背景使用线性渐变、二级标题超链接字体无下划线、鼠标移入出现下划线</li> <li>内容字体大小为12px、行距为26px、超链接字体颜色为灰色、无下划线、鼠标移入时颜色为棕红色并且显示下划线</li> </ul> <a href="http://img.e-com-net.com/image/info8/e61f82f5b6134b619ebe5a7cafc89af0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e61f82f5b6134b619ebe5a7cafc89af0.jpg" alt="使用HTML语言和CSS开发商业站点_第45张图片" width="511" height="646" style="border:1px solid black;"></a> 练习四： <ul> <li>设置页面内容宽度260px</li> <li>设置页面背景渐变颜色（#F9FBCB #F8F8F3）</li> <li>设置标题：16px、缩进1字符、行距30px、字体颜色、绿色背景#518700、设置背景图像</li> <li>无序列表去除项目符号、12px、行距28px、字体颜色(#1a66b3)、缩进2字符</li> <li>超链接无下划线，鼠标悬浮至超链接时显示下划线</li> <li>利用结构伪类选择器设置列表图标</li> </ul> <a href="http://img.e-com-net.com/image/info8/7ec86f02593248d0a6004de3744dfdb8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7ec86f02593248d0a6004de3744dfdb8.jpg" alt="使用HTML语言和CSS开发商业站点_第46张图片" width="552" height="712" style="border:1px solid black;"></a> <h2>六、盒子模型（重难点）</h2> <h3>6.1 盒子模型的使用</h3> <a href="http://img.e-com-net.com/image/info8/a368c09481b04b05a10deedc98632d18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a368c09481b04b05a10deedc98632d18.jpg" alt="使用HTML语言和CSS开发商业站点_第47张图片" width="650" height="556" style="border:1px solid black;"></a> <h4>边框</h4> border-color(颜色） <a href="http://img.e-com-net.com/image/info8/d38361b9d93149038bd39f5cd608ae85.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d38361b9d93149038bd39f5cd608ae85.jpg" alt="使用HTML语言和CSS开发商业站点_第48张图片" width="650" height="353" style="border:1px solid black;"></a> border-width(边框宽度)：px border-style(样式)：solid(实线)；dashed(虚线)；double(双线); dotted(圆点虚线); hidden(隐藏); none(无边框); border：粗细样式颜色 <h4>内边距(padding)</h4> <h4>外边距(margin)</h4> margin :0 margin:0 auto; 网页居中对齐 margin: 0 1px 上下左右; margin：0 1px 2px 3px 上右下左 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框</title> <style> .box{ width: 298px; / 盒子宽度298px/ / border：粗细样式颜色/ border:1px solid #3a6587; / 设置盒子边框/ margin:0 auto; / 网页元素居中对齐 / / margin:0 auto; 居中要求：块元素，块元素有固定的宽度 / } h2{ font-size:16px; background-color:#3a6587; height:35px; line-height:35px; color:#FFF; / margin :0 margin:0 auto; 网页元素居中对齐 margin: 0 1px 上下左右; margin：0 1px 2px 3px 上右下左 / } form{ background: #c8ece3; } div:nth-of-type(1)>input{ border: 3px solid black; / 第一个div下面的input元素设置边框3px 实线黑色/ } div:nth-of-type(2)>input{ border: 1px dashed red; / 第二个div下面的input元素设置边框1px 虚线红色/ } div:nth-of-type(3)>input{ border: 2px dotted red; / 第三个div下面的input元素设置边框2px 点线红色/ } </style> </head> <body> <div class="box"> <h2>会员登录</h2> <form action="#"> <div> <strong class="name">姓名：</strong> <input type="text"/> </div> <div> <strong class="name">邮箱：</strong> <input type="text"/> </div> <div> <strong class="name">电话：</strong> <input type="text"/> </div> </form> </div> </body> </html> </code></pre> <h4>盒子总尺寸</h4> 元素大小=border+padding+margin+内容宽度 <h3>6.2 圆角边框</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圆角边框</title> <style> div{ width: 100px; height: 100px; border: 1px solid red; / 设置圆角边框四个属性值按顺时针排列 / / border-radius: 20px 10px 50px 30px; / / 椭圆水平/垂直 / / border-radius: 10px / 30px; / / 圆圆角=半径 / / border-radius: 50%; / / 半圆元素的宽度是高度的2倍，而且圆角半径为元素的高度值 / / border-radius: 100px 100px 0 0; / / 扇形元素宽度、高度、圆角半径相同圆角取值位置不同 / / border-radius: 100px 0 0 0; / } </style> </head> <body> <div></div> </body> </html> </code></pre> <h3>6.3 盒子阴影</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阴影</title> <style> div{ width: 100px; height: 100px; border: 10px solid red; / 阴影：类型(内阴影) x轴位移 y轴位移模糊半径颜色 / box-shadow: inset 10px 10px 50px yellow; / 不写类型为外阴影 / } </style> </head> <body> <div></div> </body> </html> </code></pre> <h2>七、浮动（重难点）</h2> <h3>7.1 标准文档流</h3> 指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。 标准文档流组成 <ul> <li>块级元素：独占一行 h1-h6 ; p ; div ; 列表</li> <li>行内元素：不独占一行 span； a ; img ; strong … 行内元素可以被包含在块级元素中。</li> </ul> <h3>7.2 display属性</h3> 可以改变块级元素与行级元素<a href="http://img.e-com-net.com/image/info8/b7218343566c4da0982ca03ef161fc97.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b7218343566c4da0982ca03ef161fc97.jpg" alt="使用HTML语言和CSS开发商业站点_第49张图片" width="650" height="216" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <style> div{ width:100px; height:100px; border:1px solid red; display: inline; / 将div设置为行内元素 / } span{ width:100px; height:100px; border:1px solid red; display:block; / 将span设置为块元素 / } </style> </head> <body> <div> div 块元素 </div> <span> span 行内元素 </span> </body> </html> </code></pre> <h3>7.3 float 属性浮动</h3> <a href="http://img.e-com-net.com/image/info8/b0626d3f30db4459840fc0883cc8a5ca.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b0626d3f30db4459840fc0883cc8a5ca.jpg" alt="使用HTML语言和CSS开发商业站点_第50张图片" width="650" height="184" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <style> div { margin:10px; padding:5px; } #father { border:1px #000 solid; } / float 浮动 left 左浮动 right 右浮动 none 无浮动/ .layer01 { border:1px #F00 dashed; float: right; } .layer02 { border:1px #00F dashed; float: right; } .layer03 { border:1px #060 dashed; float: right; } .layer04 { border:1px #666 dashed; font-size:12px; line-height:23px; float: right; } </style> </head> <body> <div id="father"> <div class="layer01"><img src="image/hd.jpg" alt="前端"/></div> <div class="layer02"><img src="image/qd.jpg" alt="后端"/></div> <div class="layer03"><img src="image/sjk.jpg" alt="数据库"/></div> <div class="layer04"> 浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。 </div> </div> </body> </html> </code></pre> <h3>7.4 解决父级边框塌陷</h3> clear <pre><code class="prism language-html"> / clear:right; 右侧不允许有浮动元素 clear:left; 左侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none;/ </code></pre> 解决方案： <ol> <li>增加父级元素的高度</li> </ol> <pre><code class="prism language-html"> #father { border:1px solid #000; height: 600px; } </code></pre> <ol start="2"> <li>增加一个空的div标签，清除浮动</li> </ol> <pre><code class="prism language-html"><div class="clear"></div> .clear{ clear: both; } </code></pre> <ol start="3"> <li>使用overflow 属性 <a href="http://img.e-com-net.com/image/info8/38a2a7dd20cd4d9c931564459c2a668b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/38a2a7dd20cd4d9c931564459c2a668b.jpg" alt="使用HTML语言和CSS开发商业站点_第51张图片" width="650" height="251" style="border:1px solid black;"></a> 在父级元素中增加一个 overfow: hidden;</li> </ol> <pre><code class="prism language-html"> #father { overflow: hidden; } </code></pre> <ol start="4"> <li>父类添加一个伪类：after （推荐使用）</li> </ol> <pre><code class="prism language-html"> #father:after{ content: ''; display: block; clear: both; } </code></pre> 小结： <ul> <li> 浮动元素后面加空div 简单，空div会造成HTML代码冗余 </li> <li> 设置父元素的高度 简单，元素固定高会降低扩展性 </li> <li> 父级添加overflow属性 简单，下拉列表框的场景不能用 </li> <li> 父级添加伪类after 写法比上面稍微复杂一点，但是没有副作用，推荐使用 </li> </ul> <h3>7.5 display和float对比</h3> <ul> <li>display ：方向不可控制</li> <li>float ：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题</li> </ul> <h2>八、定位网页元素（重难点）</h2> <h3>8.1 定位</h3> position属性 static (默认值，没有定位)；relative (相对定位) ； absolute (绝对定位) ； fixed (固定定位) <h4>相对定位</h4> position: relative; 相对于原来的位置，进行指定的偏移。相对定位的话，它任然在标准文档流中，原来的位置会被保留 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>相对定位</title>  <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; } #first{ border: 1px dashed #b27530; background-color: #a13d30; / 相对定位 / position: relative; top: -20px; / 向上移 / left: 20px; / 向右移 / } #second{ border: 1px dashed #255066; background-color: #255066; } #third{ border: 1px dashed #1c6615; background-color: #1c6699; position: relative; bottom: -10px; / 向下移 / right: 20px; / 向左移 / } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> </code></pre> 练习 <ol> <li>使用 <div>和<a>布局页面</li> <li>每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标移上去时变为蓝色</li> <li>使用相对定位改变每个超链接的位置 <a href="http://img.e-com-net.com/image/info8/02780686b89a4d97a9c3f0fbeeea912a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/02780686b89a4d97a9c3f0fbeeea912a.png" alt="使用HTML语言和CSS开发商业站点_第52张图片" width="508" height="514" style="border:1px solid black;"></a></li> </ol> <h4>绝对定位</h4> <ol> <li>没有父级元素定位的前提下，相对于浏览器定位</li> <li>假设父级元素存在定位，我们通常会相对于父级元素进行偏移</li> <li>在父级元素范围内移动 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留</li> </ol> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>绝对定位</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; / 父级元素相对定位 / position: relative; } #first{ border: 1px dashed #b27530; background-color: #a13d30; } #second{ border: 1px dashed #255066; background-color: #255066; / 绝对定位 / position: absolute; right: 30px; top:-10px; } #third{ border: 1px dashed #1c6615; background-color: #1c6699; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> </code></pre> <h4>固定定位</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>固定定位</title> <style> body{ height: 100px; } / 绝对定位；相对于浏览器 / div:nth-of-type(1){ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; / 固定定位 / position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html> </code></pre> <h3>8.2 z-index</h3> 调整元素定位时重叠层的上下位置 <a href="http://img.e-com-net.com/image/info8/a88f42a0234b430888f6940e85839dce.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a88f42a0234b430888f6940e85839dce.jpg" alt="使用HTML语言和CSS开发商业站点_第53张图片" width="650" height="592" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>z-index</title> <style> #content{ width: 300px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid #000; } ul,li{ padding: 0px; margin: 0px; list-style: none; } / 父级元素相对定位 / #content ul{ position: relative; } .tipText, .tipBg{ position: absolute; width: 300px; height: 25px; top: 120px; } .tipText{ color: white; / 设置层级数值大的在上面 / z-index: 2; } .tipBg{ background-color: #000; / 设置背景透明度值为0-1 值越小越透明/ / opacity: 0.5; / } </style> </head> <body> <div id="content"> <ul> <li><img src="images/hd.jpg" alt=""/></li> <li class="tipText">html java mysql</li> <li class="tipBg" ></li> <li>2022-11-12</li> <li>yyds_it_huo</li> </ul> </div> </body> </html> </code></pre> <h2>九、CSS3制作网页动画</h2> <h3>浏览器私有前缀</h3> CSS3是CSS(层叠样式表)技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。 <table> <tbody> <tr> <th>内核</th> <th>前缀</th> <th>浏览器</th> </tr> <tr> <td>Gecko内核</td> <td>-moz-</td> <td>火狐</td> </tr> <tr> <td>Webkit内核(谷歌)</td> <td>-webkit-</td> <td>chrom；360；世界之窗等</td> </tr> <tr> <td>Trident内核</td> <td>-ms-</td> <td>IE</td> </tr> <tr> <td>Presto内核</td> <td>-o-</td> <td>opera</td> </tr> </tbody> </table> <pre><code class="prism language-html"> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浏览器私有前缀</title> <style> div{ font-size: 100px; -webkit-text-stroke: 1px #f00; } </style> </head> <body> <div>哈哈哈</div> </body> </html> </code></pre> 在实际使用中通常将所有前缀写一遍后，标准的写在最后 <h3>9.1 CSS3变形</h3> CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 Transform 2D的属性 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>transform 的使用</title> <style> #box1{ width: 200px; height: 200px; margin: 100px; border: 1px solid blue; background-color: aqua; } #box1:hover{ / 水平和垂直方向移动函数：translate/ / 向右移动 / / transform: translate(30px); / / 向右下角移动 / / transform: translate(30px,30px); / / 向上移动 / / transform: translate(0px,-10px); / / 旋转函数：rotate / / 顺时针旋转20度 / / transform: rotate(20deg); / / 缩放函数：scale / / 值为1 大小不变小于1 缩小大于1 放大支持两个参数水平方向和垂直方向的缩放/ / transform: scale(0.5); / / 倾斜函数：skew / / transform: skew(40deg,30deg); */ } </style> </head> <body> <div id="box1"></div> </body> </html> </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1712202583843614720"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html,css,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> good2know <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> universe_01 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950214964396486656.htm" title="js操作样式" target="_blank">js操作样式</a> 郝加升 <div>DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> 小馋喵知识杂货铺 <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> weixin_39607620 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> 峰谷皆平 <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> TIM老师 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> 影子信息 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> 浪子神剑 <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> 疯狂学习GIS <div> 本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> 武昌库里写JAVA <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950178477592342528.htm" title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a> <div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div> </li> <li><a href="/article/1950169524384886784.htm" title="【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）" target="_blank">【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）</a> 笙囧同学 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认</div> </li> <li><a href="/article/1950169526440095744.htm" title="从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战" target="_blank">从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战</a> <div>作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：3251736703@qq.com各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是</div> </li> <li><a href="/article/1950164483057971200.htm" title="14.tornado操作之应用Websocket协议实现聊天室功能" target="_blank">14.tornado操作之应用Websocket协议实现聊天室功能</a> 孤寒者 <a class="tag" taget="_blank" href="/search/Tornado%E6%A1%86%E6%9E%B6%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98/1.htm">Tornado框架从入门到实战</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/tornado/1.htm">tornado</a><a class="tag" taget="_blank" href="/search/%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/1.htm">聊天室功能实现</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> web前端学习指南 <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950143305194991616.htm" title="小架构step系列25：错误码" target="_blank">小架构step系列25：错误码</a> 秋千码途 <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有</div> </li> <li><a href="/article/1950140903616212992.htm" title="Java朴实无华按天计划从入门到实战（强化速战版-66天）" target="_blank">Java朴实无华按天计划从入门到实战（强化速战版-66天）</a> 岫珩 <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%AE%89%E6%8E%92/1.htm">时间安排</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/1.htm">学习计划</a> <div>致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1</div> </li> <li><a href="/article/1950132204336115712.htm" title="《跨域资源共享CORS的深层逻辑与前端实践精要》" target="_blank">《跨域资源共享CORS的深层逻辑与前端实践精要》</a> <div>不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了</div> </li> <li><a href="/article/1950131321980383232.htm" title="深入了解 Kubernetes（k8s）：从概念到实践" target="_blank">深入了解 Kubernetes（k8s）：从概念到实践</a> <div>目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带</div> </li> <li><a href="/article/1950130722157162496.htm" title="移动端适配rem方案" target="_blank">移动端适配rem方案</a> 简单的码农 <div>1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</a> 二倍速播放 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950127794931429376.htm" title="redis反弹shell时kali无法接收回弹的解决方法" target="_blank">redis反弹shell时kali无法接收回弹的解决方法</a> 显哥无敌 <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta</div> </li> <li><a href="/article/1950121289456873472.htm" title="native.js设置可缩放的webview并隐藏缩放控件" target="_blank">native.js设置可缩放的webview并隐藏缩放控件</a> Nanayai <div>需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala</div> </li> <li><a href="/article/1950119224630374400.htm" title="大厂都在用的前端缓存策略，你掌握了吗？" target="_blank">大厂都在用的前端缓存策略，你掌握了吗？</a> AI架构全栈开发实战笔记 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文</div> </li> <li><a href="/article/1950117078799282176.htm" title="Redis反弹Shell" target="_blank">Redis反弹Shell</a> 波吉爱睡觉 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%23%E6%9C%AA%E6%8E%88%E6%9D%83%E8%AE%BF%E9%97%AE%E6%BC%8F%E6%B4%9E/1.htm">#未授权访问漏洞</a><a class="tag" taget="_blank" href="/search/%23SSRF/1.htm">#SSRF</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a> <div>这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell</div> </li> <li><a href="/article/1950115062781898752.htm" title="26. 什么是雪碧图，作用和原理了解吗" target="_blank">26. 什么是雪碧图，作用和原理了解吗</a> yqcoder <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div> </li> <li><a href="/article/1950112039502409728.htm" title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a> ai <div>本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</div> </li> <li><a href="/article/40.htm" title="java线程Thread和Runnable区别和联系" target="_blank">java线程Thread和Runnable区别和联系</a> zx_code <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a> <div>我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(</div> </li> <li><a href="/article/167.htm" title="【转】JSON与XML的区别比较" target="_blank">【转】JSON与XML的区别比较</a> 丁_新 <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标</div> </li> <li><a href="/article/294.htm" title="c++ 实现五种基础的排序算法" target="_blank">c++ 实现五种基础的排序算法</a> CrazyMizzz <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>#include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排</div> </li> <li><a href="/article/421.htm" title="我的软件" target="_blank">我的软件</a> 麦田的设计者 <a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E8%BD%AF%E4%BB%B6/1.htm">我的软件</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E4%B9%90%E7%B1%BB/1.htm">音乐类</a><a class="tag" taget="_blank" href="/search/%E5%A8%B1%E4%B9%90/1.htm">娱乐</a><a class="tag" taget="_blank" href="/search/%E6%94%BE%E6%9D%BE/1.htm">放松</a> <div> 这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、</div> </li> <li><a href="/article/548.htm" title="linux awk命令详解" target="_blank">linux awk命令详解</a> 被触发 <a class="tag" taget="_blank" href="/search/linux+awk/1.htm">linux awk</a> <div>awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val</div> </li> <li><a href="/article/675.htm" title="各种语言比较" target="_blank">各种语言比较</a> _wy_ <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a> <div> Java Ruby PHP 擅长领域 </div> </li> <li><a href="/article/802.htm" title="oracle 中数据类型为clob的编辑" target="_blank">oracle 中数据类型为clob的编辑</a> 知了ing <a class="tag" taget="_blank" href="/search/oracle+clob/1.htm">oracle clob</a> <div>public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db</div> </li> <li><a href="/article/929.htm" title="分布式服务框架 Zookeeper -- 管理分布式环境中的数据" target="_blank">分布式服务框架 Zookeeper -- 管理分布式环境中的数据</a> 矮蛋蛋 <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两</div> </li> <li><a href="/article/1056.htm" title="tomcat数据源" target="_blank">tomcat数据源</a> alafqq <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。没有使用JNDI时我用要这样连接数据库： 03. Class.forName("com.mysql.jdbc.Driver"); 04. conn</div> </li> <li><a href="/article/1183.htm" title="遍历的方法" target="_blank">遍历的方法</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E9%81%8D%E5%8E%86/1.htm">遍历</a> <div> 遍历在java的泛</div> </li> <li><a href="/article/1310.htm" title="linux查看硬件信息的命令" target="_blank">linux查看硬件信息的命令</a> bijian1013 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux查看硬件信息的命令一.查看CPU： cat /proc/cpuinfo 二.查看内存： free 三.查看硬盘： df linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能</div> </li> <li><a href="/article/1437.htm" title="java常见的ClassNotFoundException" target="_blank">java常见的ClassNotFoundException</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory 添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization </div> </li> <li><a href="/article/1564.htm" title="【Gson五】日期对象的序列化和反序列化" target="_blank">【Gson五】日期对象的序列化和反序列化</a> bit1129 <a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">反序列化</a> <div>对日期类型的数据进行序列化和反序列化时，需要考虑如下问题： 1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals 默认序列化和反序列化 import com</div> </li> <li><a href="/article/1691.htm" title="【Spark八十六】Spark Streaming之DStream vs. InputDStream" target="_blank">【Spark八十六】Spark Streaming之DStream vs. InputDStream</a> bit1129 <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div> 1. DStream的类说明文档： /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st</div> </li> <li><a href="/article/1818.htm" title="通过nginx获取header信息" target="_blank">通过nginx获取header信息</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+header/1.htm">nginx header</a> <div>1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") { set $all_cookie $1; } 变量$all_cookie就获得了cookie的值，可以用于运算了 </div> </li> <li><a href="/article/1945.htm" title="java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999" target="_blank">java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串</div> </li> <li><a href="/article/2072.htm" title="Netty源码学习-ReplayingDecoder" target="_blank">Netty源码学习-ReplayingDecoder</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH</div> </li> <li><a href="/article/2199.htm" title="js特殊字符过滤" target="_blank">js特殊字符过滤</a> cngolon <a class="tag" taget="_blank" href="/search/js%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6/1.htm">js特殊字符</a><a class="tag" taget="_blank" href="/search/js%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E8%BF%87%E6%BB%A4/1.htm">js特殊字符过滤</a> <div>1.js中用正则表达式过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) { var pattern = new RegExp("[`~!@#$^&()=|{}':;',\\[\\].<>/?~！@#￥……&（）——|{}【】‘；：”“'。，、？]"</div> </li> <li><a href="/article/2326.htm" title="hibernate使用sql查询" target="_blank">hibernate使用sql查询</a> ctrain <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa</div> </li> <li><a href="/article/2453.htm" title="linux shell脚本中切换用户执行命令方法" target="_blank">linux shell脚本中切换用户执行命令方法</a> daizj <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4/1.htm">命令</a><a class="tag" taget="_blank" href="/search/%E5%88%87%E6%8D%A2%E7%94%A8%E6%88%B7/1.htm">切换用户</a> <div>经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下： 1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" </div> </li> <li><a href="/article/2580.htm" title="好的代码里只要一个 return 语句" target="_blank">好的代码里只要一个 return 语句</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/return/1.htm">return</a> <div>别再这样写了：public boolean foo() { if (true) { return true; } else { return false; </div> </li> <li><a href="/article/2707.htm" title="Android动画效果学习" target="_blank">Android动画效果学习</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>1、透明动画效果方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals</div> </li> <li><a href="/article/2834.htm" title="linux复习笔记之bash shell (4)管道命令" target="_blank">linux复习笔记之bash shell (4)管道命令</a> eksliang <a class="tag" taget="_blank" href="/search/linux%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4%E6%B1%87%E6%80%BB/1.htm">linux管道命令汇总</a><a class="tag" taget="_blank" href="/search/linux%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4/1.htm">linux管道命令</a><a class="tag" taget="_blank" href="/search/linux%E5%B8%B8%E7%94%A8%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4/1.htm">linux常用管道命令</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2105461 bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？答：非常的经典的一句话，记住了，何为管</div> </li> <li><a href="/article/2961.htm" title="Android系统中自定义按键的短按、双击、长按事件" target="_blank">Android系统中自定义按键的短按、双击、长按事件</a> gqdy365 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在项目中碰到这样的问题：由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住； </div> </li> <li><a href="/article/3088.htm" title="asp.net获取站点根目录下子目录的名称" target="_blank">asp.net获取站点根目录下子目录的名称</a> hvt <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/Web+Forms/1.htm">Web Forms</a> <div>使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" /> 那么在页面上显示根目录子文件夹的代码如下： string[] m_sub</div> </li> <li><a href="/article/3215.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> justjavac <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div> 判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。曾有人在豆瓣评《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个程序员图书列表，目的也就是通过读书，让程序员变懒。写道程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可</div> </li> <li><a href="/article/3342.htm" title="c++编程随记" target="_blank">c++编程随记</a> lx.asymmetric <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div> 为了字体更好看，改变了格式…… &&运算符： #include<iostream> using namespace std; int main(){ int a=-1,b=4,k; k=(++a<0)&&!(b--</div> </li> <li><a href="/article/3469.htm" title="linux标准IO缓冲机制研究" target="_blank">linux标准IO缓冲机制研究</a> 音频数据 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，</div> </li> <li><a href="/article/3596.htm" title="随想生活" target="_blank">随想生活</a> 暗黑小菠萝 <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我</div> </li> <li><a href="/article/3723.htm" title="我认为POJO是一个错误的概念" target="_blank">我认为POJO是一个错误的概念</a> windshome <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/J2EE/1.htm">J2EE</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1/1.htm">设计</a> <div> 这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。 &</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>