Duwtto

Web基础

html和css

Web简介

1、Web的三个层次
网页设计思路是把网页分成三个层次，即：结构层(HTML)、表示层(CSS)、行为层(Javascript)。
形象的比喻，先是HTML捏了一个人，然后CSS则是给人穿上衣服，最后通过JS让人动起来。

Web服务的本质
对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。用户向服务器发送一个请求。然后服务器响应，将数据和格式（html）发回给客户端，然后断开这个连接。客户端收到返回的数据后，通过浏览器将数据按照一定的格式呈现出来；整个过程就是一个socket的短连接。只不过用户使用的浏览器只能解析html格式的文档。

下面是一个服务端的python代码，实现一个简单的Hello World：

import socket
from time import ctime
 
def handle_request(conn):
    request = conn.recv(1024)  #  接收浏览器发送的请求
    print("[%s] Received:[%s]"%(ctime(),request)) #  在服务端显示请求信息
    conn.send('HTTP/1.1 200 OK\r\n\r\n'.encode('utf-8'))  #  给浏览器发送响应状态码
    with open("index.html",'r') as file:
        html=file.read()
        conn.send(html.enode('utf-8'))
    conn.close()		#  关闭套接字
 
def main():
    #  先创建一个socket服务端套接字 tcp服务 
    server = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    server.bind(('0.0.0.0', 9999))		#  绑定服务器端口,这里远程服务器上不能填localhost，在本地查看可以
    server.listen(5)					 #  最多连接五个端口
    #  然后持续监听
    while True:
        conn, addr = server.accept()         #  接收连接的数据
        handle_request(conn)  			#  将连接传递给handle_request函数处理
        conn.close()  					# 关闭连接
 
if __name__ == '__main__':
    main()

先写一个简单的带一点标签的html文件，index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HELLO Html</title>
    </head>
    <body>
       <h1>Login</h1>
            <div class="item">
               	<i></i>
                <input type="text" placeholder="username">
            </div>
            <div class="item">
                 <i></i>
                 <nput type="text" placeholder="password">
            </div>
         <button>Login</button>
     </body>

在本机启动上面的socket之后，直接使用浏览器作为客户端连接。在地址栏输入 http://127.0.0.1:9999/ 或 http://localhost:9999/ 之后，浏览器上就会显示服务端返回的内容了。除了数据，还会包括格式（html标签）。实际应用中会将所有的内容写成一个html文件，然后再返回数据的时候调用这个文件。然后我们的socket不再发送简单的数据，而是读取文件，将文件中的数据发送给客户端。

上面的程序示例中，html和socket服务是分离的，需要返回给客户端什么样的页面，我们只需要编辑修改我们的html文件即可。而我们的socket服务器代码则负责和客户端的数据交换。

html

使用pycharm直接创建一个html文件，内容如下（HTML5的模板）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet"  href="/static/css/login.css">
    </head>
    <body>
        <div id="login-box">
            <h1>Login</h1>
            <div class="form">
                <div class="item">
                    <i></i>
                    <input type="text" placeholder="username">
                </div>
                <div class="item">
                    <i></i>
                    <input type="text"placeholder="password">
                </div>
            </div>
            <button>Login</button>
        </div>
    </body>

：这是一个声明，声明下面html的版本。这里是一个html5的声明。这个不是html标签，下面的都是。
< html lang=“en”>：这是一个html标签，里面的 lang=“en” 是标签内部的属性。一般html标签这么写就行了。这个属性也用不着。
< head> ：head标签，html的头，后面详讲
< body> ：body标签，html的主体，后面详讲
最后补充一个
注释：

标签的分类
主动闭合标签：大多数的标签都是这种形式。标签有两部分，比如上面的、、，后面都有一个对应的、、来主动闭合这个标签。
自闭合标签：像上面 head 中的 meta 标签，就是一个自闭合标签。这类标签比较少。另外也可以这样写，加上一个/符号，不影响浏览器的识别，但是可以直观的让人看明白各个标签已经闭合了。推荐加上表示闭合的/。

head内标签
：指定页面的字符编码，否则中文可能会变成乱码。
：定义页面标题。一般会显示在浏览器的标题栏或标签页上。 还可以加一些其他标签，举例一些比较常用的，基本上都用处不大 <meta http-equiv=“Refresh” Content=“30”> ：页面30秒自动刷新 <meta http-equiv=“Refresh” Content=“5;url=http://www.51cto.com” > ：页面5秒后自动跳转，这种跳转用的少，因为不是动态的无法显示倒计时或进度条，学了JS可以用JS来实现跳转并且能显示倒计时。 <meta name=‘keywords’ content=‘NGA,National Geographic Azeroth,游戏社区,魔兽世界,魔兽世界中文数据库,wow,World of Warcraft’> ：加关联字，给搜索引擎搜索用的。告诉搜索引擎搜索什么关键字可以搜索到你的网站。对我们用处不大。 <meta name=‘description’ content=‘NGA 最专业的魔兽世界讨论及综合游戏社区’> ：加网站描述，同样用处不大 <meta http-equiv=“X-UA-Compatible” content=“IE=Edge,chrome=1”> ：网站兼容模式的设置，就是告诉浏览器选择什么模式来打开网页，通过content的属性识别。以上代码IE = edge告诉IE使用最新的引擎渲染网页，chrome = 1则是告诉chrome可以激活Chrome Frame。 <link rel=“shortcut icon” href=“image/favicon.ico”/> ：指定网站的图标 还有更多的 <link> 标签，以及 <style> 标签和 <script> 标签后面的章节用到的时候会再讲。 特殊符号 有些特殊符号浏览器可能无法直接识别，需要转义。下面列举几个常用的，更多的只能到时候再去查了： <a href="http://img.e-com-net.com/image/info8/1df945d2d38c417887a23e949219962a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1df945d2d38c417887a23e949219962a.jpg" alt="Web基础_第1张图片" width="650" height="261" style="border:1px solid black;"></a> <h3>body内标签-入门</h3> 先了解一下下面几个简单的标签 <p> ：段落标签，段落和段落直接会有行间距 <br> ：换行标签，自闭合，也可以这么写 <h1> - <h6> ：标题标签，只有6个级别 块级标签和行内标签 <br> 这种是自闭和的，标签之间没有内容，所以都不属于 块级标签：标签之间的内容会占一整行，上面的几个都是块级标签 行内标签：也叫内联标签，标签之间的内容接着前面的内容显示，不会换行 <span> ：这就是一个行内标签。这个标签本身没有任何格式就是一个白板，但是可以通过定义标签的属性，来定义标签之间内容的格式。 <div> ：也是一个白板，但是是一个块级标签。这个标签很重要，做前端最重要的就是要掌握div+css，做页面布局的。 <form> ：表单标签，在下面的input里面讲。 body内标签-提交数据 下面的这些标签都是用于客户端向服务器提交数据的 <h3>input标签</h3> 通过登录表单来讲一下input标签，还有一个form标签会用到，顺便也讲了 <input> ：根据不同的type属性，会有多种形式。 下面的body中有4种input，可以在浏览器中打开。 <pre><code class="prism language-handlebars"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=" "> <input type="text" /> <input type="password" /> <input type="button" value="登录1" /> <input type="submit" value="登录2" /> </form> </body> </html> </code></pre> type=“text” ：可以输入文本， type=“password” ：可以输入密码， type=“button” ：是一个按钮，现在点下去没效果，还需要其他东西。 type=“submit” ：提交表单，是另外一种按钮。同样没效果，直接将form表单的内容提交到form的action属性指定的url。 不过上面的input内容还无法识别，需要加上name属性： <input type=“text” name=“username” /> <input type=“password” name=“pwd” /> 这样就会把数据组织成一个字典的形式提交出去，name就是字典的key，你在前端文本框输入的数据就是字典的value。这样提交之后，就可以通过name属性的值也就是字典的key获取到前端文本的内容。这部分还得后面再讲了，暂时只要会以这样的形式提交，之后再学怎么获取到值以及处理。 <form> 标签还有一个method属性，指定提交的形式，默认是GET。一共就2个可选值GET和POST。指定的话就是这么写： <form action=" " method=“get”>或<form action=" " method=“post”> 。 以GET形式提交，会把表单的内容拼接到url后面，然后发送出去。放在http的请求头中。 以POST形式提交，会把表单的内容放在内容中发送出去。放在http的请求体中。 HTTP请求报文：HTTP请求报文由3部分组成（请求行+请求头+请求体）。具体这里就不研究了。 现在还不会写web服务，不过有现成的服务器可以测试提交表单。打开浏览器，在浏览器中输入这样的url：“https://www.baidu.com/s?wd=你要搜索的内容“ ，就可以直接打开搜索结果的页面。于是自己编辑一个网页，内容如下： <pre><code class="prism language-handlebars"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text" name="wd" /> <input type="submit" value="搜索" /> </form> </body> </html> </code></pre> 现在用浏览器打开我们自己的网页，在文本框输入你要搜索的内容，然后点击搜索按钮查看效果。 <input type=“text” name=“wd” value=“默认值” /> ：这里也可以加上value属性，这样打开的页面中文本框中不再是空白，而是会有一个默认值。 type=“radio” ：单选框，相同的name属性表示是一个选择项的，定义不同的value值可以获取到你的选择 type=“checkbox” ：复选框，相同的name属性表示是一个选择项的，每个选项给不用的value值，可以判断你选中了哪些，没选中哪些。 <pre><code class="prism language-handlebars"><body> <p>请选择性别：<br /></p> 男：<input type="radio" name="sex" value="M" /> 女：<input type="radio" name="sex" value="F" /> <p>爱好：</p> 足球：<input type="checkbox" name="favor" value="football" /> 蓝球：<input type="checkbox" name="favor" value="basketball" /> 排球：<input type="checkbox" name="favor" value="volleyball" /> 棒球：<input type="checkbox" name="favor" value="baseball" /> </body> </code></pre> 通过属性 checked=“checked” 可以设置选项默认被选中。 上传文件 <input type=“file” name=“filename” /> ：可以用于上传文件。要上传文件，需要将这个input放到form标签中，并且在form标签中要定义 enctype=“multipart/form-data” 。因为还需要服务器端处理，在讲到web框架的时候再细讲了。 <input type=“reset” value=“重置” /> ：可以重置form中的所有内容，还原到打开时候的默认值。 多行文本-textarea标签 textarea标签，用于实现输入多行文本，主动闭合标签，在标签之间的部分可以写上默认值。一般会加上name属性，用于取数据。 这个就不贴代码了。而且就是这个标签会被页面识别为代码，即使你放在代码块中，感觉是个BUG。导致后面的内容都会有问题。 下拉列表-select标签 简单的下拉列表代码如下： <pre><code class="prism language-handlebars"><select name="city1"> <option value="BJ">北京</option> <option value="SH">上海</option> <option value="GJ">广州</option> <option value="SZ">深圳</option> </select> </code></pre> 在select标签里设置name属性，用于取数据 每个option标签里设置value属性，用于确认该选项是否被选中 size属性：可以设置size属性，将列表自动展开一定的项目 selected属性：设置 selected=“selected” ，将该选项设为默认 multiple属性：设置 multiple=“multiple” ，将列表定义为多选。可以通过Ctrl选中多个，也可以通过Shift或者拖拽来连续选中多个 <pre><code class="prism language-handlebars"><select name="city2" size="3"> <option value="BJ">北京</option> <option value="SH" selected="selected">上海</option> <option value="GJ">广州</option> <option value="SZ">深圳</option> </select> <select name="city3" size=6 multiple="multiple"> <option value="BJ">北京</option> <option value="SH" selected="selected">上海</option> <option value="GJ">广州</option> <option value="SZ">深圳</option> </select> </code></pre> 另外还有一个分组的下拉列表，代码如下： <pre><code class="prism language-handlebars"><select name="city1"> <optgroup label="直辖市"> <option value="BJ">北京</option> <option value="SH">上海</option> </optgroup> <optgroup label="江苏省"> <option value="NJ">南京</option> <option value="SZ">苏州</option> <option value="WX">无锡</option> </optgroup> </select> </code></pre> 小结 以上，能够把数据提交给服务器的标签就讲完了。 之后的标签就是用来点缀，用来页面布局等等这类功能了。 <h3>body内标签-布局</h3> 下面是一些常用的功能性的或者是页面布局的标签 超链接-a标签 通过a标签可以定义超链接，通过超链接我们可以实现页面的跳转： <pre><code class="prism language-handlebars"><body> <a href="http://www.baidu.com">百 度</a> <a href="http://www.163.com/" target="_blank">网易</a> </body> </code></pre> 标签之间的内容是你的超链接显示的内容，然后定义href的属性，指向你要跳转的页面。 另外还可以定义target属性，这里用了“_blank”，可以在新的标签页打开。另外target还有别的属性，反正不是很重要，有兴趣就自己再去试了。 另外a标签还有一个作用，就是锚。我理解为页面内的跳转。 为了让页面内容足够大（需要滚动），定义一下div的高度，这个以后会讲。 另外这里不能用name属性定位了，需要用id属性。 <pre><code class="prism language-handlebars"><body> <a href="#chapter_1">第一章</a> <a href="#chapter_2">第二章</a> <a href="#chapter_3">第三章</a> <a href="#chapter_4">第四章</a> <div style="height: 600px" id="chapter_1">第一章节的内容</div> <div style="height: 600px" id="chapter_2">第二章节的内容</div> <div style="height: 600px" id="chapter_3">第三章节的内容</div> <div style="height: 600px" id="chapter_4">第四章节的内容</div> </body> </code></pre> a标签中的href属性在定位锚点的时候需要在前面加上"/#“号，后面跟上id的值。另外，如果在浏览器中直接输入url，后面跟上”#chapter_3"的话，也是打开页面并且直接定位到锚点。 图片-img标签 先准备好出的图片的路径，可以是本地的图片，也可以是网上的图片。本地图片貌似不能是绝对路径，不过应该可以用 …\ 表示上一级目录。我这里都把图片放到html文件的同级目录里测试了。 另外，还可以为图片加上超链接。只需要将图片包在一个a标签里面就行了（之前放的是文字，这里只是换成了图片）。 <pre><code class="prism language-handlebars"><body> <body> <img src="1.jpg"> <a href="http://www.baidu.com"> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png"> </a> </body> </body> </code></pre> 图片的大小也可以调整，在img标签中设置style属性（这个还得后面讲）： <img src=“2.jpg” style=“height: 100px”> alt属性：为img加上alt属性，如果图片不存在，则会显示alt的值。 title属性：为img加上title属性，鼠标悬停在图片上的时候，会显示title的值。 <pre><code class="prism language-handlebars"><body> <img src="123.jpg" alt="图没了"> <img src="1.jpg" title="这是一张测试图"> </body> </code></pre> 列表-ul标签、ol标签、dl标签 ul是无序列表，ol是有序列表。效果直接上代码试： <pre><code class="prism language-handlebars"><ul> <li>萨尔</li> <li>沃金</li> <li>希尔瓦娜斯</li> </ul> <ol> <li>耐奥祖</li> <li>阿尔萨斯</li> <li>伯瓦尔·弗塔根</li> </ol> </code></pre> 还有一个是分组的列表： <pre><code class="prism language-handlebars"><dl> <dt>部落：</dt> <dd>兽人</dd> <dd>巨魔</dd> <dd>牛头人</dd> <dd>被遗忘者</dd> <dt>联盟：</dt> <dd>人类</dd> <dd>矮人</dd> <dd>侏儒</dd> <dd>暗夜精灵</dd> </dl> </code></pre> 表格-table标签 table标签包住一张表格，设置一下border属性，可以显示几种边框效果。 table内嵌tr标签包住一行，tr内嵌td标签是每一列。 简单的表格，就这样： <pre><code class="prism language-handlebars"><table border="1"> <tr> <td>玛法里奥</td> <td>伊利丹</td> <td>泰兰德</td> </tr> <tr> <td>吉安娜</td> <td>乌瑟尔</td> <td>安度因</td> </tr> </table> </code></pre> 这里还缺少表头，一般第一行是标题行，我们用thead标签包起来，并且这一行里都是标题，所以不用td标签，而是用th标签。 然后，后面的行都内嵌在tbody标签中。另外，如果需要，每行的第一列，也可以用th标签，或者也可以不要行标题，那就全用td标签 这么做主要是为了规范，下面是更加规范完整的表格： <pre><code class="prism language-handlebars"><table border="1"> <thead> <tr> <th>种族</th> <th>英雄1</th> <th>英雄2</th> <th>英雄3</th> </tr> </thead> <tbody> <tr> <th>暗夜精灵</th> <td>玛法里奥</td> <td>伊利丹</td> <td>泰兰德</td> </tr> <tr> <th>人类</th> <td>吉安娜</td> <td>乌瑟尔</td> <td>安度因</td> </tr> </tbody> </table> </code></pre> colspan 和 rowspan 属性可以实现合并单元格的效果。下面把标题行和标题列都合并了。 合并效果的表格可以这么写： <pre><code class="prism language-handlebars"><table border="1"> <thead> <tr> <th></th> <th colspan="3">英雄</th> </tr> </thead> <tbody> <tr> <th rowspan="2">名字</th> <td>玛法里奥</td> <td>伊利丹</td> <td>泰兰德</td> </tr> <tr> <td>吉安娜</td> <td>乌瑟尔</td> <td>安度因</td> </tr> </tbody> </table> </code></pre> 提示-lable标签 典型的用法，一般lable标签会结合input标签一起使用。 “for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。 建议使用的时候在lable中设置一个for属性，指向input的id，这样点击lable的内容的时候，光标也会出现在指向的input框内。代码如下，可以比较一下差别（点一下用户名看看有没有效果，点一下昵称看看有没有效果）： <pre><code class="prism language-handlebars"><body> <p> <label>姓名：</label> <input type="text" /> </p> <p> <label for="nickname">昵称：</label> <input id="nickname" type="text" /> </p> </code></pre> 元素分组-fieldset标签 首先这个标签不常用，不过还是知道一下。效果就是绘制一个边框，边框上面可以加个标题。把其他标签都放在一个fileset标签里实现分组。 内部写一个legend标签，定义一个标题，如果什么内容的没有，那么就一直一个边框，边框上部边缘有一个标题： <pre><code class="prism language-handlebars"><fieldset> <legend> 标题 </legend> </fieldset> </code></pre> 当然使用的时候，内部添加一些相关的内容，现在只能粗糙的弄一个： <pre><code class="prism language-handlebars"><fieldset> <legend>登录</legend> <label for="username">用户名：</label> <input id="username" type="text" name="username" /> <br /> <label for="pwd">密码：</label> <input id="pwd" type="password" name="passwd" /> </fieldset> </code></pre> html总结 上面总共也就讲了20个左右标签，去掉那几个不常用的，基本只要掌握15个左右的标签就OK了。 <h2>css</h2> 在标签上可以设置style属性，style属性的值写在引号内。 每一个样式都是一个key:value的形式，样式之间用";"分号隔开。 写前端，一般是先用div标签把页面进行分块，然后对每一块分别设置css即style属性： <pre><code class="prism language-handlebars"><body> <div style="background-color: red;height: 48px">红色</div> <div style="background-color: rgb(0,255,0);height: 48px">绿色</div> <div style="background-color: #0000FF;height: 48px">蓝色</div> </body> </code></pre> 上面的代码，写了3个div，设置了一个背景色，和一个高度。 颜色设置-RGB颜色对照表 看前面的例子，分别用了3中方式表示颜色。3种方式都是一样的，但是颜色和代码的对应关系可以去搜索一下rgb，有一个叫做RGB颜色对照表的东西，可以查询到颜色和对应的编码。 <h3>css选择器</h3> 我们可以在head标签内事先设置好style标签，然后在body里需要应用该样式的标签内引用这个样式，即选择对应的css样式。 有多种方式来选择css。 id选择器 以#id设置样式，对应的id的标签就会应用该样式。上面的代码也可以这样实现： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: red; height: 48px; } #i2{ background-color: rgb(0,255,0); height: 48px; } #i3{ background-color: #0000FF; height: 48px; } </style> </head> <body> <div id="i1">第一块</div> <div id="i2">第二块</div> <div id="i3">第三块</div> </body> </code></pre> body中的标签只要id正确，就是应用上对应的style样式了。 这样貌似看着更复杂了，但是body内的结果更加清晰了，而且这只是因为我们的web页面还不是太复杂。 另外如果多个标签的样式其实是一样的，但是id只能用一次，我们可以为一个样式定义多个id，就是这样，如此也解决的代码重用的问题： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> #i1,#i2,#i3{ background-color: green; height: 48px; } </style> </head> <body> <div id="i1">第一块</div> <div id="i2">第二块</div> <div id="i3">第三块</div> </body> </code></pre> <h3>class选择器</h3> 因为id不能重复，上面的方式应用起来不方便。最常用的是这里的方式。 现在以 .class 来设置sytle，标签中只要设置对应项class属性，就会应用该样式。关键是class属性是可以重复使用的： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 48px; } .c2{ background-color: rgb(0,255,0); height: 48px; } </style> </head> <body> <div class="c1">第一块</div> <div class="c2">第二块</div> <div class="c1">第三块</div> </body> </code></pre> <h3>标签选择器</h3> 就是标签选择器。以标签的名字来设置style，这样所有的标签都会应用这个样式： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: green; height: 48px; } span{ background-color: red; height: 48px; } p{ background-color: blue; color: red; } </style> </head> <body> <div class="c1">第一块 <span>红色的内容</span> </div> <div class="c2">第二块</div> <p>2.1</p> <div class="c1">第三块</div> </body> </code></pre> <h3>关联选择器</h3> 也可以理解为层级选择器，每一个层级关系之间用空格分隔。现在我们以 “div span” 来设置style。如此，所有div标签下的span标签就都会应用这个样式。 <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> div span{ background-color: red; height: 48px; } </style> </head> <body> <div class="c1">第一块 <span>第一模块的内容</span> </div> <div class="c2">第二块 <span>第二模块的内容</span> </div> <div class="c1">第三块 <span>第三模块的内容</span> </div> </body> </code></pre> 另外，这里的层级也可以使用class，比如以 “.c1 spen” 来设置style： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 span{ background-color: red; height: 48px; } </style> </head> <body> <div class="c1">第一块 <span>第一模块的内容</span> </div> <div class="c2">第二块 <span>第二模块的内容</span> </div> <div class="c1">第三块 <span>第三模块的内容</span> </div> </body> </code></pre> 这样c2这个class下的pan就会应该到这个样式。 使用#id也是一样的道理。 <h3>组合选择器</h3> 和层级关系类似，组合之间用","逗号分隔。在id选择器后面的例子里，其实就是组合了。所以就不试了。 现在我们知道，不只是id，class和标签都可以用来组合。 另外，组合是一个或的关系，上面的层级是一个与的关系。 <h3>属性选择器</h3> 这里先用 input[type=‘text’] 来举例，前面是一个选择器，后面中括号是判断属性，如果有这个属性，就应该改样式。 对于前半部分，同样可以使用 #id 或 .class 。 对于后半部分，我们还可以使用自定义的属性，比如下面例子用自定义了一个myattr属性，来应用了一个样式： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> input[type='text']{ background-color: blue; } #password[type='password']{ background-color: green; } label[for="username"]{ background-color: yellow; } label[myattr="pink"]{ background-color: pink; } </style> </head> <body> <label for="username">姓名：</label> <input id="username" type="text" /> <p> <label myattr="pink" for="password">昵称：</label> <input id="password" type="password" /> </p> </body> </code></pre> <h3>css的优先级</h3> 我们可以在标签内设置有限级，还可以在head里设置优先级模板，按几个选择器的规则应用其中的样式。所有可能出现符合多个要求而会应用到多个要是的情况。这里就有了一个优先级的概念。 对于不重复的样式，要么会全部应用上。 对于重复的要是，会应用最下面的那个样式。即body中的样式优先级高于head中的样式。同在body或head中，那么下面的样式优先级高。 总结，按我的理解，应该就是最新加载的样式会覆盖之前的样式。不冲突就追加上是，有冲突就替代掉。 上一个例子： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: blue; } .c2{ background-color: red; color: white; } </style> </head> <body> <div class="c1 c2">优先级测试1</div> <div class="c2 c1">优先级测试2</div> <div class="c2 c1" style="color: gold">优先级测试3</div> </body> </code></pre> 这里标签中的字体颜色属性就覆盖掉了 .c2 中的字体颜色。 而前2个div都是同时属于 c1 和 c2 这2个class，背景色的样式应用的都是处于下面的 c2 的样式。 class属性赋予多个值：这里的class属性同时赋了2个值，注意一下这个赋值的格式。 <h3>css写到独立的文件</h3> 如果有多个页面文件，但用的是同一套css样式。我们目前只能在每个页面文件的head里都写上全部的css代码。这样又有代码重复的问题了。 可以创建一个css文件（pycharm里选择New->Stylesheet），将 <pre><code class="prism language-css">.c1{ background-color: blue; } .c2{ background-color: red; color: white; } </code></pre> 然后就是在html文件的head里，导入这个这个样式文件就可以应用上文件中的样式。这需要用到link标签，用href属性指定文件路径，用rel属性指定文件的内容是stylesheet： <pre><code class="prism language-handlebars"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="commons.css" /> </head> <body> <div class="c1 c2">优先级测试1</div> <div class="c2 c1">优先级测试2</div> <div class="c2 c1" style="color: gold">优先级测试3</div> </body> </code></pre> 导入css文件后，本地的head里依然可以写style标签。这个style应该现在link的下面。然后优先级的问题就是位于下面的style的样式优先级高于css文件中的样式。 <h3>边框-border</h3> style=“border: 1px solid red;” ：这里的border有3个属性。 第一个是边框线的宽度，这里是1像素； 第二个是线的样式，这里是soild实线，还有dotted虚线等等其他样式； 第三个是边框线的颜色。 这里3个属性没有顺序的问题 <pre><code class="prism language-handlebars"><body> <div style="border: 1px solid red;">边框测试1</div> <br /> <span style="border: dotted blue 2px;">边框测试2</span> </body> </code></pre> 另外还可以通过这4个属性 border-top、border-left、border-right、border-bottom 分别设置每一边的样式。就是可以做出4边不同的边框。 <h3>高度-height和宽度-width</h3> style=“height: 48px;width: 80%;” ：高度和宽度可以用像素px表示，也可以用百分比表示。 注意1，浏览器的高度是无限的（内容多了会有滚动条），所以高度用不了百分比。不过如果内嵌在一个有高度的标签里，就可以用百分比了。 注意2，div由于是块级标签，虽然我们指定了宽度，但是实际出占了整行的，之后的标签还是只能在下一行显示。设置的背景色是只显示80%，但是后面的部分依然用不了。 <pre><code class="prism language-handlebars"><body> <div style="height: 48px;width: 80%;background-color: yellow">高度和宽度</div> </body> </code></pre> <h3>字体设置</h3> font-size: 16px ：字体大小。 text-align: center ：水平居中，也可以设置靠左或靠右。 line-height: 48x ：有水平居中，自然也会有垂直居中。但是垂直居中不好用。可以通过设置行高来达到类似的效果。具体数值参考height的值，设置的和height的值一样，就能实现垂直居中的效果。 font-weight: bold ：字体加粗 color: red ：字体颜色 <pre><code class="prism language-handlebars"><body> <div style="height: 48px; width: 80%; background-color: yellow; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; color: red;" >字体的设置</div> </body> </code></pre> <h3>浮动-float</h3> float设置后，元素就会浮动起来。浮动之后即使是块级标签（比如div），也不会像之前那样占满一整行了。没有float的效果： <pre><code class="prism language-handlebars"><body> <div style="width: 30%;background-color: yellow;">浮动</div> <span>占位</span> </body> </code></pre> 上面的div标签虽然设置了30%的宽度，但是作为块级标签，他要占1整行。后面的内容只能换行。 现在给div加上float： <pre><code class="prism language-handlebars"><body> <div style="width: 30%;background-color: yellow;float: left;">浮动</div> <span>占位</span> </body> </code></pre> 现在的div就真的只占30%的宽度了，后面的内容会继续接在后面显示，而不是之前那样要换行。 下面设置2个浮动的标签，并且都是往一个方向飘： <pre><code class="prism language-handlebars"><body> <div style="width: 30%;background-color: yellow;float: left;">浮动1</div> <div style="width: 40%;background-color: red;float: left;">浮动2</div> </body> </code></pre> 这里，2个div是接着的。第1个div先把位置占住之后，剩余的空间再放置第2个div。 如果空间够，就会在剩余的空间放置。如果空间不够，就会另起一行放置： <pre><code class="prism language-handlebars"><body> <div style="width: 70%;background-color: yellow;float: left;">浮动1</div> <div style="width: 40%;background-color: red;float: left;">浮动2</div> <div style="width: 40%;background-color: blue;float: left;">浮动3</div> </body> </code></pre> <h3>内嵌的float</h3> 标签嵌套的情况，如果父级标签没有float，而子标签float的话，可能会有一点问题。现在把上面的代码中的3个div内嵌到一个没有float的div中： <pre><code class="prism language-handlebars"><div style="border: 1px solid black"> <div style="width: 70%;background-color: yellow;float: left;">浮动1</div> <div style="width: 40%;background-color: red;float: left;">浮动2</div> <div style="width: 40%;background-color: blue;float: left;">浮动3</div>  </div> </code></pre> 最后一句先注释掉，现在外层的div的边框效果是有问题的。可以这么理解，子标签浮点起来之后，和父标签不在同一个层级了。现在父标签的边框内什么内容都没有。我们需要的效果是边框包围在子标签的外面，现在可以把最后那一句的注释去掉，看看效果是否满足。 <div></div>" ：在最后加上这么一句，相当于把原本浮动起来的子标签再拉回来。当然也可以把外层的标签也设置成float，同样可以达到效果。不过浮动起来之后，就不再像之前那样作为块级标签能占满一行了，这里加上了宽度的设置： <pre><code class="prism language-handlebars"><div style="border: 1px solid black;float: right;width: 100%"> <div style="width: 70%;background-color: yellow;float: left;">浮动1</div> <div style="width: 40%;background-color: red;float: left;">浮动2</div> <div style="width: 40%;background-color: blue;float: left;">浮动3</div> </div> </code></pre> <h3>元素类型-display</h3> 之前讲过有块级标签和行内标签，但是其实这个也不是绝对的。display就是来定义这个属性的。即可以通过设定display的属性将块级标签变成行内标签，反之亦然。 display: inline ：设为行内标签 dispaly: block ：设为块级标签 <pre><code class="prism language-handlebars"><body> <div style="display: inline;background-color: red;">DIV</div> <span style="display: block;background-color: red;">SPAN</span> </body </code></pre> <blockquote></blockquote> 现在div变成了一个行内标签，而span却变成了块级标签了。 块级标签和行内标签的差别 行内标签：无法设置高度、宽度、边距（边距后面马上会讲）。并且默认只占自己内容的部分 块级标签：可以设置。并且默认占父级的100% 另外如果需要一个可以设置的行内标签，还可以采用如下设置。 display: inline-block ：默认只占自己内容部分（inline属性），但是同时可以设置高度、宽度等属性（block属性）。 让标签消失 display: none ：只要把标签定义上这个属性，这个标签就不再显示了。以后可以做个开关（通过JS），让某些元素显示出来或者不显示。 <h3>边距-padding和margin</h3> 边距分内边距（padding）和外边距（margin）。 没有设置边距是这样的效果： <pre><code class="prism language-handlebars"><div style="border: 1px solid black;"> <div style="background-color: yellow;">边距的效果</div> </div> </code></pre> 现在给外层的那层div设置一个内边距，即padding： <pre><code class="prism language-handlebars"><div style="border: 1px solid black;padding: 10px"> <div style="background-color: yellow;">边距的效果</div> </div> </code></pre> 设置了边距后，两个div标签的内容之间就会有空隙。如果换做是给内层的div设置一个外边距，显示的效果也是一样的。 另外，边距还可以为上、下、左、右分别设置。 设置4个方向的属性 之前也有别的属性可以分别设置4个方向的属性，这里就拿margin来举例说明： margin: 10px ：同时设置4个方向的属性值 margin: 10px 20px ：上下设为10px，左右设为20px margin: 10px 20px 30px ：上下一样是10px，左边是20px，右边是30px margin: 10px 20px 30px 40px ：分别对应上、右、下、左 可以这么理解，第4个值是左，如果没有，就和右一样；下如果没有设置，就同上；右如果也没有设置，那么也同上。 可以用下面的例子测试： <pre><code class="prism language-handlebars"><body style="margin: 0"> <div style="border: 1px solid black;margin: 10px 20px 30px 40px">上面的框</div> <div style="border: 1px solid black">下面的框</div> </body> </code></pre> 另外还可以通过margin-top、margin-bottom、margin-left、margin-right来设置4个方向的属性。如果这么设置，那么没有设置的几个方向就都是0. <h3>bady的边距</h3> 可能都没注意，之前的代码在设置了背景色后，其实页面的最上面并不是你的背景色，而是有一条白色（就是body的边距）。仔细看看： <pre><code class="prism language-handlebars"><body> <div style="background-color: yellow">看看上面有没有缝</div> </body> </code></pre> 这里要给body设置一个内边距（margin）属性： <pre><code class="prism language-handlebars"><body style="margin: 0"> <div style="background-color: yellow">看看上面有没有缝</div> </body> </code></pre> 去掉了边距之后，现在是真正的处于最上面了。再仔细看看，其实之前缺的不是顶上一层，而是周围一圈。并且看了看别的网站，貌似都是把给body的margin设为0的。 <h3>auto属性值的意义</h3> 在设置body属性的时候，老师推荐是这么写的： style=“margin: 0 auto” ，这里就看看auto的意思看意思就是自动设置，但是怎么个自动法呢？这里auto的值对应的左右的边距，实现的效果就是左右2边边距一样，即水平居中了。 上下似乎也可以设成auto，效果看上去就是0，也就是说貌似全部设置成auto也行。 总结 知识点暂时就掌握这些就够了。页面布局就是要把页面分隔成一个一个的div。有拼接，也有嵌套，而且如果需要，还要嵌套多层。最后还要写上css，设置好格式。下面是课上的示例代码，作业可以参考一下： <pre><code class="prism language-handlebars"><body style="margin: 0 auto"> <div style="height: 38px;line-height: 38px;background-color: #dddddd;"> <div style="width: 980px;margin: 0 auto"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登录</a> <a>注册</a> </div> <div style="clear: both;"></div> </div> </div> <div> <div style="width: 980px;margin: 0 auto"> <div style="float: left">Logo</div> <div style="float: right">购物车</div> <div style="clear: both;"></div> </div> </div> <div style="background-color: red;"> <div style="width: 980px;margin: 0 auto;"> 商品分类 </div> </div> <div style="width: 300px;border: 1px solid black;padding: 2px;margin: 1px"> <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div> <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div> <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div> <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div> <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div> <div style="width:96px;height: 96px;border: 1px solid green;float: left;"></div> <div style="clear: both;"></div> </div> </body> </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1282984317714186240"></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">你可能感兴趣的:(Web,html5,css,python)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1891745256840425472.htm" title="华为OD机试 - Excel 单元格数值统计（Python） | 机试题算法思路【2023】" target="_blank">华为OD机试 - Excel 单元格数值统计（Python） | 机试题算法思路【2023】</a> 梦想橡皮擦 <a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a> <div>最近更新的博客华为OD机试题-最短耗时（JavaScript）华为OD机试题-机器人走迷宫（JavaScript）华为OD机试-新员工座位安排系统（Python）|机试题算法思路华为OD机试-能力组队（Python）|机试题算法思路华为OD机试-内存池（Python）|机试题算法思路使用说明参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。华为OD清单查看地址：bl</div> </li> <li><a href="/article/1891744752185962496.htm" title="推荐开源项目：yfinance —— Python 的 Yahoo Finance 数据接口库" target="_blank">推荐开源项目：yfinance —— Python 的 Yahoo Finance 数据接口库</a> 许煦津 <div>推荐开源项目：yfinance——Python的YahooFinance数据接口库项目地址:https://gitcode.com/gh_mirrors/yf/yfinance项目简介是一个用于Python程序中的金融数据下载库，它允许开发者轻松地从YahooFinanceAPI获取股票、期货、期权、货币等各类金融市场的历史和实时数据。该项目由RanaRoussi开发并维护，为Python社区提供</div> </li> <li><a href="/article/1891742985767415808.htm" title="LLM 参数解析：使用 OpenAI API 在 Python 中的实用指南（含示例）" target="_blank">LLM 参数解析：使用 OpenAI API 在 Python 中的实用指南（含示例）</a> 真智AI <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a> <div>当你使用大语言模型（LLM）时，可能会注意到，即使提交相同的请求，多次运行后仍然会得到不同的回应。这是因为LLM具有概率性，它们的输出基于所学到的模式和概率，而不是固定规则。幸运的是，你可以通过调整特定的参数来控制LLM的行为，就像微调收音机的旋钮来调整到想要的电台一样。理解这些参数可以帮助你更好地定制LLM的输出，使其更具可预测性或创造性，具体取决于你的需求。在本文中，我们将探讨多个关键参数，这</div> </li> <li><a href="/article/1891740966931460096.htm" title="python小白系列：标准库-日历库" target="_blank">python小白系列：标准库-日历库</a> 某个不知名编程爱好者 <a class="tag" taget="_blank" href="/search/python%E5%B0%8F%E7%99%BD%E7%B3%BB%E5%88%97/1.htm">python小白系列</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>python中的日历库可以打印出选择年份的日历先引入日历库importcalendarasday再让用户输入年份year=int(input('Entryyouwantsearchyear:'))PS:这里是英文版，要中文版的来个三连就发中文版最后，用日历库的标准命定打印出日历print(day.calendar(year))PS：后面括号里的是年份，再关联前面的变量就可以打印出用户想打印出的年份</div> </li> <li><a href="/article/1891737691897262080.htm" title="【论文投稿-第五届人工智能与工业技术应用国际学术会议（AIITA 2025）】编程语言大比拼：C、C++、Python 和 Java" target="_blank">【论文投稿-第五届人工智能与工业技术应用国际学术会议（AIITA 2025）】编程语言大比拼：C、C++、Python 和 Java</a> 禁默 <a class="tag" taget="_blank" href="/search/%E8%AF%9D%E9%A2%98%E6%8E%A2%E8%AE%A8/1.htm">话题探讨</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E6%9C%AF%E4%BC%9A%E8%AE%AE/1.htm">学术会议</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>第五届人工智能与工业技术应用国际学术会议（AIITA2025）将于2025年3月28-30日在中国西安举行。会议旨在为从事人工智能、智能制造、自动化等领域的专家学者、工程技术人员、研发人员提供一个共享科研成果和前沿技术，了解学术发展趋势，拓宽研究思路，加强学术研究和探讨，促进学术成果产业化合作的平台。编辑AIITA2025已上线至IEEE官方列表，详情请点击....大会时间：2025年3月28日-</div> </li> <li><a href="/article/1891737187897110528.htm" title="Rust 与 WebAssembly 结合的优势" target="_blank">Rust 与 WebAssembly 结合的优势</a> exploration-earth <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>性能卓越：Rust语言以其可预测的性能著称，能够避免垃圾收集（GC）引发的暂停问题，这些问题常被称作停止世界（STW）暂停或即时编译（JIT）性能瓶颈。代码精简：由Rust编译生成的.wasm文件体积小巧，这有助于提升网页的加载速度。这些文件不会包含如垃圾收集器等不必要的额外开销，同时，通过高级优化和摇树技术，可以有效剔除无用代码，进一步精简文件大小。无缝集成与互操作：Rust具备自动生成与Rus</div> </li> <li><a href="/article/1891735548595335168.htm" title="python_excel批量插入图片" target="_blank">python_excel批量插入图片</a> ramsey17 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a> <div>提取excel的指定列的值的后4位（数值），在其它列名的单元格中，批量嵌入与该数值匹配的图片（未实现居中），每间隔4行处理一次（合并过单元格）。importpandasaspdfromopenpyxlimportload_workbookfromopenpyxl.drawing.imageimportImagefromopenpyxl.utilsimportget_column_letterimp</div> </li> <li><a href="/article/1891735169228926976.htm" title="python自定义日历库，与对应calendar库函数功能基本一致" target="_blank">python自定义日历库，与对应calendar库函数功能基本一致</a> Hann Yang <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/calendar/1.htm">calendar</a> <div>目录自定义日历库常用列表日期列表常用函数闰年判断月份天数元旦序号日历表头星期序号序号及天数月历字串打印月历年历字串打印年历对比测试测试结果完整代码运行结果自定义日历库自定义日历库函数，并使得其与pythoncalendar库中对应的函数功能基本一致。常用列表month_name=['January','February','March','April','May','June','July','A</div> </li> <li><a href="/article/1891734790701379584.htm" title="[python]yfinance国内不能使用" target="_blank">[python]yfinance国内不能使用</a> FL1623863129 <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>yfinance国内不能使用，可以使用tushare、akshare代替importyfinanceasyf#输入股票代码stock_symbol='AAPL'#替换为你想要查询的股票代码#获取股票数据data=yf.download(stock_symbol)#打印实时数据print(data)pipinstallakshareimportakshareasakdf=ak.stock_zh_a_</div> </li> <li><a href="/article/1891734034288013312.htm" title="实用教程：用微服务搭建你的2025项目" target="_blank">实用教程：用微服务搭建你的2025项目</a> zxzy_org <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>微服务架构为构建现代化项目提供了灵活且高效的解决方案。在2025年，如果你计划采用微服务搭建项目，可以参考以下步骤：首先，明确项目的核心需求，合理划分服务边界。一个好的微服务设计需要确保服务粒度适中，不会因为服务过细而增加不必要的复杂性。接着，选择合适的技术栈，主流的语言如Java、Python和GoLang依然是微服务开发的首选。其次，容器化部署是必不可少的步骤，Docker和Kubernete</div> </li> <li><a href="/article/1891733150015483904.htm" title="在linux 中搭建deepseek 做微调，硬件配置要求说明" target="_blank">在linux 中搭建deepseek 做微调，硬件配置要求说明</a> 慧香一格 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/deepseek/1.htm">deepseek</a> <div>搭建可参考使用deepseek-CSDN博客官方网站：DeepSeekDeepSeek是一个基于深度学习的开源项目，旨在通过深度学习技术来提升搜索引擎的准确性和效率。如果你想在Linux系统上搭建DeepSeek，你可以遵循以下步骤。这里我将提供一个基本的指导，帮助你从零开始搭建一个基础的DeepSeek环境。1.安装依赖首先，确保你的Linux系统上安装了Python和pip。DeepSeek主</div> </li> <li><a href="/article/1891729865644765184.htm" title="m1处理器macbook使用qemu模拟运行RT-Thread" target="_blank">m1处理器macbook使用qemu模拟运行RT-Thread</a> 想学rtos的带土 <a class="tag" taget="_blank" href="/search/m1/1.htm">m1</a><a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a><a class="tag" taget="_blank" href="/search/rt-thread/1.htm">rt-thread</a><a class="tag" taget="_blank" href="/search/iot/1.htm">iot</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/macos/1.htm">macos</a><a class="tag" taget="_blank" href="/search/risc-v/1.htm">risc-v</a> <div>最近准备深入学习一下RTOS，好巧不巧的是在前几天换了m1的macbookair，于是想要在电脑上配置一下RT-Thread的开发环境，网上搜了一大堆，没有看到符合需求的相关教程（真的很少很少，哭了，给我整崩溃！）。不过在几天的东平西凑后，成功在我的电脑上完成了RT-Thread的编译与运行。现在分享出来，有需要的可以参考一下。1.工具python3.11.5.我这里应该是用的苹果自带的，这里不用</div> </li> <li><a href="/article/1891728728778665984.htm" title="封装websocket，兼容uniapp及普通vue3应用" target="_blank">封装websocket，兼容uniapp及普通vue3应用</a> 一个水货程序员 <a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>本文将实现websocket的封装,采用typescript+vue3实现，同时支持uniapp中使用。主要实现两个部分：websocket.core.ts，一个封装的websocket对象，用于处理websocket断线重连及生命周期钩子触发useWebsocket.ts，采用vuehook封装上述对象，将实例属性转换为响应式属性以供页面组件内使用websocket.core.tstypeTim</div> </li> <li><a href="/article/1891727718341472256.htm" title="码农避坑指南：Python编程全领域易错点深度剖析与解决方案" target="_blank">码农避坑指南：Python编程全领域易错点深度剖析与解决方案</a> tekin <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AF%E5%8C%BA/1.htm">编程误区</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F/1.htm">代码质量</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AE%89%E5%85%A8/1.htm">数据安全</a><a class="tag" taget="_blank" href="/search/%E7%89%B9%E5%AE%9A%E9%A2%86%E5%9F%9F%E7%BC%96%E7%A8%8B/1.htm">特定领域编程</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7/1.htm">开发技巧</a> <div>在编程世界中，无论是新手还是经验丰富的开发者，都难免陷入各种误区。从Python多线程的使用到微服务架构的管理，每个编程领域都隐藏着容易被忽视的陷阱。这些误区不仅影响代码性能、可读性和维护性，还可能带来安全隐患。本文将深入剖析编程全领域的易错点，通过实际案例和详细讲解，为你提供全面的解决方案，助你避开这些“坑”，编写出更高效、更安全、更易维护的代码。编程语言特性与最佳实践Python多线程与GIL</div> </li> <li><a href="/article/1891726708424372224.htm" title="深入剖析模型推理：原理、技术与挑战" target="_blank">深入剖析模型推理：原理、技术与挑战</a> ♢.＊ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9E%8B%E6%8E%A8%E7%90%86/1.htm">模型推理</a> <div>亲爱的小伙伴们，在求知的漫漫旅途中，若你对深度学习的奥秘、Java与Python的奇妙世界，亦或是读研论文的撰写攻略有所探寻，那不妨给我一个小小的关注吧。我会精心筹备，在未来的日子里不定期地为大家呈上这些领域的知识宝藏与实用经验分享。每一个点赞，都如同春日里的一缕阳光，给予我满满的动力与温暖，让我们在学习成长的道路上相伴而行，共同进步✨。期待你的关注与点赞哟！引言在当今人工智能飞速发展的时代，模型</div> </li> <li><a href="/article/1891725194897190912.htm" title="Docker安装pypiserver私服" target="_blank">Docker安装pypiserver私服</a> MasonYyp <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>Docker安装pypiserver私服1简介Python开源包管理工具有pypiserver、devpi和Nexus等，pypiserver安装部署比较简单，性能也不错。搭建pypiserver私服，可以自己构建镜像，也可以使用官网的docker镜像。#Github地址https://github.com/pypiserver/pypiserver2安装使用docker安装pypiserver#</div> </li> <li><a href="/article/1891722043909533696.htm" title="这知识点真细，Python获取HTTP响应头和响应体" target="_blank">这知识点真细，Python获取HTTP响应头和响应体</a> 梦想橡皮擦 <a class="tag" taget="_blank" href="/search/Python%E7%88%AC%E8%99%AB120/1.htm">Python爬虫120</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E5%85%B7/1.htm">浏览器工具</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python%E7%88%AC%E8%99%AB/1.htm">python爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7/1.htm">开发者工具</a> <div>哈喽！大家好，我是【梦想橡皮擦】，10年产研经验，致力于Python相关技术栈传播本文如果觉得不错，动动小手点个赞赞吧本文如果发现错误，欢迎在评论区中指正哦技术博客日更者，我喜欢写文章，如果任意一篇文章对你有帮助，就挺好的~欢迎大家订阅专栏⭐️⭐️《Python爬虫120》⭐️⭐️最近更新：2022年3月23日，橡皮擦的第610篇原创博客文章目录⛳️实战案例场景⛳️可获取的响应头⛳️实战案例场景这</div> </li> <li><a href="/article/1891721784777043968.htm" title="Python字符模糊匹配指南 RapidFuzz | python小知识" target="_blank">Python字符模糊匹配指南 RapidFuzz | python小知识</a> aiweker <a class="tag" taget="_blank" href="/search/%E8%B7%9F%E6%88%91%E5%AD%A6python/1.htm">跟我学python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Python字符模糊匹配指南RapidFuzz|python小知识最近在看一个rag评估的框架中，看一个字符模糊匹配的库RapidFuzz，在这里介绍给大家。1.RapidFuzz简介RapidFuzz是一个用于Python的快速模糊字符串匹配库，它基于Levenshtein距离和其他相似度度量方法，能够高效地进行字符串比较和匹配。RapidFuzz旨在提供一个快速、准确、易用的模糊匹配工具，特别</div> </li> <li><a href="/article/1891721658436218880.htm" title="VB.NET基于WEB房地产评估系统(源代码+文档)" target="_blank">VB.NET基于WEB房地产评估系统(源代码+文档)</a> csdn663648 <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>资料介绍：--------------摘要--------------房地产评估系统是典型的信息管理系统(MIS),其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的库。而对于后者则要求应用程序功能完备,易使用等特点。本系统特有的房屋基本情况、专业评估人员、估价方法等。经过分析,我们使用MICROSOFT公司的VISUALBA</div> </li> <li><a href="/article/1891721280340684800.htm" title="【Linux&Python】linux中通过源码方式安装python环境" target="_blank">【Linux&Python】linux中通过源码方式安装python环境</a> atwdy <a class="tag" taget="_blank" href="/search/%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/1.htm">环境安装与配置</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>python环境安装直接看第二部分即可。文章目录1.背景2.python安装3.包环境复制1.背景部署一个线上任务时，相同的代码本地开发机正常产出数据，线上产出数据为0，排查到原因是：...File"/home/disk1/wangdeyong/venv/python3_shapely_new/lib/python3.9/site-packages/mcpack/pack.py",line15,i</div> </li> <li><a href="/article/1891718525391794176.htm" title="腾讯云点播Web端上传视频+SDK使用" target="_blank">腾讯云点播Web端上传视频+SDK使用</a> <div>官方链接：Web端上传SDK腾讯云控制台客户端上传签名签名生成示例1、Web端嵌入云点播SDK//安装稳定版本npminstallvod-js-sdk-v6在对应的页面引入importTcVodfrom'vod-js-sdk-v6'入完成后，需要生成签名，签名需要通过SecretId、SecretKey来生成SecretId、SecretKey生成：腾讯云控制台进入云控制台后，点击新建密钥：获取到</div> </li> <li><a href="/article/1891716730544254976.htm" title="Python 源码编译安装详解：跨平台指南及完整步骤解析" target="_blank">Python 源码编译安装详解：跨平台指南及完整步骤解析</a> 敲代码不忘补水 <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6/1.htm">一起学</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85/1.htm">编译安装</a> <div>Python源码编译安装详解：跨平台指南及完整步骤解析文章目录Python源码编译安装详解：跨平台指南及完整步骤解析一准备工作1）Ubuntu/Debian2）CentOS/RHEL3）macOS二下载Python源码三编译与安装1）解压源码2）配置安装选项3）编译源码4）安装四验证安装本文详细介绍了如何在不同操作系统（Ubuntu/Debian、CentOS/RHEL、macOS）上，从源码编译</div> </li> <li><a href="/article/1891714463703298048.htm" title="SpringBoot系列——WebMvcConfigurer介绍" target="_blank">SpringBoot系列——WebMvcConfigurer介绍</a> OkidoGreen <a class="tag" taget="_blank" href="/search/SpringBoot-%E5%8E%9F%E7%90%86/1.htm">SpringBoot-原理</a> <div>为什么要使用WebMvcConfigurer？WebMvcConfigurer是一个接口，提供很多自定义的拦截器，例如跨域设置、类型转化器等等。可以说此接口为开发者提前想到了很多拦截层面的需求，方便开发者自由选择使用。由于Spring5.0废弃了WebMvcConfigurerAdapter，所以WebMvcConfigurer继承了WebMvcConfigurerAdapter大部分内容。Web</div> </li> <li><a href="/article/1891713707902300160.htm" title="Golang 框架介绍" target="_blank">Golang 框架介绍</a> wwwenhx <a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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%90%8E%E7%AB%AF/1.htm">后端</a> <div>以下是一篇可直接发布到CSDN的关于Golang主流框架的技术文章，包含框架对比、使用场景和代码示例：---#Golang主流框架全解析：从Web开发到微服务##引言Go语言凭借其高性能和简洁语法，已成为云原生时代的宠儿。本文将全面解析Go生态中的热门框架，涵盖Web开发、微服务、ORM等领域，助你根据业务需求选择最佳技术方案。---##一、Web开发框架###1.Gin（轻量之王）**特点**：</div> </li> <li><a href="/article/1891713581649555456.htm" title="Python aiohttp" target="_blank">Python aiohttp</a> YOYO__2018 <div>客户端importaiohttpimportasyncioasyncdeffetch(session,url):asyncwithsession.get(url)asresponse:returnawaitresponse.text()asyncdefmain():asyncwithaiohttp.ClientSession()assession:html=awaitfetch(session,'</div> </li> <li><a href="/article/1891711312476565504.htm" title="版本控制与Git实战指南：从入门到WebStorm集成" target="_blank">版本控制与Git实战指南：从入门到WebStorm集成</a> The god of big data <a class="tag" taget="_blank" href="/search/%E6%95%99%E7%A8%8B/1.htm">教程</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7Big%E6%95%B0%E6%8D%AEData/1.htm">大Big数据Data</a><a class="tag" taget="_blank" href="/search/%E5%BB%BA%E7%AB%99/1.htm">建站</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/webstorm/1.htm">webstorm</a><a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a> <div>一、版本控制：数字时代的时光机器在软件开发的世界里，每一次代码修改都如同一次时间旅行。版本控制系统（VersionControlSystem）正是这个领域的时光机器，它不仅能完整记录项目的演化历史，更能让开发者自由穿梭于各个版本之间。Git作为分布式版本控制系统的代表，已成为全球开发者必备的核心工具。Git与传统版本控制系统（如SVN）的关键差异：分布式架构：每个开发者都拥有完整的仓库副本闪电级操</div> </li> <li><a href="/article/1891710177183330304.htm" title="【Three.js】JS 3D library（一个月进化史）" target="_blank">【Three.js】JS 3D library（一个月进化史）</a> Tiffany_Ho <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/Three.js/1.htm">Three.js</a> <div>#春节过完了，该继续投入学习了~作为一个平面开发者，想要增进更多的技能，掌握web3D开发#前置知识与技能1.JavaScript基础-掌握ES6+语法（类、模块、箭头函数、解构等）-熟悉异步编程（Promise、async/await）-了解事件循环和DOM操作2.HTML5和CSS3-熟悉Canvas和WebGL的基础概念-了解CSS3动画和变换（transform、transition）3.</div> </li> <li><a href="/article/1891708536916865024.htm" title="Python如何播放本地音乐并在web页面播放" target="_blank">Python如何播放本地音乐并在web页面播放</a> 玩人工智能的辣条哥 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AEAI/1.htm">开源项目AI</a><a class="tag" taget="_blank" href="/search/Sphere/1.htm">Sphere</a><a class="tag" taget="_blank" href="/search/Butler/1.htm">Butler</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>环境：Python问题描述：Python如何播放本地音乐并在web页面播放解决方案：要在Python中播放本地音乐并在Web页面中播放，您可以采用两种不同的方法：一种是在服务器端使用Python播放音频文件，另一种是创建一个Web应用程序，在客户端通过HTML5的标签来播放音频文件。下面我将分别介绍这两种方法。方法1:使用Python播放本地音乐如果您只是想在服务器端（例如在开发环境中）播放本地音</div> </li> <li><a href="/article/1891708536472268800.htm" title="翻译TypeError: GetPath() takes 1 positional argument but 2 were given" target="_blank">翻译TypeError: GetPath() takes 1 positional argument but 2 were given</a> 李姝瑶 <div>这个错误是Type错误：GetPath()函数只需要1个位置参数，但是给了2个。该错误通常发生在Python代码中，因为该语言要求函数的参数数量必须与函数定义中声明的参数数量相同。在这个例子中，GetPath()函数只接受1个参数，但是在调用函数时给出了2个参数，这导致了TypeError错误。要解决此错误，您需要检查函数调用并确保只传递一个参数给GetPath()函数。如果您需要传递多个参数，请</div> </li> <li><a href="/article/1891708410135638016.htm" title="vue3 naive ui+java下载文件" target="_blank">vue3 naive ui+java下载文件</a> weixin_42485982 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>java后端代码importorg.springframework.http.HttpHeaders;importorg.springframework.http.MediaType;importorg.springframework.http.ResponseEntity;importorg.springframework.web.bind.annotation.GetMapping;impor</div> </li> <li><a href="/article/98.htm" title="微信开发者验证接口开发" target="_blank">微信开发者验证接口开发</a> 362217990 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1+%E5%BC%80%E5%8F%91%E8%80%85+token+%E9%AA%8C%E8%AF%81/1.htm">微信开发者 token 验证</a> <div>微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置第二步：验证服务器地址的有效性第三步：依据接口文档实现业务逻辑这里主要讲第二步验证服务器有效性。建一个</div> </li> <li><a href="/article/225.htm" title="一个小编程题-类似约瑟夫环问题" target="_blank">一个小编程题-类似约瑟夫环问题</a> BrokenDreams <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div> 今天群友出了一题：一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。 &</div> </li> <li><a href="/article/352.htm" title="linux复习笔记之bash shell (5) 关于减号-的作用" target="_blank">linux复习笔记之bash shell (5) 关于减号-的作用</a> eksliang <a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E2%80%9C-%E2%80%9D%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于减号“-”的含义</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E2%80%9C-%E2%80%9D%E7%9A%84%E7%94%A8%E9%80%94/1.htm">linux关于减号“-”的用途</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E2%80%9C-%E2%80%9D%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于“-”的含义</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于减号的含义</a> <div> 转载请出自出处： http://eksliang.iteye.com/blog/2105677 管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有</div> </li> <li><a href="/article/479.htm" title="Unix(3)" target="_blank">Unix(3)</a> 18289753290 <a class="tag" taget="_blank" href="/search/unix+ksh/1.htm">unix ksh</a> <div>1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and ||代表or&nbs</div> </li> <li><a href="/article/606.htm" title="关于ListView中性能优化中图片加载问题" target="_blank">关于ListView中性能优化中图片加载问题</a> 酷的飞上天空 <a class="tag" taget="_blank" href="/search/ListView/1.htm">ListView</a> <div>ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594 如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。现在想出一个方法就是每次都添加一个标识，然后设置图</div> </li> <li><a href="/article/733.htm" title="德国总理默多克：给国人的一堂“震撼教育”课" target="_blank">德国总理默多克：给国人的一堂“震撼教育”课</a> 永夜-极光 <a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2/1.htm">教育</a> <div>http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂</div> </li> <li><a href="/article/860.htm" title="关于Java继承的一个小问题。。。" target="_blank">关于Java继承的一个小问题。。。</a> 随便小屋 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr</div> </li> <li><a href="/article/987.htm" title="23种基本的设计模式" target="_blank">23种基本的设计模式</a> aijuans <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。　　Builder：将一个复杂对象的构建与它的表示分离，使得同</div> </li> <li><a href="/article/1114.htm" title="《周鸿祎自述：我的互联网方法论》读书笔记" target="_blank">《周鸿祎自述：我的互联网方法论》读书笔记</a> aoyouzi <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品. 商业模式不是赚钱模式一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链. 商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求</div> </li> <li><a href="/article/1241.htm" title="JavaScript动态改变样式访问技术" target="_blank">JavaScript动态改变样式访问技术</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/style%E5%B1%9E%E6%80%A7/1.htm">style属性</a><a class="tag" taget="_blank" href="/search/ClassName%E5%B1%9E%E6%80%A7/1.htm">ClassName属性</a> <div> 一:style属性格式: HTML元素.style.样式属性="值"; 创建菜单:在html标签中创建或者在head标签中用数组创建 <html> <head> <title>style改变样式</title> </head> &l</div> </li> <li><a href="/article/1368.htm" title="jQuery的deferred对象详解" target="_blank">jQuery的deferred对象详解</a> bijian1013 <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/deferred%E5%AF%B9%E8%B1%A1/1.htm">deferred对象</a> <div> jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。 &nb</div> </li> <li><a href="/article/1495.htm" title="淘宝开放平台TOP" target="_blank">淘宝开放平台TOP</a> Bill_chen <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%89%A9%E6%B5%81/1.htm">物流</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform，是淘宝合作伙伴开发、发布、交易其服务的平台。支撑TOP的三条主线为： 1.开放数据和业务流程 * 以API数据形式开放商品、交易、物流等业务； &</div> </li> <li><a href="/article/1622.htm" title="【大型网站架构一】大型网站架构概述" target="_blank">【大型网站架构一】大型网站架构概述</a> bit1129 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a> <div>大型互联网特点面对海量用户、海量数据大型互联网架构的关键指标高并发高性能高可用高可扩展性线性伸缩性安全性大型互联网技术要点前端优化 CDN缓存反向代理 KV缓存消息系统分布式存储 NoSQL数据库搜索监控安全想到的问题： 1.对于订单系统这种事务型系统，如</div> </li> <li><a href="/article/1749.htm" title="eclipse插件hibernate tools安装" target="_blank">eclipse插件hibernate tools安装</a> 白糖_ <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool</div> </li> <li><a href="/article/1876.htm" title="Jquery easyui Form表单提交注意事项" target="_blank">Jquery easyui Form表单提交注意事项</a> bozch <a class="tag" taget="_blank" href="/search/jquery+easyui/1.htm">jquery easyui</a> <div>jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下： 1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要</div> </li> <li><a href="/article/2003.htm" title="Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量" target="_blank">Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量</a> bylijinnan <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div> import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna</div> </li> <li><a href="/article/2130.htm" title="html css 鼠标形状样式汇总" target="_blank">html css 鼠标形状样式汇总</a> chenbowen00 <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>css鼠标手型cursor中hand与pointer Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Example：CSS鼠标手型效果 <a href="#" style=&qu</div> </li> <li><a href="/article/2257.htm" title="[IT与投资]IT投资的几个原则" target="_blank">[IT与投资]IT投资的几个原则</a> comsci <a class="tag" taget="_blank" href="/search/it/1.htm">it</a> <div> 无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的...... </div> </li> <li><a href="/article/2384.htm" title="oracle with语句详解" target="_blank">oracle with语句详解</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/with/1.htm">with</a><a class="tag" taget="_blank" href="/search/with+as/1.htm">with as</a> <div>oracle with语句详解转在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用例子:注意，这是sql语句，不是pl/sql语句，可以直接放到jdbc执行的 ----------------------------------------------------------------</div> </li> <li><a href="/article/2511.htm" title="hbase的简单操作" target="_blank">hbase的简单操作</a> deng520159 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表 # 语法：create <table>, {NAME => <family&g</div> </li> <li><a href="/article/2638.htm" title="C语言scanf继续学习、算术运算符学习和逻辑运算符" target="_blank">C语言scanf继续学习、算术运算符学习和逻辑运算符</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>/* 2013年3月11日20:37:32 地点：北京潘家园功能：完成用户格式化输入多个值目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用</div> </li> <li><a href="/article/2765.htm" title="2015越来越好" target="_blank">2015越来越好</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E6%AD%8C%E6%9B%B2/1.htm">歌曲</a> <div>越来越好房子大了电话小了感觉越来越好假期多了收入高了工作越来越好商品精了价格活了心情越来越好天更蓝了水更清了环境越来越好活得有奔头人会步步高想做到你要努力去做到幸福的笑容天天挂眉梢越来越好婆媳和了家庭暖了生活越来越好孩子高了懂事多了学习越来越好朋友多了心相通了大家越来越好道路宽了心气顺了日子越来越好活的有精神人就不显</div> </li> <li><a href="/article/2892.htm" title="java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim" target="_blank">java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim</a> feiteyizu <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date java.sql.SQLException: Valu</div> </li> <li><a href="/article/3019.htm" title="Ehcache（07）——Ehcache对并发的支持" target="_blank">Ehcache（07）——Ehcache对并发的支持</a> 234390216 <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E9%94%81/1.htm">锁</a><a class="tag" taget="_blank" href="/search/ReadLock/1.htm">ReadLock</a><a class="tag" taget="_blank" href="/search/WriteLock/1.htm">WriteLock</a> <div>Ehcache对并发的支持在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同</div> </li> <li><a href="/article/3146.htm" title="mysql中blob,text字段的合成索引" target="_blank">mysql中blob,text字段的合成索引</a> jackyrong <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能，但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找则速度快比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep</div> </li> <li><a href="/article/3273.htm" title="逻辑运算与移位运算" target="_blank">逻辑运算与移位运算</a> latty <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97/1.htm">逻辑运算</a> <div>源码：正数的补码与原码相同例+7 源码：00000111 补码：00000111 （用8位二进制表示一个数）负数的补码：符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。 -7 源码： 10000111 ，其绝对值为00000111 取反加一：11111001 为-7补码已知一个数的补码，求原码的操作分两种情况：</div> </li> <li><a href="/article/3400.htm" title="利用XSD 验证XML文件" target="_blank">利用XSD 验证XML文件</a> newerdragon <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xsd/1.htm">xsd</a> <div>XSD文件（XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类可以实现对XSD验证的支持，使用起来也很方便。以下代码可用在J</div> </li> <li><a href="/article/3527.htm" title="搭建 CentOS 6 服务器(12) - Samba" target="_blank">搭建 CentOS 6 服务器(12) - Samba</a> rensanning <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>（1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc</div> </li> <li><a href="/article/3654.htm" title="Learn Nodejs 01" target="_blank">Learn Nodejs 01</a> toknowme <a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>（1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载（2）安装nodejs 安装的方式比较多，请baidu下我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本（1）上传服务器（2）解压 tar -zxvf node-v0.12.</div> </li> <li><a href="/article/3781.htm" title="jquery控制自动刷新的代码举例" target="_blank">jquery控制自动刷新的代码举例</a> xp9802 <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>1、html内容部分复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option</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>