HTML编程

通俗的解释：HTML是一个没有穿衣服的人

CSS是穿上了华丽衣服的人

JS是使这个人动起来

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

例一：模拟web服务器，供浏览器客户端访问

#!/usr/bin/env python

# -*- coding:utf-8 -*-

import socket

def handle_request(client):

    buf = client.recv(1024)

    client.send("HTTP/1.1 200 OK\r\n\r\n")

    client.send('12345')

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    sock.bind(('localhost', 8003))

    sock.listen(5)

    while True:

        connection, address = sock.accept()

        handle_request(connection)

        connection.close()

if __name__ == '__main__':

    main()

运行此服务端后，浏览器访问如下：

例二：模拟拟web服务器，供浏览器客户端访问，此时web服务器加上了html等效果

服务端sock(注意这里我加了h1这个html标签，并且设置成了红色字体，端口我换了一个，有冲突，但加上一个重复利用端口参数加上就可以了。)

#!/usr/bin/env python

# -*- coding:utf-8 -*-

import socket

def handle_request(client):

    buf = client.recv(1024)

    client.send("HTTP/1.1 200 OK\r\n\r\n")

    client.send("<h1 style='color:red;'>12345</h1>")

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    sock.bind(('localhost', 8004))

    sock.listen(5)

    while True:

        connection, address = sock.accept()

        handle_request(connection)

        connection.close()

if __name__ == '__main__':

    main()

运行此服务端后，浏览器访问如下：

例三:：不知不觉就写出了一个简介的WEB框架了

服务端sock，这里我读入s.log文件里的内容

#!/usr/bin/env python

# -*- coding:utf-8 -*-

import socket

def handle_request(client):

    buf = client.recv(1024)

    client.send("HTTP/1.1 200 OK\r\n\r\n")

    a = open('s.log')

    data = a.read()

    a.close()

    client.send(data)

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    sock.bind(('localhost', 8005))

    sock.listen(5)

    while True:

        connection, address = sock.accept()

        handle_request(connection)

        connection.close()

if __name__ == '__main__':

    main()

s.log文件如下,下面是html内容，为了规范，一般将下面内容存成一个.html后缀的文件

 <h1 style='color:red;'>12345</h1>

运行此服务端后，浏览器访问如下：也能看到有效果出来，说明应用s.log文件里的内容成功。

HTML

新建一个html文件默认内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

</body>

</html>

注：HTML的注释使用来表示，多行同样的适用。

　　CSS的注释使用/* 内容 */来表示，多行同样的适用。

　　JavaScript注释使用//内容表示单行注释，多行注释使用/*内容*/来注释。

　　jQuery是JavaScript的一个代码库(类库)，可使用的注释与它一样，用//内容与/*内容*/来注释。

HTML head(头)

直接上栗子吧！这样更容易解释与理解。

例一：设置了5秒钟刷新一次页面，并写了一个h1标签显示效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
　　<!--5秒钟刷新一次页面-->

    <meta http-equiv="Refresh" Content="5">

    <title></title>

</head>

<body>  

<h1>ssssss</h1>

</body>

</html>

浏览器运行并打开F12网站调度键效果如下:会不断的5s刷新页面

例二：刷新页面并跳转

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--5秒钟刷新一次页面-->

    <!--<meta http-equiv="Refresh" Content="5">-->

    <!--5秒刷新页面并跳转，跳转后就不刷新了-->

    <meta http-equiv="Refresh" Content="5;Url=http://www.taobao.com">

    <title></title>

</head>

<body>  

<h1> ssssssssssssssssssssssss</h1>

</body>

</html>

浏览器运行效果如下:5s钟后刷新页面会跳转到www.taobao.com去了

例三：title的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--5秒钟刷新一次页面-->

    <!--<meta http-equiv="Refresh" Content="5">-->

    <!--5秒刷新页面并跳转-->

    <!--<meta http-equiv="Refresh" Content="5;Url=http://www.taobao.com">-->

    <title>我的网页头部信息</title>

</head>

<body>  

<h1> ssssssssssssssssssssssss</h1>

</body>

</html>

浏览器运行效果如下:

例四：title下的link来加上icon网页头部图片favicon.icon

制作好的图片需要放在供html文件访问到的位置，这里我放在与html文件相同目录下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--5秒钟刷新一次页面-->

    <!--<meta http-equiv="Refresh" Content="5">-->

    <!--5秒刷新页面并跳转-->

    <!--<meta http-equiv="Refresh" Content="5;Url=http://www.taobao.com">-->

    <title>我的网页头部信息</title>

    <!--添加的网页小图标-->

    <link rel="shortcut icon" href="favicon.icon" >

</head>

<body>  

<h1> ssssssssssssssssssssssss</h1>

</body>

</html>

浏览器运行效果如下:

HTML body

内联标签(自己有多少占多少)

块级标签(占整行)

为了方便实验，我新建了一个h2.html文件。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<h1 style=""> sssssss</h1>

<a style="">我的页面</a>

</body>

</html>

其中body下的<a>标签是内联标签，<h1>标签是块级标签

浏览器运行效果如下：

需要注意的是:red与 green后面都有一个分号，这样的话在分号后面还可以设置参数，比如字体字体颜色等

修改成如下<a style="color:antiquewhite;">我的页面</a>

例二：HTML中特殊字符处理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

&lt;h1&gt;

</body>

</html>

这里<代表<小于，>代表>大于

浏览器运行如下:

附HTML特殊字符编码对照表：http://www.jb51.net/onlineread/htmlchar.htm

常用标签

　　p和br

　　p表示段落，默认段落之间是有间隔的

　　br是换行

例一：p的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<p>雄姿英雄姿英发</p>

<p>雄姿英雄姿英发</p>

<p>雄姿英雄姿英发</p>

</body>

</html>

浏览器运行如下：可以看到，段落中间就间隔

例二:br的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<p>雄姿英雄姿英发</p>

<p>雄姿英雄姿资资资资资<br/>资资资资资英发</p>

<p>雄姿英雄姿英发</p>

</body>

</html>

浏览器运行如下：可以看到，从br代码处分隔了，分隔后没有间隔

例三：各种跳转，锚

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<a target="_blank" href="http://www.taobao.com">新开页面跳转到一个URL地址</a>

<a href="#a2">点击跳转到a2书签</a>

<div id="a1" style="height:700px;">1</div>

<div id="a2" style="height:500px;">2</div>

</body>

</html>

href表示跳转，并且是本页面跳转，加上target="_blank"后表示新开一个页面跳转，href="#a2"表示点击后则会跳转到id为a2标签上面去，#很关键。

浏览器运行如下：

例四：基础下拉菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<select name="group">

    <option value="1">上海</option>

    <option value="2">北京</option>

    <option value="3" selected="selected">广州</option>

</select>

</body>

</html>

浏览器运行如下：可以看到上面的代码中，selected设置的为广州就表示默认不选择的话就是广州

例五：下拉框(二)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<select multiple="multiple" size="2">

    <option value="1">上海</option>

    <option value="2">北京</option>

    <option value="3" selected="selected">广州</option>

</select>

</body>

</html>

浏览器运行如下:Multiple代表可以按着shift多选，size代表下拉框显示多长

例六：下拉框(三)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<select>

    <optgroup label="河北省">

        <option>石家庄</option>

        <option>邯郸</option>

    </optgroup>

    <optgroup label="山西省">

        <option>太原</option>

        <option>平遥</option>

    </optgroup>

</select>

</body>

</html>

浏览器运行如下：label不能选，只是显示一下。

上面已经说到1，各种符号；2，p和br；3，a标签；4，H标签；5，select标签；

接下来就要学习input了

input系列

例一：input 的checkbox(多选框),checked="checked"表示默认勾选上了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<input type="checkbox" />

<input type="checkbox" />

<input type="checkbox" checked="checked" />

</body>

</html>

浏览器运行如下：

例二：input的 radio;Radio一般用于只能选一个的时候，比如性别

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<input type="radio" />

<input type="radio" />

<input type="radio" />

</body>

</html>

浏览器运行如下：可以看到默认可以多选

默认的是可以多选的，只要加上一个参数name参数设置为相同就只能单选了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<input type="radio" />

<input type="radio" />

<input type="radio" />

<hr />

<input type="radio" name="gender"/>

<input type="radio" name="gender"/>

<input type="radio" name="gender"/>

</body>

</html>

浏览器运行如下：只能单选

例三：input系统文本框

<input /> 不写任何参数默认就是一个文本框

type=”text”表示文本框,type=”password”表示密码文本框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<input type="text" />

<input type="password" />

<input />

</body>

</html>

浏览器运行如下：

例四：input系列button按钮及file文件上传

type=”file”表示上传文件按钮type="text" value="123"表示文本框默认有值123。type=”button”与type=”submit”都表示按钮此处看着没有差别，其实是有差别的，如果submit按钮处于from表单里面，则会将这个from表单提交给后台。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<input type="button" value="提交"/>

<input type="submit" value="提交"/>

<input type="file" />

<input type="text" value="123" />

</body>

</html>

浏览器运行如下：

以上input系列就完了，值得一提的是，有一个textarea标签与input系列的type=”text”类似，只是textarea标签可以输入多行的框，而text只能单行

例一：使用textarea多行输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<input type="text" value="123" />

<textarea>123 </textarea>

</body>

</html>

浏览器运行如下：

例二：如果学了css还可以自己指定文本框的大小

下面的style="height:50px;width:50px;"就是指定文件框的大小为50像素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<input type="text" value="123" />

<textarea style="height:50px;width:50px;">123 </textarea>

</body>

</html>

浏览器运行如下：

form表单

可以有多个表单存在

例一：表单中使用input系列的submit提交

以下写了两个按钮，但只有submit按钮有效果，button按钮不行。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<!--第一个表单-->

<form>

    <p>用户名：<input type="text" /></p>

    <p>密码：<input type="password" /></p>

    <input type="submit" value="提交"/>

    <input type="button" value="按钮"/>

</form>

<!--第二个表单-->

<form>

    <p>用户名：<input type="text" /></p>

    <p>密码：<input type="text" /></p>

</form>

</body>

</html>

浏览器运行如下：

例二：模拟使用submit按钮提交一个表单，表单开头的method="get"可以不写，默认就是get

注意性别那一栏的value 这里必须要指定一个值用于区别，否则提交给服务器的表单这个性别值为on，服务器区别不出来

模拟提交表单及性别单选

浏览器运行如下：(此时不能点提交向服务器提交表单，因为我的服务器地址设置的是<form action="http://127.0.0.1:8000/login/" method="get">，这个地址并不能使用)

例三：兴趣爱好可以多选，投票也可以多选

使用input系列的checkbox多选框可以通过设置不同的name及value来区分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<form action="http://127.0.0.1:8000/login/" method="get">

    <p>

        用户名：<input type="text" />

    </p>

    <p>

        密码：<input type="password" />

    </p>

    <p>

        部门：<select name="depart">

                <option value="1">CEO</option>

                <option value="2">DBA</option>

              </select>

        性别：<input type="radio" name="gender" value="1" />男<br/>

              <input type="radio" name="gender" value="2" />女<br/>

              <input type="radio" name="gender" value="3" />中<br/>

        <textarea name="mulit"></textarea>

        兴趣爱好：    <input type="checkbox" name="favor" value="v1" />

                    <input type="checkbox" name="favor" value="v2" />

                    <input type="checkbox" name="favor" value="v3" />

                    <input type="checkbox" name="favor" value="v4" />

        投票：        <input type="checkbox" name="vote" value="v11" />

                    <input type="checkbox" name="vote" value="v22" />

                    <input type="checkbox" name="vote" value="v33" />

                    <input type="checkbox" name="vote" value="v44" />

    </p>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

浏览器打运行如下：我这里选择了兴趣第一个与每二个框，投票的第二个与第三个框，使用submit按钮提交个表单服务器就能看到提交的值key=favor value=[v1,v2],key=vote value=[v22,v33],这儿同样不能提交

例四：模拟使用submit按钮提交表单(提交到搜狗搜索)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<form action="https://www.sogou.com/web?">

    <p>关键字:<input type="text" name="query"/></p>

    <input type="submit" />

</form>

</body>

</html>

浏览器打运行如下：使用搜狗搜索一般https://www.sogou.com/web?query=我的世界这样子，我在上面代码中将自己的key定义成了query。这样输入的值就是value了，也就是query=等号后面的值

例五：几种列表格式

label for=”name2” 跟之前说过的锚有点儿相似，这里的效果是点姓名，或婚否这几个中文字会跳到相应的输入框中。

<ul><li>结合使用表示前面的编号为黑点<ol><li>结合使用表示前面的编号为有序的数字

<dl><dt><dd>中<dt>代表相当于省<dd>想当于省下面的市这样的层级关系

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<label for="name2">

姓名：

    <input id="name2" type="text">

<label>

<label for="marriy2">

婚否：

    <input id="marriy2" type="checkbox">

<label>

<ul>

    <li>sssssssssssssssssssss</li>

    <li>sssssssssssssssssssss</li>

    <li>sssssssssssssssssssss</li>

    <li>sssssssssssssssssssss</li>

</ul>

<ol>

    <li>sssssssssssssssssssss</li>

    <li>sssssssssssssssssssss</li>

    <li>sssssssssssssssssssss</li>

    <li>sssssssssssssssssssss</li>

</ol>

<dl>

    <dt>湖南省</dt>

        <dd>长沙市</dd>

        <dd>株洲市</dd>

    <dt>广东省</dt>

        <dd>广州市</dd>

        <dd>深圳市</dd>

</dl>

</body>

</html>

浏览器打运行如下：

例六：合并单元格

colspan="2"表示向右合并，占两格。rowspan="2"表示向下合并，占两格。最后面一行的<td>1</td>我删除掉了，不然的话会出现空白行。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<!--合并单元格-->

<table border="1">

    <tr>

        <td colspan="2">1</td>

        <td>3</td>

    </tr>

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

    <tr>

        <td rowspan="2">1</td>

        <td>2</td>

        <td>3</td>

    </tr>

    <tr>

        <td>2</td>

        <td>3</td>

    </tr>

</table>

</body>

</html>

浏览器打运行如下：

例七：加深标题单元格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<!--合并单元格2-->

<table border="1">

    <thead>

        <tr>

            <th>标题1</th>

            <th>标题2</th>

            <th>标题3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td colspan="2">1</td>

            <td>3</td>

        </tr>

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

        <tr>

            <td rowspan="2">1</td>

            <td>2</td>

            <td>3</td>

        </tr>

        <tr>

            <td>2</td>

            <td>3</td>

        </tr>

    </tbody>

</table>

</body>

</html>

浏览器打运行如下：

例八：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<fieldset>

    <legend>登陆</legend>

    <p>用户名:</p>

    <p>密码:</p>

</fieldset>

</body>

</html>

浏览器运行如下：这种一般不常用。一般自己写的。

例九：div标签及块级与内联标签之间的转换

div不作任何处理，只是作为一个容器，分割页面。div 是块级标签，可以通过display转换为内联标签，他们是可以互相转换的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<div style="">div是块级标签</div>

<div style="display:inline">块级变内联标签</div>

<a style="display:block">内联标签变块级标签</a>

<div>div相当于一个大容器，而小容器则是span标签<span style="display:block">span转换成块级标签后</span></div>

</body>

</html>

浏览器运行效果如下：

CSS

选择器

有三种方法设置CSS，其中它们的优先级

　　　　最高是自己文件的style=”color:red;”这种

　　　　第二是class=”re”这种

最后才是调用CSS文件

例一：style=”color:red;” 的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<div style="color:red;">

kkkkk

</div>

</body>

</html>

浏览器运行效果如下：

例二: class=”re”的使用

可以看到，在<head>里面加上了一个<style>指定了一个class为re

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .re{

            color:red;

        }

    </style>

</head>

<body>  

<span class="re">rerere</span>

</body>

</html>

浏览器运行效果如下：

例三：调用CSS文件

注意创建CSS文件的时候选择的就是stylesheet这种类型

common.css文件内容如下：

.re{

    color:red;

}

h2.html文件如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <!--调用 common.css文件-->

    <link rel="stylesheet" href="common.css" />

</head>

<body>  

<span class="re">css</span>

<span class="re">css</span>

<span class="re">css</span>

</body>

</html>

浏览器运行效果如下：也能看到样式应用上了

例四：调用css文件的几种类型

common.css文件内容如下

.re{

    color:red;

}

#name{

    background-color:antiquewhite;

}

span{

    font-size:100px;

}

上面的.re代表所有class="re"所有这样调用的生效，#name代表所有id是name的就生效，span代表所有的span标签都生效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <!--调用 common.css文件-->

    <link rel="stylesheet" href="common.css" />

</head>

<body>  

<span style="color:#dddddd;" class="re">asdf</span>

<span class="re">asdf</span>

<span id="name" class="re">asdf</span>

</body>

</html>

浏览器运行效果如下：

Background(背景颜色)，图片，border(边框)

Common.css文件如下：

.re{

    color:red;

}

#name{

    background-color:antiquewhite;

}

span{

    font-size:100px;

}

需要一张图片，路径如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <!--调用 common.css文件-->

    <link rel="stylesheet" href="common.css" />

</head>

<body>  

<!--背景颜色条-->

<div style="">&nbsp;</div>

<!--背景图片-->

<div style="background-image:url('image/4.gif'); height: 80px;"></div>

<!--加上no-repeat避免图片重复-->

<div style="background-image:url('image/4.gif'); height: 80px;background-repeat:no-repeat"></div>

<!--加上边框，solid代表实线,border代表大小，red代表颜色-->

<div style="border:1px solid red; height: 10px;"></div>

<br></br>

<div style="border:1px dotted red; height: 10px;"></div>

<br></br>

<div style="border:1px dashed red; height: 10px;"></div>

<!-- border-left表示左边3px大小的线-->

<div style="border-left:3px solid green;">asdfasdf</div>

<div style="border-right:3px solid green;">asdfasdf</div>

<div style="border-top:3px solid green;">asdfasdf</div>

<div style="border-bottom:3px solid green;">asdfasdf</div>

<!--设置style="display:none"后会消失，去掉即展现出来-->

<!--如果display设置为block则将标签由内联标签转换成块级标签，设置为inline则将块级标签设置为内联标签-->

<span id="name" class="re" style="display:none">ssss</span>

</body>

</html>

浏览器运行效果如下：

Cursor(鼠标)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>  

<div>

    <h2>cursor</h2>

        <a href="http://www.autohome.com.cn">autohome</a>

        <input type="text">

        <span>老衲</span>

        <ul>

            <li>css提供的cursor值</li>

                <p>

                    <!--鼠标移动到这些字上面会有不同的状态-->

                    <span style="cursor:pointer;">pointer</span> ||

                    <span style="cursor:help;">help</span> ||

                    <span style="cursor:wait;">wait</span> ||

                    <span style="cursor:move;">move</span> ||

                    <span style="cursor:crosshair;">crosshair</span>

                </p>

            <li>伪造超链接</li>

                <p><span style="cursor:pointer;color:blue;">pointer</span></p>

            <li>自定义(一般不用)</li>

                <p>

                    <span style="cursor:url(image/favicon.icon),auto;">mine</span>

                </p>

        </ul>

    <br>

</div>

</body>

</html>

浏览器运行效果如下：

浮动

因为是块级标签会占整行，所以这里设置一个float：left；来往左漂，左对齐。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .w-left{

            width: 20%;

            background-color:red;

            height:500px;

            float: left;

        }

        .w-right{

            width: 80%;

            background-color:green;

            height:500px;

            float: left;

        }

    </style>

</head>

<body>  

<div>

    <div class="w-left"></div>

    <div class="w-right"></div>

</div>

</body>

</html>

浏览器运行效果如下：

HTML编程的更多相关文章

从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
[ 高并发]Java高并发编程系列第二篇--线程同步
高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...
C#异步编程(一)
异步编程简介前言本人学习.Net两年有余,是第一次写博客,虽然写的很认真,当毕竟是第一次,肯定会有很多不足之处, 希望大家照顾照顾新人,有错误之处可以指出来,我会虚心接受的. 何谓异步与同步相对 ...
UE4新手之编程指南
虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...
C#与C++的发展历程第三 - C#5.0异步编程巅峰
系列文章目录 1. C#与C++的发展历程第一 - 由C#3.0起 2. C#与C++的发展历程第二 - C#4.0再接再厉 3. C#与C++的发展历程第三 - C#5.0异步编程的巅峰 C#5.0 ...
猫哥网络编程系列：HTTP PEM 万能调试法
注:本文内容较长且细节较多,建议先收藏再阅读,原文将在 Github 上维护与更新. 在 HTTP 接口开发与调试过程中,我们经常遇到以下类似的问题: 为什么本地环境接口可以调用成功,但放到手机上就跑 ...
关于如何提高Web服务端并发效率的异步编程技术
最近我研究技术的一个重点是java的多线程开发,在我早期学习java的时候,很多书上把java的多线程开发标榜为简单易用,这个简单易用是以C语言作为参照的,不过我也没有使用过C语言开发过多线程,我只知 ...
异步编程 In .NET
概述在之前写的一篇关于async和await的前世今生的文章之后,大家似乎在async和await提高网站处理能力方面还有一些疑问,博客园本身也做了不少的尝试.今天我们再来回答一下这个问题,同时我们 ...

随机推荐

【EF学习笔记05】----------操作内存中的数据
SingleOrDefault实验 //SingleOrDefault实验 using (var db = new Entities()) { var classes = new Classes() ...
移动端自动化环境搭建-Android-SDK的安装
安装android的sdk包 A.安装依赖我们做的是移动端的自动化测试,肯定就需要android的开发环境网上也有好多教程,我只是用的最简单的 B.安装过程首先需要前往android官网,找到S ...
MyEclipse+Tomcat 启动时出现A configuration error occured during startup错误的解决方法
MyEclipse+Tomcat 启动时出现A configuration error occured during startup错误的解决方法分类: javaweb2013-06-03 14:4 ...
Jvm支持的最大线程数
摘自 http://blog.csdn.net/xyls12345/article/details/26482387 JVM最大线程数 (2012-07-04 23:20:15) 转载▼ 标签: jv ...
zabbix通过curl命令判断web服务是否正常并自动重启服务
zabbix通过curl命令判断web服务是否正常并自动重启服务主要思路: 通过curl命令获取服务器响应码,如果正常返回200,不正常返回000 具体命令: curl -I -s -w " ...
解决PHP在IE中下载文件,中文文件名乱码问题
if( stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE')!==false ) $filename = urlencode( $filename ); // 输入 ...
linux C学习笔记03--单链表
单链表一直是程序员的基础,我也来复习下,下面是link.c中的代码,供main.c 调用,代码很简单,单链表的插入,删除,查找和遍历输出, #include <stdio.h> #incl ...
先进先出集合queue
先进先出集合queue Enqueue添加到集合最后 Dequeue移除集合第一个对象并返回
linux--杂记(rework)
1.The mind behind Linux https://www.ted.com/talks/linus_torvalds_the_mind_behind_linux 2.Emacs ORG-M ...
servlet二
ServletConfig讲解 1.1.配置Servlet初始化参数在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些初始 ...

HTML编程

HTML

HTML head(头)

HTML body

input系列

form表单

CSS

选择器

Background(背景颜色)，图片，border(边框)

Cursor(鼠标)

浮动

HTML编程的更多相关文章

随机推荐

热门专题