这是对之前的内容进行的练习
<html>
<head>
<title>练习</title>
</head>
<body background="C:\Users\慢慢急\Desktop\IMG_20201102_150726.jpg"><!--背景图片-->
<h4>
My First Heading
</h4>
My First paragraph,下面换行
<br>
这是一个 空格
<p align="left">左对齐</p>
<p align="center">居中</P>
<p align="right">右对齐</P>
<p><font size="2">小</font></p>
<p><font size="5">中</font></p>
<p><font size="7">大</font></p>
<acronym title="注标">内容</acronym>
<h4>无序列表</h4>
<u1>
<li>A</li>
<li>B</li>
<li>C</li>
</u1>
<h4>有序列表</h4>
<ol>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ol>
<h4>定义列表</h4>
<d1>
<dt>列表</dt>
<dd>定义</dd>
</dl>
<h4>列表嵌套</h4>
<o1>
<li>A1</li>
<u1>
<li>a</li>
<li>b</li>
</u1>
<li>A2</li>
<li>A3</li>
</o1>
<h4>图像的操作</h4>
<p align="left">左对齐<img src="C:\Users\慢慢急\Desktop\IMG_20201102_205532.png" height="100px" width="200px"></p>
<hr width=25% align=left color=red size=1><!--水平线-->
<img src="C:\Users\慢慢急\Desktop\IMG_20201102_205532.png" height="100px" width="200px"; align="center">居中
<p>
加边框<img src="C:\Users\慢慢急\Desktop\IMG_20201102_150726.jpg" height="100px" width="200px" border=1px >
<p>
<a href="https://www.baidu.com/?tn=15007414_6_dg">百度
</a>
<p>
</body>
</html>其创建的网页如下：
本周学习：
1链接：
链接包含文本链接,图像链接等。
<html>
<head>
<title>第三周</title>
</head>
<body>
<a href="file:///C:/Users/%E6%85%A2%E6%85%A2%E6%80%A5/Desktop/lyl.html">之前的练习
</a>
<h4>图像的链接</h4>
<a href="https://www.baidu.com/?tn=15007414_6_dg">
<img src="C:\Users\慢慢急\Desktop\u=2070121136,3985339209&fm=26&fmt=auto.webp" height="50px" width="50px">
</a>
</body>
</html>其结果如下：
可以用css美化链接，改变链接的颜色，修改下划线等
<html>
<head>
<title>第三周</title>
<style type="text/css">//更推荐使用css改变链接样式，但也有别的不推荐的写法
a{color:teal;
text-decoration:none;//去掉下划线
}
a:visited{
color:silver;
text-decoration:none;//被访问后的链接状态
}
a:hover{
color:rad;
text-decoration:underline;//划过链接文本的样式
}
</style>
</head>
<body>
<a href="file:///C:/Users/%E6%85%A2%E6%85%A2%E6%80%A5/Desktop/lyl.html">之前的练习
</a>
<h4>图像的链接</h4>
<a href="https://www.baidu.com/?tn=15007414_6_dg">
<img src="C:\Users\慢慢急\Desktop\u=2070121136,3985339209&fm=26&fmt=auto.webp" height="50px" width="50px">
</a>
</body>
</html>修改后的图像：
2.表单：
表单接收用户信息，可以创建一个text文本框的样式表单
<html>
<head>
<title>表单</title>
</head>
<body>
<script language="javascript">
function check(){//此处为JavaScript语段
obj=document.getElementById("user_name");
if(obj.value==""){
alert("用户名为空！");
}
else
{
alert("您输入的用户名为："+obj.value);
}
}
</script>
<h4>使用文本框<h4>
<from name="my_f">
请输入用户名：<input type="text" id="user_name" size=20>
<br>
<input type="button" value="查看结果" onclick=check()>
</from>
</body>
</html>其结果为：
再加上输入密码：
<html>
<head>
<title>表单</title>
</head>
<body>
<script language="javascript">
function check(){//这个是JavaScript语法，此函数用于输入用户和密码
obj=document.getElementById("user_name");
pass=document.getElementById("user_password")
if(obj.value==""||pass.value==""){
alert("用户名或密码为空！");
return false;
}
else
{
alert(obj.value+"，欢迎回来！");
}
}
</script>
<h3>登录<h3>
<from name="my_f" action=# onsubmit="return check()">
请输入用户名：<input type="text" id="user_name" size=20>
<br>
请输入密码：<input type="password" id="user_password" size=20>
<br>
<input type="button" value="查看结果" onclick=check()>
</from>
</body>
</html>其结果为：
<html>
<head>
<title>表单之复选框</title>
</head>
<body>
<script language="javascript">
function select_all(){//全选函数
var obj=document.getElementByName("my_c");//获取对象
var len1=obj.length;//获取对象长度
for(i=0;i<len1;i++){//遍历
obj[i].checked=true;//选中状态为true
}
}
function unselect_all(){//全不选函数
var obj=document.getElementByName("my_c");//获取对象
var len1=obj.length;//获取对象长度
for(i=0;i<len1;i++){//遍历
obj[i].checked=false;//选中状态为false
}
}
function check(){//检测
var obj=document.getElementByName("my_c");//获取对象
var len1=obj.length;//获取对象长度
check_value="";
for(i=0;i<len1;i++){//遍历
if(obj[i].checked==true){
check_value=check_value+obj[i].value+" ";
}
}
if(check_value==""){
alert("没有选择任何项！")
}
else{
alert("选中的内容为："+check_value);
}
}
</script>
<h3>登录<h3>
<from name="my_f">
<input type="checkbox" name="my_c" value="A">A
<input type="checkbox" name="my_c" value="B">B
<input type="checkbox" name="my_c" value="C">C
<input type="checkbox" name="my_c" value="D">D
<br>
<input type="button" value="全选" onclick=select_all()>
<input type="button" value="全不选" onclick=unselect_all()>
<br>
<input type="button" value="查看结果" onclick=check()>
</from>
</body>
</html>结果：
