使用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/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> deniro <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/1835247370955223040.htm" title="php状态监控源码,PHP服务器状态监控实现程序" target="_blank">php状态监控源码,PHP服务器状态监控实现程序</a> 江子星 <a class="tag" taget="_blank" href="/search/php%E7%8A%B6%E6%80%81%E7%9B%91%E6%8E%A7%E6%BA%90%E7%A0%81/1.htm">php状态监控源码</a> <div>/header('Content-type:text/html;charset=utf-8');include'./smtp/class.smtp.php';include'./smtp/class.phpmailer.php';functionsendmail($subject='',$body=''){date_default_timezone_set('Asia/Shanghai');//</div> </li> <li><a href="/article/1835247344719851520.htm" title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a> Kason晨 <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div> </li> <li><a href="/article/1835245732337119232.htm" title="如何在Flask中处理表单数据" target="_blank">如何在Flask中处理表单数据</a> ac-er8888 <a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>在Flask中处理表单数据是一个常见的任务，它涉及从客户端接收数据并在服务器端进行解析和处理。Flask本身不直接提供表单验证的功能，但它可以与WTForms等库结合使用来简化表单处理过程。不过，即使没有WTForms，你仍然可以直接通过Flask的request对象来处理表单数据。以下是在Flask中处理表单数据的基本步骤：1.创建HTML表单首先，你需要在HTML中创建一个表单，并将其meth</div> </li> <li><a href="/article/1835244539846160384.htm" title="一串奇特的代码" target="_blank">一串奇特的代码</a> hi武林高手 <div>一个空的div元素，所有浏览器的渲染结果都不一样。body{display:table-cell;vertical-align:middle;//垂直居中}div{margin:atuo;height:100px;width:100px;outline:inset100pxgreen;//设置4个边框的样式outline-offset:-125px;//对轮廓进行偏移}html{display：t</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> rabbit_it <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> chouchengyin2080 <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/1835231486664601600.htm" title="文本编辑器markdown语法" target="_blank">文本编辑器markdown语法</a> 花北城 <a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80%E9%9A%8F%E7%AC%94/1.htm">科技随笔</a><a class="tag" taget="_blank" href="/search/Markdown/1.htm">Markdown</a> <div>markdown语法1.介绍Markdown是一种使用一定的语法将普通的文本转换成HTML标签文本的编辑语言，它的特点是可以使用普通的文本编辑器来编写，只需要按照特定的语法标记就可以得到丰富多样的HTML格式的文本。2.标题分级"#"->一级标题"##"->二级标题"###"->三级标题3.分割线使用三个或以上的“-”或者“”表示(混合的不行)4.斜体和粗体使用(或者_)和(或者__)分别</div> </li> <li><a href="/article/1835221779212234752.htm" title="清除 Conda 缓存" target="_blank">清除 Conda 缓存</a> Dmatteratall <a class="tag" taget="_blank" href="/search/conda/1.htm">conda</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。</div> </li> <li><a href="/article/1835221149026447360.htm" title="Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数</a> qcidyu <a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a> <div>title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div> </li> <li><a href="/article/1835217746175029248.htm" title="CTF常见编码及加解密（超全）第二篇" target="_blank">CTF常见编码及加解密（超全）第二篇</a> 不会代码的小徐 <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E5%AF%86%E7%A0%81/1.htm">编码密码</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/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/%E9%A2%84%E7%BC%96%E7%A0%81/1.htm">预编码</a> <div>HTML实体编码简述：字符实体是用一个编号写入HTML代码中来代替一个字符，在使用浏览器访问网页时会将这个编号解析还原为字符以供阅读。举例：highlighter-HTML明文：hello，world.十进制：hello，world.十六进制：hel</div> </li> <li><a href="/article/1835216109297561600.htm" title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a> diygwcom <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</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>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div> </li> <li><a href="/article/1835210568282238976.htm" title="greenplum资源队列" target="_blank">greenplum资源队列</a> 李春田 <div>文章来源https://www.cnblogs.com/pl-boke/p/9852439.html官方文档：https://gpdb.docs.pivotal.io/6-8/admin_guide/workload_mgmt.html1、创建资源队列语法Command:CREATERESOURCEQUEUEDescription:createanewresourcequeueforworkloa</div> </li> <li><a href="/article/1835198462984024064.htm" title="拼多多商家电话采集工具爬虫教程分享" target="_blank">拼多多商家电话采集工具爬虫教程分享</a> 小电商达人 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>以下是使用Python编写的拼多多商家电话采集爬虫教程：一、前期准备安装Python：从Python官方网站下载并安装最新版本的Python，安装过程中注意勾选将Python添加到系统路径选项。安装相关库：在命令提示符中运行以下命令来安装所需的库。pipinstallrequests：用于发送HTTP请求获取网页内容。pipinstallbeautifulsoup4：用于解析HTML页面。二、分析</div> </li> <li><a href="/article/1835194426499100672.htm" title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a> 闹小艾 <a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账</div> </li> <li><a href="/article/1835188875916570624.htm" title="终于搞懂TS中的泛型啦! | typescript 入门指南 04" target="_blank">终于搞懂TS中的泛型啦! | typescript 入门指南 04</a> 程序员王天 <a class="tag" taget="_blank" href="/search/TypeScript%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97/1.htm">TypeScript实践指南</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>大家好，我是王天~今天分享的是《ts入门指南》系列中第四篇，主要讲解ts中的泛型应用泛型在ts中是比较重要的概念，我花挺长时间才搞明白，整理输出这篇文章，希望能帮助到大家~《ts入门指南》系列，点击下方蓝色字体即可访问TsvsJs谁适合前端开发？|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学！TypeScript语法类型基础|Type</div> </li> <li><a href="/article/1835188748321648640.htm" title="HTTP 请求处理的完整流程到Servlet流程图" target="_blank">HTTP 请求处理的完整流程到Servlet流程图</a> 烟雨国度 <a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%9B%BE/1.htm">流程图</a> <div>HTTP请求处理的完整流程。从TCP三次握手开始，一直到Servlet处理请求并返回响应。首先，让我解释一下response.setContentType("text/html;charset=UTF-8");这行代码：这行代码设置了HTTP响应的Content-Type头。它告诉浏览器：响应的内容类型是HTML(text/html)字符编码是UTF-8(charset=UTF-8)这样浏览器就知</div> </li> <li><a href="/article/1835187991388188672.htm" title="FastCGI结合docker下的Nginx执行shell脚本" target="_blank">FastCGI结合docker下的Nginx执行shell脚本</a> 南波波 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a> <div>1使用docker下载Nginx下面展示一些内联代码片。a.#dockerpullnginx#dockerrun--namerunoob-php-nginx-p8088:80-d\-v~/nginx/www:/usr/share/nginx/html:ro\-v~/nginx/conf/conf.d:/etc/nginx/conf.d:ro\nginxb.在~/nginx/conf/conf.d创</div> </li> <li><a href="/article/1835186351805394944.htm" title="前端HTML+CSS+JS的入门学习" target="_blank">前端HTML+CSS+JS的入门学习</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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个</div> </li> <li><a href="/article/1835181353684004864.htm" title="Html Day01" target="_blank">Html Day01</a> 所以你一定要努力 <div>一、HTML与Web标准1.1五大浏览器厂商以及浏览器内核浏览器内核备注ChromeBlinkBlink其实是WebKit的分支。在WebKit上二次开发IETridentIE、猎豹安全、360极速浏览器、百度浏览器SafariWebkit从Safari推出之时起，它的渲染引擎就是Webkit。FirefoxGecko使用不多。打开速度慢、升级频繁。OperaBlink现在跟随chrome用bli</div> </li> <li><a href="/article/1835162742533746688.htm" title="全面指南：用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南：用户行为从前端数据采集到实时处理的最佳实践</a> 数字沉思 <a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信</div> </li> <li><a href="/article/1835155681955639296.htm" title="document获取元素的方法" target="_blank">document获取元素的方法</a> 小成语 <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%B9%B3%E6%97%B6/1.htm">平时</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>js学习总结----DOM获取元素的方法（8个）DOM:documentobjectmodel文档对象模型DOM就是描述整个html页面中节点关系的图谱，可以如下图理解在DOM中，提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法。1、获取页面中元素的方法1）、document.getElementById('元素的ID')在整个文档中，通过元素的ID获取到这个元素对象(获取的是一个</div> </li> <li><a href="/article/1835151269904347136.htm" title="10/24 每周学习总结5" target="_blank">10/24 每周学习总结5</a> 木木ainiks <a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return</div> </li> <li><a href="/article/1835137656992919552.htm" title="javascript添加p元素，html添加文字，appendChild" target="_blank">javascript添加p元素，html添加文字，appendChild</a> 游勇一 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html%E6%B7%BB%E5%8A%A0p/1.htm">html添加p</a><a class="tag" taget="_blank" href="/search/appendChild/1.htm">appendChild</a> <div>javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}</div> </li> <li><a href="/article/1835136018660028416.htm" title="CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制" target="_blank">CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制</a> SteveJi666 <a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a><a class="tag" taget="_blank" href="/search/EarthSDK/1.htm">EarthSDK</a><a class="tag" taget="_blank" href="/search/SuperMap/1.htm">SuperMap</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</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><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a> <div>版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap</div> </li> <li><a href="/article/1835133874892533760.htm" title="前端使用react-intl-universal进行国际化" target="_blank">前端使用react-intl-universal进行国际化</a> Stephy_Yy <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%A0%94/1.htm">调研</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的</div> </li> <li><a href="/article/1835133748555902976.htm" title="用html打开dbf文件,dbf文件怎么打开？dbf是什么文件？" target="_blank">用html打开dbf文件,dbf文件怎么打开？dbf是什么文件？</a> 今天也要开心呢 <a class="tag" taget="_blank" href="/search/%E7%94%A8html%E6%89%93%E5%BC%80dbf%E6%96%87%E4%BB%B6/1.htm">用html打开dbf文件</a> <div>dbf文件怎么打开？dbf文件是一种数据库格式文件，用于存储数据库的数据。一些用户在工作的过程中，可能会碰到后缀名为dbf的文件，正常双击是无法打开的，我们需要借助软件才能打开dbf文件。下面给大家推荐一些软件来打开dbf文件，具体请看下文。工具/原料：1、Exceldbf是什么文件？dbf文件是一种数据库格式文件，Foxbase，Dbase，VisualFoxPro等数据库处理系统会运用到dbf</div> </li> <li><a href="/article/1835132614239940608.htm" title="html ul点击删除,用原生实现点击删除点击的li" target="_blank">html ul点击删除,用原生实现点击删除点击的li</a> weixin_39993454 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/ul%E7%82%B9%E5%87%BB%E5%88%A0%E9%99%A4/1.htm">ul点击删除</a> <div>简单的实现方式#button{display:inline-block;}ul{list-style:none;}li{background-color:red;display:inline-block;width:20px;padding:10px;margin-left:3px;color:white;}window.onload=function(){varoBtn1=document.ge</div> </li> <li><a href="/article/1835131983605362688.htm" title="excel打开html非常慢,解决EXCEL表格打开缓慢，文件异常臃肿庞大" target="_blank">excel打开html非常慢,解决EXCEL表格打开缓慢，文件异常臃肿庞大</a> 史文林 <a class="tag" taget="_blank" href="/search/excel%E6%89%93%E5%BC%80html%E9%9D%9E%E5%B8%B8%E6%85%A2/1.htm">excel打开html非常慢</a> <div>相信很多每天在操作EXCEL的朋友，会觉得自己的表格一天比一天大，一天比一天打开慢，但表格里面实际也没多少内容。这其中的主要原因之一，就是你喜欢在多个表格之间互相复制来复制去，粘贴的时候也不是使用选择性粘贴。把原来表格里面的所有样式设置内容和不必要的数据都复制过来了，导致整个工作薄变得异常臃肿庞大。接下来我们就来分析下具体发生了什么情况和如何解决这个问题吧！1.看这个“源文件”，文件大小居然达到了</div> </li> <li><a href="/article/1835131984087707648.htm" title="html 删除事件,html 事件的添加和删除" target="_blank">html 删除事件,html 事件的添加和删除</a> 列蒂齐亚 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%88%A0%E9%99%A4%E4%BA%8B%E4%BB%B6/1.htm">删除事件</a> <div>jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi</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>