<!DOCTYPE html><!--声明文档类型为HTML-->
<html lang="en"><!--指定文档语言-->
<head><!--头部包含与文档相关的，标题/样式表/等-->
<meta charset="UTF-8"><!--网页编码类型-->
<!--name/网页名，content=/网页显示设置，视口宽度==设备宽度，初始缩放比例为1.0-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="qqq">
<meta name="pwd" content="753951">
<title>ddd</title><!--网页标题/简明描述网页内容-->
<link rel="stylesheet" href="/var/www/html/test/5.CSS">
<!--link用于在当前文档中引入外部资源或者定义文档与外部资源的关系
通常用于引入样式表（CSS）和图标（favicon）
1.href：指定外部资源的 URL
2.rel：定义文档与外部资源的关系，stylesheet 表示引入样式表，icon 表示引入图标
3.type：指定外部资源的 MIME 类型,text/css 表示样式表，image/png 表示 PNG 图片
4.media：定义样式表适用的媒体类型，screen 表示适用于屏幕显示，print 表示适用于打印样式
5.sizes：指定图标的尺寸
MIME 类型，，通过 Internet 发送邮件时使用的标准，也用于指示某个文件或数据的类型
-->
<!--rel/指定与当前文档的关系类型
1.stylesheet：引入外部样式表，<link rel="stylesheet" href="styles.css">
2.icon：指定网站的图标,<link rel="icon" href="favicon.ico">
3.preload：提前加载某个资源，<link rel="preload" href="image.jpg" as="image">
4.preconnect：提前建立连接，<link rel="preconnect" href="https://example.com">
5.canonical：指定此页面的规范URL，有助于SEO/搜索引擎优化，<link rel="canonical" href="https://example.com/page.html">
-->
</head>
<body><!--主体/包括，文本，标题，段落，图像等-->
<div><!--div/一个容器，用于布局网页-->
<h1>DFGGFD</h1><!--标题-->
<!--html内有三类标签
1.块标签：独占一行，p/展示一段文字,div/一个容器，用于布局网页,
table/表格,from/表单，用于向服务器发送数据
2.行标签:无行和宽，只占内容大小，b,i,u,span,label
3.行内块:有宽和高，但不占整行，img,input
-->
<p>段落1</p>
<!--border/表格边框
cellspacing/设置表格单元格之间的间距
align/设置表格的对齐方式-->
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<th>John</th>
<td>25</td>
<td>男</td>
</tr>
<tr>
<th>Jane</th>
<td>30</td>
<td>女</td>
</tr>
</table>
<table>
<!--tbody和tfoot用于定义表格的数据正文部分和页脚部分-->
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<tfoot>
<tr>
<td colspan="3">总计</td>
</tr>
</tfoot>
</tbody>
</table>
<!--script/运行脚本程序-->
<!--changePageColor用于改变页面的背景颜色的函数
1.先使用 console.log 将传入的颜色值输出到控制台
2.通过修改body元素的 style 属性来改变页面的文字颜色
3.将 color 值拼接到 color: 后面，然后将整个字符串赋值给 <body> 元素的 style 属性-->
<!--在实际开发中，通常会将JavaScript代码放在外部的.js文件中，
并使用 <script> 标签中的 src 属性引用该文件
例如:
<script src="script.js"></script>
-->
<script>
function changePageColor(color) {
// 控制台输出传入的参数值
console.log(color);
document.getElementsByTagName("body")[0].style = "color:" + color +
";";
}
</script>
<!--placeholder/输入框中的文本提示-->
<input type="text" placeholder="请输入您的姓名">
<table border="10" width="600px" cellspacing="10" align="center">
<!--caption/标题，放在<table>标签的内部，紧接着<table>的开头-->
<caption>个人简历</caption>
<!--thead放置在<table>标签内，并且在<tbody>和<tfoot>标签之前。-->
<thead><!--thead/表格的表头部分
<th>于定义表格的表头单元格，通常用于表头行（位于<thead>标签内个数和宽度决定下方表格列数和宽度-->
<th width="50px">序号</th><!--width/宽度-->
<th width="20px">函数名</th>
<th width="10px">形参个数</th>
<th width="500px">形参名称列表</th>
</thead>
<tbody align="center">
<tr><!--y一个tr表示一行-->
<td width="100px">姓名：</td><!--一个td表示一个单元格-->
<td>小马</td>
<td>性别：</td>
<td>女</td>
<!--rowspan: 用于跨越多行合并单元格,可用于表格插入图片-->
<td rowspan="3" width="100px">
<img src="image.jpg" width="100px" height="120px alt="美丽的风景">
</tr>
<tr>
<td width="50px">专业：</td>
<td>计算机科学与技术</td>
<td width="50px">学历:</td>
<td>本科</td>
</tr>
<tr>
<td width="50px">毕业学校：</td>
<!--colspan: 用于跨越多列合并单元格-->
<td colspan="3">清华大学</td>
</tr>
</tbody>
</table>
<!--form 一般包括
1.form/指定表单提交方式
2.input/定义表单的不同类型输入字段
3.textarea/定义多行字段，一般用于输入文本
4.select/定义下拉框
17.optgroup/用于对 <select> 元素中的选项进行分组
5.option/定义select元素中选项
6.button/定义点击按钮
7.label/定义标注给表单内元素
8.fieldset/将表单元素分类，为表单元素添加标题
9.legend/为fieldset元素定义标题
10.radio/单选按钮
11.checkbox/复选框
12.submit/提交按钮
13.reset/重置按钮
14.file/文件上传字段
15.hidden/定义隐藏字段，用于在不显示给用户的情况下存储数据
16.datalist/定义输入字段的预定义选项列表，用户可以选择其中之一
18.progress/显示任务的完成进度
19.meter/显示一个已知范围内的标量测量
20.output/用于显示计算结果或脚本输出-->
<!--enctype/指定表单数据在发送到服务器之前如何进行编码-->
<!--下方为默认编码方式
将表单字段的名称和值以键值对的形式连接，并使用&符号分隔，
最终形成类似于key1=value1&key2=value2的字符串格式-->
<!--onsubmit/用于在表单提交之前执行一段JavaScript代码
包含表单验证、数据处理等逻辑。如果该函数返回true，表单将继续提交；
如果返回false，表单将不会提交-->
<form action="/submit" method="post"
enctype="application/x-www-form-urlencoded"
onsubmit="return validateForm()">
<input type="text" name="username" required>
<input type="password" name="password" required>
<input type="submit" value="提交">
</form>
<!--onsubmit="return xxx()"可以用于登录密码验证-->
<form onsubmit="return xxx()">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
<script>
function xxx() {
// 获取用户名和密码的值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 进行密码验证
if (username === "qqq" && password === "666") {
return true; // 验证通过，继续提交表单
} else {
alert("用户名或密码错误");
return false; // 验证失败，不提交表单
}
}
</script>
<form action="./submit" method="post"><!--action/为表单数据要提交到的服务器地址-->
<!--method=为提交表单数据的http方法,post/get-->
<!--post,表单中的数据将被封装在 HTTP 请求的请求体中，并发送到服务器适合用于提交敏感数据或较大量的数据-->
<!--get,将数据附加在 URL 的查询字符串中,适合用于获取数据或进行简单的查询操作，不适合提交敏感数据或大量的数据-->
<!--URL用来标识和定位互联网上资源的地址,
1.协议头:例如http或https，告诉我们如何访问资源
2.域名或IP地址:指示我们要访问的网站或服务器在哪里
3.路径:指示我们要访问的具体页面或文件在服务器上的位置
4.可选的查询参数:帮助我们在访问页面时提供更多信息或过滤结果-->
<label for="name">姓名:</label><!--for关联的表单元素的id属性值，使用户能够直接在关联的表单元素中输入数据-->
<input type="text" id="name" name="name">
<!--input/用于创建用户输入字段的元素
1.示例：<input type="text" name="username">
用途：用于接收用户输入的文本信息，比如用户名、地址等
2.示例：<input type="password" name="password">
用途：用于接收用户输入的密码信息，输入内容会以掩码形式显示
3.复选框,示例：<input type="checkbox" name="option" value="1">
用途：允许用户从多个选择项中选择一个或多个选项
4.单选按钮,示例：<input type="radio" name="option" value="1">
用途：允许用户从多个互斥的选项中选择一个选项
5.示例：<input type="file" name="file">
用途：允许用户选择并上传文件
6.示例：<input type="submit" value="提交">
用途：用于提交表单数据，将数据发送到服务器进行处理-->
<!--type,用于指定输入字段的类型
text/文本，email/邮件，password/用于输入密码，输入的内容会被隐藏
number/数字，chexbox:创建一个复选框,radio:创建一个单选按钮-->
<!--id,给输入字段指定一个唯一的标识符
name,指定输入字段的名称,提交表单时，浏览器会将name和用户输入的值一同发送给服务器-->
<br><!--换行-->
<label for=""option>选项</label>
<input type="chexbox" id="option" name="options",value="option">
<!--value,用于定义输入字段的初始值或提交表单时的值
<input> value 定义了输入框的初始值
<button> value 定义了按钮上显示的文本或值
<option> value 定义了选择框选项的值
当用户在选择框中选择某个选项时，该选项的 value 属性值将作为所选值传递给服务器或脚本处理
<textarea> value 定义了文本框的初始文本-->
<button type="submit" value="submit">提交</button>
<button type="reset" value="reset">重置</button>
<button type="button" value="custom">自定义</button>
<select><!--创建下拉选项框-->
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<textarea rows="4" cols="50">初始文本</textarea>
<br>
<label for="option2">选择</label>
<input type="radio" id="option" name="options" value="option">
<input type="submit" value="提交">
<br>
<br>
<br>
<p>这是一段<b>粗体</b>文本。</p>
<p>这是一段<i>斜体</i>文本。</p>
<p>这是一段<u>下划线</u>文本。</p>
<p>这是一段<span style="color: red; font-weight: bold;">红色且粗体的</span>文本。</p>
<img src="image.jpg" alt="美丽的风景">
<br><br>
<!--em/斜体，strong/加粗-->
<em>C之Linux系统编程</em> <strong>---学习系统调用</strong>
<code><!--code/用于显示编程代码-->
#include <pthread.h>
int main(){
printf("haha...\n");
}
</code>
<!--sup/次方的方-->
<span>请计算2<sup>10</sup>的结果是<b>1024</b>?</span>
<form>
<h1 id="first">所有列表</h1>
<!--超级链接-->
<a href="https://www.baidu.com/s?tn=44004473_8_oem_dg&ie=utf-8&wd=%E5%A4%A7%E8%92%9C%E9%A3%8E%E5%B9%B2%E5%90%8E%E8%83%BD%E5%90%83%E5%90%97"
target="_blank" title="提示的信息">新网页</a>
<!--target属性/指定在某处打开链接的目标窗口或框架-->
<a href="http://www.biquge66.net/book/101/204087.html"
target="dda">上门龙婿-第一集</a>
<!--ifname/用于向网页中嵌入另一个页面或文档-->
<iframe name="dda" width="100%" height="600px"></iframe>
<p id="last">
我是最后一段信息...
<a href="#first">返回顶部</a><!--与 <h1 id="first">****</h1>搭配使用，可从页面底端返回最上面-->
</p>
</form>
</form>
<!--src 属性指定了图片的 URL 或文件路径
alt当图片无法显示或者被屏幕阅读器访问时，替代文本将被显示或朗读-->
<br>
<br>
<br>
<br>
<form>
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" resquired><!--resquired/让元素为必填-->
<br>
<br>
<label for="name">邮箱:</label>
<input type="email" id="name" name="email" resquired>
<br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br><br>
<label for="hobby">爱好：</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">读书</label>
<input type="checkbox" id="walking" name="hobby" value="walking">
<label for="walking">散步</label>
<input type="checkbox" id="swimming" name="hobby" value="swimming">
<label for="swimming">游泳</label>
</fieldset>
<br><br>
<fieldset>
<legend>选择国家</legend>
<select id="country" name="country">
<optgroup label="亚洲">
<option value="China">中国</option>
<option value="Japan">日本</option>
<option value="India">印度</option>
</optgroup>
<optgroup label="欧洲">
<option value="Germany">德国</option>
<option value="France">法国</option>
<option value="UK">英国</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend>留言</legend>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</fieldset>
<br><br>
<label for="attachment">附件：</label>
<input type="file" id="attachment" name="attachment">
<br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
