<html>
<body>
<a href="eternalcenter-2021.txt" download="eternalcenter.txt">Download test.txt</a>
</body>
</html>
(补充:这里以下载和此 html 文件在同目录下的 eternalcenter-2021.txt 文件,且下载命名为 eternalcenter.txt 为例)
<html>
<body>
<a href="eternalcenter-2021.txt" download="eternalcenter.txt">Download test.txt</a>
</body>
</html>
(补充:这里以下载和此 html 文件在同目录下的 eternalcenter-2021.txt 文件,且下载命名为 eternalcenter.txt 为例)
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Mingyu Zhu</title>
</head>
<body>
<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">
<img src="https://filedn.eu/ltLpz9YGUS2hi1pJmklNfDb/en_us/dimfigure.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;">
</div>
<div style="width:300px;height:50px;float:left">
<form action="http://www.google.com/search" method="get">
<input type="text" name="q" size="20" maxlength="255" value="" />
<input type="submit" name="btnG" value="Google" />
</form>
<a href="https://zhu-mingyu.github.io" style="right: 15px; position: absolute; font-size:25px;color:red">中文 (GitHub)</a>
<a href="https://zhumingyu.com" style="right: 215px; position: absolute; font-size:25px;color:red">中文</a>
</div>
<div style="left: 8px; position: absolute; top: 75px;font-size:45px;">Mingyu Zhu's Personal Web Page</div>
<div style="left: 800px; position: absolute; top: 300px;font-size:15px;">"Hope everyone can achieve self achievement and self happiness fairly."</div>
<a href="http://eternalcenter.com" target="_blank" style="left: 8px; position: absolute; top: 185px;font-size:20px;color:black">Eternal Center (eternalcenter.com), Mingyu Zhu's personal website</a>
<a href="https://e.pcloud.link/publink/show?code=kZukhJZUhQq66Fxs0yg5rL1LsAgrSD3ytMk" target="_blank" style="left: 8px; position: absolute; top: 215px;font-size:20px;color:black">Mingyu Zhu's personal website data for cloning</a>
<a href="https://github.com/eternalcenter-now/eternalcenter-now" target="_blank" style="left: 8px; position: absolute; top: 245px;font-size:20px;color:black">Mingyu Zhu's personal website code for cloning</a>
<a href="http://static.eternalcenter.com" target="_blank" style="left: 8px; position: absolute; top: 275px;font-size:20px;color:black">Effect display page of Mingyu Zhu's personal website</a>
<a href="https://eternalcenter-now.github.io" target="_blank" style="left: 8px; position: absolute; top: 305px;font-size:20px;color:black">Effect display page of Mingyu Zhu's personal website (GitHub)</a>
<a href="https://e.pcloud.link/publink/show?code=kZrJhJZbVIBf8jmVFzumvaYnEwPlLLc34DX" target="_blank" style="left: 8px; position: absolute; top: 335px;font-size:20px;color:black">Public personal data of Mingyu Zhu</a>
</body>
<html/>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>朱明宇</title>
</head>
<body>
<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">
<img src="https://filedn.eu/ltLpz9YGUS2hi1pJmklNfDb/zh_cn/dimfigure.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;">
</div>
<div style="width:300px;height:50px;float:left">
<form action="http://www.google.com/search" method="get">
<input type="text" name="q" size="20" maxlength="255" value="" />
<input type="submit" name="btnG" value="Google" />
</form>
<a href="https://mingyu-zhu.github.io" style="right: 15px; position: absolute; font-size:25px;color:red">English (GitHub)</a>
<a href="https://mingyuzhu.com" style="right: 205px; position: absolute; font-size:25px;color:red">English</a>
</div>
<div style="left: 8px; position: absolute; top: 75px;font-size:45px;">朱明宇的个人网页</div>
<div style="left: 800px; position: absolute; top: 300px;font-size:15px;">“愿每个人都能公平地实现自我成就和自我幸福。”</div>
<a href="https://eternalcenter.com" target="_blank" style="left: 8px; position: absolute; top: 185px;font-size:20px;color:black">永恒中心(eternalcenter.com),朱明宇的个人网站</a>
<a href="https://e.pcloud.link/publink/show?code=kZukhJZUhQq66Fxs0yg5rL1LsAgrSD3ytMk" target="_blank" style="left: 8px; position: absolute; top: 215px;font-size:20px;color:black">用于克隆朱明宇个人网站的数据</a>
<a href="https://github.com/eternalcenter-now/eternalcenter-now" target="_blank" style="left: 8px; position: absolute; top: 245px;font-size:20px;color:black">用于克隆朱明宇个人网站的代码</a>
<a href="http://static.eternalcenter.com" target="_blank" style="left: 8px; position: absolute; top: 275px;font-size:20px;color:black">朱明宇个人网站的效果展示网页</a>
<a href="https://eternalcenter-now.github.io" target="_blank" style="left: 8px; position: absolute; top: 305px;font-size:20px;color:black">朱明宇个人网站的效果展示网页 (GitHub)</a>
<a href="https://e.pcloud.link/publink/show?code=kZoJhJZDx6DEf6sXYJUK7YxLjWhFRPr3i70" target="_blank" style="left: 8px; position: absolute; top: 335px;font-size:20px;color:black">朱明宇的个人公开资料</a>
</body>
<html/>
1) <!DOCTYPE html>
文档是 HTML5 的声明
2) <html>......</html>
HTML 的根
3) <head>......</head>
包含 meta 和 title
4) <title>......</title>
声明文档的标题
5) <body>......</body>
声明文档的可见内容
6) <br/>
声明换行
7) <div>......</div>
声明一个空间
8) <h1>......</h1>
声明第一种标题
9) <h2>......</h2>
声明第二种标题
10) <h3>......</h3>
声明第三种标题
<!DOCTYPE html>
<!- 作者:Mingyu Zhu ->
<!- 名称:Mingyu Zhu website ->
<html>
<head>
<meta charste="utf-8">
<title>朱明宇 - Zhu Mingyu</title>
</head>
<body>
<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">
<img src="dimfigure.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;">
</div>
<div style="width:300px;height:50px;float:left">
<form action="http://www.google.com/search" method="get">
<input type="text" name="q" size="20" maxlength="255" value="" />
<input type="submit" name="btnG" value="Google" />
</form>
</div>
<div style="width:300px;height:50px;float:left">
<form action="http://www.baidu.com/s">
<input type="text" name="wd" id="kw"/>
<input type="submit" value="Baidu" />
</form>
</div>
<div style="left: 600px; position: absolute; top: 300px;font-size:15px;">“When I don't need to do anything, please don't let me do anything. Let me immerse myself in my own thoughts. It's like merging with the profound peace in the vast mountains.”</div>
<a href="http://eternalcenter.com" style="left: 8px; position: absolute; top: 185px;font-size:20px;color:black">Eternal Center(eternalcenter.com)</a>
</body>
<html/>
<p>......</p>
声明一个段落
1) <b>......</b>
声明文字加粗
2) <i>......</i>
声明文字倾斜
3) <u>......</u>
声明文字有下划线
4) <s>......</s>
声明文字有删除线
5) <sup>......</sup>
声明文字有上标
6) <sub>......</sub>
声明文字有下标
7) <big>......</big>
声明文字放大
8) <small>......</small>
声明文字缩小
<a href="<website>"><link description></a>
<a href="eternalcenter.com">Eternal Center</a,target="_blank">
(补充:这里以网址是 eternalcenter.com,介绍是 Eternal Center,新打开一个页面为例)
1) <ol>......</ol>
声明有序列表
2) <li>......</li>
声明有序列表里的行
3) <ol>......</ol>
里只能有
<li>......</li>
type
1) 1 声明按数字排序 (1 也是有序列表的默认值)
2) A 声明按大写英文字母排序
3) a 声明按小谢英文字母排序
4) I 声明按大写罗马字母排序
5) i 声明按小写罗马字母排序
<h4>number list case</h4>
<ol>
<li>eternalcenter.com</li>
<li>eternalcentre.com</li>
<li>ec-x.com</li>
<li>yhzx-x.com</li>
</ol>
<h4>alphabet case</h4>
<ol type="A">
<li>eternalcenter.com</li>
<li>eternalcentre.com</li>
<li>ec-x.com</li>
<li>yhzx-x.com</li>
</ol>
1) <ol>......</ol>
声明无序列表
2) <li>......</li>
声明无序列表里的行
3) <ol>......</ol>
里只能有
<li>......</li>
type
1) disc
声明实心原点(disc 也是无序列表的默认值)
2) circle
声明空心原点
3) square
声明实心方块
4) none
声明无标识
<h4>circle list case</h4>
<ul style="list-style-type:circle">
<li>eternalcenter.com</li>
<li>eternalcentre.com</li>
<li>ec-x.com</li>
<li>yhzx-x.com</li>
</ul>
<h4>square list case</h4>
<ul style="list-style-type:square">
<li>eternalcenter.com</li>
<li>eternalcentre.com</li>
<li>ec-x.com</li>
<li>yhzx-x.com</li>
</ul>
<li>......</li>
元素里再添加
<li>......</li>
<ul>
<li>eternalcenter.com</li>
<li>abbreviation
<ul>
<li>ec-x.com</li>
<li>yhzx-x.com</li>
</ul>
</li>
<li>eternalcentre.com</li>
</ul>
1) <table>......</table>
2) <tr>......</tr>
3) <td>......</td>
用于声明表格
<table>......</table>
1) width
声明表格的宽度
2) height
声明表格的高度
3) align
声明表格的对齐方式,有三个参数:
left center right
4) border
声明表格边框的宽度
5) cellpadding
声明表格内容和边框之间的距离
6) bgcolor
声明表格的背景颜色
用于声明行,每有一行就有一组
<tr>......</tr>
1) align
声明表格水平向的对齐方式,有三个参数
left center right
2) valign
声明垂直向的对其方式,有三个参数
top middle bottom
用于声明列,每有一列就有一组
<td>......</td>
1) align
声明表格水平向的对齐方式,有三个参数:
left center right
2) valign
声明垂直向的对齐方式,有三个参数:
top middle bottom
3) width
声明表格的宽度
4) height
声明表格的高度
5) colspan
声明单元格的横向快列
6) rowspan
声明单元格的众向跨行
<table border="1">
<tr>
<td>first row, first column</td>
<td>first row, second column</td>
</tr>
<tr>
<td>second row, first column</td>
<td>second row, second column</td>
</tr>
</table>
<body>
<h4>cell spanning two columns case</h4>
<table border="1">
<tr>
<td>Website</td>
<td colspan="2">url</td>
</tr>
<tr>
<td>Eternal Center</td>
<td>eternalcenter.com</td>
<td>eternalcentre.com</td>
</tr>
</table>
<h4>cell crowding across two lines case</h4>
<table border="1">
<tr>
<td>Website</td>
<td>Eternal Center</td>
</tr>
<tr>
<td rowspan="2">url</td>
<td>eternalcenter.com</td>
</tr>
<tr>
<td>eternalcentre.com</td>
</tr>
</table>
</body>
<a href="http://www.eternalcenter.com">
<img border="10" src="eternalcenter.gif" alt="HTML Eternal Center" width="32" height="32">
</a>
(补充:这里以网址是 www.eternalcenter.com,介绍是 HTML Eternal Center,图片是 eternalcenter.gif,宽度是 32,高度是 32 的链接为例)
<a href="http://www.baidu.com">
<img border="0" src="eternalcenter.gif" alt="HTML Eternal Center" width="32" height="32">
</a>
(补充:这里以网址是 www.eternalcenter.com,介绍是 HTML Eternal Center,图片是 eternalcenter.gif,宽度是 32,高度是 32 的链接为例)
<img src="space.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;">
(补充:这里以设置 space.JPG 作为背景图片)
1) 接收用户的数据
2) 提交给服务器
1) <form>......<form>
2) 表单控件
1) action
提交给服务器的处理程序的地址
2) method
数据的提交方式,有 get 和 post 两个参数
3) enctype
指定加密方式
4) name
表单的名称
1) 文本域
2) 密码域
3) 选择框(分为单选框和复选框)
4) 按钮
5) 隐藏域和文件选择框
用于键入字母和数字
<input type="text">
1) name
名称
2) value
值
3) maxlength
最大输入长度
4) readonly
只读
5) placeholder
提示占位符
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
用于输入密码
<input type="password">
1) name
名称
2) value
值
3) maxlength
最大输入长度
4) readonly
只读
5) placeholder
提示占位符
用于选择
1) name
名称
2) value
值
3) checked
预选中的选项,无值
4) type
选择框的模式,有两个参数单选框和多选框两个参数:
radio checkbox
<form>
<input type="radio" name="vehicle" value="eternalcenter">I click eternalcenter<br>
<input type="radio" name="vehicle" value="eternalcentre">I click eternalcentre
</form>
<form>
<input type="checkbox" name="vehicle" value="eternalcenter">I click eternalcenter<br>
<input type="checkbox" name="vehicle" value="eternalcentre">I click eternalcentre
</form>
<form action="">
<input type="button" value="Hello World!">
</form>
(补充:这里以设置一个值为 Hello World 的按钮为例)
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
(补充:这里以设置一个输入用户名的框和提交按钮的页面为例)
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
<input type="reset" value="reset">
</form>
(补充:这里以设置一个输入用户名的框、提交按钮、重置按钮页面为例)
提交给服务器的数据无法被用户看到
<input type=”hidden”>
1) name
名称
2) value
值
点击的同时提交文件
<input type=”file”>
name
名称
<html>
<body>
<a href="eternalcenter.com" target="_blank">eternalcenter.com</a>
</body>
</html>
(补充:这里以在新的窗口打开页面 eternalcenter.com 为例)