1.格式 dreamwave
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>中文测试。。。。</title>
</head>
<body>
这里是测试body测试内容。。。
</body>
</html>
使用一个可以调整格式的软件，后缀为html，可以提示你正确和错误
要选择UTF-8编码，可以先转为utf-8，在使用utf-8
设置网页背景和颜色
<html>
<head>
<style>
body {
background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">访问 W3School.com.cn！</a></p>
</body><html>
<head>
<style>
body {background-color: #E6E6FA;}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.w3school.com.cn">访问 W3School.com.cn！</a></p>
</body>2.标签 在body内
<h1></h1>双标签 标题 ，加粗，换行 1-6 ---》小
<p></p> 双标签 段落，有换行功效
<hr> 单标签 左到右分割符
<!-- -->注释
3，元素的属性
给元素提供更多的属性，大部分的元素属性
语法：<标签 属性1=参数1 属性2=参数2>
1）align left，right，center
2) bgcolor ，body的属性设置网页的背景色
<body bgcolor="0xff1234" bgcolor="0xff1234">
4,文本元素属性
b 元素 <b>内容</b> 加粗
br 换行<br> 如果是p标签中间有间隔
i元素， 字体倾斜<i></i>
del元素 删除文字<del></del>
strong 强调一段文字，效果类似 b标签
u元素，下划线<u></u>
small元素， 超小字体<small></small>
sub 下标<sub></sub>
sup 上标<sup></sup>
<br>h<sub>2</sub>0
<br>100m<sup>2</sup>
ruby,拼音，<ruby>二姐 <rt>(er) (jie)<rt></ruby>，可能部分浏览器不支持。
mark 元素 <mark> </mark> 加黄色背景
<h1 >h1</h1>
<h3 style="text-align:center">h3</h3>
<h6 align='right'>h6</h6>
<p><h1 style='color:gray'>随着后<br><br><br>续信息的披露，我们可以了解到更多这次美军部署菲律宾中程导弹的信息。这次部署是美菲“盾牌2024”</h1></p><hr><p>（Salaknib 2024）联合演习的一部分演练内容。4月，美陆军第1多域特遣部队第3野战炮兵团第5营（远程火力营）的“</p>
<b>内容</b><i>字体倾斜</i><del>删除文字</del>
<u>下划线</u> <small>超小字体</small><br>h<sub>2</sub>0
<br>100m<sup>2</sup><ruby>二姐 <rt>(er) (jie)<rt></ruby>
<mark>加黄色背景 </mark> 5超链接
5种形式
1，链接外部网站
2，链接本地文件
3，图片链接
4，电子邮件链接打开电子邮件
5，下载文件链接
<a href="http://www.baidu.com">baidu</a>
<br><a href="1.html">1111</a>
<br><a href="1.html"><img src="abc.jpg"></a>
<br><a href="mailto:123@13.com">contract me</a>
<br><a href="abc.jpg">下载</a>
上面的方法在打开新网页时，老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>
<a href="http://www.baidu.com">baidu</a>
<br><a href="02.html">go 2</a>
<br><a href="http://www.taobao.com"><img src="1.png"></a>
<br><a href="mailto:123@13.com">contract me</a>
<br><a href="1.7z">下载</a>6 img 单标签
src 图像来源
alt 如果不能正确打开，显示的文字
width, heigh
<img src="abc.jpg" alt="美女" width="100" height="200">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的， 高度百分比无效的
<img src="1.jpg" alt="美女" width="300" height="200">
7列表
有序列，无序序列
自定义列表
无序列表 前面无数字
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
有个type属性 文字最前面的符号
disc 黑色实心圆
circle 白色空心圆
square 黑色方块
有序列，前面有数字
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
其中可以放文字，图片，或链接
有type属性，设置排序使用什么数字
start 开始值，后面的++；
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<ol type='I'>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
8 表格
表格的构成，
table，外框
tr 行
td 列
<table>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
3行 3列
表格的属性
border 边框粗细
th,是tr的属性，列标题，自动居中，加粗
colspan，横向合并单元格，需要 整形参数
<tr><th colspan="3">name</th></tr>
表格的合并
rowspan ,列项合并，整数参数
<!DOCTYPE html>
<html >
<body >
<table border ='1' >
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<table border ='1' >
<tr><th colspan="3">1-1</th></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<table border ='1' >
<tr><th rowspan="3">1-1</th><td>1-2</td><td>1-3</td></tr>
<tr><td>2-2</td><td>2-3</td></tr>
<tr><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>9 html 实体
用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的
10，表单 传递参数，数据
<form></form>
<!-- 表单中重要的字元素 input button -->
<!-- 属性 action，指定表单发送的地址 -->
<!-- 属性 method 发送的方式 get，post -->
<!--get方法 数据会附加到url的后面传递给服务器 默认-->
<!--post，将数据包大包发给服务器，等候服务器来读取 -->
13，input元素，（输入框）他是表单的一个字属性
指定表单中的内容项，比如输入内容的文本框
可以指定表单属性，也可以放在表单的外面。
input元素的属性：
type，指定输入框的类型，text单行文本，password密码，submit提交按钮，
reset，重置按键，button按键，普通的按键需要和特定的时间关联。
image：图片式按键
hidden:隐藏字段，该内容不显示在页面上，提交其他的一些变量。
email: 是一个邮箱类型，新特性，可能支持有差异
required:表示内容必须填写，不然不能提交。
name：名称，输入内容识别名称，传递参数时候的参数名称
value： 默认值，输入框默认填入的内容，
maxlength，指定最大长度
placeholder,设置提示信息的。
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>登录测试</title>
</head>
<body>
<h1 align='center'>登录 </h1>
<form action='login'>
用户名：<input type='text' name='username' required='required' placeholder='请输入微信账号'>
密码：<input type='password' name='userpw' required='required' placeholder='qq的密码'>
<input type='submit'>
</form>
</body>
</html>
服务器实例
#include <stdio.h>
#include <stdlib.h>
#include <unistd.h>
#include <string.h>
#include <sys/types.h> /* See NOTES */
#include <sys/socket.h>
#include <netinet/in.h>
#include <netinet/ip.h>
#include <arpa/inet.h>
#include <time.h>
#include <fcntl.h>
#include <string.h>
#include <sys/stat.h>
typedef struct sockaddr* (SA);
int send_head(int conn,char* filename)
{
struct stat st;
int ret = stat(filename,&st);
if(-1 == ret)
{
return 1;
}
char buf[512]={0};
char *http_cmd[6]={NULL};
http_cmd[0]="HTTP/1.1 200 OK\r\n";
http_cmd[1]="Server: MyServer\r\n";
http_cmd[2]="Content-Type: text/html;charset=utf-8\r\n";
http_cmd[3]=buf;
sprintf(http_cmd[3],"Content-Length: %lu\r\n",st.st_size);
//http_cmd[3]=;
http_cmd[4]="Connection: closed\r\n";
http_cmd[5]="Date: Sun, 11 Aug 2024 06:58:38 GMT\r\n\r\n";
int i = 0 ;
for(i=0;i<6;i++)
{
send(conn,http_cmd[i],strlen(http_cmd[i]),0);
}
}
int send_file(int conn,char* filename)
{
send_head(conn,filename);
int fd = open(filename,O_RDONLY);
if(-1 ==fd)
{
perror("open");
return 1;
}
while(1)
{
char buf[4096]={0};
int rd_ret = read(fd,buf,sizeof(buf));
if(rd_ret<=0)
{
break;
}
send(conn,buf,rd_ret,0);
}
close(fd);
return 0;
}
int main(int argc, char *argv[])
{
//监听套接字
int listfd = socket(AF_INET,SOCK_STREAM,0 );
if(-1 ==listfd)
{
perror("socket");
exit(1);
}
struct sockaddr_in ser,cli;
bzero(&ser,sizeof(ser));
bzero(&cli,sizeof(cli));
ser.sin_family = AF_INET;
ser.sin_port = htons(80);
ser.sin_addr.s_addr =inet_addr("127.0.0.1");
//man 7 socket
int on = 1;
setsockopt(listfd,SOL_SOCKET,SO_REUSEADDR,&on,sizeof(on));
setsockopt(listfd,SOL_SOCKET,SO_REUSEPORT,&on,sizeof(on));
int ret = bind(listfd,(SA)&ser,sizeof(ser));
if(-1 ==ret)
{
perror("bind");
exit(1);
}
//建立连接的排队数
listen(listfd,3);
socklen_t len = sizeof(cli);
//通讯套接字
while(1)
{
int conn = accept(listfd,(SA)&cli,&len);
if(-1 == conn)
{
perror("accept");
continue;
}
char buf[1024]={0};
int rd_ret = recv(conn,buf,sizeof(buf),0);
if(rd_ret<=0)
{
close(conn);
//break;
continue;
}
printf("%s\n",buf);
// GET / HTTP/1.1
char *method=strtok(buf," ");
char * url = strtok(NULL," ");
char * ver= strtok(NULL,"\r");
if(0==strcmp(url,"/"))
{
send_file(conn,"./03.html");
}
else if (0==strncmp(url+1,"login",5)) // /login?username=zhagnsan&userpw=123
{
char *username=NULL;
char * userpw =NULL;
char * end = NULL;
username = strchr(url,'=');
username+=1;
end = strchr(username,'&');
*end = '\0';
userpw = strchr(end+1,'=');
userpw+=1;
if(0==strcmp(username,"zhangsan")
&& 0 == strcmp(userpw,"123"))
{
send_file(conn,"./01.html");
}
else
{
send_file(conn,"./04.html");
}
}
close(conn);
}
close(listfd);
return 0;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
