HTML的学习与制作

最新推荐文章于 2024-07-14 10:34:53 发布

Constantin.

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量97

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/m0_52880296/article/details/113046829

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML的学习与制作

B站学习HTML的知识
- 网页的基本结构
- HTML表单的制作

B站学习HTML的知识

网页的基本结构

首先学习的是HTML的基本框架结构

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Title of the document</title>
5 </head>
6 <body>
7 The content of the document......
8 </body>
9 </html>

这是HTML的头文件

<html>
   <head>
      <title>HTML概述</title>
   </head>
   <body>
       HTML Hello Wrold!!  河南！。
   </body>
</html>

这是对HTML的代码调试

HTML表单的制作

首先，表单是标记以标记开头，以标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。
接下来是标记的基本语法如下：

<form action="url" method="get | post" name="formName" onsubmit="" target="">
</form>

接下来练习一下超链接
Constantin. 的博客
接下来是css
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
来操作一下


<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

来看结果这里我们改了颜色
接下来是图片
代码如下

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

现在学习表格


![<table border="1">
    <tr>
        <td>a 1, b 1</td>
        <td>a 1, b 2</td>
    </tr>
    <tr>
        <td>a 2, b 1</td>
        <td>a 2, b 2</td>
    </tr>
</table>]

在这里插入图片描述

下面是布局
源码为


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Constantin.(https://blog.csdn.net/m0_52880296?spm=1011.2124.3001.5343)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 ©https://blog.csdn.net/m0_52880296?spm=1011.2124.3001.5343</div>
 
</div>
 
</body>
</html>

在这里插入图片描述
最后便是此次学习的任务
制作网页
源码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>3</title>
</head>
<body>
<div align="center">
<form action="" name="myform">
    <table>
<tr>
<td>用户名：</td>
<td><input type="text" id="user" /></td>
</tr>
<tr>
<td>密   码：</td>
<td><input type="text" id="password" /></td>
</tr>
<tr>
<td>验证码：</td>
<td align="left"><input type="text" size="5" id="code" /></td>
</tr>
    </table>
</form>
<table>
<tr>
<td>
<input type="submit" value="提交" onclick=myfun_submit() />
</td>
<td>
<input type="submit" value="重置" onclick=myfun_reset() />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myfun_submit(){

var user_val = document.getElementById("user").value;
var password_val = document.getElementById("password").value;
if(user_val==""){

alert("用户名不能为空！！");

}else if(password_val==""){

alert("密码不能为空！！！");

}

}
function myfun_reset(){
document.getElementById("user").value = "";
document.getElementById("password").value = "";
document.getElementById("code").value = "";

}
</script>
</body>
</html>

在这里插入图片描述
将其美化后可以得到

以上就是本周学习内容，个人感觉HTML还是很有趣，可以继续走下去！

Constantin.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的学习与制作

HTML的学习与制作B站学习HTML的知识网页的基本结构HTML表单的制作B站学习HTML的知识网页的基本结构首先学习的是HTML的基本框架结构1 <!DOCTYPE html>2 <html>3 <head>4 <title>Title of the document</title>5 </head>6 <body>7 The content of the document......8 </b
复制链接

扫一扫